| Index: third_party/polymer/v1_0/components/paper-drawer-panel/paper-drawer-panel.html
 | 
| diff --git a/third_party/polymer/v1_0/components/paper-drawer-panel/paper-drawer-panel.html b/third_party/polymer/v1_0/components/paper-drawer-panel/paper-drawer-panel.html
 | 
| deleted file mode 100644
 | 
| index f4cb1fb6ee0a82cadfde04850e68ece3239a46bd..0000000000000000000000000000000000000000
 | 
| --- a/third_party/polymer/v1_0/components/paper-drawer-panel/paper-drawer-panel.html
 | 
| +++ /dev/null
 | 
| @@ -1,595 +0,0 @@
 | 
| -<!--
 | 
| -Copyright (c) 2015 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
 | 
| --->
 | 
| -
 | 
| -<link rel="import" href="../polymer/polymer.html">
 | 
| -<link rel="import" href="../iron-media-query/iron-media-query.html">
 | 
| -<link rel="import" href="../iron-selector/iron-selector.html">
 | 
| -
 | 
| -<!--
 | 
| -`paper-drawer-panel` contains a drawer panel and a main panel.  The drawer
 | 
| -and the main panel are side-by-side with drawer on the left.  When the browser
 | 
| -window size is smaller than the `responsiveWidth`, `paper-drawer-panel`
 | 
| -changes to narrow layout.  In narrow layout, the drawer will be stacked on top
 | 
| -of the main panel.  The drawer will slide in/out to hide/reveal the main
 | 
| -panel.
 | 
| -
 | 
| -Use the attribute `drawer` to indicate that the element is the drawer panel and
 | 
| -`main` to indicate that the element is the main panel.
 | 
| -
 | 
| -Example:
 | 
| -
 | 
| -    <paper-drawer-panel>
 | 
| -      <div drawer> Drawer panel... </div>
 | 
| -      <div main> Main panel... </div>
 | 
| -    </paper-drawer-panel>
 | 
| -
 | 
| -The drawer and the main panels are not scrollable.  You can set CSS overflow
 | 
| -property on the elements to make them scrollable or use `paper-header-panel`.
 | 
| -
 | 
| -Example:
 | 
| -
 | 
| -    <paper-drawer-panel>
 | 
| -      <paper-header-panel drawer>
 | 
| -        <paper-toolbar></paper-toolbar>
 | 
| -        <div> Drawer content... </div>
 | 
| -      </paper-header-panel>
 | 
| -      <paper-header-panel main>
 | 
| -        <paper-toolbar></paper-toolbar>
 | 
| -        <div> Main content... </div>
 | 
| -      </paper-header-panel>
 | 
| -    </paper-drawer-panel>
 | 
| -
 | 
| -An element that should toggle the drawer will automatically do so if it's
 | 
| -given the `paper-drawer-toggle` attribute.  Also this element will automatically
 | 
| -be hidden in wide layout.
 | 
| -
 | 
| -Example:
 | 
| -
 | 
| -    <paper-drawer-panel>
 | 
| -      <paper-header-panel drawer>
 | 
| -        <paper-toolbar>
 | 
| -          <div>Application</div>
 | 
| -        </paper-toolbar>
 | 
| -        <div> Drawer content... </div>
 | 
| -      </paper-header-panel>
 | 
| -      <paper-header-panel main>
 | 
| -        <paper-toolbar>
 | 
| -          <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
 | 
| -          <div>Title</div>
 | 
| -        </paper-toolbar>
 | 
| -        <div> Main content... </div>
 | 
| -      </paper-header-panel>
 | 
| -    </paper-drawer-panel>
 | 
| -
 | 
| -To position the drawer to the right, add `right-drawer` attribute.
 | 
| -
 | 
| -    <paper-drawer-panel right-drawer>
 | 
| -      <div drawer> Drawer panel... </div>
 | 
| -      <div main> Main panel... </div>
 | 
| -    </paper-drawer-panel>
 | 
| -
 | 
| -Styling `paper-drawer-panel`
 | 
| -
 | 
| -To change the main container:
 | 
| -
 | 
| -    paper-drawer-panel {
 | 
| -      --paper-drawer-panel-main-container: {
 | 
| -        background-color: gray;
 | 
| -      };
 | 
| -    }
 | 
| -
 | 
| -To change the drawer container when it's in the left side:
 | 
| -
 | 
| -    paper-drawer-panel {
 | 
| -      --paper-drawer-panel-left-drawer-container: {
 | 
| -        background-color: white;
 | 
| -      };
 | 
| -    }
 | 
| -
 | 
| -To change the drawer container when it's in the right side:
 | 
| -
 | 
| -    paper-drawer-panel {
 | 
| -      --paper-drawer-panel-right-drawer-container: {
 | 
| -        background-color: white;
 | 
| -      };
 | 
| -    }
 | 
| -
 | 
| -@group Paper elements
 | 
| -@element paper-drawer-panel
 | 
| -@demo demo/index.html
 | 
| -@hero hero.svg
 | 
| --->
 | 
| -
 | 
| -<dom-module id="paper-drawer-panel">
 | 
| -  <link rel="import" type="css" href="paper-drawer-panel.css">
 | 
| -
 | 
| -  <template>
 | 
| -    <iron-media-query
 | 
| -        id="mq"
 | 
| -        on-query-matches-changed="_onQueryMatchesChanged"
 | 
| -        query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]">
 | 
| -    </iron-media-query>
 | 
| -
 | 
| -    <iron-selector
 | 
| -        attr-for-selected="id"
 | 
| -        class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer, peeking)]]"
 | 
| -        activate-event=""
 | 
| -        selected="[[selected]]">
 | 
| -
 | 
| -      <div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]">
 | 
| -        <content select="[main]"></content>
 | 
| -        <div id="scrim" on-tap="closeDrawer"></div>
 | 
| -      </div>
 | 
| -
 | 
| -      <div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]">
 | 
| -        <content select="[drawer]"></content>
 | 
| -      </div>
 | 
| -
 | 
| -    </iron-selector>
 | 
| -  </template>
 | 
| -
 | 
| -</dom-module>
 | 
| -
 | 
| -<script>
 | 
| -
 | 
| -  (function() {
 | 
| -
 | 
| -    'use strict';
 | 
| -
 | 
| -   // this would be the only `paper-drawer-panel` in
 | 
| -   // the whole app that can be in `dragging` state
 | 
| -    var sharedPanel = null;
 | 
| -
 | 
| -    function classNames(obj) {
 | 
| -      var classes = [];
 | 
| -      for (var key in obj) {
 | 
| -        if (obj.hasOwnProperty(key) && obj[key]) {
 | 
| -          classes.push(key);
 | 
| -        }
 | 
| -      }
 | 
| -
 | 
| -      return classes.join(' ');
 | 
| -    }
 | 
| -
 | 
| -    Polymer({
 | 
| -
 | 
| -      is: 'paper-drawer-panel',
 | 
| -
 | 
| -      /**
 | 
| -       * Fired when the narrow layout changes.
 | 
| -       *
 | 
| -       * @event paper-responsive-change {{narrow: boolean}} detail -
 | 
| -       *     narrow: true if the panel is in narrow layout.
 | 
| -       */
 | 
| -
 | 
| -      /**
 | 
| -       * Fired when the a panel is selected.
 | 
| -       *
 | 
| -       * Listening for this event is an alternative to observing changes in the `selected` attribute.
 | 
| -       * This event is fired both when a panel is selected.
 | 
| -       *
 | 
| -       * @event iron-select {{item: Object}} detail -
 | 
| -       *     item: The panel that the event refers to.
 | 
| -       */
 | 
| -
 | 
| -      /**
 | 
| -       * Fired when a panel is deselected.
 | 
| -       *
 | 
| -       * Listening for this event is an alternative to observing changes in the `selected` attribute.
 | 
| -       * This event is fired both when a panel is deselected.
 | 
| -       *
 | 
| -       * @event iron-deselect {{item: Object}} detail -
 | 
| -       *     item: The panel that the event refers to.
 | 
| -       */
 | 
| -      properties: {
 | 
| -
 | 
| -        /**
 | 
| -         * The panel to be selected when `paper-drawer-panel` changes to narrow
 | 
| -         * layout.
 | 
| -         */
 | 
| -        defaultSelected: {
 | 
| -          type: String,
 | 
| -          value: 'main'
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * If true, swipe from the edge is disable.
 | 
| -         */
 | 
| -        disableEdgeSwipe: {
 | 
| -          type: Boolean,
 | 
| -          value: false
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * If true, swipe to open/close the drawer is disabled.
 | 
| -         */
 | 
| -        disableSwipe: {
 | 
| -          type: Boolean,
 | 
| -          value: false
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * Whether the user is dragging the drawer interactively.
 | 
| -         */
 | 
| -        dragging: {
 | 
| -          type: Boolean,
 | 
| -          value: false,
 | 
| -          readOnly: true,
 | 
| -          notify: true
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * Width of the drawer panel.
 | 
| -         */
 | 
| -        drawerWidth: {
 | 
| -          type: String,
 | 
| -          value: '256px'
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * How many pixels on the side of the screen are sensitive to edge
 | 
| -         * swipes and peek.
 | 
| -         */
 | 
| -        edgeSwipeSensitivity: {
 | 
| -          type: Number,
 | 
| -          value: 30
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * If true, ignore `responsiveWidth` setting and force the narrow layout.
 | 
| -         */
 | 
| -        forceNarrow: {
 | 
| -          type: Boolean,
 | 
| -          value: false
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * Whether the browser has support for the transform CSS property.
 | 
| -         */
 | 
| -        hasTransform: {
 | 
| -          type: Boolean,
 | 
| -          value: function() {
 | 
| -            return 'transform' in this.style;
 | 
| -          }
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * Whether the browser has support for the will-change CSS property.
 | 
| -         */
 | 
| -        hasWillChange: {
 | 
| -          type: Boolean,
 | 
| -          value: function() {
 | 
| -            return 'willChange' in this.style;
 | 
| -          }
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * Returns true if the panel is in narrow layout.  This is useful if you
 | 
| -         * need to show/hide elements based on the layout.
 | 
| -         */
 | 
| -        narrow: {
 | 
| -          reflectToAttribute: true,
 | 
| -          type: Boolean,
 | 
| -          value: false,
 | 
| -          readOnly: true,
 | 
| -          notify: true
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * Whether the drawer is peeking out from the edge.
 | 
| -         */
 | 
| -        peeking: {
 | 
| -          type: Boolean,
 | 
| -          value: false,
 | 
| -          readOnly: true,
 | 
| -          notify: true
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * Max-width when the panel changes to narrow layout.
 | 
| -         */
 | 
| -        responsiveWidth: {
 | 
| -          type: String,
 | 
| -          value: '640px'
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * If true, position the drawer to the right.
 | 
| -         */
 | 
| -        rightDrawer: {
 | 
| -          type: Boolean,
 | 
| -          value: false
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * The panel that is being selected. `drawer` for the drawer panel and
 | 
| -         * `main` for the main panel.
 | 
| -         */
 | 
| -        selected: {
 | 
| -          reflectToAttribute: true,
 | 
| -          notify: true,
 | 
| -          type: String,
 | 
| -          value: null
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * The attribute on elements that should toggle the drawer on tap, also elements will
 | 
| -         * automatically be hidden in wide layout.
 | 
| -         */
 | 
| -        drawerToggleAttribute: {
 | 
| -          type: String,
 | 
| -          value: 'paper-drawer-toggle'
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * Whether the transition is enabled.
 | 
| -         */
 | 
| -        transition: {
 | 
| -          type: Boolean,
 | 
| -          value: false
 | 
| -        },
 | 
| -
 | 
| -      },
 | 
| -
 | 
| -      listeners: {
 | 
| -        tap: '_onTap',
 | 
| -        track: '_onTrack',
 | 
| -        down: '_downHandler',
 | 
| -        up: '_upHandler'
 | 
| -      },
 | 
| -
 | 
| -      observers: [
 | 
| -        '_forceNarrowChanged(forceNarrow, defaultSelected)'
 | 
| -      ],
 | 
| -
 | 
| -      /**
 | 
| -       * Toggles the panel open and closed.
 | 
| -       *
 | 
| -       * @method togglePanel
 | 
| -       */
 | 
| -      togglePanel: function() {
 | 
| -        if (this._isMainSelected()) {
 | 
| -          this.openDrawer();
 | 
| -        } else {
 | 
| -          this.closeDrawer();
 | 
| -        }
 | 
| -      },
 | 
| -
 | 
| -      /**
 | 
| -       * Opens the drawer.
 | 
| -       *
 | 
| -       * @method openDrawer
 | 
| -       */
 | 
| -      openDrawer: function() {
 | 
| -        this.selected = 'drawer';
 | 
| -      },
 | 
| -
 | 
| -      /**
 | 
| -       * Closes the drawer.
 | 
| -       *
 | 
| -       * @method closeDrawer
 | 
| -       */
 | 
| -      closeDrawer: function() {
 | 
| -        this.selected = 'main';
 | 
| -      },
 | 
| -
 | 
| -      ready: function() {
 | 
| -        // Avoid transition at the beginning e.g. page loads and enable
 | 
| -        // transitions only after the element is rendered and ready.
 | 
| -        this.transition = true;
 | 
| -      },
 | 
| -
 | 
| -      _computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer, peeking) {
 | 
| -        return classNames({
 | 
| -          dragging: dragging,
 | 
| -          'narrow-layout': narrow,
 | 
| -          'right-drawer': rightDrawer,
 | 
| -          'left-drawer': !rightDrawer,
 | 
| -          transition: transition,
 | 
| -          peeking: peeking
 | 
| -        });
 | 
| -      },
 | 
| -
 | 
| -      _computeDrawerStyle: function(drawerWidth) {
 | 
| -        return 'width:' + drawerWidth + ';';
 | 
| -      },
 | 
| -
 | 
| -      _computeMainStyle: function(narrow, rightDrawer, drawerWidth) {
 | 
| -        var style = '';
 | 
| -
 | 
| -        style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';';
 | 
| -
 | 
| -        if (rightDrawer) {
 | 
| -          style += 'right:' + (narrow ? '' : drawerWidth) + ';';
 | 
| -        }
 | 
| -
 | 
| -        return style;
 | 
| -      },
 | 
| -
 | 
| -      _computeMediaQuery: function(forceNarrow, responsiveWidth) {
 | 
| -        return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')';
 | 
| -      },
 | 
| -
 | 
| -      _computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) {
 | 
| -        return !narrow || disableEdgeSwipe;
 | 
| -      },
 | 
| -
 | 
| -      _onTrack: function(event) {
 | 
| -        if (sharedPanel && this !== sharedPanel) {
 | 
| -          return;
 | 
| -        }
 | 
| -        switch (event.detail.state) {
 | 
| -          case 'start':
 | 
| -            this._trackStart(event);
 | 
| -            break;
 | 
| -          case 'track':
 | 
| -            this._trackX(event);
 | 
| -            break;
 | 
| -          case 'end':
 | 
| -            this._trackEnd(event);
 | 
| -            break;
 | 
| -        }
 | 
| -
 | 
| -      },
 | 
| -
 | 
| -      _responsiveChange: function(narrow) {
 | 
| -        this._setNarrow(narrow);
 | 
| -
 | 
| -        if (this.narrow) {
 | 
| -          this.selected = this.defaultSelected;
 | 
| -        }
 | 
| -
 | 
| -        this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
 | 
| -        this.fire('paper-responsive-change', {narrow: this.narrow});
 | 
| -      },
 | 
| -
 | 
| -      _onQueryMatchesChanged: function(event) {
 | 
| -        this._responsiveChange(event.detail.value);
 | 
| -      },
 | 
| -
 | 
| -      _forceNarrowChanged: function() {
 | 
| -        // set the narrow mode only if we reached the `responsiveWidth`
 | 
| -        this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches);
 | 
| -      },
 | 
| -
 | 
| -      _swipeAllowed: function() {
 | 
| -        return this.narrow && !this.disableSwipe;
 | 
| -      },
 | 
| -
 | 
| -      _isMainSelected: function() {
 | 
| -        return this.selected === 'main';
 | 
| -      },
 | 
| -
 | 
| -      _startEdgePeek: function() {
 | 
| -        this.width = this.$.drawer.offsetWidth;
 | 
| -        this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ?
 | 
| -            -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
 | 
| -        this._setPeeking(true);
 | 
| -      },
 | 
| -
 | 
| -      _stopEdgePeek: function() {
 | 
| -        if (this.peeking) {
 | 
| -          this._setPeeking(false);
 | 
| -          this._moveDrawer(null);
 | 
| -        }
 | 
| -      },
 | 
| -
 | 
| -      _downHandler: function(event) {
 | 
| -        if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event) && !sharedPanel) {
 | 
| -          this._startEdgePeek();
 | 
| -          // cancel selection
 | 
| -          event.preventDefault();
 | 
| -          // grab this panel
 | 
| -          sharedPanel = this;
 | 
| -        }
 | 
| -      },
 | 
| -
 | 
| -      _upHandler: function() {
 | 
| -        this._stopEdgePeek();
 | 
| -        // release the panel
 | 
| -        sharedPanel = null;
 | 
| -      },
 | 
| -
 | 
| -      _onTap: function(event) {
 | 
| -        var targetElement = Polymer.dom(event).localTarget;
 | 
| -        var isTargetToggleElement = targetElement &&
 | 
| -          this.drawerToggleAttribute &&
 | 
| -          targetElement.hasAttribute(this.drawerToggleAttribute);
 | 
| -
 | 
| -        if (isTargetToggleElement) {
 | 
| -          this.togglePanel();
 | 
| -        }
 | 
| -      },
 | 
| -
 | 
| -      _isEdgeTouch: function(event) {
 | 
| -        var x = event.detail.x;
 | 
| -
 | 
| -        return !this.disableEdgeSwipe && this._swipeAllowed() &&
 | 
| -          (this.rightDrawer ?
 | 
| -            x >= this.offsetWidth - this.edgeSwipeSensitivity :
 | 
| -            x <= this.edgeSwipeSensitivity);
 | 
| -      },
 | 
| -
 | 
| -      _trackStart: function(event) {
 | 
| -        if (this._swipeAllowed()) {
 | 
| -          sharedPanel = this;
 | 
| -          this._setDragging(true);
 | 
| -
 | 
| -          if (this._isMainSelected()) {
 | 
| -            this._setDragging(this.peeking || this._isEdgeTouch(event));
 | 
| -          }
 | 
| -
 | 
| -          if (this.dragging) {
 | 
| -            this.width = this.$.drawer.offsetWidth;
 | 
| -            this.transition = false;
 | 
| -          }
 | 
| -        }
 | 
| -      },
 | 
| -
 | 
| -      _translateXForDeltaX: function(deltaX) {
 | 
| -        var isMain = this._isMainSelected();
 | 
| -
 | 
| -        if (this.rightDrawer) {
 | 
| -          return Math.max(0, isMain ? this.width + deltaX : deltaX);
 | 
| -        } else {
 | 
| -          return Math.min(0, isMain ? deltaX - this.width : deltaX);
 | 
| -        }
 | 
| -      },
 | 
| -
 | 
| -      _trackX: function(event) {
 | 
| -        if (this.dragging) {
 | 
| -          var dx = event.detail.dx;
 | 
| -
 | 
| -          if (this.peeking) {
 | 
| -            if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
 | 
| -              // Ignore trackx until we move past the edge peek.
 | 
| -              return;
 | 
| -            }
 | 
| -            this._setPeeking(false);
 | 
| -          }
 | 
| -
 | 
| -          this._moveDrawer(this._translateXForDeltaX(dx));
 | 
| -        }
 | 
| -      },
 | 
| -
 | 
| -      _trackEnd: function(event) {
 | 
| -        if (this.dragging) {
 | 
| -          var xDirection = event.detail.dx > 0;
 | 
| -
 | 
| -          this._setDragging(false);
 | 
| -          this.transition = true;
 | 
| -          sharedPanel = null;
 | 
| -          this._moveDrawer(null);
 | 
| -
 | 
| -          if (this.rightDrawer) {
 | 
| -            this[xDirection ? 'closeDrawer' : 'openDrawer']();
 | 
| -          } else {
 | 
| -            this[xDirection ? 'openDrawer' : 'closeDrawer']();
 | 
| -          }
 | 
| -        }
 | 
| -      },
 | 
| -
 | 
| -      _transformForTranslateX: function(translateX) {
 | 
| -        if (translateX === null) {
 | 
| -          return '';
 | 
| -        }
 | 
| -
 | 
| -        return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
 | 
| -            'translate3d(' + translateX + 'px, 0, 0)';
 | 
| -      },
 | 
| -
 | 
| -      _moveDrawer: function(translateX) {
 | 
| -        this.transform(this._transformForTranslateX(translateX), this.$.drawer);
 | 
| -      }
 | 
| -
 | 
| -    });
 | 
| -
 | 
| -  }());
 | 
| -
 | 
| -</script>
 | 
| 
 |