third_party/polymer/v1_0/components-chromium/paper-drawer-panel/paper-drawer-panel-extracted.js

   1 (function() {
   2
   3     'use strict';
   4
   5    // this would be the only `paper-drawer-panel` in
   6    // the whole app that can be in `dragging` state
   7     var sharedPanel = null;
   8
   9     function classNames(obj) {
  10       var classes = [];
  11       for (var key in obj) {
  12         if (obj.hasOwnProperty(key) && obj[key]) {
  13           classes.push(key);
  14         }
  15       }
  16
  17       return classes.join(' ');
  18     }
  19
  20     Polymer({
  21
  22       is: 'paper-drawer-panel',
  23
  24       /**
  25        * Fired when the narrow layout changes.
  26        *
  27        * @event paper-responsive-change {{narrow: boolean}} detail -
  28        *     narrow: true if the panel is in narrow layout.
  29        */
  30
  31       /**
  32        * Fired when the a panel is selected.
  33        *
  34        * Listening for this event is an alternative to observing changes in the `selected` attribute.
  35        * This event is fired both when a panel is selected.
  36        *
  37        * @event iron-select {{item: Object}} detail -
  38        *     item: The panel that the event refers to.
  39        */
  40
  41       /**
  42        * Fired when a panel is deselected.
  43        *
  44        * Listening for this event is an alternative to observing changes in the `selected` attribute.
  45        * This event is fired both when a panel is deselected.
  46        *
  47        * @event iron-deselect {{item: Object}} detail -
  48        *     item: The panel that the event refers to.
  49        */
  50       properties: {
  51
  52         /**
  53          * The panel to be selected when `paper-drawer-panel` changes to narrow
  54          * layout.
  55          */
  56         defaultSelected: {
  57           type: String,
  58           value: 'main'
  59         },
  60
  61         /**
  62          * If true, swipe from the edge is disable.
  63          */
  64         disableEdgeSwipe: {
  65           type: Boolean,
  66           value: false
  67         },
  68
  69         /**
  70          * If true, swipe to open/close the drawer is disabled.
  71          */
  72         disableSwipe: {
  73           type: Boolean,
  74           value: false
  75         },
  76
  77         /**
  78          * Whether the user is dragging the drawer interactively.
  79          */
  80         dragging: {
  81           type: Boolean,
  82           value: false,
  83           readOnly: true,
  84           notify: true
  85         },
  86
  87         /**
  88          * Width of the drawer panel.
  89          */
  90         drawerWidth: {
  91           type: String,
  92           value: '256px'
  93         },
  94
  95         /**
  96          * How many pixels on the side of the screen are sensitive to edge
  97          * swipes and peek.
  98          */
  99         edgeSwipeSensitivity: {
 100           type: Number,
 101           value: 30
 102         },
 103
 104         /**
 105          * If true, ignore `responsiveWidth` setting and force the narrow layout.
 106          */
 107         forceNarrow: {
 108           type: Boolean,
 109           value: false
 110         },
 111
 112         /**
 113          * Whether the browser has support for the transform CSS property.
 114          */
 115         hasTransform: {
 116           type: Boolean,
 117           value: function() {
 118             return 'transform' in this.style;
 119           }
 120         },
 121
 122         /**
 123          * Whether the browser has support for the will-change CSS property.
 124          */
 125         hasWillChange: {
 126           type: Boolean,
 127           value: function() {
 128             return 'willChange' in this.style;
 129           }
 130         },
 131
 132         /**
 133          * Returns true if the panel is in narrow layout.  This is useful if you
 134          * need to show/hide elements based on the layout.
 135          */
 136         narrow: {
 137           reflectToAttribute: true,
 138           type: Boolean,
 139           value: false,
 140           readOnly: true,
 141           notify: true
 142         },
 143
 144         /**
 145          * Whether the drawer is peeking out from the edge.
 146          */
 147         peeking: {
 148           type: Boolean,
 149           value: false,
 150           readOnly: true,
 151           notify: true
 152         },
 153
 154         /**
 155          * Max-width when the panel changes to narrow layout.
 156          */
 157         responsiveWidth: {
 158           type: String,
 159           value: '640px'
 160         },
 161
 162         /**
 163          * If true, position the drawer to the right.
 164          */
 165         rightDrawer: {
 166           type: Boolean,
 167           value: false
 168         },
 169
 170         /**
 171          * The panel that is being selected. `drawer` for the drawer panel and
 172          * `main` for the main panel.
 173          */
 174         selected: {
 175           reflectToAttribute: true,
 176           notify: true,
 177           type: String,
 178           value: null
 179         },
 180
 181         /**
 182          * The attribute on elements that should toggle the drawer on tap, also elements will
 183          * automatically be hidden in wide layout.
 184          */
 185         drawerToggleAttribute: {
 186           type: String,
 187           value: 'paper-drawer-toggle'
 188         },
 189
 190         /**
 191          * Whether the transition is enabled.
 192          */
 193         transition: {
 194           type: Boolean,
 195           value: false
 196         },
 197
 198       },
 199
 200       listeners: {
 201         tap: '_onTap',
 202         track: '_onTrack',
 203         down: '_downHandler',
 204         up: '_upHandler'
 205       },
 206
 207       observers: [
 208         '_forceNarrowChanged(forceNarrow, defaultSelected)'
 209       ],
 210
 211       /**
 212        * Toggles the panel open and closed.
 213        *
 214        * @method togglePanel
 215        */
 216       togglePanel: function() {
 217         if (this._isMainSelected()) {
 218           this.openDrawer();
 219         } else {
 220           this.closeDrawer();
 221         }
 222       },
 223
 224       /**
 225        * Opens the drawer.
 226        *
 227        * @method openDrawer
 228        */
 229       openDrawer: function() {
 230         this.selected = 'drawer';
 231       },
 232
 233       /**
 234        * Closes the drawer.
 235        *
 236        * @method closeDrawer
 237        */
 238       closeDrawer: function() {
 239         this.selected = 'main';
 240       },
 241
 242       ready: function() {
 243         // Avoid transition at the beginning e.g. page loads and enable
 244         // transitions only after the element is rendered and ready.
 245         this.transition = true;
 246       },
 247
 248       _computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer, peeking) {
 249         return classNames({
 250           dragging: dragging,
 251           'narrow-layout': narrow,
 252           'right-drawer': rightDrawer,
 253           'left-drawer': !rightDrawer,
 254           transition: transition,
 255           peeking: peeking
 256         });
 257       },
 258
 259       _computeDrawerStyle: function(drawerWidth) {
 260         return 'width:' + drawerWidth + ';';
 261       },
 262
 263       _computeMainStyle: function(narrow, rightDrawer, drawerWidth) {
 264         var style = '';
 265
 266         style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';';
 267
 268         if (rightDrawer) {
 269           style += 'right:' + (narrow ? '' : drawerWidth) + ';';
 270         }
 271
 272         return style;
 273       },
 274
 275       _computeMediaQuery: function(forceNarrow, responsiveWidth) {
 276         return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')';
 277       },
 278
 279       _computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) {
 280         return !narrow || disableEdgeSwipe;
 281       },
 282
 283       _onTrack: function(event) {
 284         if (sharedPanel && this !== sharedPanel) {
 285           return;
 286         }
 287         switch (event.detail.state) {
 288           case 'start':
 289             this._trackStart(event);
 290             break;
 291           case 'track':
 292             this._trackX(event);
 293             break;
 294           case 'end':
 295             this._trackEnd(event);
 296             break;
 297         }
 298
 299       },
 300
 301       _responsiveChange: function(narrow) {
 302         this._setNarrow(narrow);
 303
 304         if (this.narrow) {
 305           this.selected = this.defaultSelected;
 306         }
 307
 308         this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
 309         this.fire('paper-responsive-change', {narrow: this.narrow});
 310       },
 311
 312       _onQueryMatchesChanged: function(event) {
 313         this._responsiveChange(event.detail.value);
 314       },
 315
 316       _forceNarrowChanged: function() {
 317         // set the narrow mode only if we reached the `responsiveWidth`
 318         this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches);
 319       },
 320
 321       _swipeAllowed: function() {
 322         return this.narrow && !this.disableSwipe;
 323       },
 324
 325       _isMainSelected: function() {
 326         return this.selected === 'main';
 327       },
 328
 329       _startEdgePeek: function() {
 330         this.width = this.$.drawer.offsetWidth;
 331         this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ?
 332             -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
 333         this._setPeeking(true);
 334       },
 335
 336       _stopEdgePeek: function() {
 337         if (this.peeking) {
 338           this._setPeeking(false);
 339           this._moveDrawer(null);
 340         }
 341       },
 342
 343       _downHandler: function(event) {
 344         if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event) && !sharedPanel) {
 345           this._startEdgePeek();
 346           // cancel selection
 347           event.preventDefault();
 348           // grab this panel
 349           sharedPanel = this;
 350         }
 351       },
 352
 353       _upHandler: function() {
 354         this._stopEdgePeek();
 355         // release the panel
 356         sharedPanel = null;
 357       },
 358
 359       _onTap: function(event) {
 360         var targetElement = Polymer.dom(event).localTarget;
 361         var isTargetToggleElement = targetElement &&
 362           this.drawerToggleAttribute &&
 363           targetElement.hasAttribute(this.drawerToggleAttribute);
 364
 365         if (isTargetToggleElement) {
 366           this.togglePanel();
 367         }
 368       },
 369
 370       _isEdgeTouch: function(event) {
 371         var x = event.detail.x;
 372
 373         return !this.disableEdgeSwipe && this._swipeAllowed() &&
 374           (this.rightDrawer ?
 375             x >= this.offsetWidth - this.edgeSwipeSensitivity :
 376             x <= this.edgeSwipeSensitivity);
 377       },
 378
 379       _trackStart: function(event) {
 380         if (this._swipeAllowed()) {
 381           sharedPanel = this;
 382           this._setDragging(true);
 383
 384           if (this._isMainSelected()) {
 385             this._setDragging(this.peeking || this._isEdgeTouch(event));
 386           }
 387
 388           if (this.dragging) {
 389             this.width = this.$.drawer.offsetWidth;
 390             this.transition = false;
 391           }
 392         }
 393       },
 394
 395       _translateXForDeltaX: function(deltaX) {
 396         var isMain = this._isMainSelected();
 397
 398         if (this.rightDrawer) {
 399           return Math.max(0, isMain ? this.width + deltaX : deltaX);
 400         } else {
 401           return Math.min(0, isMain ? deltaX - this.width : deltaX);
 402         }
 403       },
 404
 405       _trackX: function(event) {
 406         if (this.dragging) {
 407           var dx = event.detail.dx;
 408
 409           if (this.peeking) {
 410             if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
 411               // Ignore trackx until we move past the edge peek.
 412               return;
 413             }
 414             this._setPeeking(false);
 415           }
 416
 417           this._moveDrawer(this._translateXForDeltaX(dx));
 418         }
 419       },
 420
 421       _trackEnd: function(event) {
 422         if (this.dragging) {
 423           var xDirection = event.detail.dx > 0;
 424
 425           this._setDragging(false);
 426           this.transition = true;
 427           sharedPanel = null;
 428           this._moveDrawer(null);
 429
 430           if (this.rightDrawer) {
 431             this[xDirection ? 'closeDrawer' : 'openDrawer']();
 432           } else {
 433             this[xDirection ? 'openDrawer' : 'closeDrawer']();
 434           }
 435         }
 436       },
 437
 438       _transformForTranslateX: function(translateX) {
 439         if (translateX === null) {
 440           return '';
 441         }
 442
 443         return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
 444             'translate3d(' + translateX + 'px, 0, 0)';
 445       },
 446
 447       _moveDrawer: function(translateX) {
 448         this.transform(this._transformForTranslateX(translateX), this.$.drawer);
 449       }
 450
 451     });
 452
 453   }());