GUI Components JavaScript DHTML

Check for support

The way to check the browser whether it support a certain feature in the
DOM is to use the method document.implementation.hasFeature.
However since IE5.5 supports all the features that this script needs but it
does not support this way of checking for support we have to add a separate
check for IE55.

function hasSupport() {
   if (typeof hasSupport.support != "undefined")
      return hasSupport.support;
   
   var ie55 = /msie 5\.[56789]/i.test( navigator.userAgent );
   
   hasSupport.support = ( typeof document.implementation != "undefined" &&
         document.implementation.hasFeature( "html", "1.0" ) || ie55 )
         
   // IE55 has a serious DOM1 bug... Patch it!
   if ( ie55 ) {
      document._getElementsByTagName = document.getElementsByTagName;
      document.getElementsByTagName = function ( sTagName ) {
         if ( sTagName == "*" )
            return document.all;
         else
            return document._getElementsByTagName( sTagName );
      };
   }
   return hasSupport.support;
}

As you can see in the code above IE55 has a bug an therefore we also
patch that. Too many people are still using IE55 to just ignore it.

WebFXTabPane

The constructor for the tab pane creates the tabRow div
that is used to place all the actual tabs in. It also checks the cookie
state so that the selected tab can be persisted. Besides from this it
sets up some properties needed to keep track of the states. Last but not
least it checks the childNodes of the element and adds
the found tab pages.

function WebFXTabPane( el, bUseCookie ) {
   if ( !hasSupport() || el == null ) return;
   
   this.element = el;
   this.element.tabPane = this;
   this.pages = [];
   this.selectedIndex = null;
   this.useCookie = bUseCookie != null ? bUseCookie : true;
   
   // add class name tag to class name
   this.element.className = this.classNameTag + " " + this.element.className;
   
   // add tab row
   this.tabRow = document.createElement( "div" );
   this.tabRow.className = "tab-row";
   el.insertBefore( this.tabRow, el.firstChild );
   var tabIndex = 0;
   if ( this.useCookie ) {
      tabIndex = Number( WebFXTabPane.getCookie( "webfxtab_" + this.element.id ) );
      if ( isNaN( tabIndex ) )
         tabIndex = 0;
   }
   this.selectedIndex = tabIndex;
   
   // loop through child nodes and add them
   var cs = el.childNodes;
   var n;
   for (var i = 0; i < cs.length; i++) {
      if (cs[i].nodeType == 1 && cs[i].className == "tab-page") {
         this.addTabPage( cs[i] );
      }
   }
}

There are a few methods added to the WebFXTabPane class and one of the
more important ones is the method addTabPage. This method takes the element
that represents the tab page and uses that to create a WebFXTabPage
object that is added to the pages array. Once the tab page has been
added it also checks if this page is the selected one and if it is it shows it.

WebFXTabPane.prototype = {
   ...
   
   addTabPage:   function ( oElement ) {
      if ( !hasSupport() ) return;
      
      if ( oElement.tabPage == this )   // already added
         return oElement.tabPage;
   
      var n = this.pages.length;
      var tp = this.pages[n] = new WebFXTabPage( oElement, this, n );
      tp.tabPane = this;
      
      // move the tab out of the box
      this.tabRow.appendChild( tp.tab );
            
      if ( n == this.selectedIndex )
         tp.show();
      else
         tp.hide();
         
      return tp;
   }   
};

WebFXTabPage

This class is used to keep track of the actual tab page. Once created it moves
the tab element to the tabRow of the tab pane. It also adds
an anchor around the text so that the user can use the keyboard to activate the
tabs.

function WebFXTabPage( el, tabPane, nIndex ) {
   if ( !hasSupport() || el == null ) return;
   
   this.element = el;
   this.element.tabPage = this;
   this.index = nIndex;
   
   var cs = el.childNodes;
   for (var i = 0; i < cs.length; i++) {
      if (cs[i].nodeType == 1 && cs[i].className == "tab") {
         this.tab = cs[i];
         break;
      }
   }
   
   // insert a tag around content to support keyboard navigation
   var a = document.createElement( "A" );
   a.href = "javascript:void 0;";
   while ( this.tab.hasChildNodes() )
      a.appendChild( this.tab.firstChild );
   this.tab.appendChild( a );
   
   // hook up events, using DOM0
   var oThis = this;
   this.tab.onclick = function () { oThis.select(); };
   this.tab.onmouseover = function () { WebFXTabPage.tabOver( oThis ); };
   this.tab.onmouseout = function () { WebFXTabPage.tabOut( oThis ); };
}

Initialization

The initialization uses the global function setupAllTabs that
goes through all elements and checks their class names and if the class names
match the classes used by the tab pane controls it checks whether this element
belongs to an uninitialized control and in that case it initializes it now.

function setupAllTabs() {
   if ( !hasSupport() ) return;
   var all = document.getElementsByTagName( "*" );
   var l = all.length;
   var tabPaneRe = /tab\-pane/;
   var tabPageRe = /tab\-page/;
   var cn, el;
   var parentTabPane;
   
   for ( var i = 0; i < l; i++ ) {
      el = all[i]
      cn = el.className;
      // no className
      if ( cn == "" ) continue;
      
      // uninitiated tab pane
      if ( tabPaneRe.test( cn ) && !el.tabPane )
         new WebFXTabPane( el );
   
      // unitiated tab page wit a valid tab pane parent
      else if ( tabPageRe.test( cn ) && !el.tabPage &&
               tabPaneRe.test( el.parentNode.className ) ) {
         el.parentNode.tabPane.addTabPage( el );         
      }
   }
}

This function can be called manually at any time but the script makes hooks
to the load event for the window. This is done using DOM level 2
events if available. If not we test if it supports the IE5 way of attaching events
and last we fall back on classic way of setting events.

// DOM2
if ( typeof window.addEventListener != "undefined" )
   window.addEventListener( "load", setupAllTabs, false );
// IE 
else if ( typeof window.attachEvent != "undefined" )
   window.attachEvent( "onload", setupAllTabs );
else {
   if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
         oldOnload( e );
         setupAllTabs();
      };
   }
   else 
      window.onload = setupAllTabs;
}

<div class="dynamic-tab-pane-control tab-pane" id="tab-pane-1">
   <div class="tab-row">
      <h2 class="tab selected"><a ... >General</a></h2>
      <h2 class="tab hover"><a ... >Privacy</a></h2>
   </div>
   <div class="tab-page">
      
      This is text of tab 1. This is text of tab 1.
      This is text of tab 1. This is text of tab 1.
            
   </div>
   <div class="tab-page">
      
      This is text of tab 2. This is text of tab 2.
      This is text of tab 2. This is text of tab 2.
            
   </div>
</div>

.dynamic-tab-pane-control.tab-pane {
   position:        relative;
   width:           100%;
}
.dynamic-tab-pane-control .tab-row {
   z-index:         1;
   white-space:     nowrap;
}

.dynamic-tab-pane-control .tab-row .tab {
   font:            Menu;
   cursor:          Default;
   display:         inline;
   margin:          1px -2px 1px 2px;
   float:           left;
   padding:         2px 5px 3px 5px;
   background:      ThreeDFace;
   border:          1px solid;
   border-color:    ThreeDHighlight ThreeDDarkShadow
                    ThreeDDarkShadow ThreeDHighlight;
   border-bottom:   0;
   z-index:         1;
   position:        relative;
   top:             0;
}

.dynamic-tab-pane-control .tab-row .tab.selected {
   border-bottom:   0;
   z-index:         3;
   padding:         2px 6px 5px 7px;
   margin:          1px -3px -2px 0px;
   top:             -2px;
}

.dynamic-tab-pane-control .tab-row .tab a {
   font:            Menu;
   color:           WindowText;
   text-decoration: none;
   cursor:          default;
}
.dynamic-tab-pane-control .tab-row .hover a {
   color:           blue;
}

.dynamic-tab-pane-control .tab-page {
   clear:           both;
   border:          1px solid;
   border-color:    ThreeDHighlight ThreeDDarkShadow
                    ThreeDDarkShadow ThreeDHighlight;
   background:      ThreeDFace;
   z-index:         2;
   position:        relative;
   top:             -2px;
   color:           WindowText;
   font:            MessageBox;
   font:            Message-Box;
   padding:         10px;
}