Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(32)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: polymer_1.2.3/bower_components/paper-drawer-panel/paper-drawer-panel.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « polymer_1.2.3/bower_components/paper-drawer-panel/index.html ('k') | polymer_1.2.3/bower_components/paper-drawer-panel/test/index.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: polymer_1.2.3/bower_components/paper-drawer-panel/paper-drawer-panel.html
diff --git a/polymer_1.2.3/bower_components/paper-drawer-panel/paper-drawer-panel.html b/polymer_1.2.3/bower_components/paper-drawer-panel/paper-drawer-panel.html
new file mode 100644
index 0000000000000000000000000000000000000000..8dc8b1e37bef8234f78b1e18e947f1862abd8480
--- /dev/null
+++ b/polymer_1.2.3/bower_components/paper-drawer-panel/paper-drawer-panel.html
@@ -0,0 +1,765 @@
+<!--
+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">
+<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
+
+<!--
+Material design: [Navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.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
+
+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;
+ };
+ }
+
+To customize the scrim:
+
+ paper-drawer-panel {
+ --paper-drawer-panel-scrim: {
+ background-color: red;
+ };
+ }
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-drawer-panel-scrim-opacity` | Scrim opacity | 1
+`--paper-drawer-panel-drawer-container` | Mixin applied to drawer container | {}
+`--paper-drawer-panel-left-drawer-container` | Mixin applied to container when it's in the left side | {}
+`--paper-drawer-panel-main-container` | Mixin applied to main container | {}
+`--paper-drawer-panel-right-drawer-container` | Mixin applied to container when it's in the right side | {}
+`--paper-drawer-panel-scrim` | Mixin applied to scrim | {}
+
+@group Paper elements
+@element paper-drawer-panel
+@demo demo/index.html
+@hero hero.svg
+-->
+
+<dom-module id="paper-drawer-panel">
+ <template>
+ <style>
+ :host {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ }
+
+ iron-selector > #drawer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ background-color: white;
+
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+
+ @apply(--paper-drawer-panel-drawer-container);
+ }
+
+ .transition > #drawer {
+ transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
+ transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
+ }
+
+ .left-drawer > #drawer {
+ @apply(--paper-drawer-panel-left-drawer-container);
+ }
+
+ .right-drawer > #drawer {
+ left: auto;
+ right: 0;
+
+ @apply(--paper-drawer-panel-right-drawer-container);
+ }
+
+ iron-selector > #main {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+
+ @apply(--paper-drawer-panel-main-container);
+ }
+
+ .transition > #main {
+ transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
+ }
+
+ .right-drawer > #main {
+ left: 0;
+ }
+
+ .right-drawer.transition > #main {
+ transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
+ }
+
+ #main > ::content > [main] {
+ height: 100%;
+ }
+
+ #drawer > ::content > [drawer] {
+ height: 100%;
+ }
+
+ #scrim {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ visibility: hidden;
+ opacity: 0;
+ transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
+ background-color: rgba(0, 0, 0, 0.3);
+
+ @apply(--paper-drawer-panel-scrim);
+ }
+
+ .narrow-layout > #drawer {
+ will-change: transform;
+ }
+
+ .narrow-layout > #drawer.iron-selected {
+ box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
+ }
+
+ .right-drawer.narrow-layout > #drawer.iron-selected {
+ box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
+ }
+
+ .narrow-layout > #drawer > ::content > [drawer] {
+ border: 0;
+ }
+
+ .left-drawer.narrow-layout > #drawer:not(.iron-selected) {
+ -webkit-transform: translateX(-100%);
+ transform: translateX(-100%);
+ }
+
+ .right-drawer.narrow-layout > #drawer:not(.iron-selected) {
+ left: auto;
+ visibility: hidden;
+
+ -webkit-transform: translateX(100%);
+ transform: translateX(100%);
+ }
+
+ .right-drawer.narrow-layout.dragging > #drawer:not(.iron-selected),
+ .right-drawer.narrow-layout.peeking > #drawer:not(.iron-selected) {
+ visibility: visible;
+ }
+
+ .narrow-layout > #main {
+ padding: 0;
+ }
+
+ .right-drawer.narrow-layout > #main {
+ left: 0;
+ right: 0;
+ }
+
+ .narrow-layout > #main:not(.iron-selected) > #scrim,
+ .dragging > #main > #scrim {
+ visibility: visible;
+ opacity: var(--paper-drawer-panel-scrim-opacity, 1);
+ }
+
+ .narrow-layout > #main > * {
+ margin: 0;
+ min-height: 100%;
+ left: 0;
+ right: 0;
+
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+
+ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
+ display: none;
+ }
+ </style>
+
+ <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)]]" on-transitionend="_onMainTransitionEnd">
+ <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>
+
+ <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',
+
+ behaviors: [Polymer.IronResizableBehavior],
+
+ /**
+ * 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 disabled.
+ */
+ 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: '600px'
+ },
+
+ /**
+ * 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;
+ },
+
+ _onMainTransitionEnd: function (e) {
+ if (e.currentTarget === this.$.main && (e.propertyName === 'left' || e.propertyName === 'right')) {
+ this.notifyResize();
+ }
+ },
+
+ _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>
+</dom-module>
« no previous file with comments | « polymer_1.2.3/bower_components/paper-drawer-panel/index.html ('k') | polymer_1.2.3/bower_components/paper-drawer-panel/test/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698