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.  Use 'disableSwipe'
to disable swipe-to-open on toolbar.

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
@element core-scaffold
@homepage github.io
-->

<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">

<polymer-element name="core-scaffold">
<template>

  <style>
    
    :host {
      display: block;
    }
    
    [drawer] {
      background-color: #fff;
      box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
    }
    
    [main] {
      height: 100%;
      background-color: #eee;
    }
    
    core-toolbar {
      background-color: #526E9C;
      color: #fff;
    }
    
    #drawerPanel:not([narrow]) #menuButton {
      display: none;
    }
    
  </style>

  <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>
        <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>

  Polymer('core-scaffold', {
    
    /**
     * Fired when the main content has been scrolled.  `event.detail.target` returns
     * the scrollable element which you can use to access scroll info such as
     * `scrollTop`.
     *
     *     <core-scaffold on-scroll="{{scrollHandler}}">
     *       ...
     *     </core-scaffold>
     *
     *
     *     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
     */    
    togglePanel: function() {
      this.$.drawerPanel.togglePanel();
    },

    /**
     * Open the drawer panel
     * @method openDrawer
     */      
    openDrawer: function() {
      this.$.drawerPanel.openDrawer();
    },

    /**
     * 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>