at-carbon-tabs.html

<link rel="import" href="../tangere/tangere.html">

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

<link rel="import" href="../at-core-style-classes/at-core-style-classes.html" />
<link rel="import" href="../at-carbon-icon/at-carbon-icon.html">

<link rel="import" href="../at-core-resize-sensor/at-core-resize-sensor.html">

<link rel="import" href="at-carbon-tab.html">

<dom-module id="at-carbon-tabs">
  <template>
    <style include="at-core-style-classes">
      :host {
        display: block;
        box-sizing: border-box;

        height: 48px;
        font-size: 14px;
        font-weight: 500;
      }
      
      .wrapper {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .clear-float {
        clear: both;
      }

      .content-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .scroll-button-container {
        display: block;
        box-sizing: border-box;
        
        position: absolute;
        width: 24px;
        height: 24px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
      }

      .scroll-button-container.left {
        left: 0;
      }

      .scroll-button-container.right {
        right: 0;
      }

      .scroll-button-container .scroll-button {
        cursor: pointer;
      }

      .scroll-button-right {
        position: absolute;
        top: 1px;
        right: -8px;
      }

      .scroll-button-container .scroll-button.hide {
        display: none;
        opacity: 0;
      }

      #tabsContainer {
        position: relative;
        height: 100%;
        white-space: nowrap;
        overflow: hidden;
        margin: 0;
      }

      #tabsContent {
        position: relative;
        height: 100%;
      }

      #tabsContent.scrollable {
        position: absolute;
      }

      #selectionBar {
        position: absolute;
        height: 2px;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #03a9f4;
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scale(0);
        transform: scale(0);
        transition: -webkit-transform;
        transition: transform;
      }

      #selectionBar.hidden {
        display: none;
      }

      #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 > ::slotted() > *:not(#selectionBar) {
        height: 100%;
      }

      at-carbon-icon {
        margin-top: 4px;
        width: var(--at-inline-icon-size);
        height: var(--at-inline-icon-size);
      }

      [hidden] * {
        display: none !important;
      }
    </style>
    
    <div class="wrapper">
      <at-core-resize-sensor id="resizeSensor"></at-core-resize-sensor>
      <div class="clear-float"></div>
      <div id="contentWrapper" class="content-wrapper">
        <div id="leftScrollButton" hidden$="[[_computeScrollButtonHidden(scrollable, hideScrollButton)]]" class="scroll-button-container left">
          <at-carbon-icon icon="caret-left" class$="[[_computeIconClass(leftHidden)]] scroll-button" on-down="_onLeftScrollButtonDown" on-up="_onScrollButtonUp"></at-carbon-icon>
        </div>

        <div id="tabsContainer" on-scroll="_scroll" class="font-subhead">

          <iron-selector id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]" selected="{{selected}}" selected-item="{{_tab}}" attr-for-selected="[[attrForSelected]]" selectable="at-carbon-tab">

            <slot></slot>

            <div id="selectionBar" class$="[[_computeSelectionBarClass(nobar, alignBottom)]] scroll-button" on-transitionend="_onBarTransitionEnd"></div>

          </iron-selector>

        </div>

        <div id="rightScrollButton" hidden$="[[_computeScrollButtonHidden(scrollable, hideScrollButton)]]" class="scroll-button-container right">
          <at-carbon-icon icon="caret-right" class$="[[_computeIconClass(rightHidden)]] scroll-button scroll-button-right" on-down="_onRightScrollButtonDown" on-up="_onScrollButtonUp"></at-carbon-icon>
        </div>
      </div>
    </div>

  </template>

</dom-module>

<script>
  Polymer({

    is: 'at-carbon-tabs',

    behaviors: [
      Polymer.IronResizableBehavior
    ],

    properties: {

      /**
       * If true, the bottom bar to indicate the selected tab will not be shown.
       *
       * @attribute nobar
       * @type Boolean
       * @default false
       */
      nobar: {
        type: Boolean,
        value: false
      },

      /**
       * If true, the slide effect for the bottom bar is disabled.
       *
       * @attribute noslide
       * @type Boolean
       * @default false
       */
      noslide: {
        type: Boolean,
        value: false
      },

      /**
       * If true, tabs are scrollable and the tab width is based on the label width.
       *
       * @attribute scrollable
       * @type Boolean
       * @default false
       */
      scrollable: {
        type: Boolean,
        value: false,
        observer: '_scrollableChanged'
      },

      /**
       * If true, dragging on the tabs to scroll is disabled.
       *
       * @attribute disableDrag
       * @type Boolean
       * @default false
       */
      disableDrag: {
        type: Boolean,
        value: false
      },

      /**
       * If true, scroll buttons (left/right arrow) will be hidden for scrollable tabs.
       *
       * @attribute hideScrollButton
       * @type Boolean
       * @default false
       */
      hideScrollButton: {
        type: Boolean,
        value: false
      },

      /**
       * If true, the tabs are aligned to bottom (the selection bar appears at the top).
       *
       @attribute alignBottom
       @type Boolean
       @default false
       */
      alignBottom: {
        type: Boolean,
        value: false
      },

      /**
       * Gets or sets the selected element. The default is to use the index of the item.
       *
       * @attribute selected
       * @type {string}
       */
      selected: {
        type: String,
        notify: true,
        observer: 'selectedChanged',
        reflectToAttribute: true
      },

      attrForSelected: {
        type: String,
        value: 'id'
      },

      tabs: {
        type: Array,
        value: function() {
          return [];
        },
        observer: "_tabsChanged",
        schema: {
          items: {
            type: "object",
            properties: {
              value: {
                type: "string",
                title: "Value"
              },
              title: {
                type: "string",
                title: "Title"
              },
              disabled: {
                type: "boolean",
                title: "Disabled"
              },
              icon: {
                type: "string",
                title: "Icon"
              },
              badgeLabel: {
                type: "string",
                title: "Badge Label"
              },
              badgeColor: {
                type: "string",
                title: "Badge Color"
              }
            }
          }
        },
        layout: "horizontal",
        title: "Tabs",
        xgridcols: "12"
      },

      position: {
        type: String,
        value: "left",
        observer: "_positionChagned",
        xvaluelist: [
          { title: "Left", value: "left" },
          { title: "Center", value: "center" },
          { title: "Right", value: "right" }
        ],
        xtype: "enum",
      },

      tabStyle: {
        type: String,
        value: "default",
        observer: "_tabStyleChanged",
        xvaluelist: [
          { title: "Default", value: "default" },
          { title: "Tab", value: "tab" },
          { title: "Pill", value: "pill" }
        ],
        xtype: "enum"
      },

      size: {
        type: String,
        value: "compact",
        observer: "_sizeChanged",
        xvaluelist: [
          { title: "Compact", value: "compact" },
          { title: "Large", value: "large" }
        ],
        xtype: "enum"
      },

      _step: {
        value: 10
      },

      _holdDelay: {
        value: 1
      },

      _tab: {
        observer: '_tabChanged'
      }

    },

    listeners: {
      'iron-resize': '_onResize'
    },

    attached: function() {
      this.notifyResize();
      var self = this;
      var resizeSensor = this.$.resizeSensor;
      var tabsContainer = this.$.tabsContent;
      resizeSensor.reset();
      resizeSensor.addEventListener('resize-sensed', function(event) {
        var rightButtonWidth = self.$.rightScrollButton.getBoundingClientRect().width;
        var tcWidth = tabsContainer.scrollWidth;
        var carbonTabsWidth = self.scrollWidth - rightButtonWidth;
        self.rightHidden = carbonTabsWidth > tcWidth;
      });
      this._scroll();

      /*
        Update. setInterval is now used instead of requestAnimationFrame
        renderSelectedTab function is used to paint tab as selected
        each 100ms we inspect whether currently selected tab has dimensions
        if it has we clearInterval and paint tab as selected
        else we wait 100ms

        we call renderSelectedTab right after setInterval to cover the case when
        tab already has dimensions. We paint it and clearInterval immediately
       */
      var renderSelectedTabInterval;

      function renderSelectedTab() {
        if (!self._tab) { return; }
        var tabRect = self._tab.getBoundingClientRect();
        if (tabRect.height > 0 && tabRect.width > 0) {
          clearInterval(renderSelectedTabInterval);
          self._tabChanged(self._tab);
        }
      }

      renderSelectedTabInterval = setInterval(renderSelectedTab, 100);
      renderSelectedTab();

      // initialize style on children
      if(!this._isAttached) {
        this._isAttached = true;
        this._sizeChanged(this.size);
        this._tabStyleChanged(this.tabStyle);
      }
    },

    /**
     * This function switches the current tab to the tab with tabId
     */
    selectedChanged: function(newValue, oldValue) {
      this.fire('tab-changed', {
        value: {
          currentTab: newValue,
          previousTab: oldValue
        }
      });
    },

    _computeScrollButtonHidden: function(scrollable, hideScrollButton) {
      return !this.scrollable || this.hideScrollButton;
    },

    _computeIconClass: function(hidden) {
      if (hidden) {
        return 'hide';
      }
    },

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

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

    _scrollableChanged: function(newValue, oldValue) {
      var tabs = this._getTabsList();
      tabs.forEach(function(tab) {
        this.toggleClass('scrollable', newValue, tab);
      }, this);
    },

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

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

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

    _scroll: function() {
      var scrollLeft;

      if (!this.scrollable) {
        return;
      }

      scrollLeft = this.$.tabsContainer.scrollLeft;
      var tabContainerScrollSize = this._tabContainerScrollSize;
      var width = this.$.tabsContainer.getBoundingClientRect().width;
      var scrollWidth = this.$.tabsContainer.scrollWidth;
      this.leftHidden = scrollLeft === 0;
      this.rightHidden = Math.ceil(scrollLeft + width) >= Math.floor(scrollWidth);
    },

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

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

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

    _scrollToLeft: function() {
      this.$.tabsContainer.scrollLeft -= this._step;
    },

    _scrollToRight: function() {
      this.$.tabsContainer.scrollLeft += this._step;
    },

    _tabChanged: function(tab) {
      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._old && !this.noslide) {
        this._old = tab;
      }

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

      var oldRect = this._old.getBoundingClientRect();
      var oldIndex = this.$.tabsContent.indexOf(this._old);
      var index = this.$.tabsContent.indexOf(tab);

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

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

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

      if (!this.noslide) {
        this._old = tab;
      }
    },

    _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) {
      if (window.isNaN(width) || window.isNaN(left)) { return; }

      this._width = width;
      this._left = left;
      this.transform('translateX(' + left + '%) 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');
      }
    },

    _tabsChanged: function(newValue, oldValue) {
      if (this._isString(newValue)) {
        try {
          this.tabs = JSON.parse(newValue);
        } catch (e) {
          console.log(e);
        }
        return;
      }

      if (!this._isArray(newValue)) return;

      // if slotted items exist return;      
      var slotted = Polymer.dom(this).children;
      if (slotted.length) return;
      
      // clear previous data if there are no slotted items 
      var tabsContent = this.$.tabsContent;
      var childrenToRemove = Polymer.dom(this.$.tabsContent).getEffectiveChildNodes();
      Array.prototype.forEach.call(childrenToRemove, function(childToRemove) {
        if (childToRemove.id == "selectionBar") return;
        Polymer.dom(tabsContent).removeChild(childToRemove);
      });

      if (newValue.length == 0) return;

      var self = this;
      newValue.forEach(function(tabDef) {
        var carbonTab = self.create('at-carbon-tab');

        carbonTab.badgeLabel = tabDef.badgeLabel;
        carbonTab.badgeColor = tabDef.badgeColor;
        carbonTab.icon = tabDef.icon;
        carbonTab.label = tabDef.title;
        
        carbonTab.tabStyle = self.tabStyle;
        carbonTab.size = self.size;

        carbonTab.setAttribute('id', tabDef.value);
        self.toggleAttribute('disabled', tabDef.disabled, carbonTab);
        
        Polymer.dom(self.$.tabsContent).insertBefore(carbonTab, self.$.selectionBar);
      });

      if (!this.selected) {
        this.selected = newValue[0].value;
      }

      if (this._tab) {
        this._tabChanged(this._tab);
      }
    },

    _positionChagned: function(newValue, oldValue) {
      this.toggleClass("layout-start-justified", newValue == "left", this.$.tabsContent);
      this.toggleClass("layout-center-justified", newValue == "center", this.$.tabsContent);
      this.toggleClass("layout-end-justified", newValue == "right", this.$.tabsContent);

      this._tabChanged(this._tab);
    },
    
    _tabStyleChanged: function(newValue, oldValue) {

      if(!this._isAttached) return;

      var formTabs = this._getTabsList();

      Array.prototype.forEach.call(formTabs, function(formTab, index) {
        formTab.tabStyle = newValue;
      });

      this._tabChanged(this._tab);
    },

    _sizeChanged: function(newValue, oldValue) {

      if (!this._isAttached) return;

      var formTabs = this._getTabsList();

      Array.prototype.forEach.call(formTabs, function(formTab, index) {
        formTab.size = newValue;
      });

      this._tabChanged(this._tab);
    },

    _getTabsList: function () {
      var formTabs = Polymer.dom(this.$.tabsContent).querySelectorAll("at-carbon-tab");

      if (formTabs.length == 0) {
        formTabs = Polymer.dom(this).querySelectorAll("at-carbon-tab");
      }

      return formTabs;
    },

    _isString: function(obj) { return Object.prototype.toString.call(obj) === "[object String]"; },

    _isArray: function(obj) { return Object.prototype.toString.call(obj) === "[object Array]"; }

  });
</script>