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

Revision as of 10:52, 5 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'),
       $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}),
       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(),
       $svgProject = $('#svgProject').drawsvg(),
       $svgModeling = $('#svgModeling').drawsvg(),
       $svgHP = $('#svgHP').drawsvg(),
       $svgAchievements = $('#svgAchievements').drawsvg(),
       $svgLab = $('#svgLab').drawsvg(),
       $aboutTab = document.getElementById("coverAboutTab"),
       $projectTab = document.getElementById("coverProjectTab"),
       $modelingTab = document.getElementById("coverModelingTab"),
       $hpTab = document.getElementById("coverHPTab"),
       $achievementsTab = document.getElementById("coverAchievementsTab"),
       $labTab = document.getElementById("coverLabTab"),
       p = 0,
       arrowSel = 0,
       coverWindowHeight = $(window).height(),
       tlPlayDelay,
       ArrowsDisappearDelay,
       tlDuration = 0.1;

/*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*/

   tlCoverAbout
       .staggerFrom($coverAboutTeamSpans, tlDuration, {left:"-=10px", autoAlpha:0.2}, 0.05, 0)
       .staggerFrom($coverAboutAttributionSpans, tlDuration, {left:"-=10px", opacity:0.2}, 0.05, 0);
   $coverAbout.hover(
       function() {
           console.log(500-p+"its on");
           $aboutTab.style.background = "url(DNAStrandSpriteFocus.png) 0 -365px";
           aboutArrowsAppear();
           clearTimeout(ArrowsDisappearDelay);
           if (p == 100){tlCoverAbout.play();}
           else {
               tlPlayDelay = setTimeout(function(){ tlCoverAbout.play(); }, 500-p);
           }
       },
       function() {
           var tlProgress = tlCoverAbout.progress();
           console.log("its off");
           tlCoverAbout.reverse();
           clearTimeout(tlPlayDelay);
           $aboutTab.style.background = "url(DNAStrandSprite.png) 0 -365px";
           if (tlProgress == 0) {aboutArrowsDisappear();}
           else {
               ArrowsDisappearDelay = setTimeout(function(){ aboutArrowsDisappear(); }, (tlProgress*tlDuration+0.25)*1000);
           }
       });
   var myArrow = setInterval(function(){ 
       if (arrowSel == 1) {
           if (p == 100) {}
           else {
               p+=1;
               $svgAbout.drawsvg('progress', p/100);
               console.log(p);
           }
       }
       else if (arrowSel ==2){
           if (p == 0){}
           else {
               p-=1;
               $svgAbout.drawsvg('progress', p/100);
               console.lo(p);
           }
       }
   }, 1);

});