Team:EPF-Lausanne/template/script.js

From 2013.igem.org

(Difference between revisions)
 
(36 intermediate revisions not shown)
Line 57: 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 = 15;
+
       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) {
-
         var menuMargin = parseInt(menu.css("margin-left"), 10);
+
          current.addClass("menu-item-selected");
-
        var menuPosition = menu.position().left + menuMargin;
+
         }
-
         var currentPosition = $("#taxi").position().left
+
         var currentPosition = $("#taxi").position().left;
         var menuItemPosition = item.position().left;
         var menuItemPosition = item.position().left;
          
          
-
         var targetPosition = menuItemPosition + menuPosition + OFFSET;
+
         var targetPosition = menuItemPosition + OFFSET;
          
          
-
         $("#taxi").stop(true, false);
+
         var flipNeeded = !facingRight;
-
         $("#taxi").animate({left: targetPosition+"px"}, {
+
        var flipCSS = {transform: "scale(1,1)",
-
          duration: DURATION,
+
          "-webkit-transform": "scale(1,1)",
-
          easing: EASING
+
          "-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(currentPosition-menuPosition <= targetPosition) {
+
         if (animate) {
-
           $("#taxi").css({transform: "scale(1,1)", filter: ""});
+
           $("#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({transform: "scale(-1,1)", filter: "fliph"});
+
           $("#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() {
-
         if(!$(this).hasClass("menu-item")) return;
+
         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 104: Line 169:
         }
         }
          
          
-
         gotoMenuItem($(this));
+
         gotoMenuItem(obj);
       }).mouseout(function() {
       }).mouseout(function() {
         if(!$(this).hasClass("menu-item")) return;
         if(!$(this).hasClass("menu-item")) return;
Line 112: Line 177:
         }
         }
       });
       });
 +
      animate = false;
       returnToBase();
       returnToBase();
 +
      animate = true;
     }
     }
   };
   };
}());
}());
-
 
+
/*
if(!window.console){
if(!window.console){
   //Dummy console...
   //Dummy console...
Line 122: 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();

};