elation/components/elements/scripts/ui/tabs.js

Elation Javascript Component Framework

/** 
 * Tabs UI component
 *
 * @class tabs
 * @augments elation.ui.base
 * @memberof elation.ui
 * @todo this could probably inherit from ui.list to be more general
 *
 * @param {object} args
 * @param {string} args.items
 */
elation.require(['elements.ui.list', 'elements.ui.tabbar', 'elements.ui.tab'], function() {
  elation.requireCSS('ui.tabs');

  elation.elements.define('ui.tabs', class extends elation.elements.ui.list {
    init() {
      super.init();
      this.defineAttributes({
        itemcomponent: { type: 'string', default: 'ui.tab' },
        showcounts: { type: 'boolean', default: false },
        selectable: { type: 'boolean', default: false }
      });
      //this.collection = elation.elements.create('collection-simple');
/*
      if (this.args.items) {
        if (elation.utils.isArray(this.args.items)) {
          for (var i = 0; i < this.args.items.length; i++) {
            var item = this.args.items[i];
            if (elation.utils.isString(item)) {
              item = { name: item, label: item };
            }
            this.items.push(item);
          }
        } else {
          for (var k in this.args.items) {
            var item = this.args.items[k];
            if (!item.name) item.name = k;
            this.items.push(item);
          }
        }
      }
*/
    }
    create() {
      if (this.tabbar) return; // FIXME - create is being called twice
      this.buttons = false;
/*
      this.ul = elation.html.create({tag: 'ul', append: this.container});
      for (var i = 0; i < this.items.length; i++) {
        var tab = this.items[i];
        var tabargs = {};
        if (tab.tooltip) {
          tabargs.title = tab.tooltip;
        }
        this.add(tab);
      }
*/
      super.create();

      if (this.preview) {
        this.setItems([
          elation.elements.create('ui-tab', {
            append: this,
            label: 'One',
            content: 'Welcome to Tab One'
          }),
          elation.elements.create('ui-tab', {
            append: this,
            label: 'Two',
            content: 'You are now seeing Tab Two'
          }),
          elation.elements.create('ui-tab', {
            append: this,
            label: 'Three',
            content: 'And this is the final tab, Tab Three'
          })
        ]);
      }
      this.updateActiveTab();
      this.dispatchEvent({type: 'create'});

      elation.events.add(this, 'tablabelchange', ev => {
        let idx = this.items.indexOf(ev.target);
        if (idx != -1) {
          this.buttons[idx].label = ev.data;
          ev.stopPropagation();
        }
      });
    }
    setItems(items) {
      this.items = items;

      if (!this.tabbar) {
        this.tabbar = elation.elements.create('ui-tabbar', {
          append: this,
          itemcomponent: (this.showcounts ? 'ui.tabcountbutton' : 'ui.button')
        });
        elation.events.add(this.tabbar, 'click', (ev) => this.handleTabbarClick(ev));
      }
//console.log('create it!', this.items);
      this.tabbar.setButtons(this.getTabButtons());
      this.buttons = this.tabbar.items;
      if (this.selected) {
        this.setActiveTab(this.selected);
      } else {
        this.updateActiveTab();
      }

      for (var i = 0; i < this.items.length; i++) {
        let tab = this.items[i];
        if (!elation.events.hasEventListener(tab, 'countchange')) {
          elation.events.add(tab, 'countchange', (ev) => this.updateButtonCounts());
        }
      }
    }
    setActiveTab(name) {
      for (var k in this.items) {
        let tab = this.items[k],
            button = this.buttons[k];

        if (!(tab instanceof elation.elements.ui.tab)) continue;
        //if (this.items[name]) {
          //console.log('bing', name, this.items[name]);
          //this.items[name].select();
        //}
        if (k == name) {
          button.selected = true;
          if (tab.parentNode !== this) {
            this.appendChild(tab);
          }
          tab.select();
          tab.refresh();
        } else {
          tab.unselect();
          button.selected = false;
          if (tab.parentNode === this) {
            this.removeChild(tab);
          }
        }
      }
    }
    updateActiveTab() {
      var tabs = this.items;
      for (var i = 0; i < tabs.length; i++) {
        var tab = tabs[i];
        if (tab.selected || tab.selected === "") {
          this.setActiveTab(i);
          return;
        }
      }
      // No tab selected in mark-up, so default to the first tab
      this.setActiveTab(0);
    }
    getTabButtons() {
      if (!this.buttons) {
        var buttons = this.buttons = [];
        var items = this.items;
        for (var i = 0; i < items.length; i++) {
          let buttonargs = {
            label: items[i].label,
            name: i,
            disabled: items[i].disabled && items[i].disabled !== '',
            count: items[i].count || 0
          };
          buttons.push(buttonargs);
        }
      }
      return this.buttons;
    }
    updateButtonCounts() {
      for (var i = 0; i < this.items.length; i++) {
        this.buttons[i].count = this.items[i].count;
      }
    }
    handleTabbarClick(ev) {
      var button = ev.target;
      if (button instanceof elation.elements.ui.button) {
        this.setActiveTab(button.name);
      }
    }
    ui_tabitem_hover(ev) {
      if (this.hoveritem && this.hoveritem != ev.target) {
        //this.hoveritem.unhover();
      }
      this.hoveritem = ev.target;
      //this.hoveritem.hover();
    }
    ui_tabitem_select(ev) {
      if (this.selecteditem && this.selecteditem != ev.target) {
        this.selecteditem.unselect();
      }
      this.selecteditem = ev.target;
      //this.selecteditem.select();
      this.dispatchEvent({type: 'change', data: this.selecteditem});
      this.dispatchEvent({type: 'tabchange', data: this.selecteditem});
    }
  });
});