Template:Team:HokkaidoU Japan/JS

From 2014.igem.org

(Difference between revisions)
Line 11: Line 11:
/*
/*
-
* DC Mega Menu - jQuery mega menu
+
  jQuery MegaMenu Plugin
-
* Copyright (c) 2011 Design Chemical
+
  Author: GeekTantra
-
*
+
  Author URI: http://www.geektantra.com
-
*/
+
*/
-
(function($){
+
var isIE6 = navigator.userAgent.toLowerCase().indexOf('msie 6') != -1;
-
 
+
-
//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 = '<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
+
-
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){
+
jQuery.fn.megamenu = function(options) {
-
var $parentLi = $(this).parent();
+
  options = jQuery.extend({
-
if($parentLi.hasClass('mega-hover')){
+
                              activate_action: "mouseover",
-
megaActionClose($parentLi);
+
                              deactivate_action: "mouseleave",
-
} else {
+
                              show_method: "slideDown",
-
megaAction($parentLi);
+
                              hide_method: "slideUp",
-
}
+
                              justify: "left",
-
e.preventDefault();
+
                              enable_js_shadow: true,
-
});
+
                              shadow_size: 3,
-
}
+
                              mm_timeout: 250
-
+
                          }, options);
-
// onLoad callback;
+
  var $megamenu_object = this;
-
defaults.onLoad.call(this);
+
  if( options.activate_action == "click" ) options.mm_timeout = 0;
-
}
+
  $megamenu_object.children("li").each(function(){
-
});
+
    jQuery(this).addClass("mm-item");
-
};
+
    jQuery(".mm-item").css({ 'float': options.justify });
-
})(jQuery);
+
   
 +
    jQuery(this).find("div:first").addClass("mm-item-content");
 +
    jQuery(this).find("a:first").addClass("mm-item-link");
 +
    var $mm_item_content = jQuery(this).find(".mm-item-content");
 +
    var $mm_item_link = jQuery(this).find(".mm-item-link");
 +
    $mm_item_content.hide();
 +
   
 +
    jQuery(document).bind("click", function(){
 +
      jQuery(".mm-item-content").hide();
 +
      jQuery(".mm-item-link").removeClass("mm-item-link-hover");
 +
    });
 +
    jQuery(this).bind("click", function(e){
 +
      e.stopPropagation();
 +
    });
 +
    $mm_item_content.wrapInner('<div class="mm-content-base"></div>');
 +
    if(options.enable_js_shadow == true) {
 +
      $mm_item_content.append('<div class="mm-js-shadow"></div>');
 +
    }
 +
    var $mm_timer = 0;
 +
    // Activation Method Starts
 +
    jQuery(this).bind(options.activate_action, function(e){
 +
      e.stopPropagation();
 +
      var mm_item_link_obj = jQuery(this).find("a.mm-item-link");
 +
      var mm_item_content_obj = jQuery(this).find("div.mm-item-content");
 +
      clearTimeout($mm_timer);
 +
      $mm_timer = setTimeout(function(){ //Emulate HoverIntent
 +
        mm_item_link_obj.addClass("mm-item-link-hover");
 +
        mm_item_content_obj.css({
 +
          'top': ($mm_item_link.offset().top + $mm_item_link.outerHeight()) - 1 +"px",
 +
          'left': ($mm_item_link.offset().left) - 5 + 'px'
 +
        })
 +
       
 +
        if(options.justify == "left"){
 +
          var mm_object_right_end = $megamenu_object.offset().left + $megamenu_object.outerWidth();
 +
                                    // Coordinates of the right end of the megamenu object
 +
          var mm_content_right_end = $mm_item_link.offset().left + $mm_item_content.outerWidth() - 5 ;
 +
                                    // Coordinates of the right end of the megamenu content
 +
          if( mm_content_right_end >= mm_object_right_end ) { // Menu content exceeding the outer box
 +
            mm_item_content_obj.css({
 +
              'left': ($mm_item_link.offset().left - (mm_content_right_end - mm_object_right_end)) - 2 + 'px'
 +
            }); // Limit megamenu inside the outer box
 +
          }
 +
        } else if( options.justify == "right" ) {
 +
          var mm_object_left_end = $megamenu_object.offset().left;
 +
                                    // Coordinates of the left end of the megamenu object
 +
          var mm_content_left_end = $mm_item_link.offset().left - mm_item_content_obj.outerWidth() +
 +
                                    $mm_item_link.outerWidth() + 5;
 +
                                    // Coordinates of the left end of the megamenu content
 +
          if( mm_content_left_end <= mm_object_left_end ) { // Menu content exceeding the outer box
 +
            mm_item_content_obj.css({
 +
              'left': mm_object_left_end + 2 + 'px'
 +
            }); // Limit megamenu inside the outer box
 +
          } else {
 +
            mm_item_content_obj.css({
 +
              'left': mm_content_left_end + 'px'
 +
            }); // Limit megamenu inside the outer box
 +
          }
 +
        }
 +
        if(options.enable_js_shadow == true) {
 +
          mm_item_content_obj.find(".mm-js-shadow").height( mm_item_content_obj.height() );
 +
          mm_item_content_obj.find(".mm-js-shadow").width( mm_item_content_obj.width() );
 +
          mm_item_content_obj.find(".mm-js-shadow").css({
 +
            'top': (options.shadow_size) + (isIE6 ? 2 : 0) + "px",
 +
            'left': (options.shadow_size) + (isIE6 ? 2 : 0) + "px",
 +
            'opacity': 0.5
 +
          });
 +
        }
 +
        switch(options.show_method) {
 +
          case "simple":
 +
                mm_item_content_obj.show();
 +
                break;
 +
          case "slideDown":
 +
                mm_item_content_obj.height("auto");
 +
                mm_item_content_obj.slideDown('fast');
 +
                break;
 +
          case "fadeIn":
 +
                mm_item_content_obj.fadeTo('fast', 1);
 +
                break;
 +
          default:
 +
                mm_item_content_obj.each( options.show_method );
 +
                break;
 +
        }
 +
      }, options.mm_timeout);
 +
    });
 +
    // Activation Method Ends
 +
    // Deactivation Method Starts
 +
    jQuery(this).bind(options.deactivate_action, function(e){
 +
      e.stopPropagation();
 +
      clearTimeout($mm_timer);
 +
      var mm_item_link_obj = jQuery(this).find("a.mm-item-link");
 +
      var mm_item_content_obj = jQuery(this).find("div.mm-item-content");
 +
//      mm_item_content_obj.stop();
 +
      switch(options.hide_method) {
 +
        case "simple":
 +
              mm_item_content_obj.hide();
 +
              mm_item_link_obj.removeClass("mm-item-link-hover");
 +
              break;
 +
        case "slideUp":
 +
              mm_item_content_obj.slideUp( 'fast',  function() {
 +
                mm_item_link_obj.removeClass("mm-item-link-hover");
 +
              });
 +
              break;
 +
        case "fadeOut":
 +
              mm_item_content_obj.fadeOut( 'fast', function() {
 +
                mm_item_link_obj.removeClass("mm-item-link-hover");
 +
              });
 +
              break;
 +
        default:
 +
              mm_item_content_obj.each( options.hide_method );
 +
              mm_item_link_obj.removeClass("mm-item-link-hover");
 +
              break;
 +
      }
 +
      if(mm_item_content_obj.length < 1) mm_item_link_obj.removeClass("mm-item-link-hover");
 +
    });
 +
//    Deactivation Method Ends
 +
  });
 +
  this.find(">li:last").after('<li class="clear-fix"></li>');
 +
  this.show();
 +
};
Line 259: Line 166:
$(document).ready(function(){
$(document).ready(function(){
-
$(".menu-contents").megamenu(
+
$(".mega-menu").megamenu(
".mega-menu",{
".mega-menu",{
width: "100%" //
width: "100%" //

Revision as of 07:34, 28 August 2014

Retrieved from "http://2014.igem.org/Template:Team:HokkaidoU_Japan/JS"