Team:NYMU-Taipei/menu.js

From 2014.igem.org

(Difference between revisions)

Latest revision as of 04:46, 17 October 2014

$(window).on('beforeunload', function() {

        $(window).scrollTop(0);

}); $( document ).ready(function() {

 $('div.preloading').css('display','none');
 $('#menu > ul > li')
       .on('mouseenter', function(){
           clearTimeout($.data(this,'timer'));
           $(this).find('>ul').stop(true,true).slideDown(200);  
           if($(this).hasClass('now')) return ;
           $(this).find('> a > span').stop(true,true).animate({opacity: '1'}, 300);
      
       })
       .on('mouseleave', function(){
           $.data(this,'timer', setTimeout($.proxy(function() {
           $(this).find('>ul').stop(true,true).slideUp(200);
           }, this), 100));  
           if($(this).hasClass('now')) return ;
           $(this).find('> a > span').stop(true,true).animate({opacity: '0'}, 300);
     
       })
       .click( function(){
           $('#menu > ul > li').removeClass('now');
           $(this).addClass('now');
           $(this).find('> a > span').stop(true,true).animate({opacity: '1'}, 300);
           $('#menu > ul > li').not(this).find('a > span').css({opacity: '0'});
       });   
 $('#menu > ul > li > ul > li')
      .on('mouseenter',function(){
           $(this).find('>span').css({'display':'block',opacity: '1'});
           $(this).find('>ul').stop(true,true).animate({width: "130px" }, 300);
       })
      .on('mouseleave',function(){
           $(this).find('>span').css({'display':'none',opacity: '1'});
           $(this).find('>ul').stop(true,true).animate({ width: "0px" }, 300);
       });
 $('#menu > ul > li > ul > li > ul > li')
      .on('mouseenter',function(){
           $(this).find('>span').css({'display':'block',opacity: '1'});
       })
      .on('mouseleave',function(){
           $(this).find('>span').css({'display':'none',opacity: '1'});
       });
 $(window).scroll(function (event){
        var y = $(window).scrollTop();
        if(y>510){
            $('#menu').css({'position':'fixed','margin-top':0});
        }
        else{
            $('#menu').css({'position':'absolute','margin-top':'510px'});
        }
 });

 $(window).bind('popstate', function() {    //override back button to get the ajax content without page reload
        var toUrl=location.pathname;
        loadPage(toUrl);
 });
 $('#menu a').add('#menu4home a').click(function(e){      //to get the ajax content and display in div 'main-content'
        e.preventDefault();
        var toUrl=$(this).attr('href');
        loadPage(toUrl);
        
        if(toUrl!=window.location.pathname){      //to change the browser URL to the given link location
             window.history.pushState({path:toUrl},,toUrl);
        }
 });
 $('#menu4home>a').hover(
       function(){
           var index=$('#menu4home>a').index(this);
           $('.teethS').eq(index).css({'display':'block'});
       },function(){
           var index=$('#menu4home>a').index(this);
           $('.teethS').eq(index).css({'display':'none'});
 });

 PageFunction(window.location.pathname);  
 //jumpup//
 
 $('#jumpup').on('click',function(){
       $('body, html').animate({scrollTop: 500},1);
 }).on('mouseover',function(){
   $(this).find('div.infotop').css('display','block');
 }).on('mouseout',function(){
   $(this).find('div.infotop').css('display','none');
 });
 //tooth//
 var move=0;
 $('#toothy').on('mousedown',function(){
        move=1;
 })
 .on('mouseup',function(){
        move=0;
 });
 $('#toothy').children().on('mousedown',function(e){e.stopPropagation();});
 $(window).on('mousemove',function(e){
        if(move==0) return ;
        var x=e.clientX;
        var y=e.clientY;
        //var dx=$(window).scr
        $('#toothy').css({left:x-50,top:y-50});
 });
 questionGameFunction();
 ////

/*/////////////////////// style1 stuff ///////////////////////////////////////////

 var clickcloud=0;
 $('#cloud>div').click(function(){
     clickcloud=1;
     $('#cloud').stop(true,true).animate({'top':'-200px'},700);
     $('#cloud>div').stop(true,true).animate({'top':'115px'},700);
     $('#clickthecloud').stop(true,true).animate({opacity:0},400);
 })
 .on('mouseleave',function(){
     if(clickcloud==0) return ;
     $('#cloud').stop(true,true).animate({'top':'-85px'},700);
     $('#cloud>div').stop(true,true).animate({'top':'0px'},700);
     $('#clickthecloud').stop(true,true).animate({opacity:1},1400);
 });

//////////////////////////////////////////////////////////////////////////////////*/ });

var loadPage=function(toUrl){

      $('div.preloading').css('display','block');
      $('#main-content').stop(true,true).animate({'opacity':'0'},700);
      $.get( toUrl , function(data) {
            $('div.preloading').css('display','none');
            $('#main-content').stop(true,true).animate({'opacity':'1'},400);
            if(toUrl.split('/').length==2){ //to home
                $('body, html').animate({scrollTop: 0},700);
            } else if(Math.max($('body').scrollTop(),$('html').scrollTop())>500){
                $('body, html').animate({scrollTop: 500},700);
            }
            $('#main-content').html($(data).find('#main-content').html());
            PageFunction(toUrl);
      });

};

var PageFunction=function(toUrl){

      $('.header').css({'background-position': '20% 40px','background-attachment': 'scroll'});
      $('#menu').css({'display':'block'});
      $('#main-content').css({'background':'rgba(255,255,255,0.95)'});
      $('#menu4home').css({'display':'none'});
      $('#jumpup').css({'display':'block'});
      $('#menu > ul > li').each(function(){
              var des=$(this).find('a').attr('href').split('/');
              var res=toUrl.split('/');
              if(des[2]==res[2]){
                   $(this).addClass('now');
                   $(this).find('a > span').css({opacity: '1'});
              }
              else{
                   $(this).removeClass('now');
                   $(this).find('a > span').css({opacity: '0'});
              }
        });
      var scrollFunc = function(){
            var toAnchor=$(this).attr('href');
            //50 is the height of menu
            var toTop = $(toAnchor).offset().top - 50;
            if(toTop < 0) toTop = 0;
            $('body, html').animate({ scrollTop: toTop}, 0); 
            return false;
      };
      $('.cont-panel > div').click(scrollFunc);
      $('div.protocol-panel a').click(scrollFunc);
      if(toUrl=='/Team:NYMU-Taipei'){
            $('#main-content').addClass('no-border');
      } else {
            $('#main-content').removeClass('no-border');
      }
      var splitUrl=toUrl.split('/');
    
      if(toUrl=='/Team:NYMU-Taipei/team/member'){
            teamMemFunc();
      }
      else if(toUrl=='/Team:NYMU-Taipei/team/gallery'){
            teamGalFunc();
      }
      else if(toUrl=='/Team:NYMU-Taipei'){
            $('#menu').css({'display':'none'});
            $('#menu4home').css({'display':'block'});
            $('#jumpup').css({'display':'none'});
            HomeFunc();
      }
      else if(toUrl=='/Team:NYMU-Taipei/notebook/labnotes'){
            NbNotesFunc();
      }
      else if(splitUrl[1]=='Team:NYMU-Taipei'&&splitUrl[2]=='modeling'){
            MdlMathFunc();
      }
      else if(splitUrl[1]=='Team:NYMU-Taipei'&&splitUrl[2]=='project'){
            ProjFunc();
      }
      else if(splitUrl[1]=='Team:NYMU-Taipei'&&splitUrl[2]=='hp'){
            HpFunc();
      }

};

var contentInterLink=function(){

      $('#main-content').find('div.internal-link, a:not([href^="#"]):not([href^="http://"]):not([href^="https://"])').click(function(e){
            e.preventDefault();
            var toUrl=$(this).attr('href');
            loadPage(toUrl);
        
            if(toUrl!=window.location.pathname){      //to change the browser URL to the given link location
                 window.history.pushState({path:toUrl},,toUrl);
            }
      });
      $('#main-content').find('a[href^="http://"], a[href^="https://"], a[href^="//"]').click(function(e){
            window.open($(this).attr('href'));
            e.preventDefault();
            return false;
      });

};

var teamMemFunc=function(){

      console.log('xd1');
      $('.mem_pullbar').hover(function(){
            var pic2=$(this).parent().find('.mem_pic2');
            pic2.stop(true,true).animate({ bottom: 0 , opacity : 1},500);
      },function(){
            var pic2=$(this).parent().find('.mem_pic2');
            pic2.stop(true,true).animate({ bottom: -260 , opacity : 0.5},500);
      });

};

var teamGalFunc=function(){

   var thumbs=$('.g-thumb').children();

var n=thumbs.length; var mainFrame=$('.main-img'); var nextbt=$('.g-left'); var prevbt=$('.g-right'); var nImages; var frameWidth=800; var currId,prevId,nextId; var initFunction=function(){ currId=0; for(var i=0;i<n;i++){

var newDiv=$("

");

newDiv.css({'background':"url('"+thumbs.eq(i).attr('src')+"') 50% 50% no-repeat",'left':-frameWidth,'background-size':'cover'}); mainFrame.append(newDiv); } nImages=mainFrame.children().not(nextbt).not(prevbt); nImages.eq(0).css({'left':0}); }; var playNextFunction=function(duration,nextId){ nImages.eq(nextId).css({'left':frameWidth}); nImages.eq(currId).stop(true,true).animate({'left':-frameWidth},duration); nImages.eq(nextId).stop(true,true).animate({'left':0},duration); currId=nextId; }; var playPrevFunction=function(duration,nextId){ nImages.eq(nextId).css({'left':-frameWidth}); nImages.eq(currId).stop(true,true).animate({'left':frameWidth},duration); nImages.eq(nextId).stop(true,true).animate({'left':0},duration); currId=nextId; };

initFunction();

nextbt.click(function(){ playNextFunction(1000,currId+1); }); prevbt.click(function(){ playPrevFunction(1000,(currId-1+n)%n); });

       thumbs.click(function(){

var d=thumbs.index($(this)); var start=currId;

               var duration=1000;

if(d>start){

                  playNextFunction(duration,d);

} else{

                  playPrevFunction(duration,d);

} }); };

var HomeFunc=function(){

      $('.home1').css({'width':screen.width-(screen.width-1104)/2-45});

};

var NbNotesFunc=function(){

      $('.note-tab').click(function(){
            var index=$('.note-tab').index(this);
            $('.note-pdf').css({'display':'none'});
            $('.note-pdf').eq(index).css({'display':'block'});
      });

};

var MdlMathFunc=function(){

       MathJax.Hub.Typeset();
       contentInterLink();

}; var ProjFunc=function(){

       contentInterLink();

}; var HpFunc=function(){

       $('div.back2hp').attr('href','/Team:NYMU-Taipei/hp/overview').addClass('internal-link');
       contentInterLink();
       $('.hp-div').hover(function(){
             $(this).find('.sub-div').stop(true,true).animate({'opacity':'1'},500);
       },function(){
             $(this).find('.sub-div').stop(true,true).animate({'opacity':'0'},500);
       });
       $('div.back2hp').find('a').click(function(e){
             /*if (e && e.preventDefault)
                  e.preventDefault();
             else window.event.returnValue = false; 
             return false;*/
             if (e && e.stopPropagation) {
                    e.stopPropagation();  
             } else {
                    window.event.cancelBubble = true;  
             }  
       });

};

var questionGameFunction=function(){ var data; var dialog=$('#dialog'); var qnaNextBt=$('#qnaNextBt');

       var qnaPrevBt=$('#qnaPrevBt');
       var closeBt=$('#qnaClose');
       var openBt=$('#convopen');

var status=0; var qId=-3; $.getJSON('/Team:NYMU-Taipei/QnAgame.json?action=raw',function(Jdata){ data=Jdata; });

var showResponce=function(res){ var s; if(res){ //yes

s='

yay :)

';

} else{ //no

s='

oh, not right.

';

} dialog.html(s); }

var showQuestion=function(){ var s;

s="

"+data[qId]["Q"]+"

";

for(var i=0;i<data[qId]["S"].length;i++){ s+="<input type='radio' name='op' value='"+i+"'>"; s+=data[qId]["S"][i]; s+="
"; } dialog.html(s); }

       var startConv=function(){
               if(qId==-3)
                   qnaPrevBt.css({'display':'none'});
               else
                   qnaPrevBt.css({'display':'block'});

var s=["

Hi, my name is Toothy :). Welcome to the wiki page of NYMU-Taipei, 國立陽明大學, National Yang Ming University, in iGEM 2014. Our project this year is 'HOPE'.

","

By visiting our wiki, you can get more information. I have some questions that can help understand this project.

","

You can drag me to anyplace in the website. If you think I am a little annoying, just put me to the corner(hope you won't do so). Anyway, just explore and have fun!!

"];

dialog.html(s[qId+3]); status=0;

       var endConv=function(){

var s="

Hope you have a good time visiting our wiki. Enjoy it!

";

               dialog.html(s);
               qnaNextBt.css({'display':'none'});
       }

qnaNextBt.click(function(){

               if(qId<0){   //start mode
                       qId++;
                       if(qId<0){
                           startConv();
                           return ;
                       }
                       else{
                           showQuestion(qId);
                       }
               }

if(status){ //question mode var p=$('input[name="op"]:checked').val(); showResponce( p==data[qId]["A"] ? 1:0 );

                       qId++;

} else{ //response mode

                       if(qId>=data.length){
                             endConv();
                       }

else{

                             showQuestion(qId);
                       }
		}

status=1-status;

               qnaPrevBt.css({'display':'block'});

}); qnaPrevBt.click(function(){

               qId--;
               if(qId<0){
                       startConv();
                       return ;
               }
               status=1;
               showQuestion(qId);
               qnaNextBt.css({'display':'block'});
       });
       closeBt.click(function(){
               dialog.css({'display':'none'});
               qnaNextBt.css({'display':'none'});
               qnaPrevBt.css({'display':'none'});
               closeBt.css({'display':'none'});
               openBt.css({'display':'block'});
       });
       openBt.click(function(){
               dialog.css({'display':'block'});
               qnaNextBt.css({'display':'block'});
               qnaPrevBt.css({'display':'block'});
               closeBt.css({'display':'block'});
               openBt.css({'display':'none'});
       });

       startConv();

};