phpgroupware-cvs
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[Phpgroupware-cvs] phpgwapi/js/tabs tabs.js


From: Dave Hall
Subject: [Phpgroupware-cvs] phpgwapi/js/tabs tabs.js
Date: Sun, 03 Sep 2006 03:39:07 +0000

CVSROOT:        /cvsroot/phpgwapi
Module name:    phpgwapi
Changes by:     Dave Hall <skwashd>     06/09/03 03:39:07

Modified files:
        js/tabs        : tabs.js 

Log message:
        this cleaned up version of the class should have been committted a long 
time ago

CVSWeb URLs:
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/tabs/tabs.js?cvsroot=phpgwapi&r1=1.2&r2=1.3

Patches:
Index: tabs.js
===================================================================
RCS file: /cvsroot/phpgwapi/phpgwapi/js/tabs/tabs.js,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -b -r1.2 -r1.3
--- tabs.js     30 Dec 2004 06:47:33 -0000      1.2
+++ tabs.js     3 Sep 2006 03:39:07 -0000       1.3
@@ -14,7 +14,7 @@
  * Lesser General Public License for more details.
  *
  * You should have received a copy of the GNU Lesser General Public
- * License along with this library; if not, write to the Free Software
+ * License along with self.library; if not, write to the Free Software
  * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
  *
  * Contact information:
@@ -38,16 +38,23 @@
  * @argument inactiveCSSclass CSS class name for inactive tabs (display:none)
  * @argument HTMLtabID HTML ID name prefix that would be used with the tab 
number as tab name.
  * @argument HTMLtabcontentID HTML ID prefix for the tab content used with the 
tab number
+ * @argument HTMLtabselectorID HTML ID prefix for a selectbox used to switch 
between the tabs
+ * @argument HTMLtabradioID HTML ID prefix for radio button input fields used 
to switch between the tabs
  * @argument tabPageKey URL parameter name to use for setting/getting the 
actual tab
+ * @argument callBack a callback function when the tab is changed - function 
must take 1 arg, the id of the new tab
  */
-function 
Tabs(nrTabs,activeCSSclass,inactiveCSSclass,HTMLtabID,HTMLtabcontentID,tabPageKey)
- {
+function 
Tabs(nrTabs,activeCSSclass,inactiveCSSclass,HTMLtabID,HTMLtabcontentID,HTMLtabselectorID,HTMLtabradioID,tabPageKey,
 callBack)
+{
   this.nrTabs           = nrTabs;
   this.activeCSSclass   = activeCSSclass;
   this.inactiveCSSclass = inactiveCSSclass;
   this.HTMLtabID        = HTMLtabID;
   this.HTMLtabcontentID = HTMLtabcontentID;
+       this.HTMLtabselectorID  = HTMLtabselectorID;
+       this.HTMLtabradioID     = HTMLtabradioID;
   this.tabPageKey       = tabPageKey;
+       this.callBack           = callBack;
+       var self                = this;
 
   if (typeof(_tabs_prototype_called) == 'undefined')
    {
@@ -59,10 +66,11 @@
     Tabs.prototype.disableAll     = disableAll;
     Tabs.prototype.display        = display;
     Tabs.prototype.changeToActive = changeToActive;
+               Tabs.prototype.clicked          = clicked
     Tabs.prototype.init           = init;
+               Tabs.prototype._replaceClass    = _replaceClass;
    }
 
-
   /**
    * Set tab as active
    *
@@ -70,14 +78,20 @@
    */
   function setActive(tabnr)
    {
-    if ((tabnr > 0) && (tabnr <= this.nrTabs))
+               if ((tabnr > 0) && (tabnr <= self.nrTabs))
+               {
+                       self._replaceClass( self.HTMLtabID + tabnr, 
self.inactiveCSSclass, self.activeCSSclass);
+                       self._replaceClass( self.HTMLtabcontentID + tabnr, 
self.inactiveCSSclass, self.activeCSSclass);
+                       if ( self.HTMLtabselectorID != null && 
self.HTMLtabselectorID != '' ) 
+                       {
+                               
document.getElementById(self.HTMLtabselectorID).selectedIndex = tabnr-1;
+                       }
+                       if (  self.HTMLtabradioID != null && 
self.HTMLtabradioID != '' )
      {
-      document.getElementById(HTMLtabID        + tabnr).className = 
this.activeCSSclass;
-      document.getElementById(HTMLtabcontentID + tabnr).className = 
this.activeCSSclass;
+                               document.getElementById(self.HTMLtabradioID   + 
tabnr).checked = true;
+                       }
      }
    }
-
-
 
   /**
    * Set tab as inactive
@@ -86,14 +100,13 @@
    */
   function setInactive(tabnr)
    {
-    if ((tabnr > 0) && (tabnr <= this.nrTabs))
+               if ((tabnr > 0) && (tabnr <= self.nrTabs))
      {
-      document.getElementById(HTMLtabID        + tabnr).className = 
this.inactiveCSSclass;
-      document.getElementById(HTMLtabcontentID + tabnr).className = 
this.inactiveCSSclass;
+                       self._replaceClass( self.HTMLtabID + tabnr, 
self.activeCSSclass, self.inactiveCSSclass);
+                       self._replaceClass( self.HTMLtabcontentID + tabnr, 
self.activeCSSclass, self.inactiveCSSclass);
      }
    }
 
-
   /**
    * Test if tab is active
    *
@@ -102,10 +115,9 @@
    */
   function isActive(tabnr)
    {
-    return(document.getElementById(HTMLtabID + tabnr).className == 
this.activeCSSclass);
+               return(document.getElementById(self.HTMLtabID + 
tabnr).className.search(/self.activeCSSclass/) != -1);
    }
 
-
   /**
    * Get the active tab number
    *
@@ -113,29 +125,27 @@
    */
   function getActive()
    {
-    for (i = 1; i <= this.nrTabs; ++i)
+               for (var i = 1; i <= self.nrTabs; ++i)
      {
-      if (this.isActive(i))
+                       if (self.isActive(i))
        {
-        return(i);
+                               return i;
        }
      }
-    return(0);
+               return 0;
    }
 
-
   /**
    * Disable all tabs
    */
   function disableAll()
    {
-    for (i = 1; i <= this.nrTabs; ++i)
+               for (var i = 1; i <= self.nrTabs; ++i)
      {
-      this.setInactive(i);
+                       self.setInactive(i);
      }
    }
 
-
   /**
    * Disable all tabs and then display the tab number given
    *
@@ -143,11 +153,10 @@
    */
   function display(tabnr)
    {
-    this.disableAll(this.nrTabs);
-    this.setActive(tabnr);
+               self.disableAll(self.nrTabs);
+               self.setActive(tabnr);
    }
 
-
   /**
    * Loop over all tabs - switch off currently active tabs and display the new 
tab
    *
@@ -155,38 +164,94 @@
    */
   function changeToActive(tabnr)
    {
-    for (i = 1; i <= this.nrTabs; ++i)
+               for (var i = 1; i <= self.nrTabs; ++i)
      {
       if (i == tabnr)
        {
-        if (!this.isActive(i))
+                               if (!self.isActive(i))
          {
-          this.setActive(i);
+                                       self.setActive(i);
          }
        }
       else
        {
-        if (this.isActive(i))
+                               if (self.isActive(i))
+                               {
+                                       self.setInactive(i);
+                               }
+                       }
+               }
+       }
+
+       /**
+       * Handle click event
+       *
+       * @argument e click event
+       */
+       function clicked(e)
+       {
+               if ( !e ) //Fix Broken IE
          {
-          this.setInactive(i);
+                       var e = window.event;
          }
+               
+               if ( e.target )
+               {
+                       var oTarget = e.target;
+               }
+               else if ( e.srcElement )
+               {
+                       var oTarget = e.srcElement;
        }
+
+               if ( oTarget.id && oTarget.id.indexOf(self.HTMLtabID) == 0 )
+               {
+                       
self.display(oTarget.id.substring(self.HTMLtabID.length));
+
+                       if ( window.event ) //Crappy IE
+                       {
+                               e.cancelBubble = true;
      }
+                       else //W3C :)
+                       {
+                               e.stopPropagation();
    }
 
+                       if ( self.callBack != null && self.callBack != '' )
+                       {
+                               self.callBack(oTarget);
+                       }
+                }
+       }
 
   /**
    * Get url parameter for first tab and display it.
    */
   function init()
    {
+               for ( i = 1; i <= self.nrTabs; ++i )
+               {
+                       if ( document.getElementById )
+                       {
+                               var oTab = 
document.getElementById(self.HTMLtabID + i);
+                               if( oTab.addEventListener )
+                               {
+                                       oTab.addEventListener('click', 
self.clicked, true);
+                               }
+                               else if( oTab.attachEvent )
+                               {
+                                       oTab.attachEvent('onclick', 
self.clicked);
+                               }
+                       }
+               }
+               
     var tab = 0;
     var url = document.URL;
     var pos = url.indexOf("?");
     if (pos > -1)
      {
       var urlparams = url.substr(pos + 1,url.length - (pos + 1));
-      var regexp = new RegExp('(^|&)' + this.tabPageKey + '=[0-9]{1,2}');
+                       var regexp = new RegExp('(^|&)' + self.tabPageKey + 
'=[0-9]{1,2}');
       var urlparamstart = urlparams.search(regexp);
       if (urlparamstart > -1)
        {
@@ -213,11 +278,41 @@
      {
       tab = 1;
      }
-    if ((tab <= 0) || (tab > this.nrTabs))
+               if ((tab <= 0) || (tab > self.nrTabs))
      {
       tab = 1;
      }
-    this.display(tab);
-   }
+               self.display(tab);
  }
 
+       /**
+       * Replace a CSS class with another
+       *
+       * @param string strID document element ID to replace class on
+       * @param string strOldClass the old CSS class name to remove from ID
+       * @param string strNewClass the new CSS class name to add to ID
+       */
+       function _replaceClass(strID, strOldClass, strNewClass)
+       {
+               //document.getElementsByTagName('body').item(0).appendChild( 
document.createTextNode('_replaceClass(' + strID + ', ' + strOldClass + ', ' + 
strNewClass + ') called') );
+               var oElm = document.getElementById(strID);
+               if( oElm.className != '')
+               {
+                       var arClasses = oElm.className.split(' ');
+                       var iCnt = arClasses.length;
+                       for(i = 0; i < iCnt; ++i)
+                       {
+                               if ( arClasses[i] == strOldClass )
+                               {
+                                       arClasses[i] = strNewClass;
+                                       break;
+                               }
+                       }
+                       oElm.className = arClasses.join(' ');
+               }
+               else
+               {
+                       oElm.className = strNewClass;
+               }
+       }
+}




reply via email to

[Prev in Thread] Current Thread [Next in Thread]