Template:Team:HokkaidoU Japan/header/js

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html><script type="text/javascript">
<html><script type="text/javascript">
 +
/*!
 +
* 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($){
(function($){
-
//define the defaults for the plugin and how to call it
+
  //define the defaults for the plugin and how to call it
-
$.fn.dcMegaMenu = function(options){
+
  $.fn.dcMegaMenu = function(options){
-
//set default options
+
    //set default options
-
var defaults = {
+
    var defaults = {
-
classParent: 'dc-mega',
+
      classParent: 'dc-mega',
-
classContainer: 'sub-container',
+
classContainer: 'sub-container',
-
classSubParent: 'mega-hdr',
+
classSubParent: 'mega-hdr',
-
classSubLink: 'mega-hdr',
+
classSubLink: 'mega-hdr',
-
classWidget: 'dc-extra',
+
classWidget: 'dc-extra',
-
rowItems: 3,
+
rowItems: 3,
-
speed: 'fast',
+
speed: 'fast',
-
effect: 'fade',
+
effect: 'fade',
-
event: 'hover',
+
event: 'hover',
-
fullWidth: false,
+
fullWidth: false,
-
onLoad : function(){},
+
onLoad : function(){},
-
            beforeOpen : function(){},
+
beforeOpen : function(){},
-
beforeClose: function(){}
+
beforeClose: function(){}
-
};
+
    };
-
//call in the default otions
+
    //call in the default otions
-
var options = $.extend(defaults, options);
+
    var options = $.extend(defaults, options);
-
var $dcMegaMenuObj = this;
+
    var $dcMegaMenuObj = this;
-
//act upon the element that is passed into the design  
+
    //act upon the element that is passed into the design
-
return $dcMegaMenuObj.each(function(options){
+
    return $dcMegaMenuObj.each(function(options){
-
var clSubParent = defaults.classSubParent;
+
      var clSubParent = defaults.classSubParent;
-
var clSubLink = defaults.classSubLink;
+
      var clSubLink = defaults.classSubLink;
-
var clParent = defaults.classParent;
+
      var clParent = defaults.classParent;
-
var clContainer = defaults.classContainer;
+
      var clContainer = defaults.classContainer;
-
var clWidget = defaults.classWidget;
+
      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(){
+
      megaSetup();
-
$arrow = '<span class="dc-mega-icon"></span>';
+
-
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
+
      function megaOver(){
-
var hdrs = $('.mega-unit',this);
+
        var subNav = $('.sub',this);
-
rowSize = parseInt(defaults.rowItems);
+
        $(this).addClass('mega-hover');
-
for(var i = 0; i < hdrs.length; i+=rowSize){
+
        if(defaults.effect == 'fade'){
-
hdrs.slice(i, i+rowSize).wrapAll('<div class="row" />');
+
          $(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();
 +
      }
-
// Get Sub Dimensions & Set Row Height
+
      function megaSetup(){
-
$mainSub.show();
+
        $arrow = '<span class="dc-mega-icon"></span>';
-
+
        var clParentLi = clParent+'-li';
-
// Get Position of Parent Item
+
        var menuWidth = $dcMegaMenuObj.outerWidth();
-
var pw = $(this).width();
+
        $('> li',$dcMegaMenuObj).each(function(){
-
var pr = pl + pw;
+
          //Set Width of sub
-
+
          var $mainSub = $('> ul',this);
-
// Check available right margin
+
          var $primaryLink = $('> a',this);
-
var mr = menuWidth - pr;
+
          if($mainSub.length){
-
+
            $primaryLink.addClass(clParent).append($arrow);
-
// // Calc Width of Sub Menu
+
            $mainSub.addClass('sub').wrap('<div class="'+clContainer+'" />');
-
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 pos = $(this).position();
-
var params = {left: pl+'px', marginLeft: -ml+'px'};
+
            pl = pos.left;
-
+
-
if(subLeft < 0){
+
-
params = {left: 0};
+
-
}else if(mr < ml){
+
-
params = {right: 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 {
+
-
$('.'+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){
+
            if($('ul',$mainSub).length){
-
var $parentLi = $(this).parent();
+
              $(this).addClass(clParentLi);
-
if($parentLi.hasClass('mega-hover')){
+
              $('.'+clContainer,this).addClass('mega');
-
megaActionClose($parentLi);
+
              $('> li',$mainSub).each(function(){
-
} else {
+
                if(!$(this).hasClass(clWidget)){
-
megaAction($parentLi);
+
                  $(this).addClass('mega-unit');
-
}
+
                  if($('> ul',this).length){
-
e.preventDefault();
+
                    $(this).addClass(clSubParent);
-
});
+
                    $('> a',this).addClass(clSubParent+'-a');
-
}
+
                  } else {
-
+
                    $(this).addClass(clSubLink);
-
// onLoad callback;
+
                    $('> a',this).addClass(clSubLink+'-a');
-
defaults.onLoad.call(this);
+
                  }
-
}
+
                }
-
});
+
              });
-
};
+
 
-
})(jQuery);(function() {
+
              // 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'};
 +
 
 +
                if(subLeft < 0){
 +
                  params = {left: 0};
 +
                }else if(mr < ml){
 +
                  params = {right: 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 {
 +
              $('.'+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() {
   $('#header-menu').dcMegaMenu({
   $('#header-menu').dcMegaMenu({
     rowItems: '5',
     rowItems: '5',
Line 263: Line 386:
}).call(this);
}).call(this);
 +
</script></html>
</script></html>

Revision as of 15:07, 18 September 2013

Retrieved from "http://2013.igem.org/Template:Team:HokkaidoU_Japan/header/js"