Team:EPF-Lausanne/template/script.js
From 2013.igem.org
(Difference between revisions)
(40 intermediate revisions not shown) | |||
Line 7: | Line 7: | ||
EPFL.setupTitle(); | EPFL.setupTitle(); | ||
EPFL.setupTOC(); | EPFL.setupTOC(); | ||
+ | EPFL.startTaxi(); | ||
$('p') | $('p') | ||
.filter(function(){ | .filter(function(){ | ||
Line 56: | Line 57: | ||
var DURATION = 400; | var DURATION = 400; | ||
+ | var FLIP_DURATION = 200; | ||
var EASING = "swing"; | var EASING = "swing"; | ||
var DELAY = 800; | var DELAY = 800; | ||
- | var OFFSET = | + | var OFFSET = 30; |
+ | var animate = true; | ||
+ | |||
+ | $("#taxi").css({perspective: "400px"}); | ||
var base = $(menu.find(".menu-item")[0]); | var base = $(menu.find(".menu-item")[0]); | ||
var current = $(menu.find(".menu-item")[0]); | var current = $(menu.find(".menu-item")[0]); | ||
+ | var currentTarget = null; | ||
+ | var facingRight = true; | ||
current.addClass("menu-item-selected"); | current.addClass("menu-item-selected"); | ||
var returnTimeout = null; | var returnTimeout = null; | ||
- | var gotoMenuItem = function(item) { | + | var gotoMenuItem = function(item, returningToBase) { |
- | if (current == item) return; | + | if (!returningToBase && current[0] == item[0]){ |
+ | current.removeClass("menu-item-selected"); | ||
+ | current = item; | ||
+ | if(!returningToBase) { | ||
+ | item.addClass("menu-item-selected"); | ||
+ | } | ||
+ | return; | ||
+ | } | ||
+ | if (currentTarget != null && item[0] == currentTarget[0]) return; | ||
+ | |||
current.removeClass("menu-item-selected"); | current.removeClass("menu-item-selected"); | ||
current = item; | current = item; | ||
- | current.addClass("menu-item-selected"); | + | if(!returningToBase) { |
- | + | current.addClass("menu-item-selected"); | |
- | var currentPosition = $("#taxi").position().left | + | } |
+ | var currentPosition = $("#taxi").position().left; | ||
var menuItemPosition = item.position().left; | var menuItemPosition = item.position().left; | ||
- | var targetPosition = menuItemPosition | + | var targetPosition = menuItemPosition + OFFSET; |
- | + | var flipNeeded = !facingRight; | |
- | + | var flipCSS = {transform: "scale(1,1)", | |
- | + | "-webkit-transform": "scale(1,1)", | |
- | + | "-moz-transform": "scale(1,1)", | |
- | } | + | "-ms-transform": "scale(1,1)", |
+ | "-o-transform": "scale(1,1)", | ||
+ | filter: "none"}; | ||
+ | var flipCSS_anim = 0; | ||
+ | var willBeFacingRight = true; | ||
+ | if(currentPosition > targetPosition) { | ||
+ | flipCSS = {transform: "scale(-1,1)", | ||
+ | "-webkit-transform": "scale(-1,1)", | ||
+ | "-moz-transform": "scale(-1,1)", | ||
+ | "-ms-transform": "scale(-1,1)", | ||
+ | "-o-transform": "scale(-1,1)", | ||
+ | filter: "fliph"}; | ||
+ | flipCSS_anim = 180; | ||
+ | flipNeeded = facingRight; | ||
+ | willBeFacingRight = false; | ||
+ | } | ||
+ | |||
+ | facingRight = willBeFacingRight; | ||
- | if( | + | if (animate) { |
- | $("#taxi").css({transform: " | + | $("#taxi").stop(true, false); |
+ | currentTarget = item; | ||
+ | if (flipNeeded) { | ||
+ | $("#taxi").animate({"text-indent": flipCSS_anim}, { | ||
+ | duration: FLIP_DURATION, | ||
+ | easing: EASING, | ||
+ | complete: function(){ | ||
+ | $("#taxi").css(flipCSS); | ||
+ | }, step: function(now,fx) { | ||
+ | $(this).css({transform: "rotateY( "+now+"deg )", | ||
+ | "-webkit-transform": "rotateY( "+now+"deg )", | ||
+ | "-moz-transform": "rotateY( "+now+"deg )", | ||
+ | "-ms-transform": "rotateY( "+now+"deg )", | ||
+ | "-o-transform": "rotateY( "+now+"deg )", | ||
+ | filter: "none"}); | ||
+ | } | ||
+ | }); | ||
+ | } else { | ||
+ | $("#taxi").css(flipCSS); | ||
+ | } | ||
+ | $("#taxi").animate({left: targetPosition+"px"}, { | ||
+ | duration: DURATION, | ||
+ | easing: EASING, | ||
+ | complete: function() { | ||
+ | currentTarget = null; | ||
+ | } | ||
+ | }); | ||
} else { | } else { | ||
- | $("#taxi").css( | + | $("#taxi").css(flipCSS); |
+ | $("#taxi").css({left: targetPosition+"px"}); | ||
} | } | ||
}; | }; | ||
var returnToBase = function() { | var returnToBase = function() { | ||
- | gotoMenuItem(base); | + | gotoMenuItem(base, true); |
returnTimeout = null; | returnTimeout = null; | ||
} | } | ||
$(".menu-item").mouseover(function() { | $(".menu-item").mouseover(function() { | ||
- | + | var obj = $(this); | |
+ | |||
+ | while(obj[0] != undefined && obj[0].tagName.toLowerCase() != "div") { | ||
+ | obj = obj.parent(); | ||
+ | } | ||
+ | |||
+ | if(!obj.hasClass("menu-item")) return; | ||
if(returnTimeout != null) { | if(returnTimeout != null) { | ||
Line 102: | Line 169: | ||
} | } | ||
- | gotoMenuItem( | + | gotoMenuItem(obj); |
}).mouseout(function() { | }).mouseout(function() { | ||
if(!$(this).hasClass("menu-item")) return; | if(!$(this).hasClass("menu-item")) return; | ||
Line 110: | Line 177: | ||
} | } | ||
}); | }); | ||
+ | animate = false; | ||
+ | returnToBase(); | ||
+ | animate = true; | ||
} | } | ||
}; | }; | ||
}()); | }()); | ||
- | + | /* | |
if(!window.console){ | if(!window.console){ | ||
//Dummy console... | //Dummy console... | ||
Line 119: | Line 189: | ||
log: function(){ } | log: function(){ } | ||
}; | }; | ||
- | } | + | }*/ |
$(function(){ | $(function(){ |
Latest revision as of 02:12, 10 September 2013
//Generate private namespace window.EPFL = (function(){
//Little hack to stop MediaWiki from replacing ampersands... var amp = unescape("%26"); return { init: function(){ EPFL.setupTitle(); EPFL.setupTOC(); EPFL.startTaxi(); $('p') .filter(function(){ return $.trim($(this).text()) === && $.trim($(this).html()).length < 10; }) .remove(); }, onLoad: function() { $(".main-item").on }, setupTOC: function(){ var toc = $("#toc"); toc.remove(); $(".paper").prepend(toc); }, setupTitle: function(){ var title = ""; if(window.titleOverride !== undefined && window.titleOverride !== "" && window.titleOverride !== " " && window.titleOverride !== "{{{1}}}"){ title = window.titleOverride; }else{ var title = $($(".firstHeading")[0]).text(); var prefix = "Team:EPF-Lausanne/"; title = title.substr(prefix.length); titleParts = title.split("/"); switch(titleParts[0]){ case "Template": titleParts.shift(); break; } var result = titleParts.join(" "); if(titleParts.length > 1){ result = titleParts.shift()+": "+titleParts.join(" "); } if(result == ""){ result = "Home"; } title = result; } $("#pageTitle").text(title); }, startTaxi: function() { var taxi = $("#taxi"); var menu = $($("nav")[0]); var DURATION = 400; var FLIP_DURATION = 200; var EASING = "swing"; var DELAY = 800; var OFFSET = 30; var animate = true; $("#taxi").css({perspective: "400px"}); var base = $(menu.find(".menu-item")[0]); var current = $(menu.find(".menu-item")[0]); var currentTarget = null; var facingRight = true; current.addClass("menu-item-selected"); var returnTimeout = null; var gotoMenuItem = function(item, returningToBase) { if (!returningToBase && current[0] == item[0]){ current.removeClass("menu-item-selected"); current = item; if(!returningToBase) { item.addClass("menu-item-selected"); } return; } if (currentTarget != null && item[0] == currentTarget[0]) return; current.removeClass("menu-item-selected"); current = item; if(!returningToBase) { current.addClass("menu-item-selected"); } var currentPosition = $("#taxi").position().left; var menuItemPosition = item.position().left; var targetPosition = menuItemPosition + OFFSET; var flipNeeded = !facingRight; var flipCSS = {transform: "scale(1,1)", "-webkit-transform": "scale(1,1)", "-moz-transform": "scale(1,1)", "-ms-transform": "scale(1,1)", "-o-transform": "scale(1,1)", filter: "none"}; var flipCSS_anim = 0; var willBeFacingRight = true; if(currentPosition > targetPosition) { flipCSS = {transform: "scale(-1,1)", "-webkit-transform": "scale(-1,1)", "-moz-transform": "scale(-1,1)", "-ms-transform": "scale(-1,1)", "-o-transform": "scale(-1,1)", filter: "fliph"}; flipCSS_anim = 180; flipNeeded = facingRight; willBeFacingRight = false; } facingRight = willBeFacingRight; if (animate) { $("#taxi").stop(true, false); currentTarget = item; if (flipNeeded) { $("#taxi").animate({"text-indent": flipCSS_anim}, { duration: FLIP_DURATION, easing: EASING, complete: function(){ $("#taxi").css(flipCSS); }, step: function(now,fx) { $(this).css({transform: "rotateY( "+now+"deg )", "-webkit-transform": "rotateY( "+now+"deg )", "-moz-transform": "rotateY( "+now+"deg )", "-ms-transform": "rotateY( "+now+"deg )", "-o-transform": "rotateY( "+now+"deg )", filter: "none"}); } }); } else { $("#taxi").css(flipCSS); } $("#taxi").animate({left: targetPosition+"px"}, { duration: DURATION, easing: EASING, complete: function() { currentTarget = null; } }); } else { $("#taxi").css(flipCSS); $("#taxi").css({left: targetPosition+"px"}); } }; var returnToBase = function() { gotoMenuItem(base, true); returnTimeout = null; } $(".menu-item").mouseover(function() { var obj = $(this); while(obj[0] != undefined && obj[0].tagName.toLowerCase() != "div") { obj = obj.parent(); } if(!obj.hasClass("menu-item")) return; if(returnTimeout != null) { clearTimeout(returnTimeout); returnTimeout = null; } gotoMenuItem(obj); }).mouseout(function() { if(!$(this).hasClass("menu-item")) return; if(returnTimeout == null) { returnTimeout = setTimeout(returnToBase, DELAY); } }); animate = false; returnToBase(); animate = true; } };
}()); /* if(!window.console){
//Dummy console... window.console = { log: function(){ } };
}*/
$(function(){
EPFL.onLoad();
});
var oldRunOnloadHook = runOnloadHook; runOnloadHook = function(){
EPFL.init(); if (oldRunOnloadHook) oldRunOnloadHook();
};