WebCompDev / COMPONENTS

  <!--
  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="../paper-styles/paper-styles.html">

  
  <!--

  `paper-toolbar` is a horizontal bar containing items that can be used for

  label, navigation, search and actions.  The items place inside the

  `paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
  `paper-toolbar`'s Shadow DOM.  You can use flex attributes to control the items'
  sizing.
  
  Example:
  

      <paper-toolbar>
        <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
        <div class="title">Title</div>
        <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
      </paper-toolbar>

  
  `paper-toolbar` has a standard height, but can made be taller by setting `tall`
  class on the `paper-toolbar`.  This will make the toolbar 3x the normal height.
  

      <paper-toolbar class="tall">
        <paper-icon-button icon="menu"></paper-icon-button>
      </paper-toolbar>

  
  Apply `medium-tall` class to make the toolbar medium tall.  This will make the
  toolbar 2x the normal height.
  

      <paper-toolbar class="medium-tall">
        <paper-icon-button icon="menu"></paper-icon-button>
      </paper-toolbar>

  
  When `tall`, items can pin to either the top (default), middle or bottom.  Use
  `middle` class for middle content and `bottom` class for bottom content.
  

      <paper-toolbar class="tall">
        <paper-icon-button icon="menu"></paper-icon-button>
        <div class="middle title">Middle Title</div>
        <div class="bottom title">Bottom Title</div>
      </paper-toolbar>

  
  For `medium-tall` toolbar, the middle and bottom contents overlap and are
  pinned to the bottom.  But `middleJustify` and `bottomJustify` attributes are
  still honored separately.
  
  To make an element completely fit at the bottom of the toolbar, use `fit` along
  with `bottom`.
  

      <paper-toolbar class="tall">
        <div id="progressBar" class="bottom fit"></div>
      </paper-toolbar>

  
  ### Styling
  
  The following custom properties and mixins are available for styling:
  
  Custom property | Description | Default
  ----------------|-------------|----------

  `--paper-toolbar-background` | Toolbar background color     | `--default-primary-color`
  `--paper-toolbar-color`      | Toolbar foreground color     | `--text-primary-color`

  `--paper-toolbar`            | Mixin applied to the toolbar | `{}`

  
  ### Accessibility
  
  `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `title` will
  be used as the label of the toolbar via `aria-labelledby`.
  
  @demo demo/index.html
  -->
  
  <dom-module id="paper-toolbar">

    <style>
      :host {
        /* technical */
        display: block;
        position: relative;
        box-sizing: border-box;
        -moz-box-sizing: border-box;

        /* size */
        height: 64px;

        background: var(--paper-toolbar-background, --default-primary-color);
        color: var(--paper-toolbar-color, --text-primary-color);

        @apply(--paper-toolbar);
      }

      :host(.animate) {
        /* transition */
        transition: height 0.18s ease-in;
      }

      :host(.medium-tall) {
        height: 128px;
      }

      :host(.tall) {
        height: 192px;
      }

      .toolbar-tools {
        position: relative;
        height: 64px;
        padding: 0 16px;
        pointer-events: none;
      }

      /*
       * TODO: Where should media query breakpoints live so they can be shared between elements?
       */

      @media (max-width: 639px) {
        :host {
          height: 56px;

        }
  

        :host(.medium-tall) {
          height: 112px;

        }
  

        :host(.tall) {
          height: 168px;

        }
  

        .toolbar-tools {
          height: 56px;

        }

      }
  
      #topBar {
        position: relative;
      }
  
      /* middle bar */
      #middleBar {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
      }
  
      :host(.tall) #middleBar,
      :host(.medium-tall) #middleBar {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
      }
  
      /* bottom bar */
      #bottomBar {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
      }
  
      /*
       * make elements (e.g. buttons) respond to mouse/touch events
       *
       * `.toolbar-tools` disables touch events so multiple toolbars can stack and not
       * absorb events. All children must have pointer events re-enabled to work as
       * expected.
       */
      .toolbar-tools > ::content > *:not([disabled]) {
        pointer-events: auto;
      }
  
      .toolbar-tools > ::content .title {
        @apply(--paper-font-title);
        @apply(--layout-flex);
  
        pointer-events: none;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

  
        /*

         * Polymer/polymer/issues/1525
         * --paper-font-title defines a `font-weight`
         * let's override its value, but we need `important!`
         * because all mixins are resolved in rule's selector that has higher precedence
         * than the current selector.

         */

        font-weight: 400 !important;
      }
  
      /**
       * TODO: Refactor these selectors
       * Work in progress.
       */
      .toolbar-tools > ::content paper-icon-button[icon=menu] {
        margin-right: 24px;
      }
  
      .toolbar-tools > ::content > .title,
      .toolbar-tools > ::content[select=".middle"] > .title,
      .toolbar-tools > ::content[select=".bottom"] > .title {
        margin-left: 56px;
      }
  
      .toolbar-tools > ::content > paper-icon-button + .title,
      .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title,
      .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title {
        margin-left: 0;
      }
  
      .toolbar-tools > ::content > .fit {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        margin: 0;
      }
  
    </style>

    <template>

      <div id="topBar" class$="[[_computeBarClassName(justify)]]">
        <content select=":not(.middle):not(.bottom)"></content>
      </div>

      <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">
        <content select=".middle"></content>
      </div>

      <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">
        <content select=".bottom"></content>
      </div>

    </template>

  </dom-module>

  <script>

    (function() {

      'use strict';

      function classNames(obj) {
        var classNames = [];
        for (var key in obj) {
          if (obj.hasOwnProperty(key) && obj[key]) {
            classNames.push(key);
          }

        }

        return classNames.join(' ');
      }

      Polymer({

        is: 'paper-toolbar',
  
        hostAttributes: {
          'role': 'toolbar'
        },
  
        properties: {

          /**
           * Controls how the items are aligned horizontally when they are placed
           * at the bottom.
           * Options are `start`, `center`, `end`, `justified` and `around`.

           *
           * @attribute bottomJustify
           * @type string
           * @default ''

           */
          bottomJustify: {
            type: String,
            value: ''
          },
  
          /**
           * Controls how the items are aligned horizontally.
           * Options are `start`, `center`, `end`, `justified` and `around`.

           *
           * @attribute justify
           * @type string
           * @default ''

           */
          justify: {
            type: String,
            value: ''
          },
  
          /**
           * Controls how the items are aligned horizontally when they are placed
           * in the middle.
           * Options are `start`, `center`, `end`, `justified` and `around`.

           *
           * @attribute middleJustify
           * @type string
           * @default ''

           */
          middleJustify: {
            type: String,
            value: ''
          }
  
        },
  
        attached: function() {
          this._observer = this._observe(this);
          this._updateAriaLabelledBy();
        },
  
        detached: function() {
          if (this._observer) {
            this._observer.disconnect();
          }
        },
  
        _observe: function(node) {
          var observer = new MutationObserver(function() {
            this._updateAriaLabelledBy();
          }.bind(this));
          observer.observe(node, {
            childList: true,
            subtree: true
          });
          return observer;
        },
  
        _updateAriaLabelledBy: function() {
          var labelledBy = [];
          var contents = Polymer.dom(this.root).querySelectorAll('content');
          for (var content, index = 0; content = contents[index]; index++) {
            var nodes = Polymer.dom(content).getDistributedNodes();
            for (var node, jndex = 0; node = nodes[jndex]; jndex++) {
              if (node.classList && node.classList.contains('title')) {
                if (node.id) {
                  labelledBy.push(node.id);
                } else {
                  var id = 'paper-toolbar-label-' + Math.floor(Math.random() * 10000);
                  node.id = id;
                  labelledBy.push(id);
                }
              }
            }
          }
          if (labelledBy.length > 0) {
            this.setAttribute('aria-labelledby', labelledBy.join(' '));
          }
        },
  

        _computeBarClassName: function(barJustify) {
          var classObj = {
            'center': true,
            'horizontal': true,
            'layout': true,
            'toolbar-tools': true
          };
  
          // If a blank string or any falsy value is given, no other class name is
          // added.
          if (barJustify) {
            var justifyClassName = (barJustify === 'justified') ?
                barJustify :
                barJustify + '-justified';
  
            classObj[justifyClassName] = true;
          }

          return classNames(classObj);

        }

      });

  
    }());
  
  </script>