Template:Team:HokkaidoU Japan/JS

From 2014.igem.org

(Difference between revisions)
Line 7: Line 7:
   });
   });
}).call(this);
}).call(this);
-
 
/*
/*
  * DC Mega Menu - jQuery mega menu
  * DC Mega Menu - jQuery mega menu
Line 15: Line 14:
(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 options
+
//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();
 +
}
-
      megaSetup();
+
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');
 +
}
 +
}
 +
});
-
      function megaOver(){
+
// Create Rows
-
        var subNav = $('.sub',this);
+
var hdrs = $('.mega-unit',this);
-
        $(this).addClass('mega-hover');
+
rowSize = parseInt(defaults.rowItems);
-
        if(defaults.effect == 'fade'){
+
for(var i = 0; i < hdrs.length; i+=rowSize){
-
          $(subNav).fadeIn(defaults.speed);
+
hdrs.slice(i, i+rowSize).wrapAll('<div class="row" />');
-
        }
+
}
-
        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(){
+
// Get Sub Dimensions & Set Row Height
-
        $arrow = '<span class="dc-mega-icon"></span>';
+
$mainSub.show();
-
        var clParentLi = clParent+'-li';
+
-
        var menuWidth = $dcmegamenuObj.outerWidth();
+
// Get Position of Parent Item
-
        $('> li',$dcmegamenuObj).each(function(){
+
var pw = $(this).width();
-
          //Set Width of sub
+
var pr = pl + pw;
-
          var $mainSub = $('> ul',this);
+
-
          var $primaryLink = $('> a',this);
+
// Check available right margin
-
          if($mainSub.length){
+
var mr = menuWidth - pr;
-
            $primaryLink.addClass(clParent).append($arrow);
+
-
            $mainSub.addClass('sub').wrap('<div class="'+clContainer+'" />');
+
// // 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;
-
            var pos = $(this).position();
+
// If Left Position Is Negative Set To Left Margin
-
            pl = pos.left;
+
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();
 +
}
 +
});
-
            if($('ul',$mainSub).length){
+
$('> li > a.'+clParent,$dcMegaMenuObj).click(function(e){
-
              $(this).addClass(clParentLi);
+
var $parentLi = $(this).parent();
-
              $('.'+clContainer,this).addClass('mega');
+
if($parentLi.hasClass('mega-hover')){
-
              $('> li',$mainSub).each(function(){
+
megaActionClose($parentLi);
-
                if(!$(this).hasClass(clWidget)){
+
} else {
-
                  $(this).addClass('mega-unit');
+
megaAction($parentLi);
-
                  if($('> ul',this).length){
+
}
-
                    $(this).addClass(clSubParent);
+
e.preventDefault();
-
                    $('> a',this).addClass(clSubParent+'-a');
+
});
-
                  } else {
+
}
-
                    $(this).addClass(clSubLink);
+
-
                    $('> a',this).addClass(clSubLink+'-a');
+
// onLoad callback;
-
                  }
+
defaults.onLoad.call(this);
-
                }
+
}
-
              });
+
});
-
 
+
};
-
              // 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);
})(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);
 
-
 
-
$(document).ready(function(){
 
-
  $('#top_univ').css('color', 'red');
 
-
});
 
-
 
-
(function($){$.fn.dcmegamenu=function(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(){}};
 
var options=$.extend(defaults,options);
var options=$.extend(defaults,options);

Revision as of 07:56, 20 August 2014

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