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