third_party/polymer/v1_0/components/paper-toolbar/paper-toolbar.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="../paper-styles/paper-styles.html">
  12
  13 <!--
  14 `paper-toolbar` is a horizontal bar containing items that can be used for
  15 label, navigation, search and actions.  The items place inside the
  16 `paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
  17 `paper-toolbar`'s Shadow DOM.  You can use flex attributes to control the items'
  18 sizing.
  19
  20 Example:
  21
  22     <paper-toolbar>
  23       <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
  24       <div class="title">Title</div>
  25       <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
  26     </paper-toolbar>
  27
  28 `paper-toolbar` has a standard height, but can made be taller by setting `tall`
  29 class on the `paper-toolbar`.  This will make the toolbar 3x the normal height.
  30
  31     <paper-toolbar class="tall">
  32       <paper-icon-button icon="menu"></paper-icon-button>
  33     </paper-toolbar>
  34
  35 Apply `medium-tall` class to make the toolbar medium tall.  This will make the
  36 toolbar 2x the normal height.
  37
  38     <paper-toolbar class="medium-tall">
  39       <paper-icon-button icon="menu"></paper-icon-button>
  40     </paper-toolbar>
  41
  42 When `tall`, items can pin to either the top (default), middle or bottom.  Use
  43 `middle` class for middle content and `bottom` class for bottom content.
  44
  45     <paper-toolbar class="tall">
  46       <paper-icon-button icon="menu"></paper-icon-button>
  47       <div class="middle title">Middle Title</div>
  48       <div class="bottom title">Bottom Title</div>
  49     </paper-toolbar>
  50
  51 For `medium-tall` toolbar, the middle and bottom contents overlap and are
  52 pinned to the bottom.  But `middleJustify` and `bottomJustify` attributes are
  53 still honored separately.
  54
  55 To make an element completely fit at the bottom of the toolbar, use `fit` along
  56 with `bottom`.
  57
  58     <paper-toolbar class="tall">
  59       <div id="progressBar" class="bottom fit"></div>
  60     </paper-toolbar>
  61
  62 ### Styling
  63
  64 The following custom properties and mixins are available for styling:
  65
  66 Custom property | Description | Default
  67 ----------------|-------------|----------
  68 `--paper-toolbar-background` | Toolbar background color     | `--default-primary-color`
  69 `--paper-toolbar-color`      | Toolbar foreground color     | `--text-primary-color`
  70 `--paper-toolbar`            | Mixin applied to the toolbar | `{}`
  71
  72 ### Accessibility
  73
  74 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `title` will
  75 be used as the label of the toolbar via `aria-labelledby`.
  76
  77 @demo demo/index.html
  78 -->
  79
  80 <dom-module id="paper-toolbar">
  81
  82   <style>
  83     :host {
  84       /* technical */
  85       display: block;
  86       position: relative;
  87       box-sizing: border-box;
  88       -moz-box-sizing: border-box;
  89
  90       /* size */
  91       height: 64px;
  92
  93       background: var(--paper-toolbar-background, --default-primary-color);
  94       color: var(--paper-toolbar-color, --text-primary-color);
  95
  96       @apply(--paper-toolbar);
  97     }
  98
  99     :host(.animate) {
 100       /* transition */
 101       transition: height 0.18s ease-in;
 102     }
 103
 104     :host(.medium-tall) {
 105       height: 128px;
 106     }
 107
 108     :host(.tall) {
 109       height: 192px;
 110     }
 111
 112     .toolbar-tools {
 113       position: relative;
 114       height: 64px;
 115       padding: 0 16px;
 116       pointer-events: none;
 117     }
 118
 119     /*
 120      * TODO: Where should media query breakpoints live so they can be shared between elements?
 121      */
 122
 123     @media (max-width: 639px) {
 124       :host {
 125         height: 56px;
 126       }
 127
 128       :host(.medium-tall) {
 129         height: 112px;
 130       }
 131
 132       :host(.tall) {
 133         height: 168px;
 134       }
 135
 136       .toolbar-tools {
 137         height: 56px;
 138       }
 139     }
 140
 141     #topBar {
 142       position: relative;
 143     }
 144
 145     /* middle bar */
 146     #middleBar {
 147       position: absolute;
 148       top: 0;
 149       right: 0;
 150       left: 0;
 151     }
 152
 153     :host(.tall) #middleBar,
 154     :host(.medium-tall) #middleBar {
 155       -webkit-transform: translateY(100%);
 156       transform: translateY(100%);
 157     }
 158
 159     /* bottom bar */
 160     #bottomBar {
 161       position: absolute;
 162       right: 0;
 163       bottom: 0;
 164       left: 0;
 165     }
 166
 167     /*
 168      * make elements (e.g. buttons) respond to mouse/touch events
 169      *
 170      * `.toolbar-tools` disables touch events so multiple toolbars can stack and not
 171      * absorb events. All children must have pointer events re-enabled to work as
 172      * expected.
 173      */
 174     .toolbar-tools > ::content > *:not([disabled]) {
 175       pointer-events: auto;
 176     }
 177
 178     .toolbar-tools > ::content .title {
 179       @apply(--paper-font-title);
 180       @apply(--layout-flex);
 181
 182       pointer-events: none;
 183       text-overflow: ellipsis;
 184       white-space: nowrap;
 185       overflow: hidden;
 186
 187       /*
 188        * Polymer/polymer/issues/1525
 189        * --paper-font-title defines a `font-weight`
 190        * let's override its value, but we need `important!`
 191        * because all mixins are resolved in rule's selector that has higher precedence
 192        * than the current selector.
 193        */
 194       font-weight: 400 !important;
 195     }
 196
 197     /**
 198      * TODO: Refactor these selectors
 199      * Work in progress.
 200      */
 201     .toolbar-tools > ::content paper-icon-button[icon=menu] {
 202       margin-right: 24px;
 203     }
 204
 205     .toolbar-tools > ::content > .title,
 206     .toolbar-tools > ::content[select=".middle"] > .title,
 207     .toolbar-tools > ::content[select=".bottom"] > .title {
 208       margin-left: 56px;
 209     }
 210
 211     .toolbar-tools > ::content > paper-icon-button + .title,
 212     .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title,
 213     .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title {
 214       margin-left: 0;
 215     }
 216
 217     .toolbar-tools > ::content > .fit {
 218       position: absolute;
 219       top: auto;
 220       right: 0;
 221       bottom: 0;
 222       left: 0;
 223       width: auto;
 224       margin: 0;
 225     }
 226
 227   </style>
 228
 229   <template>
 230
 231     <div id="topBar" class$="[[_computeBarClassName(justify)]]">
 232       <content select=":not(.middle):not(.bottom)"></content>
 233     </div>
 234
 235     <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">
 236       <content select=".middle"></content>
 237     </div>
 238
 239     <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">
 240       <content select=".bottom"></content>
 241     </div>
 242
 243   </template>
 244
 245 </dom-module>
 246
 247 <script>
 248
 249   (function() {
 250
 251     'use strict';
 252
 253     function classNames(obj) {
 254       var classNames = [];
 255       for (var key in obj) {
 256         if (obj.hasOwnProperty(key) && obj[key]) {
 257           classNames.push(key);
 258         }
 259       }
 260
 261       return classNames.join(' ');
 262     }
 263
 264     Polymer({
 265
 266       is: 'paper-toolbar',
 267
 268       hostAttributes: {
 269         'role': 'toolbar'
 270       },
 271
 272       properties: {
 273
 274         /**
 275          * Controls how the items are aligned horizontally when they are placed
 276          * at the bottom.
 277          * Options are `start`, `center`, `end`, `justified` and `around`.
 278          *
 279          * @attribute bottomJustify
 280          * @type string
 281          * @default ''
 282          */
 283         bottomJustify: {
 284           type: String,
 285           value: ''
 286         },
 287
 288         /**
 289          * Controls how the items are aligned horizontally.
 290          * Options are `start`, `center`, `end`, `justified` and `around`.
 291          *
 292          * @attribute justify
 293          * @type string
 294          * @default ''
 295          */
 296         justify: {
 297           type: String,
 298           value: ''
 299         },
 300
 301         /**
 302          * Controls how the items are aligned horizontally when they are placed
 303          * in the middle.
 304          * Options are `start`, `center`, `end`, `justified` and `around`.
 305          *
 306          * @attribute middleJustify
 307          * @type string
 308          * @default ''
 309          */
 310         middleJustify: {
 311           type: String,
 312           value: ''
 313         }
 314
 315       },
 316
 317       attached: function() {
 318         this._observer = this._observe(this);
 319         this._updateAriaLabelledBy();
 320       },
 321
 322       detached: function() {
 323         if (this._observer) {
 324           this._observer.disconnect();
 325         }
 326       },
 327
 328       _observe: function(node) {
 329         var observer = new MutationObserver(function() {
 330           this._updateAriaLabelledBy();
 331         }.bind(this));
 332         observer.observe(node, {
 333           childList: true,
 334           subtree: true
 335         });
 336         return observer;
 337       },
 338
 339       _updateAriaLabelledBy: function() {
 340         var labelledBy = [];
 341         var contents = Polymer.dom(this.root).querySelectorAll('content');
 342         for (var content, index = 0; content = contents[index]; index++) {
 343           var nodes = Polymer.dom(content).getDistributedNodes();
 344           for (var node, jndex = 0; node = nodes[jndex]; jndex++) {
 345             if (node.classList && node.classList.contains('title')) {
 346               if (node.id) {
 347                 labelledBy.push(node.id);
 348               } else {
 349                 var id = 'paper-toolbar-label-' + Math.floor(Math.random() * 10000);
 350                 node.id = id;
 351                 labelledBy.push(id);
 352               }
 353             }
 354           }
 355         }
 356         if (labelledBy.length > 0) {
 357           this.setAttribute('aria-labelledby', labelledBy.join(' '));
 358         }
 359       },
 360
 361       _computeBarClassName: function(barJustify) {
 362         var classObj = {
 363           'center': true,
 364           'horizontal': true,
 365           'layout': true,
 366           'toolbar-tools': true
 367         };
 368
 369         // If a blank string or any falsy value is given, no other class name is
 370         // added.
 371         if (barJustify) {
 372           var justifyClassName = (barJustify === 'justified') ?
 373               barJustify :
 374               barJustify + '-justified';
 375
 376           classObj[justifyClassName] = true;
 377         }
 378
 379         return classNames(classObj);
 380       }
 381
 382     });
 383
 384   }());
 385
 386 </script>