third_party/polymer/components/core-drawer-panel/core-drawer-panel.html

   1 <!--
   2 Copyright (c) 2014 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 <!--
  11 `core-drawer-panel` contains a drawer panel and a main panel.  The drawer
  12 and the main panel are side-by-side with drawer on the left.  When the browser
  13 window size is smaller than the `responsiveWidth`, `core-drawer-panel`
  14 changes to narrow layout.  In narrow layout, the drawer will be stacked on top
  15 of the main panel.  The drawer will slide in/out to hide/reveal the main
  16 panel.
  17
  18 Use the attribute `drawer` to indicate that the element is the drawer panel and
  19 `main` to indicate that the element is the main panel.
  20
  21 Example:
  22
  23     <core-drawer-panel>
  24       <div drawer> Drawer panel... </div>
  25       <div main> Main panel... </div>
  26     </core-drawer-panel>
  27
  28 The drawer and the main panels are not scrollable.  You can set CSS overflow
  29 property on the elements to make them scrollable or use `core-header-panel`.
  30
  31 Example:
  32
  33     <core-drawer-panel>
  34       <core-header-panel drawer>
  35         <core-toolbar></core-toolbar>
  36         <div> Drawer content... </div>
  37       </core-header-panel>
  38       <core-header-panel main>
  39         <core-toolbar></core-toolbar>
  40         <div> Main content... </div>
  41       </core-header-panel>
  42     </core-drawer-panel>
  43
  44 An element that should toggle the drawer will automatically do so if it's
  45 given the `core-drawer-toggle` attribute.  Also this element will automatically
  46 be hidden in wide layout.
  47
  48 Example:
  49
  50     <core-drawer-panel>
  51       <core-header-panel drawer>
  52         <core-toolbar>
  53           <div>Application</div>
  54         </core-toolbar>
  55         <div> Drawer content... </div>
  56       </core-header-panel>
  57       <core-header-panel main>
  58         <core-toolbar>
  59           <core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
  60           <div>Title</div>
  61         </core-toolbar>
  62         <div> Main content... </div>
  63       </core-header-panel>
  64     </core-drawer-panel>
  65
  66 To position the drawer to the right, add `rightDrawer` attribute.
  67
  68     <core-drawer-panel rightDrawer>
  69       <div drawer> Drawer panel... </div>
  70       <div main> Main panel... </div>
  71     </core-drawer-panel>
  72
  73 @group Polymer Core Elements
  74 @element core-drawer-panel
  75 @homepage github.io
  76 -->
  77
  78 <link rel="import" href="../core-media-query/core-media-query.html">
  79 <link rel="import" href="../core-selector/core-selector.html">
  80
  81 <polymer-element name="core-drawer-panel" touch-action="auto">
  82 <template>
  83
  84   <link rel="stylesheet" href="core-drawer-panel.css">
  85
  86   <core-media-query query="max-width: {{forceNarrow ? '' : responsiveWidth}}" queryMatches="{{queryMatches}}"></core-media-query>
  87
  88   <core-selector class="{{ {'narrow-layout' : narrow, transition : transition, dragging : dragging, 'right-drawer': rightDrawer} | tokenList }}" valueattr="id" selected="{{selected}}">
  89
  90     <div id="main" _style="left: {{ narrow || rightDrawer ? '0' : drawerWidth }}; right: {{ rightDrawer ? (narrow ? '' : drawerWidth) : '' }};">
  91       <content select="[main]"></content>
  92       <div id="scrim" on-tap="{{togglePanel}}"></div>
  93     </div>
  94
  95     <div id="drawer" _style="width: {{ drawerWidth }}">
  96       <content select="[drawer]"></content>
  97     </div>
  98
  99   </core-selector>
 100
 101 </template>
 102 <script>
 103
 104   Polymer('core-drawer-panel', {
 105
 106     /**
 107      * Fired when the narrow layout changes.
 108      *
 109      * @event core-responsive-change
 110      * @param {Object} detail
 111      * @param {boolean} detail.narrow true if the panel is in narrow layout.
 112      */
 113
 114     /**
 115      * Fired when the selected panel changes.
 116      *
 117      * Listening for this event is an alternative to observing changes in the `selected` attribute.
 118      * This event is fired both when a panel is selected and deselected.
 119      * The `isSelected` detail property contains the selection state.
 120      *
 121      * @event core-select
 122      * @param {Object} detail
 123      * @param {boolean} detail.isSelected true for selection and false for deselection
 124      * @param {Object} detail.item the panel that the event refers to
 125      */
 126
 127     publish: {
 128
 129       /**
 130        * Width of the drawer panel.
 131        *
 132        * @attribute drawerWidth
 133        * @type string
 134        * @default '256px'
 135        */
 136       drawerWidth: '256px',
 137
 138       /**
 139        * Max-width when the panel changes to narrow layout.
 140        *
 141        * @attribute responsiveWidth
 142        * @type string
 143        * @default '640px'
 144        */
 145       responsiveWidth: '640px',
 146
 147       /**
 148        * The panel that is being selected. `drawer` for the drawer panel and
 149        * `main` for the main panel.
 150        *
 151        * @attribute selected
 152        * @type string
 153        * @default null
 154        */
 155       selected: {value: null, reflect: true},
 156
 157       /**
 158        * The panel to be selected when `core-drawer-panel` changes to narrow
 159        * layout.
 160        *
 161        * @attribute defaultSelected
 162        * @type string
 163        * @default 'main'
 164        */
 165       defaultSelected: 'main',
 166
 167       /**
 168        * Returns true if the panel is in narrow layout.  This is useful if you
 169        * need to show/hide elements based on the layout.
 170        *
 171        * @attribute narrow
 172        * @type boolean
 173        * @default false
 174        */
 175       narrow: {value: false, reflect: true},
 176
 177       /**
 178        * If true, position the drawer to the right.
 179        *
 180        * @attribute rightDrawer
 181        * @type boolean
 182        * @default false
 183        */
 184       rightDrawer: false,
 185
 186       /**
 187        * If true, swipe to open/close the drawer is disabled.
 188        *
 189        * @attribute disableSwipe
 190        * @type boolean
 191        * @default false
 192        */
 193       disableSwipe: false,
 194
 195       /**
 196        * If true, ignore `responsiveWidth` setting and force the narrow layout.
 197        *
 198        * @attribute forceNarrow
 199        * @type boolean
 200        * @default false
 201        */
 202       forceNarrow: false
 203     },
 204
 205     eventDelegates: {
 206       trackstart: 'trackStart',
 207       trackx: 'trackx',
 208       trackend: 'trackEnd',
 209       down: 'downHandler',
 210       up: 'upHandler',
 211       tap: 'tapHandler'
 212     },
 213
 214     // Whether the transition is enabled.
 215     transition: false,
 216
 217     // How many pixels on the side of the screen are sensitive to edge swipes and peek.
 218     edgeSwipeSensitivity: 15,
 219
 220     // Whether the drawer is peeking out from the edge.
 221     peeking: false,
 222
 223     // Whether the user is dragging the drawer interactively.
 224     dragging: false,
 225
 226     // Whether the browser has support for the transform CSS property.
 227     hasTransform: true,
 228
 229     // Whether the browser has support for the will-change CSS property.
 230     hasWillChange: true,
 231
 232     // The attribute on elements that should toggle the drawer on tap, also
 233     // elements will automatically be hidden in wide layout.
 234     toggleAttribute: 'core-drawer-toggle',
 235
 236     created: function() {
 237       this.hasTransform = 'transform' in this.style;
 238       this.hasWillChange = 'willChange' in this.style;
 239     },
 240
 241     domReady: function() {
 242       // to avoid transition at the beginning e.g. page loads
 243       // NOTE: domReady is already raf delayed and delaying another frame
 244       // ensures a layout has occurred.
 245       this.async(function() {
 246         this.transition = true;
 247       });
 248     },
 249
 250     /**
 251      * Toggles the panel open and closed.
 252      *
 253      * @method togglePanel
 254      */
 255     togglePanel: function() {
 256       this.selected = this.isMainSelected() ? 'drawer' : 'main';
 257     },
 258
 259     /**
 260      * Opens the drawer.
 261      *
 262      * @method openDrawer
 263      */
 264     openDrawer: function() {
 265       this.selected = 'drawer';
 266     },
 267
 268     /**
 269      * Closes the drawer.
 270      *
 271      * @method closeDrawer
 272      */
 273     closeDrawer: function() {
 274       this.selected = 'main';
 275     },
 276
 277     queryMatchesChanged: function() {
 278       this.narrow = this.queryMatches || this.forceNarrow;
 279       if (this.narrow) {
 280         this.selected = this.defaultSelected;
 281       }
 282       this.setAttribute('touch-action', this.swipeAllowed() ? 'pan-y' : '');
 283       this.fire('core-responsive-change', {narrow: this.narrow});
 284     },
 285
 286     forceNarrowChanged: function() {
 287       this.queryMatchesChanged();
 288     },
 289
 290     swipeAllowed: function() {
 291       return this.narrow && !this.disableSwipe;
 292     },
 293
 294     isMainSelected: function() {
 295       return this.selected === 'main';
 296     },
 297
 298     startEdgePeek: function() {
 299       this.width = this.$.drawer.offsetWidth;
 300       this.moveDrawer(this.translateXForDeltaX(this.rightDrawer ?
 301           -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
 302       this.peeking = true;
 303     },
 304
 305     stopEdgePeak: function() {
 306       if (this.peeking) {
 307         this.peeking = false;
 308         this.moveDrawer(null);
 309       }
 310     },
 311
 312     downHandler: function(e) {
 313       if (!this.dragging && this.isMainSelected() && this.isEdgeTouch(e)) {
 314         this.startEdgePeek();
 315       }
 316     },
 317
 318     upHandler: function(e) {
 319       this.stopEdgePeak();
 320     },
 321
 322     tapHandler: function(e) {
 323       if (e.target && this.toggleAttribute &&
 324           e.target.hasAttribute(this.toggleAttribute)) {
 325         this.togglePanel();
 326       }
 327     },
 328
 329     isEdgeTouch: function(e) {
 330       return this.swipeAllowed() && (this.rightDrawer ?
 331         e.pageX >= this.offsetWidth - this.edgeSwipeSensitivity :
 332         e.pageX <= this.edgeSwipeSensitivity);
 333     },
 334
 335     trackStart : function(e) {
 336       if (this.swipeAllowed()) {
 337         this.dragging = true;
 338
 339         if (this.isMainSelected()) {
 340           this.dragging = this.peeking || this.isEdgeTouch(e);
 341         }
 342
 343         if (this.dragging) {
 344           this.width = this.$.drawer.offsetWidth;
 345           this.transition = false;
 346           e.preventTap();
 347         }
 348       }
 349     },
 350
 351     translateXForDeltaX: function(deltaX) {
 352       var isMain = this.isMainSelected();
 353       if (this.rightDrawer) {
 354         return Math.max(0, isMain ? this.width + deltaX : deltaX);
 355       } else {
 356         return Math.min(0, isMain ? deltaX - this.width : deltaX);
 357       }
 358     },
 359
 360     trackx : function(e) {
 361       if (this.dragging) {
 362         if (this.peeking) {
 363           if (Math.abs(e.dx) <= this.edgeSwipeSensitivity) {
 364             return; // Ignore trackx until we move past the edge peek.
 365           }
 366           this.peeking = false;
 367         }
 368         this.moveDrawer(this.translateXForDeltaX(e.dx));
 369       }
 370     },
 371
 372     trackEnd : function(e) {
 373       if (this.dragging) {
 374         this.dragging = false;
 375         this.transition = true;
 376         this.moveDrawer(null);
 377
 378         if (this.rightDrawer) {
 379           this.selected = e.xDirection > 0 ? 'main' : 'drawer';
 380         } else {
 381           this.selected = e.xDirection > 0 ? 'drawer' : 'main';
 382         }
 383       }
 384     },
 385
 386     transformForTranslateX: function(translateX) {
 387       if (translateX === null) {
 388         return '';
 389       }
 390       return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
 391           'translate3d(' + translateX + 'px, 0, 0)';
 392     },
 393
 394     moveDrawer: function(translateX) {
 395       var s = this.$.drawer.style;
 396
 397       if (this.hasTransform) {
 398         s.transform = this.transformForTranslateX(translateX);
 399       } else {
 400         s.webkitTransform = this.transformForTranslateX(translateX);
 401       }
 402     }
 403
 404   });
 405
 406 </script>
 407 </polymer-element>