https://www.financetwitter.com/wp-content/themes/FinanceTwitter/taber.js

1/*==================================================
2  $Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $
3  tabber.js by Patrick Fitzgerald [email protected]
4
5  Documentation can be found at the following URL:
6  http://www.barelyfitz.com/projects/tabber/
7
8  License (http://www.opensource.org/licenses/mit-license.php)
9
10  Copyright (c) 2006 Patrick Fitzgerald
11
12  Permission is hereby granted, free of charge, to any person
13  obtaining a copy of this software and associated documentation files
14  (the "Software"), to deal in the Software without restriction,
15  including without limitation the rights to use, copy, modify, merge,
16  publish, distribute, sublicense, and/or sell copies of the Software,
17  and to permit persons to whom the Software is furnished to do so,
18  subject to the following conditions:
19
20  The above copyright notice and this permission notice shall be
21  included in all copies or substantial portions of the Software.
22
23  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
24  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
25  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
26  NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
27  BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
28  ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
29  CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
30  SOFTWARE.
31  ==================================================*/
32
33function tabberObj(argsObj)
34{
35  var arg; /* name of an argument to override */
36
37  /* Element for the main tabber div. If you supply this in argsObj,
38     then the init() method will be called.
39  */
40  this.div = null;
41
42  /* Class of the main tabber div */
43  this.classMain = "tabber";
44
45  /* Rename classMain to classMainLive after tabifying
46     (so a different style can be applied)
47  */
48  this.classMainLive = "tabberlive";
49
50  /* Class of each DIV that contains a tab */
51  this.classTab = "tabbertab";
52
53  /* Class to indicate which tab should be active on startup */
54  this.classTabDefault = "tabbertabdefault";
55
56  /* Class for the navigation UL */
57  this.classNav = "tabbernav";
58
59  /* When a tab is to be hidden, instead of setting display='none', we
60     set the class of the div to classTabHide. In your screen
61     stylesheet you should set classTabHide to display:none.  In your
62     print stylesheet you should set display:block to ensure that all
63     the information is printed.
64  */
65  this.classTabHide = "tabbertabhide";
66
67  /* Class to set the navigation LI when the tab is active, so you can
68     use a different style on the active tab.
69  */
70  this.classNavActive = "tabberactive";
71
72  /* Elements that might contain the title for the tab, only used if a
73     title is not specified in the TITLE attribute of DIV classTab.
74  */
75  this.titleElements = ['h2','h3','h4','h5','h6'];
76
77  /* Should we strip out the HTML from the innerHTML of the title elements?
78     This should usually be true.
79  */
80  this.titleElementsStripHTML = true;
81
82  /* If the user specified the tab names using a TITLE attribute on
83     the DIV, then the browser will display a tooltip whenever the
84     mouse is over the DIV. To prevent this tooltip, we can remove the
85     TITLE attribute after getting the tab name.
86  */
87  this.removeTitle = true;
88
89  /* If you want to add an id to each link set this to true */
90  this.addLinkId = false;
91
92  /* If addIds==true, then you can set a format for the ids.
93     <tabberid> will be replaced with the id of the main tabber div.
94     <tabnumberzero> will be replaced with the tab number
95       (tab numbers starting at zero)
96     <tabnumberone> will be replaced with the tab number
97       (tab numbers starting at one)
98     <tabtitle> will be replaced by the tab title
99       (with all non-alphanumeric characters removed)
100   */
101  this.linkIdFormat = '<tabberid>nav<tabnumberone>';
102
103  /* You can override the defaults listed above by passing in an object:
104     var mytab = new tabber({property:value,property:value});
105  */
106  for (arg in argsObj) { this[arg] = argsObj[arg]; }
107
108  /* Create regular expressions for the class names; Note: if you
109     change the class names after a new object is created you must
110     also change these regular expressions.
111  */
112  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
113  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
114  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
115  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
116  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
117
118  /* Array of objects holding info about each tab */
119  this.tabs = new Array();
120
121  /* If the main tabber div was specified, call init() now */
122  if (this.div) {
123
124    this.init(this.div);
125
126    /* We don't need the main div anymore, and to prevent a memory leak
127       in IE, we must remove the circular reference between the div
128       and the tabber object. */
129    this.div = null;
130  }
131}
132
133
134/*--------------------------------------------------
135  Methods for tabberObj
136  --------------------------------------------------*/
137
138
139tabberObj.prototype.init = function(e)
140{
141  /* Set up the tabber interface.
142
143     e = element (the main containing div)
144
145     Example:
146     init(document.getElementById('mytabberdiv'))
147   */
148
149  var
150  childNodes, /* child nodes of the tabber div */
151  i, i2, /* loop indices */
152  t, /* object to store info about a single tab */
153  defaultTab=0, /* which tab to select by default */
154  DOM_ul, /* tabbernav list */
155  DOM_li, /* tabbernav list item */
156  DOM_a, /* tabbernav link */
157  aId, /* A unique id for DOM_a */
158  headingElement; /* searching for text to use in the tab */
159
160  /* Verify that the browser supports DOM scripting */
161  if (!document.getElementsByTagName) { return false; }
162
163  /* If the main DIV has an ID then save it. */
164  if (e.id) {
165    this.id = e.id;
166  }
167
168  /* Clear the tabs array (but it should normally be empty) */
169  this.tabs.length = 0;
170
171  /* Loop through an array of all the child nodes within our tabber element. */
172  childNodes = e.childNodes;
173  for(i=0; i < childNodes.length; i++) {
174
175    /* Find the nodes where class="tabbertab" */
176    if(childNodes[i].className &&
177       childNodes[i].className.match(this.REclassTab)) {
178      
179      /* Create a new object to save info about this tab */
180      t = new Object();
181      
182      /* Save a pointer to the div for this tab */
183      t.div = childNodes[i];

184      
185      /* Add the new object to the array of tabs */
186      this.tabs[this.tabs.length] = t;
187
188      /* If the class name contains classTabDefault,
189	 then select this tab by default.
190      */
191      if (childNodes[i].className.match(this.REclassTabDefault)) {
192	defaultTab = this.tabs.length-1;
193      }
194    }
195  }
196
197  /* Create a new UL list to hold the tab headings */
198  DOM_ul = document.createElement("ul");
199  DOM_ul.className = this.classNav;
200  
201  /* Loop through each tab we found */
202  for (i=0; i < this.tabs.length; i++) {
203
204    t = this.tabs[i];
205
206    /* Get the label to use for this tab:
207       From the title attribute on the DIV,
208       Or from one of the this.titleElements[] elements,
209       Or use an automatically generated number.
210     */
211    t.headingText = t.div.title;
212
213    /* Remove the title attribute to prevent a tooltip from appearing */
214    if (this.removeTitle) { t.div.title = ''; }
215
216    if (!t.headingText) {
217
218      /* Title was not defined in the title of the DIV,
219	 So try to get the title from an element within the DIV.
220	 Go through the list of elements in this.titleElements
221	 (typically heading elements ['h2','h3','h4'])
222      */
223      for (i2=0; i2<this.titleElements.length; i2++) {
224	headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
225	if (headingElement) {
226	  t.headingText = headingElement.innerHTML;
227	  if (this.titleElementsStripHTML) {
228	    t.headingText.replace(/<br>/gi," ");
229	    t.headingText = t.headingText.replace(/<[^>]+>/g,"");
230	  }
231	  break;
232	}
233      }
234    }
235
236    if (!t.headingText) {
237      /* Title was not found (or is blank) so automatically generate a
238         number for the tab.
239      */
240      t.headingText = i + 1;
241    }
242
243    /* Create a list element for the tab */
244    DOM_li = document.createElement("li");
245
246    /* Save a reference to this list item so we can later change it to
247       the "active" class */
248    t.li = DOM_li;
249
250    /* Create a link to activate the tab */
251    DOM_a = document.createElement("a");
252    DOM_a.appendChild(document.createTextNode(t.headingText));
253    DOM_a.href = "javascript:void(null);";
254    DOM_a.title = t.headingText;
255    DOM_a.onclick = this.navClick;
256
257    /* Add some properties to the link so we can identify which tab
258       was clicked. Later the navClick method will need this.
259    */
260    DOM_a.tabber = this;
261    DOM_a.tabberIndex = i;
262
263    /* Do we need to add an id to DOM_a? */
264    if (this.addLinkId && this.linkIdFormat) {
265
266      /* Determine the id name */
267      aId = this.linkIdFormat;
268      aId = aId.replace(/<tabberid>/gi, this.id);
269      aId = aId.replace(/<tabnumberzero>/gi, i);
270      aId = aId.replace(/<tabnumberone>/gi, i+1);
271      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
272
273      DOM_a.id = aId;
274    }
275
276    /* Add the link to the list element */
277    DOM_li.appendChild(DOM_a);
278
279    /* Add the list element to the list */
280    DOM_ul.appendChild(DOM_li);
281  }
282
283  /* Add the UL list to the beginning of the tabber div */
284  e.insertBefore(DOM_ul, e.firstChild);
285
286  /* Make the tabber div "live" so different CSS can be applied */
287  e.className = e.className.replace(this.REclassMain, this.classMainLive);
288
289  /* Activate the default tab, and do not call the onclick handler */
290  this.tabShow(defaultTab);
291
292  /* If the user specified an onLoad function, call it now. */
293  if (typeof this.onLoad == 'function') {
294    this.onLoad({tabber:this});
295  }
296
297  return this;
298};
299
300
301tabberObj.prototype.navClick = function(event)
302{
303  /* This method should only be called by the onClick event of an <A>
304     element, in which case we will determine which tab was clicked by
305     examining a property that we previously attached to the <A>
306     element.
307
308     Since this was triggered from an onClick event, the variable
309     "this" refers to the <A> element that triggered the onClick
310     event (and not to the tabberObj).
311
312     When tabberObj was initialized, we added some extra properties
313     to the <A> element, for the purpose of retrieving them now. Get
314     the tabberObj object, plus the tab number that was clicked.
315  */
316
317  var
318  rVal, /* Return value from the user onclick function */
319  a, /* element that triggered the onclick event */
320  self, /* the tabber object */
321  tabberIndex, /* index of the tab that triggered the event */
322  onClickArgs; /* args to send the onclick function */
323
324  a = this;
325  if (!a.tabber) { return false; }
326
327  self = a.tabber;
328  tabberIndex = a.tabberIndex;
329
330  /* Remove focus from the link because it looks ugly.
331     I don't know if this is a good idea...
332  */
333  a.blur();
334
335  /* If the user specified an onClick function, call it now.
336     If the function returns false then do not continue.
337  */
338  if (typeof self.onClick == 'function') {
339
340    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
341
342    /* IE uses a different way to access the event object */
343    if (!event) { onClickArgs.event = window.event; }
344
345    rVal = self.onClick(onClickArgs);
346    if (rVal === false) { return false; }
347  }
348
349  self.tabShow(tabberIndex);
350
351  return false;
352};
353
354
355tabberObj.prototype.tabHideAll = function()
356{
357  var i; /* counter */
358
359  /* Hide all tabs and make all navigation links inactive */
360  for (i = 0; i < this.tabs.length; i++) {
361    this.tabHide(i);
362  }
363};
364
365
366tabberObj.prototype.tabHide = function(tabberIndex)
367{
368  var div;
369
370  if (!this.tabs[tabberIndex]) { return false; }
371
372  /* Hide a single tab and make its navigation link inactive */
373  div = this.tabs[tabberIndex].div;
374
375  /* Hide the tab contents by adding classTabHide to the div */
376  if (!div.className.match(this.REclassTabHide)) {
377    div.className += ' ' + this.classTabHide;
378  }
379  this.navClearActive(tabberIndex);
380
381  return this;
382};

383
384
385tabberObj.prototype.tabShow = function(tabberIndex)
386{
387  /* Show the tabberIndex tab and hide all the other tabs */
388
389  var div;
390
391  if (!this.tabs[tabberIndex]) { return false; }
392
393  /* Hide all the tabs first */
394  this.tabHideAll();
395
396  /* Get the div that holds this tab */
397  div = this.tabs[tabberIndex].div;
398
399  /* Remove classTabHide from the div */
400  div.className = div.className.replace(this.REclassTabHide, '');
401
402  /* Mark this tab navigation link as "active" */
403  this.navSetActive(tabberIndex);
404
405  /* If the user specified an onTabDisplay function, call it now. */
406  if (typeof this.onTabDisplay == 'function') {
407    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
408  }
409
410  return this;
411};
412
413tabberObj.prototype.navSetActive = function(tabberIndex)
414{
415  /* Note: this method does *not* enforce the rule
416     that only one nav item can be active at a time.
417  */
418
419  /* Set classNavActive for the navigation list item */
420  this.tabs[tabberIndex].li.className = this.classNavActive;
421
422  return this;
423};
424
425
426tabberObj.prototype.navClearActive = function(tabberIndex)
427{
428  /* Note: this method does *not* enforce the rule
429     that one nav should always be active.
430  */
431
432  /* Remove classNavActive from the navigation list item */
433  this.tabs[tabberIndex].li.className = '';
434
435  return this;
436};
437
438
439/*==================================================*/
440
441
442function tabberAutomatic(tabberArgs)
443{
444  /* This function finds all DIV elements in the document where
445     class=tabber.classMain, then converts them to use the tabber
446     interface.
447
448     tabberArgs = an object to send to "new tabber()"
449  */
450  var
451    tempObj, /* Temporary tabber object */
452    divs, /* Array of all divs on the page */
453    i; /* Loop index */
454
455  if (!tabberArgs) { tabberArgs = {}; }
456
457  /* Create a tabber object so we can get the value of classMain */
458  tempObj = new tabberObj(tabberArgs);
459
460  /* Find all DIV elements in the document that have class=tabber */
461
462  /* First get an array of all DIV elements and loop through them */
463  divs = document.getElementsByTagName("div");
464  for (i=0; i < divs.length; i++) {
465    
466    /* Is this DIV the correct class? */
467    if (divs[i].className &&
468	divs[i].className.match(tempObj.REclassMain)) {
469      
470      /* Now tabify the DIV */
471      tabberArgs.div = divs[i];
472      divs[i].tabber = new tabberObj(tabberArgs);
473    }
474  }
475  
476  return this;
477}
478
479
480/*==================================================*/
481
482
483function tabberAutomaticOnLoad(tabberArgs)
484{
485  /* This function adds tabberAutomatic to the window.onload event,
486     so it will run after the document has finished loading.
487  */
488  var oldOnLoad;
489
490  if (!tabberArgs) { tabberArgs = {}; }
491
492  /* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */
493
494  oldOnLoad = window.onload;
495  if (typeof window.onload != 'function') {
496    window.onload = function() {
497      tabberAutomatic(tabberArgs);
498    };
499  } else {
500    window.onload = function() {
501      oldOnLoad();
502      tabberAutomatic(tabberArgs);
503    };
504  }
505}
506
507
508/*==================================================*/
509
510
511/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
512
513if (typeof tabberOptions == 'undefined') {
514
515    tabberAutomaticOnLoad();
516
517} else {
518
519  if (!tabberOptions['manualStartup']) {
520    tabberAutomaticOnLoad(tabberOptions);
521  }
522
523}