npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

polymer_0.5.0/bower_components/core-scaffold/core-scaffold.html

 <!--
 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
 <!--
 `core-scaffold` provides general application layout, introducing a 
 responsive scaffold containing a header, toolbar, menu, title and 
 areas for application content.
 
 Example:
 
     <core-scaffold>
       <core-header-panel navigation flex mode="seamed">
         <core-toolbar>Application</core-toolbar>
         <core-menu theme="core-light-theme">
           <core-item icon="settings" label="item1"></core-item>
           <core-item icon="settings" label="item2"></core-item>
         </core-menu>
       </core-header-panel>
       <div tool>Title</div>
       <div>Main content goes here...</div>
     </core-scaffold>
 
 Use `mode` to control the header and scrolling behavior of `core-header-panel`
-and `responsiveWidth` to change the layout of the scaffold.
+and `responsiveWidth` to change the layout of the scaffold.  Use 'disableSwipe'
+to disable swipe-to-open on toolbar.
 
-To have the content fits to the main area, use `fit` attribute.
+Use `rightDrawer` to move position of folding toolbar to the right instead of
+left (default).  This will also position content to the left of the menu button
+instead of the right.  You can use `flex` within your `tool` content to push the menu
+button to the far right:
+
+    <core-scaffold rightDrawer>
+      <div tool flex >Title</div>
+    </core-scaffold>
+    
+You may also add `middle` or `bottom` classes to your `tool` content when using tall
+modes to adjust vertical content positioning in the core-toolbar (e.g. when using 
+mode="waterfall-tall"):
+
+    <core-scaffold rightDrawer mode="waterfall-tall">
+      <div tool flex >Title</div>
+      <div tool horizontal layout flex center-justified class="middle">Title-middle</div>
+      <div tool horizontal layout flex end-justified class="bottom">Title-bottom</div>
+    </core-scaffold>
+
+To have the content fit to the main area, use `fit` attribute.
 
     <core-scaffold>
       <core-header-panel navigation flex mode="seamed">
         ....
       </core-header-panel>
       <div tool>Title</div>
       <div fit>Content fits to the main area</div>
     </core-scaffold>
 
 @group Polymer Core Elements
@@ skipping 29 matching lines @@
       background-color: #526E9C;
       color: #fff;
     }
     
     #drawerPanel:not([narrow]) #menuButton {
       display: none;
     }
     
   </style>
 
-  <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" responsiveWidth="{{responsiveWidth}}">
+  <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" drawerWidth="{{drawerWidth}}" rightDrawer="{{rightDrawer}}" responsiveWidth="{{responsiveWidth}}" disableSwipe="{{disableSwipe}}">
 
     <div vertical layout drawer>
 
       <content select="[navigation], nav"></content>
 
     </div>
     
     <core-header-panel id="headerPanel" main mode="{{mode}}">
 
       <core-toolbar>
-        <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
+        <template if="{{!rightDrawer}}">
+          <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
+        </template>
         <content select="[tool]"></content>
+        <template if="{{rightDrawer}}">
+          <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
+        </template>
       </core-toolbar>
       
       <content select="*"></content>
       
     </core-header-panel>
 
   </core-drawer-panel>
 
 </template>
 <script>
@@ skipping 12 matching lines @@
      *
      *     scrollHandler: function(event) {
      *       var scroller = event.detail.target;
      *       console.log(scroller.scrollTop);
      *     }
      *
      * @event scroll
      */
     
     publish: {
+      
+      /**
+       * Width of the drawer panel.
+       *
+       * @attribute drawerWidth
+       * @type string
+       * @default '256px'
+       */
+      drawerWidth: '256px',
+      
       /**
        * When the browser window size is smaller than the `responsiveWidth`, 
        * `core-drawer-panel` changes to a narrow layout. In narrow layout, 
        * the drawer will be stacked on top of the main panel.
        *
        * @attribute responsiveWidth
        * @type string
        * @default '600px'
        */    
       responsiveWidth: '600px',
+      
+      /**
+       * If true, position the drawer to the right. Also place menu icon to
+       * the right of the content instead of left.
+       *
+       * @attribute rightDrawer
+       * @type boolean
+       * @default false
+       */
+      rightDrawer: false,
+
+      /**
+       * If true, swipe to open/close the drawer is disabled.
+       *
+       * @attribute disableSwipe
+       * @type boolean
+       * @default false
+       */
+      disableSwipe: false,
   
       /**
        * Used to control the header and scrolling behaviour of `core-header-panel`
        *
        * @attribute mode
        * @type string
        * @default 'seamed'
        */     
       mode: {value: 'seamed', reflect: true}
     },
     
     ready: function() {
       this._scrollHandler = this.scroll.bind(this);
       this.$.headerPanel.addEventListener('scroll', this._scrollHandler);
     },
     
     detached: function() {
       this.$.headerPanel.removeEventListener('scroll', this._scrollHandler);
     },
 
     /**
-      * Toggle the drawer panel
-      * @method togglePanel
-      */    
+     * Toggle the drawer panel
+     * @method togglePanel
+     */    
     togglePanel: function() {
       this.$.drawerPanel.togglePanel();
     },
 
     /**
-      * Open the drawer panel
-      * @method openDrawer
-      */      
+     * Open the drawer panel
+     * @method openDrawer
+     */      
     openDrawer: function() {
       this.$.drawerPanel.openDrawer();
     },
 
     /**
-      * Close the drawer panel
-      * @method closeDrawer
-      */     
+     * Close the drawer panel
+     * @method closeDrawer
+     */     
     closeDrawer: function() {
       this.$.drawerPanel.closeDrawer();
     },
     
+    /**
+     * Returns the scrollable element on the main area.
+     *
+     * @property scroller
+     * @type Object
+     */
+    get scroller() {
+      return this.$.headerPanel.scroller;
+    },
+    
     scroll: function(e) {
       this.fire('scroll', {target: e.detail.target}, this, false);
     }
     
   });
 
 </script>
 </polymer-element>