Difference between revisions of "Template:Hong Kong HKUST/coverpageJS"

Revision as of 17:54, 7 September 2016

$(document).ready(function(){

   var $coverAboutTeam = $('#coverAboutTeam'),
       $coverAboutAttribution = $('#coverAboutAttribution'),
       $coverAbout = $('#coverAbout'),
       $coverProjectOverview = $('#coverProjectOverview'),
       $coverProjectIdea = $('#coverProjectIdea'),
       $coverProjectResults = $('#coverProjectResults'),
       $coverProject = $('#coverProject'),
       $coverModelingModel = $('#coverModelingModel'),
       $coverModelingStability = $('#coverModelingStability'),
       $coverModeling = $('#coverModeling'),
       $coverHPIntroduction = $('#coverHPIntroduction'),
       $coverHPProduct = $('#coverHPProduct'),
       $coverHPInfo = $('#coverHPInfo'),
       $coverHPLearning = $('#coverHPLearning'),
       $coverHP = $('#coverHP'),
       $coverAchievementsParts = $('#coverAchievementsParts'),
       $coverAchievementsMedal = $('#coverAchievementsMedal'),
       $coverAchievements = $('#coverAchievements'),
       $coverLabProtocol = $('#coverLabProtocol'),
       $coverLabSafety = $('#coverLabSafety'),
       $coverLab = $('#coverLab');

   $coverAboutAttribution.lettering(); // wrap  around each character within the element
   $coverAboutTeam.lettering();
   $coverProjectOverview.lettering();
   $coverProjectIdea.lettering();
   $coverProjectResults.lettering();
   $coverModelingModel.lettering();
   $coverModelingStability.lettering();
   $coverHPIntroduction.lettering();
   $coverHPProduct.lettering();
   $coverHPInfo.lettering();
   $coverHPLearning.lettering();
   $coverAchievementsParts.lettering();
   $coverAchievementsMedal.lettering();
   $coverLabProtocol.lettering();
   $coverLabSafety.lettering();

   var $coverAboutTeamSpans = $coverAboutTeam.find('span'),                 //Get all letters in each subtaby as an array
       $coverAboutAttributionSpans = $coverAboutAttribution.find('span'),
       $coverProjectOverviewSpans = $coverProjectOverview.find('span'),
       $coverProjectIdeaSpans = $coverProjectIdea.find('span'),
       $coverProjectResultsSpans = $coverProjectResults.find('span'),
       $coverModelingModelSpans = $coverModelingModel.find('span'),
       $coverModelingStabilitySpans = $coverModelingStability.find('span'),
       $coverHPIntroductionSpans = $coverHPIntroduction.find('span'),
       $coverHPProductSpans = $coverHPProduct.find('span'),
       $coverHPInfoSpans = $coverHPInfo.find('span'),
       $coverHPLearningSpans = $coverHPLearning.find('span'),
       $coverAchievementsPartsSpans = $coverAchievementsParts.find('span'),
       $coverAchievementsMedalSpans = $coverAchievementsMedal.find('span'),
       $coverLabProtocolSpans = $coverLabProtocol.find('span'),
       $coverLabSafetySpans = $coverLabSafety.find('span'),
       tlCoverAbout = new TimelineMax({paused: true}),                 //Declare animation timeline
       tlCoverProject = new TimelineMax({paused: true}),
       tlCoverModeling = new TimelineMax({paused: true}),
       tlCoverHP = new TimelineMax({paused: true}),
       tlCoverAchievements = new TimelineMax({paused: true}),
       tlCoverLab = new TimelineMax({paused: true}),
       $svgAbout = $('#svgAbout').drawsvg(),                //Initialise svg drawing (also hide them when page loads)
       $svgProject = $('#svgProject').drawsvg(),
       $svgModeling = $('#svgModeling').drawsvg(),
       $svgHP = $('#svgHP').drawsvg(),
       $svgAchievements = $('#svgAchievements').drawsvg(),
       $svgLab = $('#svgLab').drawsvg(),
       pAbout = 0,               //Arrows progress
       pProject = 0,
       pModeling = 0,
       pHP = 0,
       pAchi = 0,
       pLab = 0,
       aboutArrSel = 0,               //Directs arrows movement
       projectArrSel = 0,
       modelingArrSel = 0,
       HPArrSel = 0,
       achiArrSel = 0,
       labArrSel = 0,
       coverWindowHeight = $(window).height(),
       tlPlayDelay,
       aboutArrDisappearDelay,                //Variables for arrows shrinking
       projectArrDisappearDelay,
       modelingArrDisappearDelay,
       HPArrDisappearDelay,
       achiArrDisappearDelay,
       labArrDisappearDelay,
       tlDuration = 0.1;
   var tlEntry = new TimelineMax(),
       $circleContainer = $("#circleContainer"),
       $tramWrapper = $("#tramWrapper")
       $tram = $("#tram");

/*Variable for strand centering*/

       console.log(coverWindowHeight);
       document.getElementById("content_wrapper").style.height = coverWindowHeight + "px";
       var contentHeight = document.getElementById("content_wrapper").style.height;
       console.log(contentHeight);

/*Animation*/ //Entry animation

   tlEntry
       .from($circleContainer, 1, {scale:0.1, rotation:-180, ease:Power4.easeIn})
       .to($circleContainer, 2, {autoAlpha: 1}, 0)
       .fromTo($tramWrapper, 2, {autoAlpha:0}, {autoAlpha:0}, 0)
       .to($tramWrapper, 2, {autoAlpha:1}, 1.1)
       .from($tram, 2, {top:"-=150px", scale:0.1}, 1.1);

//Staggered letters

   tlCoverAbout
       .staggerFrom($coverAboutTeamSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverAboutAttributionSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
   tlCoverProject
       .staggerFrom($coverProjectOverviewSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverProjectIdeaSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0)
       .staggerFrom($coverProjectResultsSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
   tlCoverModeling
       .staggerFrom($coverModelingModelSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverModelingStabilitySpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
   tlCoverHP
       .staggerFrom($coverHPIntroductionSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverHPProductSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0)
       .staggerFrom($coverHPInfoSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverHPLearningSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
   tlCoverAchievements
       .staggerFrom($coverAchievementsPartsSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverAchievementsMedalSpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);
   tlCoverLab
       .staggerFrom($coverLabProtocolSpans, tlDuration, {left:"-=10px", autoAlpha:0}, 0.05, 0)
       .staggerFrom($coverLabSafetySpans, tlDuration, {left:"-=10px", opacity:0}, 0.05, 0);

//Tab hover effect

   $coverAbout.hover(
       function(){
           $("div",this).css("visibility", "visible");
           coverHoverIn('About', '0 -365px');
       }, 
       function(){coverHoverOut('About', '0 -365px');}
   );
   $coverProject.hover(
       function(){
           $("div",this).css("visibility", "visible");
           coverHoverIn('Project', '0 -729px');
       }, function(){coverHoverOut('Project', '0 -729px');}
       );
   $coverModeling.hover(
       function(){
           $("div",this).css("visibility", "visible");
           coverHoverIn('Modeling', '0 -1093px');
       }, 
       function(){coverHoverOut('Modeling', '0 -1093px');}
       );
   $coverHP.hover(
       function(){
           $("div",this).css("visibility", "visible");
           coverHoverIn('HP', '0 -1457px');
       }, function(){coverHoverOut('HP', '0 -1457px');}
       );
   $coverAchievements.hover(
       function(){
           $("div",this).css("visibility", "visible");
           coverHoverIn('Achievements', '-700px -366px');
       }, 
       function(){coverHoverOut('Achievements', '-700px -366px');}
       );
   $coverLab.hover(
       function(){
           $("div",this).css("visibility", "visible");
           coverHoverIn('Lab', '-697px -729px');
       }, 
       function(){coverHoverOut('Lab', '-697px -729px');}
       );

//Functions called when hovering the tabs

   function coverHoverIn(coverTab, DNAposition){
       var $tab = document.getElementById("cover"+coverTab+"Tab");
       $tab.style.background = "url()" + DNAposition;
       switch (coverTab) {
           case "About":
               aboutArrSel = 1;
               clearTimeout(aboutArrDisappearDelay);
               if (pAbout == 100){tlCoverAbout.play();}
               else {
                   tlAboutDelay = setTimeout(function(){ tlCoverAbout.play(); }, 500-pAbout);
               }
               break;
           case "Project":
               projectArrSel = 1;
               clearTimeout(projectArrDisappearDelay);
               if (pProject == 100){tlCoverProject.play();}
               else {tlProjectDelay = setTimeout(function(){ tlCoverProject.play(); }, 500-pProject);}
               break;
           case "Modeling":
               modelingArrSel = 1;
               clearTimeout(modelingArrDisappearDelay);
               if (pModeling == 100){tlCoverModeling.play();}
               else {
                   tlModelingDelay = setTimeout(function(){ tlCoverModeling.play(); }, 500-pModeling);
               }
               break;
           case "HP":
               HPArrSel = 1;
               clearTimeout(HPArrDisappearDelay);
               if (pHP == 100){tlCoverHP.play();}
               else {
                   tlHPDelay = setTimeout(function(){ tlCoverHP.play(); }, 500-pHP);
               }
               break;
           case "Achievements":
               achiArrSel = 1;
               clearTimeout(achiArrDisappearDelay);
               if (pAchi == 100){tlCoverAchievements.play();}
               else {
                   tlAchiDelay = setTimeout(function(){ tlCoverAchievements.play(); }, 500-pAchi);
               }
               break;
           case "Lab":
               labArrSel = 1;
               clearTimeout(labArrDisappearDelay);
               if (pLab == 100){tlCoverLab.play();}
               else {
                   tlLabDelay = setTimeout(function(){ tlCoverLab.play(); }, 500-pLab);
               }
               break;
       }
   }
   function coverHoverOut(coverTab, DNAposition){
       var $tab = document.getElementById("cover"+coverTab+"Tab");
       $tab.style.background = "url()" + DNAposition;
       switch (coverTab) {
           case "About":
               var tlProgress = tlCoverAbout.progress();
               tlCoverAbout.reverse();
               clearTimeout(tlAboutDelay);
               if (tlProgress == 0) {aboutArrSel = 0;}
               else {
                   aboutArrDisappearDelay = setTimeout(function(){ aboutArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
               }
               break;
           case "Project":
               var tlProgress = tlCoverProject.progress();
               tlCoverProject.reverse();
               clearTimeout(tlProjectDelay);
               if (tlProgress == 0) {projectArrSel = 0;}
               else {
                   projectArrDisappearDelay = setTimeout(function(){ projectArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
               }
               break;
           case "Modeling":
               var tlProgress = tlCoverModeling.progress();
               tlCoverModeling.reverse();
               clearTimeout(tlModelingDelay);
               if (tlProgress == 0) {modelingArrSel = 0;}
               else {
                   modelingArrDisappearDelay = setTimeout(function(){ modelingArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
               }
               break;
           case "HP":
               var tlProgress = tlCoverHP.progress();
               tlCoverHP.reverse();
               clearTimeout(tlHPDelay);
               if (tlProgress == 0) {HPArrSel = 0;}
               else {
                   HPArrDisappearDelay = setTimeout(function(){ HPArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
               }
               break;
           case "Achievements":
               var tlProgress = tlCoverAchievements.progress();
               tlCoverAchievements.reverse();
               clearTimeout(tlAchiDelay);
               if (tlProgress == 0) {achiArrSel = 0;}
               else {
                   achiArrDisappearDelay = setTimeout(function(){ achiArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
               }
               break;
           case "Lab":
               var tlProgress = tlCoverLab.progress();
               tlCoverLab.reverse();
               clearTimeout(tlLabDelay);
               if (tlProgress == 0) {labArrSel = 0;}
               else {
                   labArrDisappearDelay = setTimeout(function(){ labArrSel = 0; }, (tlProgress*tlDuration+0.25)*1000);
               }
               break;
       }
   }

//Update the arrows constantly

   var myArrow = setInterval(function(){ 
       drawAbout()
       drawProject()
       drawModeling()
       drawHP()
       drawAchi()
       drawLab()
   }, 1);

//Functions controling the arrow drawing

   function drawAbout(){
       if (aboutArrSel == 1) {
           if (pAbout == 100) {}
           else {
               pAbout+=1;
               $svgAbout.drawsvg('progress', pAbout/100);            
           }
       }
       else if (aboutArrSel ==0){
           if (pAbout == 0){$coverAbout.children(":first").siblings().css("visibility", "hidden");}
           else {
               pAbout-=1;
               $svgAbout.drawsvg('progress', pAbout/100);
           }
       }
   }
   function drawProject(){
       if (projectArrSel == 1) {
           if (pProject == 100) {}
           else {
               pProject+=1;
               $svgProject.drawsvg('progress', pProject/100);            
           }
       }
       else if (projectArrSel ==0){
           if (pProject == 0){$coverProject.children(":first").siblings().css("visibility", "hidden");}
           else {
               pProject-=1;
               $svgProject.drawsvg('progress', pProject/100);
           }
       }
   }
   function drawModeling(){
       if (modelingArrSel == 1) {
           if (pModeling == 100) {}
           else {
               pModeling+=1;
               $svgModeling.drawsvg('progress', pModeling/100);            
           }
       }
       else if (modelingArrSel ==0){
           if (pModeling == 0){$coverModeling.children(":first").siblings().css("visibility", "hidden");}
           else {
               pModeling-=1;
               $svgModeling.drawsvg('progress', pModeling/100);
           }
       }
   }
   function drawHP(){
       if (HPArrSel == 1) {
           if (pHP == 100) {}
           else {
               pHP+=1;
               $svgHP.drawsvg('progress', pHP/100);            
           }
       }
       else if (HPArrSel ==0){
           if (pHP == 0){$coverHP.children(":first").siblings().css("visibility", "hidden");}
           else {
               pHP-=1;
               $svgHP.drawsvg('progress', pHP/100);
           }
       }
   }
   function drawAchi(){
       if (achiArrSel == 1) {
           if (pAchi == 100) {}
           else {
               pAchi+=1;
               $svgAchievements.drawsvg('progress', pAchi/100);            
           }
       }
       else if (achiArrSel ==0){
           if (pAchi == 0){$coverAchievements.children(":first").siblings().css("visibility", "hidden");}
           else {
               pAchi-=1;
               $svgAchievements.drawsvg('progress', pAchi/100);
           }
       }
   }
   function drawLab(){
       if (labArrSel == 1) {
           if (pLab == 100) {}
           else {
               pLab+=1;
               $svgLab.drawsvg('progress', pLab/100);            
           }
       }
       else if (labArrSel ==0){
           if (pLab == 0){$coverLab.children(":first").siblings().css("visibility", "hidden");}
           else {
               pLab-=1;
               $svgLab.drawsvg('progress', pLab/100);
           }
       }
   }

//Tram animation

   $('#tram')
   .hover(function () {$(this).attr("src", "");},
       function () {$(this).attr("src", "");});

});