res/imp/scaffold.html

<!--
`scaffold-sk` provides general application layout, introducing a
responsive scaffold containing a header, toolbar, menu, title and
areas for application content.

Example:

    <scaffold-sk>
      <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>
    </scaffold-sk>

Use `mode` to control the header and scrolling behavior of `core-header-panel`
and `responsiveWidth` to change the layout of the scaffold.

To have the content fits to the main area, use `fit` attribute.

    <scaffold-sk>
      <core-header-panel navigation flex mode="seamed">
        ....
      </core-header-panel>
      <div tool>Title</div>
      <div fit>Content fits to the main area</div>
    </scaffold-sk>

The element differs core-scaffold as it adds drawerWidth to control
the menu width.

@element scaffold-sk
-->

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

<polymer-element name="scaffold-sk">
<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}}"  responsiveWidth="{{responsiveWidth}}">
    <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>
        <content select="[tool]"></content>
      </core-toolbar>
      <content select="*"></content>
    </core-header-panel>
  </core-drawer-panel>

</template>
<script>

  Polymer('scaffold-sk', {
    /**
     * 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`.
     *
     *     <scaffold-sk on-scroll="{{scrollHandler}}">
     *       ...
     *     </scaffold-sk>
     *
     *
     *     scrollHandler: function(event) {
     *       var scroller = event.detail.target;
     *       console.log(scroller.scrollTop);
     *     }
     *
     * @event scroll
     */

    publish: {
      /**
       * 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',

      /**
       * Controls the drawer width for the menu items.
       *
       * @attribute drawerWidth
       * @type string
       * @default '150px'
       */
      drawerWidth: '150px',

      /**
       * 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();
    },

    scroll: function(e) {
      this.fire('scroll', {target: e.detail.target}, this, false);
    }
  });

</script>
</polymer-element>