third_party/polymer/v1_0/components/paper-drawer-panel/paper-drawer-panel.html

   1 <!--
   2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <link rel="import" href="../polymer/polymer.html">
  11 <link rel="import" href="../iron-media-query/iron-media-query.html">
  12 <link rel="import" href="../iron-selector/iron-selector.html">
  13
  14 <!--
  15 `paper-drawer-panel` contains a drawer panel and a main panel.  The drawer
  16 and the main panel are side-by-side with drawer on the left.  When the browser
  17 window size is smaller than the `responsiveWidth`, `paper-drawer-panel`
  18 changes to narrow layout.  In narrow layout, the drawer will be stacked on top
  19 of the main panel.  The drawer will slide in/out to hide/reveal the main
  20 panel.
  21
  22 Use the attribute `drawer` to indicate that the element is the drawer panel and
  23 `main` to indicate that the element is the main panel.
  24
  25 Example:
  26
  27     <paper-drawer-panel>
  28       <div drawer> Drawer panel... </div>
  29       <div main> Main panel... </div>
  30     </paper-drawer-panel>
  31
  32 The drawer and the main panels are not scrollable.  You can set CSS overflow
  33 property on the elements to make them scrollable or use `paper-header-panel`.
  34
  35 Example:
  36
  37     <paper-drawer-panel>
  38       <paper-header-panel drawer>
  39         <paper-toolbar></paper-toolbar>
  40         <div> Drawer content... </div>
  41       </paper-header-panel>
  42       <paper-header-panel main>
  43         <paper-toolbar></paper-toolbar>
  44         <div> Main content... </div>
  45       </paper-header-panel>
  46     </paper-drawer-panel>
  47
  48 An element that should toggle the drawer will automatically do so if it's
  49 given the `paper-drawer-toggle` attribute.  Also this element will automatically
  50 be hidden in wide layout.
  51
  52 Example:
  53
  54     <paper-drawer-panel>
  55       <paper-header-panel drawer>
  56         <paper-toolbar>
  57           <div>Application</div>
  58         </paper-toolbar>
  59         <div> Drawer content... </div>
  60       </paper-header-panel>
  61       <paper-header-panel main>
  62         <paper-toolbar>
  63           <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
  64           <div>Title</div>
  65         </paper-toolbar>
  66         <div> Main content... </div>
  67       </paper-header-panel>
  68     </paper-drawer-panel>
  69
  70 To position the drawer to the right, add `right-drawer` attribute.
  71
  72     <paper-drawer-panel right-drawer>
  73       <div drawer> Drawer panel... </div>
  74       <div main> Main panel... </div>
  75     </paper-drawer-panel>
  76
  77 Styling `paper-drawer-panel`
  78
  79 To change the main container:
  80
  81     paper-drawer-panel {
  82       --paper-drawer-panel-main-container: {
  83         background-color: gray;
  84       };
  85     }
  86
  87 To change the drawer container when it's in the left side:
  88
  89     paper-drawer-panel {
  90       --paper-drawer-panel-left-drawer-container: {
  91         background-color: white;
  92       };
  93     }
  94
  95 To change the drawer container when it's in the right side:
  96
  97     paper-drawer-panel {
  98       --paper-drawer-panel-right-drawer-container: {
  99         background-color: white;
 100       };
 101     }
 102
 103 @group Paper elements
 104 @element paper-drawer-panel
 105 @demo demo/index.html
 106 @hero hero.svg
 107 -->
 108
 109 <dom-module id="paper-drawer-panel">
 110   <link rel="import" type="css" href="paper-drawer-panel.css">
 111
 112   <template>
 113     <iron-media-query
 114         id="mq"
 115         on-query-matches-changed="_onQueryMatchesChanged"
 116         query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]">
 117     </iron-media-query>
 118
 119     <iron-selector
 120         attr-for-selected="id"
 121         class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer, peeking)]]"
 122         activate-event=""
 123         selected="[[selected]]">
 124
 125       <div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]">
 126         <content select="[main]"></content>
 127         <div id="scrim" on-tap="closeDrawer"></div>
 128       </div>
 129
 130       <div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]">
 131         <content select="[drawer]"></content>
 132       </div>
 133
 134     </iron-selector>
 135   </template>
 136
 137 </dom-module>
 138
 139 <script>
 140
 141   (function() {
 142
 143     'use strict';
 144
 145    // this would be the only `paper-drawer-panel` in
 146    // the whole app that can be in `dragging` state
 147     var sharedPanel = null;
 148
 149     function classNames(obj) {
 150       var classes = [];
 151       for (var key in obj) {
 152         if (obj.hasOwnProperty(key) && obj[key]) {
 153           classes.push(key);
 154         }
 155       }
 156
 157       return classes.join(' ');
 158     }
 159
 160     Polymer({
 161
 162       is: 'paper-drawer-panel',
 163
 164       /**
 165        * Fired when the narrow layout changes.
 166        *
 167        * @event paper-responsive-change {{narrow: boolean}} detail -
 168        *     narrow: true if the panel is in narrow layout.
 169        */
 170
 171       /**
 172        * Fired when the a panel is selected.
 173        *
 174        * Listening for this event is an alternative to observing changes in the `selected` attribute.
 175        * This event is fired both when a panel is selected.
 176        *
 177        * @event iron-select {{item: Object}} detail -
 178        *     item: The panel that the event refers to.
 179        */
 180
 181       /**
 182        * Fired when a panel is deselected.
 183        *
 184        * Listening for this event is an alternative to observing changes in the `selected` attribute.
 185        * This event is fired both when a panel is deselected.
 186        *
 187        * @event iron-deselect {{item: Object}} detail -
 188        *     item: The panel that the event refers to.
 189        */
 190       properties: {
 191
 192         /**
 193          * The panel to be selected when `paper-drawer-panel` changes to narrow
 194          * layout.
 195          */
 196         defaultSelected: {
 197           type: String,
 198           value: 'main'
 199         },
 200
 201         /**
 202          * If true, swipe from the edge is disable.
 203          */
 204         disableEdgeSwipe: {
 205           type: Boolean,
 206           value: false
 207         },
 208
 209         /**
 210          * If true, swipe to open/close the drawer is disabled.
 211          */
 212         disableSwipe: {
 213           type: Boolean,
 214           value: false
 215         },
 216
 217         /**
 218          * Whether the user is dragging the drawer interactively.
 219          */
 220         dragging: {
 221           type: Boolean,
 222           value: false,
 223           readOnly: true,
 224           notify: true
 225         },
 226
 227         /**
 228          * Width of the drawer panel.
 229          */
 230         drawerWidth: {
 231           type: String,
 232           value: '256px'
 233         },
 234
 235         /**
 236          * How many pixels on the side of the screen are sensitive to edge
 237          * swipes and peek.
 238          */
 239         edgeSwipeSensitivity: {
 240           type: Number,
 241           value: 30
 242         },
 243
 244         /**
 245          * If true, ignore `responsiveWidth` setting and force the narrow layout.
 246          */
 247         forceNarrow: {
 248           type: Boolean,
 249           value: false
 250         },
 251
 252         /**
 253          * Whether the browser has support for the transform CSS property.
 254          */
 255         hasTransform: {
 256           type: Boolean,
 257           value: function() {
 258             return 'transform' in this.style;
 259           }
 260         },
 261
 262         /**
 263          * Whether the browser has support for the will-change CSS property.
 264          */
 265         hasWillChange: {
 266           type: Boolean,
 267           value: function() {
 268             return 'willChange' in this.style;
 269           }
 270         },
 271
 272         /**
 273          * Returns true if the panel is in narrow layout.  This is useful if you
 274          * need to show/hide elements based on the layout.
 275          */
 276         narrow: {
 277           reflectToAttribute: true,
 278           type: Boolean,
 279           value: false,
 280           readOnly: true,
 281           notify: true
 282         },
 283
 284         /**
 285          * Whether the drawer is peeking out from the edge.
 286          */
 287         peeking: {
 288           type: Boolean,
 289           value: false,
 290           readOnly: true,
 291           notify: true
 292         },
 293
 294         /**
 295          * Max-width when the panel changes to narrow layout.
 296          */
 297         responsiveWidth: {
 298           type: String,
 299           value: '640px'
 300         },
 301
 302         /**
 303          * If true, position the drawer to the right.
 304          */
 305         rightDrawer: {
 306           type: Boolean,
 307           value: false
 308         },
 309
 310         /**
 311          * The panel that is being selected. `drawer` for the drawer panel and
 312          * `main` for the main panel.
 313          */
 314         selected: {
 315           reflectToAttribute: true,
 316           notify: true,
 317           type: String,
 318           value: null
 319         },
 320
 321         /**
 322          * The attribute on elements that should toggle the drawer on tap, also elements will
 323          * automatically be hidden in wide layout.
 324          */
 325         drawerToggleAttribute: {
 326           type: String,
 327           value: 'paper-drawer-toggle'
 328         },
 329
 330         /**
 331          * Whether the transition is enabled.
 332          */
 333         transition: {
 334           type: Boolean,
 335           value: false
 336         },
 337
 338       },
 339
 340       listeners: {
 341         tap: '_onTap',
 342         track: '_onTrack',
 343         down: '_downHandler',
 344         up: '_upHandler'
 345       },
 346
 347       observers: [
 348         '_forceNarrowChanged(forceNarrow, defaultSelected)'
 349       ],
 350
 351       /**
 352        * Toggles the panel open and closed.
 353        *
 354        * @method togglePanel
 355        */
 356       togglePanel: function() {
 357         if (this._isMainSelected()) {
 358           this.openDrawer();
 359         } else {
 360           this.closeDrawer();
 361         }
 362       },
 363
 364       /**
 365        * Opens the drawer.
 366        *
 367        * @method openDrawer
 368        */
 369       openDrawer: function() {
 370         this.selected = 'drawer';
 371       },
 372
 373       /**
 374        * Closes the drawer.
 375        *
 376        * @method closeDrawer
 377        */
 378       closeDrawer: function() {
 379         this.selected = 'main';
 380       },
 381
 382       ready: function() {
 383         // Avoid transition at the beginning e.g. page loads and enable
 384         // transitions only after the element is rendered and ready.
 385         this.transition = true;
 386       },
 387
 388       _computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer, peeking) {
 389         return classNames({
 390           dragging: dragging,
 391           'narrow-layout': narrow,
 392           'right-drawer': rightDrawer,
 393           'left-drawer': !rightDrawer,
 394           transition: transition,
 395           peeking: peeking
 396         });
 397       },
 398
 399       _computeDrawerStyle: function(drawerWidth) {
 400         return 'width:' + drawerWidth + ';';
 401       },
 402
 403       _computeMainStyle: function(narrow, rightDrawer, drawerWidth) {
 404         var style = '';
 405
 406         style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';';
 407
 408         if (rightDrawer) {
 409           style += 'right:' + (narrow ? '' : drawerWidth) + ';';
 410         }
 411
 412         return style;
 413       },
 414
 415       _computeMediaQuery: function(forceNarrow, responsiveWidth) {
 416         return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')';
 417       },
 418
 419       _computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) {
 420         return !narrow || disableEdgeSwipe;
 421       },
 422
 423       _onTrack: function(event) {
 424         if (sharedPanel && this !== sharedPanel) {
 425           return;
 426         }
 427         switch (event.detail.state) {
 428           case 'start':
 429             this._trackStart(event);
 430             break;
 431           case 'track':
 432             this._trackX(event);
 433             break;
 434           case 'end':
 435             this._trackEnd(event);
 436             break;
 437         }
 438
 439       },
 440
 441       _responsiveChange: function(narrow) {
 442         this._setNarrow(narrow);
 443
 444         if (this.narrow) {
 445           this.selected = this.defaultSelected;
 446         }
 447
 448         this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
 449         this.fire('paper-responsive-change', {narrow: this.narrow});
 450       },
 451
 452       _onQueryMatchesChanged: function(event) {
 453         this._responsiveChange(event.detail.value);
 454       },
 455
 456       _forceNarrowChanged: function() {
 457         // set the narrow mode only if we reached the `responsiveWidth`
 458         this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches);
 459       },
 460
 461       _swipeAllowed: function() {
 462         return this.narrow && !this.disableSwipe;
 463       },
 464
 465       _isMainSelected: function() {
 466         return this.selected === 'main';
 467       },
 468
 469       _startEdgePeek: function() {
 470         this.width = this.$.drawer.offsetWidth;
 471         this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ?
 472             -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
 473         this._setPeeking(true);
 474       },
 475
 476       _stopEdgePeek: function() {
 477         if (this.peeking) {
 478           this._setPeeking(false);
 479           this._moveDrawer(null);
 480         }
 481       },
 482
 483       _downHandler: function(event) {
 484         if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event) && !sharedPanel) {
 485           this._startEdgePeek();
 486           // cancel selection
 487           event.preventDefault();
 488           // grab this panel
 489           sharedPanel = this;
 490         }
 491       },
 492
 493       _upHandler: function() {
 494         this._stopEdgePeek();
 495         // release the panel
 496         sharedPanel = null;
 497       },
 498
 499       _onTap: function(event) {
 500         var targetElement = Polymer.dom(event).localTarget;
 501         var isTargetToggleElement = targetElement &&
 502           this.drawerToggleAttribute &&
 503           targetElement.hasAttribute(this.drawerToggleAttribute);
 504
 505         if (isTargetToggleElement) {
 506           this.togglePanel();
 507         }
 508       },
 509
 510       _isEdgeTouch: function(event) {
 511         var x = event.detail.x;
 512
 513         return !this.disableEdgeSwipe && this._swipeAllowed() &&
 514           (this.rightDrawer ?
 515             x >= this.offsetWidth - this.edgeSwipeSensitivity :
 516             x <= this.edgeSwipeSensitivity);
 517       },
 518
 519       _trackStart: function(event) {
 520         if (this._swipeAllowed()) {
 521           sharedPanel = this;
 522           this._setDragging(true);
 523
 524           if (this._isMainSelected()) {
 525             this._setDragging(this.peeking || this._isEdgeTouch(event));
 526           }
 527
 528           if (this.dragging) {
 529             this.width = this.$.drawer.offsetWidth;
 530             this.transition = false;
 531           }
 532         }
 533       },
 534
 535       _translateXForDeltaX: function(deltaX) {
 536         var isMain = this._isMainSelected();
 537
 538         if (this.rightDrawer) {
 539           return Math.max(0, isMain ? this.width + deltaX : deltaX);
 540         } else {
 541           return Math.min(0, isMain ? deltaX - this.width : deltaX);
 542         }
 543       },
 544
 545       _trackX: function(event) {
 546         if (this.dragging) {
 547           var dx = event.detail.dx;
 548
 549           if (this.peeking) {
 550             if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
 551               // Ignore trackx until we move past the edge peek.
 552               return;
 553             }
 554             this._setPeeking(false);
 555           }
 556
 557           this._moveDrawer(this._translateXForDeltaX(dx));
 558         }
 559       },
 560
 561       _trackEnd: function(event) {
 562         if (this.dragging) {
 563           var xDirection = event.detail.dx > 0;
 564
 565           this._setDragging(false);
 566           this.transition = true;
 567           sharedPanel = null;
 568           this._moveDrawer(null);
 569
 570           if (this.rightDrawer) {
 571             this[xDirection ? 'closeDrawer' : 'openDrawer']();
 572           } else {
 573             this[xDirection ? 'openDrawer' : 'closeDrawer']();
 574           }
 575         }
 576       },
 577
 578       _transformForTranslateX: function(translateX) {
 579         if (translateX === null) {
 580           return '';
 581         }
 582
 583         return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
 584             'translate3d(' + translateX + 'px, 0, 0)';
 585       },
 586
 587       _moveDrawer: function(translateX) {
 588         this.transform(this._transformForTranslateX(translateX), this.$.drawer);
 589       }
 590
 591     });
 592
 593   }());
 594
 595 </script>