Template:Team:HokkaidoU Japan/header/js

From 2013.igem.org

Revision as of 13:31, 21 September 2013

/*!

* hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
* http://cherne.net/brian/resources/jquery.hoverIntent.html
*
* You may use hoverIntent under the terms of the MIT license. Basically that
* means you are free to use hoverIntent as long as this header is left intact.
* Copyright 2007, 2013 Brian Cherne
*/

/* hoverIntent is similar to jQuery's built-in "hover" method except that

* instead of firing the handlerIn function immediately, hoverIntent checks
* to see if the user's mouse has slowed down (beneath the sensitivity
* threshold) before firing the event. The handlerOut function is only
* called after a matching handlerIn.
*
* // basic usage ... just like .hover()
* .hoverIntent( handlerIn, handlerOut )
* .hoverIntent( handlerInOut )
*
* // basic usage ... with event delegation!
* .hoverIntent( handlerIn, handlerOut, selector )
* .hoverIntent( handlerInOut, selector )
*
* // using a basic configuration object
* .hoverIntent( config )
*
* @param  handlerIn   function OR configuration object
* @param  handlerOut  function OR selector for delegation OR undefined
* @param  selector    selector OR undefined
* @author Brian Cherne <brian(at)cherne(dot)net>
*/

(function($) {

 $.fn.hoverIntent = function(handlerIn,handlerOut,selector) {

   // default configuration values
   var cfg = {
     interval: 100,

sensitivity: 7, timeout: 0

   };

   if ( typeof handlerIn === "object" ) {
     cfg = $.extend(cfg, handlerIn );
   } else if ($.isFunction(handlerOut)) {
     cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } );
   } else {
     cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } );
   }

   // instantiate variables
   // cX, cY = current X and Y position of mouse, updated by mousemove event
   // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
   var cX, cY, pX, pY;

   // A private function for getting mouse position
   var track = function(ev) {
     cX = ev.pageX;
     cY = ev.pageY;
   };

   // A private function for comparing current and previous mouse position
   var compare = function(ev,ob) {
     ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
     // compare mouse positions to see if they've crossed the threshold
     if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
       $(ob).off("mousemove.hoverIntent",track);
       // set hoverIntent state to true (so mouseOut can be called)
       ob.hoverIntent_s = 1;
       return cfg.over.apply(ob,[ev]);
     } else {
       // set previous coordinates for next time
       pX = cX; pY = cY;
       // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
       ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
     }
   };

   // A private function for delaying the mouseOut function
   var delay = function(ev,ob) {
     ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
     ob.hoverIntent_s = 0;
     return cfg.out.apply(ob,[ev]);
   };

   // A private function for handling mouse 'hovering'
   var handleHover = function(e) {
     // copy objects to be passed into t (required for event object to be passed in IE)
     var ev = jQuery.extend({},e);
     var ob = this;

     // cancel hoverIntent timer if it exists
     if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

     // if e.type == "mouseenter"
     if (e.type == "mouseenter") {
       // set "previous" X and Y position based on initial entry point
       pX = ev.pageX; pY = ev.pageY;
       // update "current" X and Y position based on mousemove
       $(ob).on("mousemove.hoverIntent",track);
       // start polling interval (self-calling timeout) to compare mouse coordinates over time
       if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}

       // else e.type == "mouseleave"
     } else {
       // unbind expensive mousemove event
       $(ob).off("mousemove.hoverIntent",track);
       // if hoverIntent state is true, then call the mouseOut function after the specified delay
       if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
     }
   };

   // listen for mouseenter and mouseleave
   return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector);
 };

})(jQuery);

/*

* DC Mega Menu - jQuery mega menu
* Copyright (c) 2011 Design Chemical
*
*/

(function($){

 //define the defaults for the plugin and how to call it
 $.fn.dcMegaMenu = function(options){
   //set default options
   var defaults = {
     classParent: 'dc-mega',

classContainer: 'sub-container', classSubParent: 'mega-hdr', classSubLink: 'mega-hdr', classWidget: 'dc-extra', rowItems: 3, speed: 'fast', effect: 'fade', event: 'hover', fullWidth: false, onLoad : function(){}, beforeOpen : function(){}, beforeClose: function(){}

   };

   //call in the default otions
   var options = $.extend(defaults, options);
   var $dcMegaMenuObj = this;

   //act upon the element that is passed into the design
   return $dcMegaMenuObj.each(function(options){

     var clSubParent = defaults.classSubParent;
     var clSubLink = defaults.classSubLink;
     var clParent = defaults.classParent;
     var clContainer = defaults.classContainer;
     var clWidget = defaults.classWidget;

     megaSetup();

     function megaOver(){
       var subNav = $('.sub',this);
       $(this).addClass('mega-hover');
       if(defaults.effect == 'fade'){
         $(subNav).fadeIn(defaults.speed);
       }
       if(defaults.effect == 'slide'){
         $(subNav).show(defaults.speed);
       }
       // beforeOpen callback;
       defaults.beforeOpen.call(this);
     }
     function megaAction(obj){
       var subNav = $('.sub',obj);
       $(obj).addClass('mega-hover');
       if(defaults.effect == 'fade'){
         $(subNav).fadeIn(defaults.speed);
       }
       if(defaults.effect == 'slide'){
         $(subNav).show(defaults.speed);
       }
       // beforeOpen callback;
       defaults.beforeOpen.call(this);
     }
     function megaOut(){
       var subNav = $('.sub',this);
       $(this).removeClass('mega-hover');
       $(subNav).hide();
       // beforeClose callback;
       defaults.beforeClose.call(this);
     }
     function megaActionClose(obj){
       var subNav = $('.sub',obj);
       $(obj).removeClass('mega-hover');
       $(subNav).hide();
       // beforeClose callback;
       defaults.beforeClose.call(this);
     }
     function megaReset(){
       $('li',$dcMegaMenuObj).removeClass('mega-hover');
       $('.sub',$dcMegaMenuObj).hide();
     }

     function megaSetup(){
       $arrow = '';
       var clParentLi = clParent+'-li';
       var menuWidth = $dcMegaMenuObj.outerWidth();
       $('> li',$dcMegaMenuObj).each(function(){
         //Set Width of sub
         var $mainSub = $('> ul',this);
         var $primaryLink = $('> a',this);
         if($mainSub.length){
           $primaryLink.addClass(clParent).append($arrow);
           $mainSub.addClass('sub').wrap('<div class="'+clContainer+'" />');

           var pos = $(this).position();
           pl = pos.left;

           if($('ul',$mainSub).length){
             $(this).addClass(clParentLi);
             $('.'+clContainer,this).addClass('mega');
             $('> li',$mainSub).each(function(){
               if(!$(this).hasClass(clWidget)){
                 $(this).addClass('mega-unit');
                 if($('> ul',this).length){
                   $(this).addClass(clSubParent);
                   $('> a',this).addClass(clSubParent+'-a');
                 } else {
                   $(this).addClass(clSubLink);
                   $('> a',this).addClass(clSubLink+'-a');
                 }
               }
             });

             // Create Rows
             var hdrs = $('.mega-unit',this);
             rowSize = parseInt(defaults.rowItems);
             for(var i = 0; i < hdrs.length; i+=rowSize){
               hdrs.slice(i, i+rowSize).wrapAll('<div class="row" />');
             }

             // Get Sub Dimensions & Set Row Height
             $mainSub.show();

             // Get Position of Parent Item
             var pw = $(this).width();
             var pr = pl + pw;

             // Check available right margin
             var mr = menuWidth - pr;

             // // Calc Width of Sub Menu
             var subw = $mainSub.outerWidth();
             var totw = $mainSub.parent('.'+clContainer).outerWidth();
             var cpad = totw - subw;

             if(defaults.fullWidth == true){
               var fw = menuWidth - cpad;
               $mainSub.parent('.'+clContainer).css({width: fw+'px'});
               $dcMegaMenuObj.addClass('full-width');
             }
             var iw = $('.mega-unit',$mainSub).outerWidth(true);
             var rowItems = $('.row:eq(0) .mega-unit',$mainSub).length;
             var inneriw = iw * rowItems;
             var totiw = inneriw + cpad;

             // Set mega header height
             $('.row',this).each(function(){
               $('.mega-unit:last',this).addClass('last');
               var maxValue = undefined;
               $('.mega-unit > a',this).each(function(){
                 var val = parseInt($(this).height());
                 if (maxValue === undefined || maxValue < val){
                   maxValue = val;
                 }
               });
               $('.mega-unit > a',this).css('height',maxValue+'px');
               $(this).css('width',inneriw+'px');
             });

             // Calc Required Left Margin incl additional required for right align

             if(defaults.fullWidth == true){
               params = {left: 0};
             } else {

               var ml = mr < ml ? ml + ml - mr : (totiw - pw)/2;
               var subLeft = pl - ml;

               // If Left Position Is Negative Set To Left Margin
               var params = {left: pl+'px', marginLeft: -ml+'px'};

               params = {left: 0};
             }
             $('.'+clContainer,this).css(params);

             // Calculate Row Height
             $('.row',$mainSub).each(function(){
               var rh = $(this).height();
               $('.mega-unit',this).css({height: rh+'px'});
               $(this).parent('.row').css({height: rh+'px'});
             });
             $mainSub.hide();

           } else {
             $(this).addClass('dc-nonmega-li');
             $('.'+clContainer,this).addClass('non-mega').css('left',pl+'px');
           }
         }
       });
       // Set position of mega dropdown to bottom of main menu
       var menuHeight = $('> li > a',$dcMegaMenuObj).outerHeight(true);
       $('.'+clContainer,$dcMegaMenuObj).css({top: menuHeight+'px'}).css('z-index','1000');

       if(defaults.event == 'hover'){
         // HoverIntent Configuration
         var config = {
           sensitivity: 2,
           interval: 100,
           over: megaOver,
           timeout: 400,
           out: megaOut
         };
         $('li',$dcMegaMenuObj).hoverIntent(config);
       }

       if(defaults.event == 'click'){

         $('body').mouseup(function(e){
           if(!$(e.target).parents('.mega-hover').length){
             megaReset();
           }
         });

         $('> li > a.'+clParent,$dcMegaMenuObj).click(function(e){
           var $parentLi = $(this).parent();
           if($parentLi.hasClass('mega-hover')){
             megaActionClose($parentLi);
           } else {
             megaAction($parentLi);
           }
           e.preventDefault();
         });
       }

       // onLoad callback;
       defaults.onLoad.call(this);
     }
   });
 };

})(jQuery);

(function() {

 $(function() {
   $('#header-menu').dcMegaMenu({
     rowItems: '5',
     speed: 'fast',
     effect: 'fade'
   });
   return $('#header-menu .dc-nonmega-li .sub-container').css('left', 0);
 });

}).call(this); (function() {

 $(function() {