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

Unified Diff: third_party/polymer/v1_0/components/paper-drawer-panel/paper-drawer-panel.html

Issue 1269803005: Remove third_party/polymer from .gitignore (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 5 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
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>

Powered by Google App Engine
This is Rietveld 408576698