1 /*

     2  * The jBox menu system. Written by Dan Fuhry and licensed under the GPL.

     3  */

     4 

     5 // Cache of DOM and event objects, used in setTimeout() calls due to scope rules

     6 var jBoxObjCache = new Object();

     7 

     8 // Cache of "correct" heights for unordered list objects used in submenus. Helps the animation routine know what height it's aiming for.

     9 var jBoxMenuHeights = new Object();

    10 

    11 // Blocks animations from running if there's already an animation going on the same object

    12 var jBoxSlideBlocker = new Object();

    13 

    14 // Speed at which the menus should slide open. 1 to 100 or -1 to disable.

    15 // Setting this higher than 100 will cause an infinite loop in the browser.

    16 // Default is 80 - anything higher than 90 means exponential speed increase

    17 var slide_speed = 80;

    18 

    19 // Inertia value to start with

    20 // Default is 0

    21 var inertia_base = 0;

    22 

    23 // Value added to inertia_base on each frame - generally 1 to 3 is good, with 1 being slowest animation

    24 // Default is 1

    25 var inertia_inc  = 1;

    26 

    27 // Opacity that menus should fade to. 1 to 100 or -1 to disable fades. This only works if the slide effect is also enabled.

    28 // Default is 100

    29 var jBox_opacity = 100;

    30 

    31 // Adds the jBox CSS to the HTML header. Called on window onload.

    32 function jBoxInit()

    33 {

    34   setTimeout('jBoxBatchSetup();', 200);

    35 }

    36 

    37 // Initializes each menu.

    38 function jBoxBatchSetup()

    39 {

    40   var menus = document.getElementsByClassName('div', 'menu_nojs');

    41   if ( menus.length > 0 )

    42   {

    43     for ( var i in menus )

    44     {

    45       if ( typeof(menus[i]) != 'object')

    46         continue; // toJSONString() compatibility

    47       jBoxSetup(menus[i]);

    48     }

    49   }

    50 }

    51 

    52 // Initializes a div with a jBox menu in it.

    53 function jBoxSetup(obj)

    54 {

    55   $(obj).addClass('menu');

    56   removeTextNodes(obj);

    57   for ( var i in obj.childNodes )

    58   {

    59     /* normally this would be done in about 2 lines of code, but javascript is so picky..... */

    60     if ( obj.childNodes[i] )

    61     {

    62       if ( obj.childNodes[i].tagName )

    63       {

    64         if ( obj.childNodes[i].tagName.toLowerCase() == 'a' )

    65         {

    66           if ( obj.childNodes[i].nextSibling.tagName )

    67           {

    68             if ( obj.childNodes[i].nextSibling.tagName.toLowerCase() == 'ul' || ( obj.childNodes[i].nextSibling.tagName.toLowerCase() == 'div' && obj.childNodes[i].nextSibling.className == 'submenu' ) )

    69             {

    70               // Calculate height

    71               var ul = obj.childNodes[i].nextSibling;

    72               domObjChangeOpac(0, ul);

    73               ul.style.display = 'block';

    74               var dim = fetch_dimensions(ul);

    75               if ( !ul.id )

    76                 ul.id = 'jBoxmenuobj_' + Math.floor(Math.random() * 10000000);

    77               jBoxMenuHeights[ul.id] = parseInt(dim['h']) - 2; // subtract 2px for border width

    78               ul.style.display = 'none';

    79               domObjChangeOpac(100, ul);

    80               

    81               // Setup events

    82               obj.childNodes[i].onmouseover = function()  { jBoxOverHandler(this); };

    83               obj.childNodes[i].onmouseout = function(e)  { jBoxOutHandler(this, e); };

    84               obj.childNodes[i].nextSibling.onmouseout = function(e)  { jBoxOutHandler(this, e); };

    85             }

    86           }

    87         }

    88       }

    89     }

    90   }

    91 }

    92 

    93 // Called when user hovers mouse over a submenu

    94 function jBoxOverHandler(obj)

    95 {

    96   // Random ID used to track the object to perform on

    97   var seed = Math.floor(Math.random() * 1000000);

    98   jBoxObjCache[seed] = obj;

    99   

   100   // Sleep for a (little more than a tenth of a) second to see if the user really wants the menu to expand

   101   setTimeout('if(isOverObj(jBoxObjCache['+seed+'], false, false)) jBoxOverHandlerBin(jBoxObjCache['+seed+']);', 150);

   102 }

   103 

   104 // Displays a menu.

   105 function jBoxOverHandlerBin(obj)

   106 {

   107   var others = obj.parentNode.getElementsByTagName('ul');

   108   for ( var i in others )

   109   {

   110     if(typeof(others[i]) == 'object')

   111     {

   112       others[i].style.display = 'none';

   113       others[i].previousSibling.className = '';

   114     }

   115   }

   116   var others = obj.parentNode.getElementsByTagName('div');

   117   for ( var i in others )

   118   {

   119     if(typeof(others[i]) == 'object')

   120     {

   121       if ( others[i].className == 'submenu' )

   122       {

   123         others[i].style.display = 'none';

   124         others[i].previousSibling.className = '';

   125       }

   126     }

   127   }

   128   if(obj.nextSibling.tagName.toLowerCase() == 'ul' || ( obj.nextSibling.tagName.toLowerCase() == 'div' && obj.nextSibling.className == 'submenu' ))

   129   {

   130     obj.className = 'liteselected';

   131     var ul = obj.nextSibling;

   132     var dim = fetch_dimensions(obj);

   133     var off = fetch_offset(obj);

   134     var dimh = parseInt(dim['h']);

   135     var offtop = parseInt(off['top']);

   136     var top = dimh + offtop;

   137     left = off['left'];

   138     ul.style.left = left + 'px';

   139     ul.style.top = top + 'px';

   140     domObjChangeOpac(0, ul);

   141     ul.style.clip = 'rect(auto,auto,auto,auto)';

   142     ul.style.overflow = 'visible';

   143     ul.style.display = 'block';

   144     slideOut(ul);

   145   }

   146 }

   147 

   148 function jBoxOutHandler(obj, event)

   149 {

   150   var seed = Math.floor(Math.random() * 1000000);

   151   var seed2 = Math.floor(Math.random() * 1000000);

   152   jBoxObjCache[seed] = obj;

   153   jBoxObjCache[seed2] = event;

   154   setTimeout('jBoxOutHandlerBin(jBoxObjCache['+seed+'], jBoxObjCache['+seed2+']);', 750);

   155 }

   156 

   157 function jBoxOutHandlerBin(obj, event)

   158 {

   159   var caller = obj.tagName.toLowerCase();

   160   if(caller == 'a')

   161   {

   162     a = obj;

   163     ul = obj.nextSibling;

   164   }

   165   else if(caller == 'ul' || caller == 'div')

   166   {

   167     a = obj.previousSibling;

   168     ul = obj;

   169   }

   170   else

   171   {

   172     return false;

   173   }

   174   

   175   if (!isOverObj(a, false, event) && !isOverObj(ul, true, event))

   176   {

   177     a.className = '';

   178     

   179     slideIn(ul);

   180     

   181   }

   182   

   183   return true;

   184 }

   185 

   186 // Slide an element downwards until it is at full height.

   187 // First parameter should be a DOM object with style.display = block and opacity = 0.

   188 

   189 var sliderobj = new Object();

   190 

   191 function slideOut(obj)

   192 {

   193   if ( jBoxSlideBlocker[obj.id] )

   194     return false;

   195   

   196   jBoxSlideBlocker[obj.id] = true;

   197   

   198   if ( slide_speed == -1 )

   199   {

   200     obj.style.display = 'block';

   201     return false;

   202   }

   203   

   204   var currentheight = 0;

   205   var targetheight = jBoxMenuHeights[obj.id];

   206   var inertiabase = inertia_base;

   207   var inertiainc = inertia_inc;

   208   slideStep(obj, 0);

   209   domObjChangeOpac(100, obj);

   210   obj.style.overflow = 'hidden';

   211   

   212   // Don't edit past here

   213   var timercnt = 0;

   214   

   215   var seed = Math.floor(Math.random() * 1000000);

   216   sliderobj[seed] = obj;

   217   

   218   var framecnt = 0;

   219   

   220   while(true)

   221   {

   222     framecnt++;

   223     timercnt += ( 100 - slide_speed );

   224     inertiabase += inertiainc;

   225     currentheight += inertiabase;

   226     if ( currentheight > targetheight )

   227       currentheight = targetheight;

   228     setTimeout('slideStep(sliderobj['+seed+'], '+currentheight+', '+targetheight+');', timercnt);

   229     if ( currentheight >= targetheight )

   230       break;

   231   }

   232   timercnt = timercnt + ( 100 - slide_speed );

   233   setTimeout('jBoxSlideBlocker[sliderobj['+seed+'].id] = false;', timercnt);

   234   var opacstep = jBox_opacity / framecnt;

   235   var opac = 0;

   236   var timerstep = 0;

   237   domObjChangeOpac(0, obj);

   238   while(true)

   239   {

   240     timerstep += ( 100 - slide_speed );

   241     opac += opacstep;

   242     setTimeout('domObjChangeOpac('+opac+', sliderobj['+seed+']);', timerstep);

   243     if ( opac >= jBox_opacity )

   244       break;

   245   }

   246 }

   247 

   248 function slideIn(obj)

   249 {

   250   if ( obj.style.display != 'block' )

   251     return false;

   252   

   253   if ( jBoxSlideBlocker[obj.id] )

   254     return false;

   255   

   256   jBoxSlideBlocker[obj.id] = true;

   257   

   258   var targetheight = 0;

   259   var dim = fetch_dimensions(obj);

   260   var currentheight = jBoxMenuHeights[obj.id];

   261   var origheight = currentheight;

   262   var inertiabase = inertia_base;

   263   var inertiainc = inertia_inc;

   264   domObjChangeOpac(100, obj);

   265   obj.style.overflow = 'hidden';

   266   

   267   // Don't edit past here

   268   var timercnt = 0;

   269   

   270   var seed = Math.floor(Math.random() * 1000000);

   271   sliderobj[seed] = obj;

   272   

   273   var framecnt = 0;

   274   

   275   for(var j = 0;j<100;j++) // while(true)

   276   {

   277     framecnt++;

   278     timercnt = timercnt + ( 100 - slide_speed );

   279     inertiabase = inertiabase + inertiainc;

   280     currentheight = currentheight - inertiabase;

   281     if ( currentheight < targetheight )

   282       currentheight = targetheight;

   283     setTimeout('slideStep(sliderobj['+seed+'], '+currentheight+');', timercnt);

   284     if ( currentheight <= targetheight )

   285       break;

   286   }

   287   timercnt += ( 100 - slide_speed );

   288   setTimeout('sliderobj['+seed+'].style.display="none";sliderobj['+seed+'].style.height="'+origheight+'px";jBoxSlideBlocker[sliderobj['+seed+'].id] = false;', timercnt);

   289   

   290   var opacstep = jBox_opacity / framecnt;

   291   var opac = jBox_opacity;

   292   var timerstep = 0;

   293   domObjChangeOpac(100, obj);

   294   while(true)

   295   {

   296     timerstep += ( 100 - slide_speed );

   297     opac -= opacstep;

   298     setTimeout('domObjChangeOpac('+opac+', sliderobj['+seed+']);', timerstep);

   299     if ( opac <= 0 )

   300       break;

   301   }

   302   

   303 }

   304 

   305 function slideStep(obj, height, maxheight)

   306 {

   307   obj.style.height = height + 'px';

   308   //obj.style.clip = 'rect(3px,auto,'+maxheight+'px,auto)';

   309   obj.style.overflow = 'hidden';

   310   //obj.style.clip = 'rect('+height+'px,0px,'+maxheight+'px,auto);';

   311 }

   312 

   313 function isOverObj(obj, bias, event)

   314 {

   315   var fieldUL = new Object();

   316   var dim = fetch_dimensions(obj);

   317   var off = fetch_offset(obj);

   318   fieldUL['top'] = off['top'];

   319   fieldUL['left'] = off['left'];

   320   fieldUL['right'] = off['left'] + dim['w'];

   321   fieldUL['bottom'] = off['top'] + dim['h'];

   322   

   323   //document.getElementById('debug').innerHTML = '<br /><br /><br /><br /><br />Mouse: x: '+mouseX+', y:' + mouseY + '<br />'; // + document.getElementById('debug').innerHTML;

   324   

   325   if(bias)

   326   {

   327     if ( ( mouseX < fieldUL['left'] + 2 || mouseX > fieldUL['right']  - 5 ) ||

   328          ( mouseY < fieldUL['top']  - 2 || mouseY > fieldUL['bottom'] - 2 ) )

   329     {

   330        return false;

   331     }

   332   }

   333   else

   334   {

   335     if ( ( mouseX < fieldUL['left'] || mouseX > fieldUL['right']  ) ||

   336          ( mouseY < fieldUL['top']  || mouseY > fieldUL['bottom'] ) )

   337        return false;

   338   }

   339      

   340   return true;

   341   

   342   /*

   343   var tgt = event.target;

   344   if ( !tgt )

   345     return false;

   346   do {

   347     if ( tgt == obj )

   348       return true;

   349     tgt = tgt.parentNode;

   350   } while (tgt.tagName.toLowerCase() != 'body' );

   351   return false;

   352   */

   353 }

   354 

   355 function jBoxGarbageCollection(e)

   356 {

   357   setMousePos(e);

   358   var menus = document.getElementsByClassName('div', 'menu');

   359   if ( menus.length > 0 )

   360   {

   361     for ( var i in menus )

   362     {

   363       if ( typeof(menus[i]) != 'object')

   364         continue; // toJSONString() compatibility

   365       var uls = menus[i].getElementsByTagName('ul');

   366       if ( uls.length > 0 )

   367       {

   368         for ( var j = 0; j < uls.length; j++ )

   369         {

   370           if ( !isOverObj(uls[j], false, e) )

   371           {

   372             uls[j].previousSibling.className = '';

   373             //uls[j].style.display = 'none';

   374             slideIn(uls[j]);

   375           }

   376         }

   377       }

   378       var uls = getElementsByClassName(menus[i], 'divs', 'submenu');

   379       if ( uls.length > 0 )

   380       {

   381         for ( var j = 0; j < uls.length; j++ )

   382         {

   383           if ( !isOverObj(uls[j], false, e) )

   384           {

   385             uls[j].previousSibling.className = '';

   386             //uls[j].style.display = 'none';

   387             slideIn(uls[j]);

   388           }

   389         }

   390       }

   391     }

   392   }

   393 }

   394 

   395 document.onclick = jBoxGarbageCollection;

   396 

   397 function removeTextNodes(obj)

   398 {

   399   if(obj)

   400   {

   401     if(typeof(obj.tagName) != 'string')

   402     {

   403       if ( obj.nodeType == 3 && obj.data.match(/^([\s]*)$/ig) ) 

   404       {

   405         obj.parentNode.removeChild(obj);

   406         return;

   407       }

   408     }

   409     if(obj.firstChild)

   410     {

   411       for(var i in obj.childNodes)

   412       {

   413         removeTextNodes(obj.childNodes[i]);

   414       }

   415     }

   416   }

   417 }

   418 

   419 var getElementsByClassName = function(parent, type, cls) {

   420   if(!type)

   421     type = '*';

   422   ret = new Array();

   423   el = parent.getElementsByTagName(type);

   424   for ( var i in el )

   425   {

   426     if ( typeof(el[i]) != 'object')

   427       continue; // toJSONString() compatibility

   428     if(el[i].className)

   429     {

   430       if(el[i].className.indexOf(' ') > 0)

   431       {

   432         classes = el[i].className.split(' ');

   433       }

   434       else

   435       {

   436         classes = new Array();

   437         classes.push(el[i].className);

   438       }

   439       if ( in_array(cls, classes) )

   440         ret.push(el[i]);

   441     }

   442   }

   443   return ret;

   444 }

   445 

   446 document.getElementsByClassName = function(type, cls) {

   447   return getElementsByClassName(document, type, cls);

   448 }

   449 

   450 function setMousePos(event)

   451 {

   452   if(IE)

   453   {

   454     if(!event)

   455     {

   456       event = window.event;

   457     }

   458     clX = event.clientX;

   459     sL  = document.body.scrollLeft;

   460     mouseX = clX + sL;

   461     mouseY = event.clientY + document.body.scrollTop;

   462     return;

   463   }

   464   if( typeof(event.clientX) == 'number' )

   465   {

   466     mouseX = event.clientX;

   467     mouseY = event.clientY;

   468     return;

   469   }

   470   else if( typeof(event.layerX) == 'number' )

   471   {

   472     mouseX = event.layerX;

   473     mouseY = event.layerY;

   474     return;

   475   }

   476   else if( typeof(event.offsetX) == 'number' )

   477   {

   478     mouseX = event.offsetX;

   479     mouseY = event.offsetY;

   480     return;

   481   }

   482   else if( typeof(event.screenX) == 'number' )

   483   {

   484     mouseX = event.screenX;

   485     mouseY = event.screenY;

   486     return;

   487   }

   488   else if( typeof(event.x) == 'number' )

   489   {

   490     mouseX = event.x;

   491     mouseY = event.y;

   492     return;

   493   }

   494 }

   495 

   496 document.onmousemove = function(e)

   497 {

   498   setMousePos(e);

   499 };

   500 

   501 function domObjChangeOpac(opacity, id) {

   502     var object = id.style;

   503     object.opacity = (opacity / 100);

   504     object.MozOpacity = (opacity / 100);

   505     object.KhtmlOpacity = (opacity / 100);

   506     object.filter = "alpha(opacity=" + opacity + ")";

   507 }

   508