tabs.js

嵌入式无线路由系统openwrt的web配置工具

/*

Class: FlashSYS.Tabs
  Creates tabbed container

Copyright:
  Copyright (C) 2008 OpenRB.com

Arguments:
  container - (element or id) tabs will be placed inside this container
  options - (object)

Options:
  prefix - (string) id prefix, defaults to 'fstab_'
  trPrefix - (string) translation key prefix
  classPrefix - (string) css class prefix
  tabs - (array) tab names or tab options
  footerEl - (null or element) footer container
  showFirst - (boolean) defaults to true, whether automatically show first tab / panel after init or not

Properties:
  tabCount - (integer) local tab count
  activeTab - (integer) active tab index
  tabsByIndex - (array) tab / panel cache by index
  tabsByName - (object) tab / panel cache by name / id
  hasFooter - (boolean) specifies if footer is present

*/

FlashSYS.Tabs = new Class({
  Implements: [Options],

  tabCount: 0,
  activeTab: -1,
  tabsByIndex: [],
  tabsByName: {},
  hasFooter: false,

  options: {
    classPrefix: 'FSTabs',
    prefix: '',
    trPrefix: 'tab_',
    tabs: [],
    footerEl: null,
    showFirst: true
  },

  initialize: function(container, options) {
    this.container = $(container);
    this.setOptions(options);

    this.idPrefix = (this.options.prefix ? this.options.prefix + '_' : 'fstab_') + FlashSYS.idCounter.toString() + '_';
    FlashSYS.idCounter++;

    // create button row
    this.tabRow = new Element('div', {
      'id': this.idPrefix + 'tabrow',
      'class': this.options.classPrefix + 'TabRow'
    }).inject(this.container);

    if (this.options.footerEl) {
      this.options.footerEl = $(this.options.footerEl);
      this.hasFooter = true;
    }

    this.panelWidth = this.container.getSize().x;
    this.panelHeight = this.container.getSize().y - this.tabRow.getSize().y;

    this.tabUl = new Element('ul').inject(this.tabRow);
    this.options.tabs.each(this.addTab, this);

    if (this.options.showFirst) {
      this.tabClick(0);
    }

    return this;
  },
  /*

  Function: addTab
    Adds a single tab and tab panel

  Arguments:
    tabName - (string) new tab name

  */
  addTab: function(tabOptions) {
    var optType = $type(tabOptions);
    var tabName = optType == 'object' ? tabOptions.name : tabOptions;

    var tabCache = {
      button: new Element('li', {
        'id': this.idPrefix + 'button' + this.tabCount.toString(),
        'class': this.options.classPrefix + 'TabButton',
        'events': {
          'click': this.tabClick.bind(this, this.tabCount)
        }
      }).inject(this.tabUl),

      panel: new Element('div', {
        'id': this.idPrefix + 'panel' + this.tabCount.toString(),
        'class': this.options.classPrefix + 'TabPanel'
      }).setStyle('display', 'none').inject(this.container),

      options: (optType == 'object' ? tabOptions : null)
    };

    tabCache.panel.setStyle('width', this.panelWidth - tabCache.panel.getStyle('padding-left').toInt() - tabCache.panel.getStyle('padding-right').toInt());
    tabCache.panel.setStyle('height', this.panelHeight - tabCache.panel.getStyle('padding-top').toInt() - tabCache.panel.getStyle('padding-bottom').toInt());

    if (this.hasFooter) {
      tabCache.footer = new Element('div', {
        'id': this.idPrefix + 'footer' + this.tabCount.toString(),
        'class': this.options.classPrefix + 'TabFooter'
      }).setStyle('display', 'none').inject(this.options.footerEl)
    }

    var tabLink = new Element('a', {
      'text': FlashSYS.translate(this.options.trPrefix + tabName)
    }).inject(tabCache.button);

    // cache element pointers
    this.tabsByIndex[ this.tabCount ] = tabCache;
    this.tabsByName[ tabName ] = tabCache;

    this.tabCount++;
  },
  /*

  Function: tabClick
    Shows tab, checks if it's already open

  Arguments:
    tabIndex - (integer) tab index that needs to be hidden

  */
  tabClick: function(tabIndex) {
    if (tabIndex != this.activeTab) {
      this.hideTab(this.activeTab);
      this.showTab(tabIndex);

      this.activeTab = tabIndex;
    }
  },
  /*

  Function: showTab
    Shows tab, checks if it's already open

  Arguments:
    tabIndex - (integer) clicked tab index

  */
  showTab: function(tabIndex) {
    if (tabIndex < 0) {
      return;
    }

    var tabCache = this.tabsByIndex[ tabIndex ];

    if (tabCache) {
      tabCache.button.addClass(this.options.classPrefix + 'TabButtonActive');
      tabCache.panel.setStyle('display', 'block');

      // footer element
      if (this.hasFooter) {
        tabCache.footer.setStyle('display', 'block');
      }
    }
  },
  /*

  Function: hideTab
    Hides tab

  Arguments:
    tabIndex - (integer) clicked tab index

  */
  hideTab: function(tabIndex) {
    if (tabIndex < 0) {
      return;
    }
    var tabCache = this.tabsByIndex[ tabIndex ];

    if (tabCache) {
      tabCache.button.removeClass(this.options.classPrefix + 'TabButtonActive');
      tabCache.panel.setStyle('display', 'none');

      // footer element
      if (this.hasFooter) {
        tabCache.footer.setStyle('display', 'none');
      }
    }
  },
  /*

  Function: getNext
    Returns next tab panel in circular way (last -> 1)

  Returns:
    Tab panel element or container if tab was not found for some reason

  */
  getNext: function() {
    if (this.tabCount > 0) {
      var tabIndex = (this.activeTab + 1) % this.tabCount;
      var tabCache = this.tabsByIndex[ tabIndex ];

      // fallback to container it tab was not found
      return tabCache ? tabCache.panel : this.container;
    }
  },
  /*

  Function: getPanelByIndex
    Returns tab panel for given index

  Arguments:
    tabIndex - (integer) requested tab / panel index

  Returns:
    Tab panel or null if it was not found

  */
  getPanelByIndex: function(tabIndex) {
    return (this.tabCount > tabIndex && tabIndex >= 0 ? this.tabsByIndex[ tabIndex ].panel : null);
  },
  /*

  Function: getFooterByIndex
    Returns tab footer for given index

  Arguments:
    tabIndex - (integer) requested tab / footer index

  Returns:
    Tab footer or null if it was not found or no footerEl defined in options

  */
  getFooterByIndex: function(tabIndex) {
    return (this.tabCount > tabIndex && tabIndex >= 0 && this.hasFooter ? this.tabsByIndex[ tabIndex ].footer : null);
  },
  /*

  Function: getPanelByName
    Returns tab panel for given tab name

  Arguments:
    tabName - (string) requested tab / panel name

  Returns:
    Tab panel or null if it was not found

  */
  getPanelByName: function(tabName) {
    return (this.tabsByName[ tabName ] ? this.tabsByName[ tabName ].panel : null);
  },
  /*

  Function: getFooterByName
    Returns tab footer for given tab name

  Arguments:
    tabName - (string) requested tab / footer name

  Returns:
    Tab footer or null if it was not found or no footerEl defined in options

  */
  getFooterByName: function(tabName) {
    return (this.hasFooter && this.tabsByName[ tabName ] ? this.tabsByName[ tabName ].footer : null);
  }
});