plekit/linetabs/linetabs.js

   1 /*
   2   $Id$
   3
   4   Animated linetabs by frequency decoder (http://www.frequency-decoder.com/)
   5
   6   Based on an idea by Rob L Glazebrook (http://www.rootarcana.com/test/smartmini/) itself
   7   derived from the original idea of Stephen Clark (http://www.sgclark.com/sandbox/minislide/)
   8
   9   Rewritten by Thierry Parmentelat -- INRIA
  10   support http-POST
  11   support multiple instances
  12   uses prototype.js
  13
  14 */
  15
  16 /* class */
  17 function linetabs () {
  18   this.currentTab = 0;
  19   this.activeTab = 0;
  20   this.destX = 0;
  21   this.destW = 0;
  22   this.t = 0;
  23   this.b = 0;
  24   this.c = 0;
  25   this.d = 20;
  26   this.animInterval = null;
  27   this.elem_div_linetabs = null;
  28   this.slideObj = null;
  29   this.aHeight = 0;
  30 }
  31
  32 linetabs.prototype.init = function (div) {
  33   this.ul      = div.down('ul');
  34   /* the array of <li>'s */
  35   this.li_s    = this.ul.select('li');
  36   /* the array of active <input>'s - without any hidden one */
  37   this.input_s = this.ul.select('input.linetabs-submit');
  38
  39   /* attach event handlers */
  40   this.li_s.each ( function (li) {
  41       li.observe ('mouseover', function(event) {
  42           var elem = event.element();
  43           /* make sure we're on the 'li' element */
  44           if ( ! elem.match('li') ) elem=elem.up('li');
  45           /* determine current position */
  46           var pos = 0;
  47           while(elem.previousSibling) {
  48             elem = elem.previousSibling;
  49             if (elem.tagName && elem.tagName == "LI") pos++;
  50           }
  51           linetabs_namespace.the_linetabs(elem).initSlide(pos,true);
  52         } );
  53    } );
  54
  55   this.ul.observe('mouseout', function (event) {
  56       var mt = linetabs_namespace.the_linetabs(event.element());
  57       mt.initSlide(mt.currentTab,true);
  58       mt.setActive (mt.activeTab,false);
  59     });
  60
  61   /* set active and current, default is index 0, set 'active' class otherwise */
  62   this.input_s.each ( function (input) {
  63       if (input.hasClassName("active")) this.activeTab = this.currentTab = i;
  64     });
  65
  66   /* create slice object */
  67   this.slideObj    = this.ul.parentNode.appendChild(document.createElement("div"));
  68   this.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
  69   this.slideObj.id = "linetabs-sliding";
  70
  71     /* position it */
  72   this.setSlidingTop();
  73   this.slideObj.style.left     = (this.ul.offsetLeft + this.li_s[this.activeTab].offsetLeft +
  74                                   this.input_s[this.activeTab].offsetLeft) + "px";
  75   this.slideObj.style.width    = this.input_s[this.activeTab].offsetWidth + "px";
  76   this.aHeight                 = (this.ul.offsetTop + this.li_s[this.activeTab].offsetTop +
  77                                   this.input_s[this.activeTab].offsetTop);
  78
  79   this.initSlide(this.activeTab, true);
  80
  81 };
  82
  83 linetabs.prototype.initSlide = function (pos, force) {
  84
  85   if(!force && pos == this.activeTab) return;
  86   this.setActive (this.activeTab,false);
  87   this.activeTab = pos;
  88   this.setActive (this.activeTab,true);
  89   this.initAnim();
  90 };
  91
  92 linetabs.prototype.setActive = function (pos,active) {
  93   var input=this.li_s[pos].select('input.linetabs-submit')[0];
  94   if (active)
  95     input.addClassName('active');
  96   else
  97     input.removeClassName('active');
  98 };
  99
 100 linetabs.prototype.setSlidingTop = function () {
 101   var delta=0;
 102   /* up 5px for firefox */
 103   /*window.console.log('agent=' + navigator.userAgent);*/
 104   if (navigator.userAgent.match(/Firefox/)) delta=-5;
 105   this.slideObj.style.top  = (this.ul.offsetTop + this.li_s[this.activeTab].offsetTop
 106                               + this.input_s[this.activeTab].offsetTop + delta ) + "px";
 107 };
 108
 109 linetabs.prototype.initAnim = function() {
 110   /* search for the input with type != hidden */
 111   var input=this.li_s[this.activeTab].select('input.linetabs-submit')[0];
 112   this.destX = parseInt(this.li_s[this.activeTab].offsetLeft + input.offsetLeft
 113                         + this.ul.offsetLeft);
 114   this.destW = parseInt(input.offsetWidth);
 115   this.t = 0;
 116   this.b = this.slideObj.offsetLeft;
 117   this.c = this.destX - this.b;
 118
 119   this.bW = this.slideObj.offsetWidth;
 120   this.cW = this.destW - this.bW;
 121
 122   this.setSlidingTop();
 123 };
 124
 125 linetabs.prototype.slideIt = function() {
 126
 127   // Has the browser text size changed?
 128   var active_li = this.li_s[this.activeTab];
 129   var active_input = this.input_s[this.activeTab];
 130   if (this.aHeight != this.ul.offsetTop + active_li.offsetTop + active_input.offsetTop) {
 131     this.initAnim();
 132     this.aHeight = this.ul.offsetTop + active_li.offsetTop + active_input.offsetTop;
 133   }
 134
 135
 136   if (this.t++ < this.d) {
 137     var x = this.animate(this.t,this.b,this.c,this.d);
 138     var w = this.animate(this.t,this.bW,this.cW,this.d);
 139
 140     this.slideObj.style.left = parseInt(x) + "px";
 141     this.slideObj.style.width = parseInt(w) + "px";
 142   } else {
 143     this.slideObj.style.left = this.destX + "px";
 144     this.slideObj.style.width = this.destW +"px";
 145   }
 146 };
 147
 148 linetabs.prototype.animate = function(t,b,c,d) {
 149   if ((t/=d/2) < 1) return c/2*t*t + b;
 150   return -c/2 * ((--t)*(t-2) - 1) + b;
 151 };
 152
 153 linetabs.prototype.submit = function (message) {
 154   /* save activeTab before confirmation; some browsers - firefox - send mouseout during confirm .. */
 155   var submitTab = this.activeTab;
 156   /* ask for confirmation if message is not empty */
 157   if (message && ! confirm (message) ) return;
 158
 159   /* get the form and trigger */
 160   this.li_s[submitTab].down('form').submit();
 161
 162 }
 163
 164 // globals
 165 var linetabs_namespace = {
 166  init: function () {
 167     // just give it a little time to load everything.
 168     setTimeout('linetabs_namespace.lazyInit()', 1000);
 169  },
 170
 171  lazyInit: function() {
 172     linetabs_namespace.elem_div_linetabs = $$('div.linetabs');
 173
 174     Event.observe('linetabs',
 175                   'mouseover',
 176                   function() {
 177                       linetabs_namespace.elem_div_linetabs = $$('div.linetabs');
 178                   });
 179
 180     linetabs_namespace.elem_div_linetabs.each (function (div) {
 181         /* create instance and attach it to the <div> element */
 182         div.linetabs = new linetabs ();
 183         div.linetabs.init(div);
 184       } ) ;
 185
 186     var intervalMethod = function () {
 187         linetabs_namespace.elem_div_linetabs.each (function (div) {
 188                 linetabs_namespace.the_linetabs(div).slideIt();
 189             } ) ;
 190     } ;
 191     linetabs_namespace.animInterval = setInterval(intervalMethod,10);
 192   },
 193
 194  cleanUp: function() {
 195     clearInterval(linetabs_namespace.animInterval);
 196     linetabs_namespace.animInterval = null;
 197     linetabs_namespace.elem_div_linetabs = null;
 198   },
 199
 200  resize: function (e) {
 201     $$('div.linetabs').each ( function (div) {
 202         var mt = div.linetabs;
 203         mt.initSlide(mt.activeTab,true);
 204       } );
 205   },
 206
 207  submit: function (id,message) {
 208     $(id).linetabs.submit(message);
 209   },
 210
 211  // find the enclosing linetabs object
 212  the_linetabs: function (elem) {
 213     if (elem.match('div.linetabs'))
 214       return elem.linetabs;
 215     else
 216       return elem.up('div.linetabs').linetabs;
 217   }
 218
 219 };
 220
 221 Event.observe(window, 'load', linetabs_namespace.init);
 222 Event.observe(window, 'unload', linetabs_namespace.cleanUp);
 223 Event.observe(window, 'resize', linetabs_namespace.resize);