planetlab/minitabs/minitabs.js

   1 /*
   2
   3   Animated miniTabs by frequency decoder (http://www.frequency-decoder.com/)
   4
   5   Based on an idea by Rob L Glazebrook (http://www.rootarcana.com/test/smartmini/) itself
   6   derived from the original idea of Stephen Clark (http://www.sgclark.com/sandbox/minislide/)
   7
   8   Adjusted by Thierry Parmentelat -- INRIA - uses only forms rather than <a> tags, for supporting http-POST
   9
  10   $Id$
  11
  12 */
  13
  14 function plc_debug (txt,value) {
  15   window.console.log (txt + ' => ' + value);
  16 }
  17
  18 function plc_element (txt,elem) {
  19   var message=txt + ':';
  20   message += ' type=' + elem.nodeName;
  21   message += ' id=' + elem.id;
  22   message += ' cls=' + elem.className;
  23   window.console.log (message);
  24 }
  25
  26 /* lists all attributes - or the specified one -
  27  * verbose means the attribute value gets printed as well */
  28 function plc_introspect (txt,obj,verbose,attribute) {
  29   window.console.log ('=== beg intro ' + txt);
  30   for (var prop in obj) {
  31     if ( (attribute === undefined) || ( prop == attribute ) )
  32       if (verbose)
  33         window.console.log (prop + '=' + obj[prop]);
  34       else
  35         window.console.log (prop);
  36   }
  37   window.console.log ('=== end intro ' + txt);
  38 }
  39
  40 var miniTab = {
  41  currentTab:     0,
  42  activeTab:      0,
  43  destX:          0,
  44  destW:          0,
  45  t:              0,
  46  b:              0,
  47  c:              0,
  48  d:              20,
  49  animInterval:   null,
  50  sliderObj:      null,
  51  aHeight:        0,
  52  ul:             [],
  53  liArr:          [],
  54  inputArr:       [],
  55
  56  init: function() {
  57
  58     /* define getElementsByClassName on Element if missing */
  59     if ( ! Element.prototype.getElementsByClassName ) {
  60       Element.prototype.getElementsByClassName = function (cls) {
  61         var retVal = new Array();
  62         var elements = this.getElementsByTagName("*");
  63         for (var i = 0; i < elements.length; i++) {
  64           var element = elements[i];
  65           var classes = element.className.split(" ");
  66           for (var c = 0; c < classes.length; c++)
  67             if (classes[c] == cls)
  68               retVal.push(elements[i]);
  69         }
  70         return retVal;
  71       }
  72     }
  73
  74     miniTab.ul          = document.getElementById("minitabs-list");
  75     miniTab.liArr       = miniTab.ul.getElementsByTagName("li");
  76     // Thierry: the original impl. relied on <a> links rather than forms
  77     // we use <input>s and there might be hidden ones, so use a class marker instead
  78     miniTab.inputArr        = miniTab.ul.getElementsByClassName("minitabs-submit");
  79
  80     for(var i = 0, li; li = miniTab.liArr[i]; i++) {
  81       li.onmouseover = miniTab.inputArr[i].onfocus = function(e) {
  82         var pos = 0;
  83         var elem = this;
  84         /* some browsers - firefox - somehow trigger this on <input> */
  85         if (this.nodeName != "LI") return;
  86         /* move up until we find the 'LI' tag */
  87         while(elem.previousSibling) {
  88           elem = elem.previousSibling;
  89           if(elem.tagName && elem.tagName == "LI") pos++;
  90
  91         }
  92         miniTab.initSlide(pos);
  93       }
  94     }
  95
  96     miniTab.ul.onmouseout = function(e) {
  97       miniTab.initSlide(miniTab.currentTab);
  98       miniTab.setActive (miniTab.activeTab,false);
  99     };
 100
 101     for(var i = 0, a; a = miniTab.inputArr[i]; i++) {
 102       if(a.className.search("active") != -1) {
 103         miniTab.activeTab = miniTab.currentTab = i;
 104       }
 105       a.style.borderBottom  = "0px";
 106       /*a.style.paddingBottom = "6px";*/
 107     }
 108
 109     miniTab.slideObj                = miniTab.ul.parentNode.appendChild(document.createElement("div"));
 110     miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
 111     miniTab.slideObj.id             = "minitabs-sliding";
 112     miniTab.slideObj.style.top      = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop +
 113                                        miniTab.inputArr[miniTab.activeTab].offsetTop) + "px";
 114     miniTab.slideObj.style.left     = (miniTab.ul.offsetLeft + miniTab.liArr[miniTab.activeTab].offsetLeft +
 115                                        miniTab.inputArr[miniTab.activeTab].offsetLeft) + "px";
 116     miniTab.slideObj.style.width    = miniTab.inputArr[miniTab.activeTab].offsetWidth + "px";
 117     miniTab.aHeight                 = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop +
 118                                        miniTab.inputArr[miniTab.activeTab].offsetTop);
 119
 120     miniTab.initSlide(miniTab.activeTab, true);
 121
 122     var intervalMethod = function() { miniTab.slideIt(); }
 123     miniTab.animInterval = setInterval(intervalMethod,10);
 124   },
 125
 126  cleanUp: function() {
 127     clearInterval(miniTab.animInterval);
 128     miniTab.animInterval = null;
 129   },
 130
 131  initSlide: function(pos, force) {
 132     if(!force && pos == miniTab.activeTab) return;
 133     miniTab.setActive (miniTab.activeTab,false);
 134     miniTab.activeTab = pos;
 135     miniTab.setActive (miniTab.activeTab,true);
 136     miniTab.initAnim();
 137   },
 138
 139  setActive: function (pos,active) {
 140     var input=miniTab.liArr[pos].getElementsByClassName("minitabs-submit")[0];
 141     var cn=input.className;
 142     cn=cn.replace(" active","");
 143     if (active) cn += " active";
 144     input.className=cn;
 145   },
 146
 147  initAnim: function() {
 148     /* search for the input with type != hidden */
 149     var input=miniTab.liArr[miniTab.activeTab].getElementsByClassName("minitabs-submit")[0];
 150     miniTab.destX = parseInt(miniTab.liArr[miniTab.activeTab].offsetLeft + input.offsetLeft + miniTab.ul.offsetLeft);
 151     miniTab.destW = parseInt(input.offsetWidth);
 152     miniTab.t = 0;
 153     miniTab.b = miniTab.slideObj.offsetLeft;
 154     miniTab.c = miniTab.destX - miniTab.b;
 155
 156     miniTab.bW = miniTab.slideObj.offsetWidth;
 157     miniTab.cW = miniTab.destW - miniTab.bW;
 158
 159     miniTab.slideObj.style.top = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop) + "px";
 160   },
 161
 162  slideIt:function() {
 163
 164     // Has the browser text size changed?
 165     if(miniTab.aHeight != miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop) {
 166       miniTab.initAnim();
 167       miniTab.aHeight = miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop
 168     };
 169
 170     if(miniTab.t++ < miniTab.d) {
 171       var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d);
 172       var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d);
 173
 174       miniTab.slideObj.style.left = parseInt(x) + "px";
 175       miniTab.slideObj.style.width = parseInt(w) + "px";
 176     } else {
 177       miniTab.slideObj.style.left = miniTab.destX + "px";
 178       miniTab.slideObj.style.width = miniTab.destW +"px";
 179     }
 180   },
 181
 182  animate: function(t,b,c,d) {
 183     if ((t/=d/2) < 1) return c/2*t*t + b;
 184     return -c/2 * ((--t)*(t-2) - 1) + b;
 185   },
 186
 187  submit: function (message) {
 188     /* save activeTab before confirmation; some browsers - firefox - send mouseout during confirm .. */
 189     var submitTab = this.activeTab;
 190     /* ask for confirmation if message is not empty */
 191     if (message && ! confirm (message) ) return;
 192     this.inputArr[submitTab].parentNode.parentNode.submit();
 193   },
 194 }
 195
 196 window.onload = miniTab.init;
 197 window.onunload = miniTab.cleanUp;
 198