public/javascripts/.svn/text-base/tabcontrol.js.svn-base

   1 var TabControl = Class.create({
   2   /*
   3     Initializes a tab control. The variable +element_id+ must be the id of an HTML element
   4     containing one element with it's class name set to 'tabs' and another element with it's
   5     class name set to 'pages'.
   6   */
   7   initialize: function(element) {
   8     this.element = $(element);
   9     this.control_id = this.element.identify();
  10     TabControl.controls.set(this.control_id, this);
  11     this.tab_container = this.element.down('.tabs');
  12     this.tabs = $H();
  13   },
  14
  15   /*
  16     Creates a new tab. The variable +tab_id+ is a unique string used to identify the tab
  17     when calling other methods. The variable +caption+ is a string containing the caption
  18     of the tab. The variable +page+ is the ID of an HTML element, or the HTML element
  19     itself. When a tab is initially added the page element is hidden.
  20   */
  21   addTab: function(tab_id, caption, page) {
  22     var tab = new TabControl.Tab(this, tab_id, caption, page);
  23
  24     this.tabs.set(tab.id, tab);
  25     return this.tab_container.appendChild(tab.createElement());
  26   },
  27
  28   /*
  29     Removes +tab+. The variable +tab+ may be either a tab ID or a tab element.
  30   */
  31   removeTab: function(tab) {
  32     if (Object.isString(tab)) tab = this.tabs.get(tab);
  33     tab.remove();
  34     this.tabs.unset(tab);
  35
  36     if (this.selected == tab) {
  37       var first = this.firstTab();
  38       if (first) this.select(first);
  39       else this.selected = null;
  40     }
  41   },
  42
  43   /*
  44     Selects +tab+ updating the control. The variable +tab+ may be either a tab ID or a
  45     tab element.
  46   */
  47   select: function(tab) {
  48     if (Object.isString(tab)) tab = this.tabs.get(tab);
  49     if (this.selected) this.selected.unselect();
  50     tab.select();
  51     this.selected = tab;
  52     var persist = this.pageId() + ':' + this.selected.id;
  53     document.cookie = "current_tab=" + persist + "; path=/admin";
  54   },
  55
  56   /*
  57     Returns the first tab element that was added using #addTab().
  58   */
  59   firstTab: function() {
  60     return this.tabs.get(this.tabs.keys().first());
  61   },
  62
  63   /*
  64     Returns the the last tab element that was added using #addTab().
  65   */
  66   lastTab: function() {
  67     return this.tabs.get(this.tabs.keys().last());
  68   },
  69
  70   /*
  71     Returns the total number of tab elements managed by the control.
  72   */
  73   tabCount: function() {
  74     return this.tabs.keys().length;
  75   },
  76
  77   autoSelect: function() {
  78     if (!this.tabs.any()) return; // no tabs in control
  79
  80     var tab, matches = document.cookie.match(/current_tab=(.+?);/);
  81     if (matches) {
  82       matches = matches[1].split(':');
  83       var page = matches[0], tabId = matches[1];
  84       if (!page || page == this.pageId()) tab = this.tabs.get(tabId);
  85     }
  86     this.select(tab || this.firstTab());
  87   },
  88
  89   pageId: function() {
  90     return /(\d+)/.test(window.location.pathname) ? RegExp.$1 : '';
  91   }
  92 });
  93
  94 TabControl.controls = $H();
  95
  96 TabControl.Tab = Class.create({
  97   initialize: function(control, id, label, content) {
  98     this.content = $(content).hide();
  99     this.label   = label || id;
 100     this.id      = id;
 101     this.control = control;
 102   },
 103
 104   createElement: function() {
 105     return this.element = new Element('a', { className: 'tab', href: '#' }).
 106       update("<span>" + this.label + "</span>").
 107       observe('click', function(event){
 108         this.control.select(this.id);
 109         event.stop();
 110       }.bindAsEventListener(this));
 111   },
 112
 113   select: function() {
 114     this.content.show();
 115     this.element.addClassName('here');
 116   },
 117
 118   unselect: function() {
 119     this.content.hide();
 120     this.element.removeClassName('here');
 121   },
 122
 123   remove: function() {
 124     this.content.remove();
 125     this.element.stopObserving('click').remove();
 126   }
 127 });