Template:UT-Tokyo/Javascript/main

(function() {

 'use strict';

 /*** Params for Navigation ***/
 var contentsArray = new Array();
 var target = $('.main .panel');
 var navi = $('.posnav');
 var menuOffset = 76;
 var currentPos = 0;

 /*** START UP ***/
 $(document).ready(function() {
   if(target.length > 2){
     for (var i = 0; i < target.length; i++) {
       var targetContents = '#' + target.eq(i).attr('id');
       var targetContentsTop = $(targetContents).offset().top - menuOffset;
       var targetContentsBottom = targetContentsTop + $(targetContents).outerHeight(true) - 1;
       var targetName = $(targetContents).children('h2').text();
       //contentsArray[i] = [targetName, targetContentsTop, targetContentsBottom, targetContents];
       contentsArray[i] = [targetName, targetContentsTop, targetContentsBottom];
       // Append links to Footer Navigation System
       var $naviObj = $("<a/>").attr('href', targetContents).text(contentsArray[i][0]);
       navi.append($naviObj);
     };
   }
   currentCheck();
   highLightPos();
   preloadImg('https://static.igem.org/mediawiki/2015/5/5c/UT_TOKYO_External.png', 'https://static.igem.org/mediawiki/2015/8/88/UT_TOKYO_Titlelogo.png', 'https://static.igem.org/mediawiki/2015/3/37/UT_TOKYO_Igemlogo.png', 'https://static.igem.org/mediawiki/2015/8/8b/UT_TOKYO_home.png');
 });

 $(window).on('load', function() {
   $("#loader").fadeOut();
   setTimeout(function(){
     $("#preload").fadeIn();
     showGrid();
   },1000);
 });

 $(window).on('scroll', function() {
     currentCheck();
 });

 /*** recalculate page when windows size is changed ***/
 var timer = false;
 $(window).resize(function() {
   if (timer !== false) {
     clearTimeout(timer);
   }
   timer = setTimeout(function() {
     var columnW = 100;
     $('.grid').css('width', columnW * Math.floor($('.grid').parent().width() / columnW));
     $('.grid').isotope({
       itemSelector: '.grid-item',
       masonry: {
         columnWidth: columnW
       }
     });
   }, 200);
 });

 /*** Jump to Label ***/
 $('a[href^=#]').click(function(){
   var speed = 500;
   var href= $(this).attr("href");
   var jumpTarget = $(href == "#" || href == "" ? 'html' : href);
   var position = jumpTarget.offset().top;
   $("html, body").animate({scrollTop:position - menuOffset}, speed, "swing");
   return false;
 });

 /*** Hover for iOS device ***/
 $('*').on('touchstart',function(){
   $(this).addClass("hover");
 }).on('touchend',function(){
   $(this).removeClass("hover");
 });

 /*** Navigation ***/
 function currentCheck() {
   var windowScrolltop = $(window).scrollTop();
   for (var i = 0; i < contentsArray.length; i++) {
     if(contentsArray[i][1] <= windowScrolltop){
       navi.children('a').eq(i).addClass('read');
       if(contentsArray[i][2] >= windowScrolltop){
         currentPos = i;
         /*
         $('.menu-panel a').each(function(){
           var tmpHref = $(this).attr('href').split('#');
           if(contentsArray[i][3].match('#' + tmpHref[1])){
             $(this).addClass('active');
           }
         });
         */
       }
     } else {
       navi.children('a').eq(i).removeClass('read');

     }
   };
 }
 navi.on('click','a',function(){
   $('html,body').animate({scrollTop: $($(this).attr('href')).offset().top - menuOffset},500,'swing');
   return false;
 })

 /*** Controller ***/
 $(window).keydown(function(e){
   if(e.keyCode == 37 && currentPos >=1){//left
     $('html,body').animate({scrollTop: $('div .panel').eq(currentPos - 1).offset().top - menuOffset},500,'swing');
   } else if(e.keyCode == 39 && currentPos < target.length){//right
     $('html,body').animate({scrollTop: $('div .panel').eq(currentPos + 1).offset().top - menuOffset},500,'swing');
   } else {
     return false;
   }
 });

})();

function preloadImg() { for(var i = 0; i< arguments.length; i++){ $("<img>").attr("src", arguments[i]); } }

function highLightPos(){

 /*
 $('nav ul li').each(function(){
   // convert relative path into absolute path

var $href = $(this).find('a').attr('href');

   // highlight

if(location.href.match(convertPath($href))) { $(this).addClass('active'); } else { $(this).removeClass('active'); } });

 */
 $('nav ul li a').each(function(){
   // convert relative path into absolute path
   var $href = $(this).attr('href').split('#');
   var $myHref = location.href.split('#')
   // highlight

if($myHref[0] == convertPath($href[0])) { $(this).closest('li').addClass('active');

     return false;

} else { $(this).closest('li').removeClass('active'); } }); }

function showGrid(){

 var columnW = 100;
 // Conditional branch due to Page
 var $grid = $('.grid').isotope({
   itemSelector: '.grid-item',
   masonry: {
     columnWidth: columnW
   }
 });
 $grid.on( 'click', '.grid-item:not(li)', function() {
   if($(this).hasClass('opened')){
     $(this).removeClass('opened');
   } else {
     $('.grid-item').removeClass('opened');
     $(this).addClass('opened');
   }
   $grid.isotope('layout');
 });

}

function convertPath(relPath){

 var e = document.createElement('span');
 e.innerHTML = '<a href="'+ relPath +'" />';
 return e.firstChild.href;

}

function openDetail(num){

 var idname = "detail" + num;
 var node = document.getElementById(idname);
 if(node.style.display == "none"){
   node.style.display = "block";
 }else{
   node.style.display = "none";
 }

}