root/trunk/tabgroup.js

// This is a simple object that manages a group of tabs
// and keeps them synchronized so that only one is selected
// at a time

TabGroupView = new Class(View, {
  /*
     element: what element to put the tabs in

     tabs: array of tab info with the fields:
       content: HTML to display in the tab OR
       contentRenderer: a callback to render the tab
       selected: is this tab selected by default
       clickHandler: callback when the tab is selected

     styles: hash of classnames for the tabs
       tabClass: the class to be applied to all the tabs
       tabSelectedClass: the class to be applied to the currently selected tab
  */
  init: function (element, tabs, styles) {
    TabGroupView.superClass.init.apply(this, [{'view': element}]);

    if (!element)
      return;

    this.tabs = [];
    this.ele = element;
    this.clickHandlers = {};

    if (!tabs || !tabs.length)
      return;

    for (var i=0; i < tabs.length; i++) {
      var tabInfo = tabs[i];
      var tabElement = document.createElement("span");
      this.ele.appendChild(tabElement);

      tabInfo.tabSelectedClass = styles.tabSelectedClass;
      tabInfo.tabClass = styles.tabClass;

      var tab = new TabView();
      tab.init({'view': tabElement}, tabInfo);

      if (tabInfo.selected)
        tab.select();

      tab.clickHandler2 = tabInfo.clickHandler;

      this.tabs.push(tab);

      var self = this;

      tab.setClickHandler(function (tabClicked) {
        // deselect all the other tabs
        for (var j=0; j < self.tabs.length; j++) {
          if (self.tabs[j] != tabClicked)
            self.tabs[j].deselect();
        }

        tabClicked.clickHandler2.call();
      });
    }
  }
});