Template:Team:HokkaidoU Japan/header/js

From 2013.igem.org

Revision as of 14:47, 18 September 2013 by TaKeZo (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

(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 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'};

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({
   rowItems: '5',
   speed: 'fast',
   effect: 'fade'
 });

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

$('

').appendTo('#top-section'); $('

').appendTo('#top-section').text('Wiki Menu'); $('

').appendTo('#wiki-menu').text('Page Menu'); $('.left-menu').appendTo('#wiki-menu'); $('<h2>').appendTo('#wiki-menu').text('User Menu'); $('.right-menu').appendTo('#wiki-menu'); $('

').appendTo('#wiki-menu').text('Close');

 $('#open-wiki-menu').click(function() {
   $(this).hide();
   return $('#wiki-menu').show();
 });

 $('#close-wiki-menu').click(function() {
   $('#wiki-menu').hide();
   return $('#open-wiki-menu').show();
 });

}).call(this);