WebCompDev / 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-flex-layout/classes/iron-flex-layout.html">

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

  <link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html">
  <link rel="import" href="../iron-icon/iron-icon.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:
  

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

          <a href="#link1" class="horizontal center-center layout">TAB ONE</a>

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

          <a href="#link2" class="horizontal center-center layout">TAB TWO</a>

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

          <a href="#link3" class="horizontal center-center layout">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">

    <style>
  
      :host {
        @apply(--layout);
        @apply(--layout-center);
  
        height: 48px;
        font-size: 14px;
        font-weight: 500;
        overflow: hidden;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
  
        @apply(--paper-tabs);
      }
  
      #tabsContainer {
        position: relative;
        height: 100%;
        white-space: nowrap;
        overflow: hidden;
      }
  
      #tabsContent {
        height: 100%;
      }
  
      #tabsContent.scrollable {
        position: absolute;
        white-space: nowrap;
      }
  
      .hidden {
        display: none;
      }
  
      .not-visible {
        opacity: 0;
        cursor: default;
      }
  
      paper-icon-button {
        width: 24px;
        padding: 16px;
      }
  
      #selectionBar {
        position: absolute;
        height: 2px;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--paper-tabs-selection-bar-color, --paper-yellow-a100);
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scale(0);
        transform: scale(0);
        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>

    <template>

      <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" class="flex" 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>

  </dom-module>

  <script>

    Polymer({

      is: 'paper-tabs',

      behaviors: [
        Polymer.IronResizableBehavior,
        Polymer.IronMenubarBehavior
      ],

      properties: {

        /**
         * If true, ink ripple effect is disabled.
         */
        noink: {
          type: Boolean,
          value: false

        },
  

        /**
         * 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'
      },

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

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

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

        return '';
      },

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

      _computeSelectionBarClass: function(noBar, alignBottom) {
        if (noBar) {
          return 'hidden';
        } else if (alignBottom) {
          return 'align-bottom';
        }
      },
  
      // 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>