|
|
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */ | | /* Any JavaScript here will be loaded for all users on every page load. */ |
|
| |
|
| /*************************************************** | | /*************************************** |
|
| |
|
| /*==================================================
| | importScript("MediaWiki:Tabber.js"); |
| $Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $
| |
| tabber.js by Patrick Fitzgerald pat@barelyfitz.com
| |
|
| |
| Documentation can be found at the following URL:
| |
| http://www.barelyfitz.com/projects/tabber/
| |
|
| |
| License (http://www.opensource.org/licenses/mit-license.php)
| |
|
| |
| Copyright (c) 2006 Patrick Fitzgerald
| |
|
| |
| Permission is hereby granted, free of charge, to any person
| |
| obtaining a copy of this software and associated documentation files
| |
| (the "Software"), to deal in the Software without restriction,
| |
| including without limitation the rights to use, copy, modify, merge,
| |
| publish, distribute, sublicense, and/or sell copies of the Software,
| |
| and to permit persons to whom the Software is furnished to do so,
| |
| subject to the following conditions:
| |
|
| |
| The above copyright notice and this permission notice shall be
| |
| included in all copies or substantial portions of the Software.
| |
|
| |
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
| |
| EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
| |
| MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
| |
| NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
| |
| BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
| |
| ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
| |
| CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
| |
| SOFTWARE.
| |
| ==================================================*/
| |
|
| |
| function tabberObj(argsObj)
| |
| {
| |
| var arg; /* name of an argument to override */
| |
|
| |
| /* Element for the main tabber div. If you supply this in argsObj,
| |
| then the init() method will be called.
| |
| */
| |
| this.div = null;
| |
|
| |
| /* Class of the main tabber div */
| |
| this.classMain = "tabber";
| |
|
| |
| /* Rename classMain to classMainLive after tabifying
| |
| (so a different style can be applied)
| |
| */
| |
| this.classMainLive = "tabberlive";
| |
|
| |
| /* Class of each DIV that contains a tab */
| |
| this.classTab = "tabbertab";
| |
|
| |
| /* Class to indicate which tab should be active on startup */
| |
| this.classTabDefault = "tabbertabdefault";
| |
|
| |
| /* Class for the navigation UL */
| |
| this.classNav = "tabbernav";
| |
|
| |
| /* When a tab is to be hidden, instead of setting display='none', we
| |
| set the class of the div to classTabHide. In your screen
| |
| stylesheet you should set classTabHide to display:none. In your
| |
| print stylesheet you should set display:block to ensure that all
| |
| the information is printed.
| |
| */
| |
| this.classTabHide = "tabbertabhide";
| |
|
| |
| /* Class to set the navigation LI when the tab is active, so you can
| |
| use a different style on the active tab.
| |
| */
| |
| this.classNavActive = "tabberactive";
| |
|
| |
| /* Elements that might contain the title for the tab, only used if a
| |
| title is not specified in the TITLE attribute of DIV classTab.
| |
| */
| |
| this.titleElements = ['h2','h3','h4','h5','h6'];
| |
|
| |
| /* Should we strip out the HTML from the innerHTML of the title elements?
| |
| This should usually be true.
| |
| */
| |
| this.titleElementsStripHTML = true;
| |
|
| |
| /* If the user specified the tab names using a TITLE attribute on
| |
| the DIV, then the browser will display a tooltip whenever the
| |
| mouse is over the DIV. To prevent this tooltip, we can remove the
| |
| TITLE attribute after getting the tab name.
| |
| */
| |
| this.removeTitle = true;
| |
|
| |
| /* If you want to add an id to each link set this to true */
| |
| this.addLinkId = false;
| |
|
| |
| /* If addIds==true, then you can set a format for the ids.
| |
| <tabberid> will be replaced with the id of the main tabber div.
| |
| <tabnumberzero> will be replaced with the tab number
| |
| (tab numbers starting at zero)
| |
| <tabnumberone> will be replaced with the tab number
| |
| (tab numbers starting at one)
| |
| <tabtitle> will be replaced by the tab title
| |
| (with all non-alphanumeric characters removed)
| |
| */
| |
| this.linkIdFormat = '<tabberid>nav<tabnumberone>';
| |
|
| |
| /* You can override the defaults listed above by passing in an object:
| |
| var mytab = new tabber({property:value,property:value});
| |
| */
| |
| for (arg in argsObj) { this[arg] = argsObj[arg]; }
| |
|
| |
| /* Create regular expressions for the class names; Note: if you
| |
| change the class names after a new object is created you must
| |
| also change these regular expressions.
| |
| */
| |
| this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
| |
| this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
| |
| this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
| |
| this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
| |
| this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
| |
|
| |
| /* Array of objects holding info about each tab */
| |
| this.tabs = new Array();
| |
|
| |
| /* If the main tabber div was specified, call init() now */
| |
| if (this.div) {
| |
|
| |
| this.init(this.div);
| |
|
| |
| /* We don't need the main div anymore, and to prevent a memory leak
| |
| in IE, we must remove the circular reference between the div
| |
| and the tabber object. */
| |
| this.div = null;
| |
| }
| |
| }
| |
|
| |
|
| |
| /*--------------------------------------------------
| |
| Methods for tabberObj
| |
| --------------------------------------------------*/
| |
|
| |
|
| |
| tabberObj.prototype.init = function(e)
| |
| {
| |
| /* Set up the tabber interface.
| |
|
| |
| e = element (the main containing div)
| |
|
| |
| Example:
| |
| init(document.getElementById('mytabberdiv'))
| |
| */
| |
|
| |
| var
| |
| childNodes, /* child nodes of the tabber div */
| |
| i, i2, /* loop indices */
| |
| t, /* object to store info about a single tab */
| |
| defaultTab=0, /* which tab to select by default */
| |
| DOM_ul, /* tabbernav list */
| |
| DOM_li, /* tabbernav list item */
| |
| DOM_a, /* tabbernav link */
| |
| aId, /* A unique id for DOM_a */
| |
| headingElement; /* searching for text to use in the tab */
| |
|
| |
| /* Verify that the browser supports DOM scripting */
| |
| if (!document.getElementsByTagName) { return false; }
| |
|
| |
| /* If the main DIV has an ID then save it. */
| |
| if (e.id) {
| |
| this.id = e.id;
| |
| }
| |
|
| |
| /* Clear the tabs array (but it should normally be empty) */
| |
| this.tabs.length = 0;
| |
|
| |
| /* Loop through an array of all the child nodes within our tabber element. */
| |
| childNodes = e.childNodes;
| |
| for(i=0; i < childNodes.length; i++) {
| |
|
| |
| /* Find the nodes where class="tabbertab" */
| |
| if(childNodes[i].className &&
| |
| childNodes[i].className.match(this.REclassTab)) {
| |
|
| |
| /* Create a new object to save info about this tab */
| |
| t = new Object();
| |
|
| |
| /* Save a pointer to the div for this tab */
| |
| t.div = childNodes[i];
| |
|
| |
| /* Add the new object to the array of tabs */
| |
| this.tabs[this.tabs.length] = t;
| |
|
| |
| /* If the class name contains classTabDefault,
| |
| then select this tab by default.
| |
| */
| |
| if (childNodes[i].className.match(this.REclassTabDefault)) {
| |
| defaultTab = this.tabs.length-1;
| |
| }
| |
| }
| |
| }
| |
|
| |
| /* Create a new UL list to hold the tab headings */
| |
| DOM_ul = document.createElement("ul");
| |
| DOM_ul.className = this.classNav;
| |
|
| |
| /* Loop through each tab we found */
| |
| for (i=0; i < this.tabs.length; i++) {
| |
|
| |
| t = this.tabs[i];
| |
|
| |
| /* Get the label to use for this tab:
| |
| From the title attribute on the DIV,
| |
| Or from one of the this.titleElements[] elements,
| |
| Or use an automatically generated number.
| |
| */
| |
| t.headingText = t.div.title;
| |
|
| |
| /* Remove the title attribute to prevent a tooltip from appearing */
| |
| if (this.removeTitle) { t.div.title = ''; }
| |
|
| |
| if (!t.headingText) {
| |
|
| |
| /* Title was not defined in the title of the DIV,
| |
| So try to get the title from an element within the DIV.
| |
| Go through the list of elements in this.titleElements
| |
| (typically heading elements ['h2','h3','h4'])
| |
| */
| |
| for (i2=0; i2<this.titleElements.length; i2++) {
| |
| headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
| |
| if (headingElement) {
| |
| t.headingText = headingElement.innerHTML;
| |
| if (this.titleElementsStripHTML) {
| |
| t.headingText.replace(/<br>/gi," ");
| |
| t.headingText = t.headingText.replace(/<[^>]+>/g,"");
| |
| }
| |
| break;
| |
| }
| |
| }
| |
| }
| |
|
| |
| if (!t.headingText) {
| |
| /* Title was not found (or is blank) so automatically generate a
| |
| number for the tab.
| |
| */
| |
| t.headingText = i + 1;
| |
| }
| |
|
| |
| /* Create a list element for the tab */
| |
| DOM_li = document.createElement("li");
| |
|
| |
| /* Save a reference to this list item so we can later change it to
| |
| the "active" class */
| |
| t.li = DOM_li;
| |
|
| |
| /* Create a link to activate the tab */
| |
| DOM_a = document.createElement("a");
| |
| DOM_a.appendChild(document.createTextNode(t.headingText));
| |
| DOM_a.href = "javascript:void(null);";
| |
| DOM_a.title = t.headingText;
| |
| DOM_a.onclick = this.navClick;
| |
|
| |
| /* Add some properties to the link so we can identify which tab
| |
| was clicked. Later the navClick method will need this.
| |
| */
| |
| DOM_a.tabber = this;
| |
| DOM_a.tabberIndex = i;
| |
|
| |
| /* Do we need to add an id to DOM_a? */
| |
| if (this.addLinkId && this.linkIdFormat) {
| |
|
| |
| /* Determine the id name */
| |
| aId = this.linkIdFormat;
| |
| aId = aId.replace(/<tabberid>/gi, this.id);
| |
| aId = aId.replace(/<tabnumberzero>/gi, i);
| |
| aId = aId.replace(/<tabnumberone>/gi, i+1);
| |
| aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
| |
|
| |
| DOM_a.id = aId;
| |
| }
| |
|
| |
| /* Add the link to the list element */
| |
| DOM_li.appendChild(DOM_a);
| |
|
| |
| /* Add the list element to the list */
| |
| DOM_ul.appendChild(DOM_li);
| |
| }
| |
|
| |
| /* Add the UL list to the beginning of the tabber div */
| |
| e.insertBefore(DOM_ul, e.firstChild);
| |
|
| |
| /* Make the tabber div "live" so different CSS can be applied */
| |
| e.className = e.className.replace(this.REclassMain, this.classMainLive);
| |
|
| |
| /* Activate the default tab, and do not call the onclick handler */
| |
| this.tabShow(defaultTab);
| |
|
| |
| /* If the user specified an onLoad function, call it now. */
| |
| if (typeof this.onLoad == 'function') {
| |
| this.onLoad({tabber:this});
| |
| }
| |
|
| |
| return this;
| |
| };
| |
|
| |
|
| |
| tabberObj.prototype.navClick = function(event)
| |
| {
| |
| /* This method should only be called by the onClick event of an <A>
| |
| element, in which case we will determine which tab was clicked by
| |
| examining a property that we previously attached to the <A>
| |
| element.
| |
|
| |
| Since this was triggered from an onClick event, the variable
| |
| "this" refers to the <A> element that triggered the onClick
| |
| event (and not to the tabberObj).
| |
|
| |
| When tabberObj was initialized, we added some extra properties
| |
| to the <A> element, for the purpose of retrieving them now. Get
| |
| the tabberObj object, plus the tab number that was clicked.
| |
| */
| |
|
| |
| var
| |
| rVal, /* Return value from the user onclick function */
| |
| a, /* element that triggered the onclick event */
| |
| self, /* the tabber object */
| |
| tabberIndex, /* index of the tab that triggered the event */
| |
| onClickArgs; /* args to send the onclick function */
| |
|
| |
| a = this;
| |
| if (!a.tabber) { return false; }
| |
|
| |
| self = a.tabber;
| |
| tabberIndex = a.tabberIndex;
| |
|
| |
| /* Remove focus from the link because it looks ugly.
| |
| I don't know if this is a good idea...
| |
| */
| |
| a.blur();
| |
|
| |
| /* If the user specified an onClick function, call it now.
| |
| If the function returns false then do not continue.
| |
| */
| |
| if (typeof self.onClick == 'function') {
| |
|
| |
| onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
| |
|
| |
| /* IE uses a different way to access the event object */
| |
| if (!event) { onClickArgs.event = window.event; }
| |
|
| |
| rVal = self.onClick(onClickArgs);
| |
| if (rVal === false) { return false; }
| |
| }
| |
|
| |
| self.tabShow(tabberIndex);
| |
|
| |
| return false;
| |
| };
| |
|
| |
|
| |
| tabberObj.prototype.tabHideAll = function()
| |
| {
| |
| var i; /* counter */
| |
|
| |
| /* Hide all tabs and make all navigation links inactive */
| |
| for (i = 0; i < this.tabs.length; i++) {
| |
| this.tabHide(i);
| |
| }
| |
| };
| |
|
| |
|
| |
| tabberObj.prototype.tabHide = function(tabberIndex)
| |
| {
| |
| var div;
| |
|
| |
| if (!this.tabs[tabberIndex]) { return false; }
| |
|
| |
| /* Hide a single tab and make its navigation link inactive */
| |
| div = this.tabs[tabberIndex].div;
| |
|
| |
| /* Hide the tab contents by adding classTabHide to the div */
| |
| if (!div.className.match(this.REclassTabHide)) {
| |
| div.className += ' ' + this.classTabHide;
| |
| }
| |
| this.navClearActive(tabberIndex);
| |
|
| |
| return this;
| |
| };
| |
|
| |
|
| |
| tabberObj.prototype.tabShow = function(tabberIndex)
| |
| {
| |
| /* Show the tabberIndex tab and hide all the other tabs */
| |
|
| |
| var div;
| |
|
| |
| if (!this.tabs[tabberIndex]) { return false; }
| |
|
| |
| /* Hide all the tabs first */
| |
| this.tabHideAll();
| |
|
| |
| /* Get the div that holds this tab */
| |
| div = this.tabs[tabberIndex].div;
| |
|
| |
| /* Remove classTabHide from the div */
| |
| div.className = div.className.replace(this.REclassTabHide, '');
| |
|
| |
| /* Mark this tab navigation link as "active" */
| |
| this.navSetActive(tabberIndex);
| |
|
| |
| /* If the user specified an onTabDisplay function, call it now. */
| |
| if (typeof this.onTabDisplay == 'function') {
| |
| this.onTabDisplay({'tabber':this, 'index':tabberIndex});
| |
| }
| |
|
| |
| return this;
| |
| };
| |
|
| |
| tabberObj.prototype.navSetActive = function(tabberIndex)
| |
| {
| |
| /* Note: this method does *not* enforce the rule
| |
| that only one nav item can be active at a time.
| |
| */
| |
|
| |
| /* Set classNavActive for the navigation list item */
| |
| this.tabs[tabberIndex].li.className = this.classNavActive;
| |
|
| |
| return this;
| |
| };
| |
|
| |
|
| |
| tabberObj.prototype.navClearActive = function(tabberIndex)
| |
| {
| |
| /* Note: this method does *not* enforce the rule
| |
| that one nav should always be active.
| |
| */
| |
|
| |
| /* Remove classNavActive from the navigation list item */
| |
| this.tabs[tabberIndex].li.className = '';
| |
|
| |
| return this;
| |
| };
| |
|
| |
|
| |
| /*==================================================*/
| |
|
| |
|
| |
| function tabberAutomatic(tabberArgs)
| |
| {
| |
| /* This function finds all DIV elements in the document where
| |
| class=tabber.classMain, then converts them to use the tabber
| |
| interface.
| |
|
| |
| tabberArgs = an object to send to "new tabber()"
| |
| */
| |
| var
| |
| tempObj, /* Temporary tabber object */
| |
| divs, /* Array of all divs on the page */
| |
| i; /* Loop index */
| |
|
| |
| if (!tabberArgs) { tabberArgs = {}; }
| |
|
| |
| /* Create a tabber object so we can get the value of classMain */
| |
| tempObj = new tabberObj(tabberArgs);
| |
|
| |
| /* Find all DIV elements in the document that have class=tabber */
| |
|
| |
| /* First get an array of all DIV elements and loop through them */
| |
| divs = document.getElementsByTagName("div");
| |
| for (i=0; i < divs.length; i++) {
| |
|
| |
| /* Is this DIV the correct class? */
| |
| if (divs[i].className &&
| |
| divs[i].className.match(tempObj.REclassMain)) {
| |
|
| |
| /* Now tabify the DIV */
| |
| tabberArgs.div = divs[i];
| |
| divs[i].tabber = new tabberObj(tabberArgs);
| |
| }
| |
| }
| |
|
| |
| return this;
| |
| }
| |
|
| |
|
| |
| /*==================================================*/
| |
|
| |
|
| |
| function tabberAutomaticOnLoad(tabberArgs)
| |
| {
| |
| /* This function adds tabberAutomatic to the window.onload event,
| |
| so it will run after the document has finished loading.
| |
| */
| |
| var oldOnLoad;
| |
|
| |
| if (!tabberArgs) { tabberArgs = {}; }
| |
|
| |
| /* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */
| |
|
| |
| oldOnLoad = window.onload;
| |
| if (typeof window.onload != 'function') {
| |
| window.onload = function() {
| |
| tabberAutomatic(tabberArgs);
| |
| };
| |
| } else {
| |
| window.onload = function() {
| |
| oldOnLoad();
| |
| tabberAutomatic(tabberArgs);
| |
| };
| |
| }
| |
| }
| |
|
| |
|
| |
| /*==================================================*/
| |
|
| |
|
| |
| /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
| |
|
| |
| if (typeof tabberOptions == 'undefined') {
| |
|
| |
| tabberAutomaticOnLoad();
| |
|
| |
| } else {
| |
|
| |
| if (!tabberOptions['manualStartup']) {
| |
| tabberAutomaticOnLoad(tabberOptions);
| |
| }
| |
|
| |
|
| /*************************************** | | /*************************************** |
