SGH / COMPONENTS

  <!--
  @license
  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="../iron-flex-layout/iron-flex-layout.html">

  <link rel="import" href="../iron-icon/iron-icon.html">

  <link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html">
  <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">

  <link rel="import" href="../paper-icon-button/paper-icon-button.html">
  <link rel="import" href="../paper-styles/color.html">
  <link rel="import" href="paper-tabs-icons.html">
  <link rel="import" href="paper-tab.html">
  
  <!--

  Material design: [Tabs](https://www.google.com/design/spec/components/tabs.html)
  

  `paper-tabs` makes it easy to explore and switch between different views or functional aspects of
  an app, or to browse categorized data sets.
  
  Use `selected` property to get or set the selected tab.
  
  Example:
  
      <paper-tabs selected="0">
        <paper-tab>TAB 1</paper-tab>
        <paper-tab>TAB 2</paper-tab>
        <paper-tab>TAB 3</paper-tab>
      </paper-tabs>
  
  See <a href="#paper-tab">paper-tab</a> for more information about
  `paper-tab`.
  
  A common usage for `paper-tabs` is to use it along with `iron-pages` to switch
  between different views.
  
      <paper-tabs selected="{{selected}}">
        <paper-tab>Tab 1</paper-tab>
        <paper-tab>Tab 2</paper-tab>
        <paper-tab>Tab 3</paper-tab>
      </paper-tabs>
  
      <iron-pages selected="{{selected}}">
        <div>Page 1</div>
        <div>Page 2</div>
        <div>Page 3</div>
      </iron-pages>
  
  
  To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>`
  element in `paper-tab`.
  
  Example:
  

      <style is="custom-style">
        .link {
          @apply(--layout-horizontal);
          @apply(--layout-center-center);
        }
      </style>
  

      <paper-tabs selected="0">
        <paper-tab link>

          <a href="#link1" class="link">TAB ONE</a>

        </paper-tab>
        <paper-tab link>

          <a href="#link2" class="link">TAB TWO</a>

        </paper-tab>
        <paper-tab link>

          <a href="#link3" class="link">TAB THREE</a>

        </paper-tab>
      </paper-tabs>
  
  ### Styling
  
  The following custom properties and mixins are available for styling:
  
  Custom property | Description | Default
  ----------------|-------------|----------
  `--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yellow-a100`
  `--paper-tabs` | Mixin applied to the tabs | `{}`
  
  @hero hero.svg
  @demo demo/index.html
  -->
  
  <dom-module id="paper-tabs">

    <template>
      <style>
        :host {
          @apply(--layout);
          @apply(--layout-center);
  
          height: 48px;
          font-size: 14px;
          font-weight: 500;
          overflow: hidden;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-user-select: none;
          user-select: none;
          -webkit-tap-highlight-color: rgba(0,0,0,0);
  
          @apply(--paper-tabs);
        }

        :host-context([dir=rtl]) {
          @apply(--layout-horizontal-reverse);
        }

        #tabsContainer {
          position: relative;
          height: 100%;
          white-space: nowrap;
          overflow: hidden;
          @apply(--layout-flex);
        }

        #tabsContent {
          height: 100%;
        }

        #tabsContent.scrollable {
          position: absolute;
          white-space: nowrap;
        }

        #tabsContent.horizontal {
          @apply(--layout-horizontal);
        }

        .hidden {
          display: none;
        }

        .not-visible {
          opacity: 0;
          cursor: default;
        }

        paper-icon-button {
          width: 48px;
          height: 48px;
          padding: 12px;
          margin: 0 4px;
        }

        #selectionBar {
          position: absolute;
          height: 2px;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: var(--paper-tabs-selection-bar-color, --paper-yellow-a100);
            -webkit-transform: scale(0);
          transform: scale(0);
            -webkit-transform-origin: left center;
          transform-origin: left center;
            transition: -webkit-transform;
          transition: transform;
  
          @apply(--paper-tabs-selection-bar);
        }

        #selectionBar.align-bottom {
          top: 0;
          bottom: auto;
        }

        #selectionBar.expand {
          transition-duration: 0.15s;
          transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
        }

        #selectionBar.contract {
          transition-duration: 0.18s;
          transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
        }

        #tabsContent > ::content > *:not(#selectionBar) {
          height: 100%;
        }
      </style>

      <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button>

      <div id="tabsContainer" on-track="_scroll" on-down="_down">
        <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]">
          <content select="*"></content>
          <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignBottom)]]"
              on-transitionend="_onBarTransitionEnd"></div>
        </div>
      </div>

      <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button>

    </template>

    <script>
      Polymer({
        is: 'paper-tabs',
  
        behaviors: [
          Polymer.IronResizableBehavior,
          Polymer.IronMenubarBehavior
        ],
  
        properties: {
          /**
           * If true, ink ripple effect is disabled. When this property is changed,
           * all descendant `<paper-tab>` elements have their `noink` property
           * changed to the new value as well.
           */
          noink: {
            type: Boolean,
            value: false,
            observer: '_noinkChanged'
          },
  
          /**
           * If true, the bottom bar to indicate the selected tab will not be shown.
           */
          noBar: {
            type: Boolean,
            value: false
          },
  
          /**
           * If true, the slide effect for the bottom bar is disabled.
           */
          noSlide: {
            type: Boolean,
            value: false
          },
  
          /**
           * If true, tabs are scrollable and the tab width is based on the label width.
           */
          scrollable: {
            type: Boolean,
            value: false
          },
  
          /**
           * If true, dragging on the tabs to scroll is disabled.
           */
          disableDrag: {
            type: Boolean,
            value: false
          },
  
          /**
           * If true, scroll buttons (left/right arrow) will be hidden for scrollable tabs.
           */
          hideScrollButtons: {
            type: Boolean,
            value: false
          },
  
          /**
           * If true, the tabs are aligned to bottom (the selection bar appears at the top).
           */
          alignBottom: {
            type: Boolean,
            value: false
          },
  
          /**
           * Gets or sets the selected element. The default is to use the index of the item.
           */
          selected: {
            type: String,
            notify: true
          },
  
          selectable: {
            type: String,
            value: 'paper-tab'
          },
  
          _step: {
            type: Number,
            value: 10
          },
  
          _holdDelay: {
            type: Number,
            value: 1
          },
  
          _leftHidden: {
            type: Boolean,
            value: false
          },
  
          _rightHidden: {
            type: Boolean,
            value: false
          },
  
          _previousTab: {
            type: Object
          }

        },
  

        hostAttributes: {
          role: 'tablist'

        },
  

        listeners: {
          'iron-resize': '_onResize',
          'iron-select': '_onIronSelect',
          'iron-deselect': '_onIronDeselect'

        },
  

        created: function() {
          this._holdJob = null;

        },
  

        ready: function() {
          this.setScrollDirection('y', this.$.tabsContainer);

        },
  

        _noinkChanged: function(noink) {
          var childTabs = Polymer.dom(this).querySelectorAll('paper-tab');
          childTabs.forEach(noink ? this._setNoinkAttribute : this._removeNoinkAttribute);

        },
  

        _setNoinkAttribute: function(element) {
          element.setAttribute('noink', '');

        },
  

        _removeNoinkAttribute: function(element) {
          element.removeAttribute('noink');

        },
  

        _computeScrollButtonClass: function(hideThisButton, scrollable, hideScrollButtons) {
          if (!scrollable || hideScrollButtons) {
            return 'hidden';
          }

          if (hideThisButton) {
            return 'not-visible';
          }

          return '';

        },
  

        _computeTabsContentClass: function(scrollable) {
          return scrollable ? 'scrollable' : 'horizontal';

        },
  

        _computeSelectionBarClass: function(noBar, alignBottom) {
          if (noBar) {
            return 'hidden';
          } else if (alignBottom) {
            return 'align-bottom';
          }
  
          return '';

        },
  

        // TODO(cdata): Add `track` response back in when gesture lands.

        _onResize: function() {
          this.debounce('_onResize', function() {
            this._scroll();
            this._tabChanged(this.selectedItem);
          }, 10);
        },

        _onIronSelect: function(event) {
          this._tabChanged(event.detail.item, this._previousTab);
          this._previousTab = event.detail.item;
          this.cancelDebouncer('tab-changed');
        },

        _onIronDeselect: function(event) {
          this.debounce('tab-changed', function() {
            this._tabChanged(null, this._previousTab);
          // See polymer/polymer#1305
          }, 1);
        },

        get _tabContainerScrollSize () {
          return Math.max(
            0,
            this.$.tabsContainer.scrollWidth -
              this.$.tabsContainer.offsetWidth
          );
        },

        _scroll: function(e, detail) {
          if (!this.scrollable) {
            return;
          }

          var ddx = (detail && -detail.ddx) || 0;
          this._affectScroll(ddx);
        },

        _down: function(e) {
          // go one beat async to defeat IronMenuBehavior
          // autorefocus-on-no-selection timeout
          this.async(function() {
            if (this._defaultFocusAsync) {
              this.cancelAsync(this._defaultFocusAsync);
              this._defaultFocusAsync = null;
            }
          }, 1);
        },

        _affectScroll: function(dx) {
          this.$.tabsContainer.scrollLeft += dx;

          var scrollLeft = this.$.tabsContainer.scrollLeft;

          this._leftHidden = scrollLeft === 0;
          this._rightHidden = scrollLeft === this._tabContainerScrollSize;
        },

        _onLeftScrollButtonDown: function() {
          this._scrollToLeft();
          this._holdJob = setInterval(this._scrollToLeft.bind(this), this._holdDelay);
        },

        _onRightScrollButtonDown: function() {
          this._scrollToRight();
          this._holdJob = setInterval(this._scrollToRight.bind(this), this._holdDelay);
        },

        _onScrollButtonUp: function() {
          clearInterval(this._holdJob);
          this._holdJob = null;
        },

        _scrollToLeft: function() {
          this._affectScroll(-this._step);
        },

        _scrollToRight: function() {
          this._affectScroll(this._step);
        },

        _tabChanged: function(tab, old) {
          if (!tab) {
            this._positionBar(0, 0);
            return;
          }

          var r = this.$.tabsContent.getBoundingClientRect();
          var w = r.width;
          var tabRect = tab.getBoundingClientRect();
          var tabOffsetLeft = tabRect.left - r.left;

          this._pos = {
            width: this._calcPercent(tabRect.width, w),
            left: this._calcPercent(tabOffsetLeft, w)
          };

          if (this.noSlide || old == null) {
            // position bar directly without animation
            this._positionBar(this._pos.width, this._pos.left);
            return;
          }

          var oldRect = old.getBoundingClientRect();
          var oldIndex = this.items.indexOf(old);
          var index = this.items.indexOf(tab);
          var m = 5;

          // bar animation: expand
          this.$.selectionBar.classList.add('expand');

          if (oldIndex < index) {
            this._positionBar(this._calcPercent(tabRect.left + tabRect.width - oldRect.left, w) - m,
                this._left);
          } else {
            this._positionBar(this._calcPercent(oldRect.left + oldRect.width - tabRect.left, w) - m,
                this._calcPercent(tabOffsetLeft, w) + m);
          }

          if (this.scrollable) {
            this._scrollToSelectedIfNeeded(tabRect.width, tabOffsetLeft);
          }
        },

        _scrollToSelectedIfNeeded: function(tabWidth, tabOffsetLeft) {
          var l = tabOffsetLeft - this.$.tabsContainer.scrollLeft;
          if (l < 0) {

            this.$.tabsContainer.scrollLeft += l;

          } else {
            l += (tabWidth - this.$.tabsContainer.offsetWidth);
            if (l > 0) {
              this.$.tabsContainer.scrollLeft += l;
            }

          }

        },
  
        _calcPercent: function(w, w0) {
          return 100 * w / w0;
        },

        _positionBar: function(width, left) {
          width = width || 0;
          left = left || 0;

          this._width = width;
          this._left = left;
          this.transform(
              'translate3d(' + left + '%, 0, 0) scaleX(' + (width / 100) + ')',
              this.$.selectionBar);
        },
  
        _onBarTransitionEnd: function(e) {
          var cl = this.$.selectionBar.classList;
          // bar animation: expand -> contract
          if (cl.contains('expand')) {
            cl.remove('expand');
            cl.add('contract');
            this._positionBar(this._pos.width, this._pos.left);
          // bar animation done
          } else if (cl.contains('contract')) {
            cl.remove('contract');
          }
        }
      });
    </script>
  </dom-module>