Difference between revisions of "Template:Vilnius-Lithuania/JS/Design"

Latest revision as of 11:47, 25 October 2020

let timeout1, timeout2; function setBubblesSubsection(newSection, curAnim) {

   if (curAnim.curSection === newSection) return;

   Array.from(curAnim.bubbleIndex.children).forEach((item, ind)=>{
       if (ind <= newSection){
           item.classList.add("active");
       }else{
           item.classList.remove("active");
       }
   });

}

function makeAnimSubsection(sectionNum, curAnim) {

   let { bigTitle, title, text } = curAnim.sections[sectionNum];
   if (bigTitle !== undefined) bigTitle = bigTitle.replace("&", "&");

   let contentEl = crEl("content");
   
   let bigTitleEl = crEl("h2 larger");
   contentEl.appendChild(bigTitleEl);

   let titleEl = crEl("h3");
   contentEl.appendChild(titleEl);

   let textEl = document.createElement("p");
   contentEl.appendChild(textEl);

   bigTitleEl.innerHTML = (bigTitle !== undefined) ? bigTitle : "";
   titleEl.innerHTML = (title !== undefined) ? title : "";
   textEl.innerHTML = text;

   return contentEl;

}

function crEl(className){

   let el = document.createElement("div");
   el.className = className;
   return el;

}

for (let animItem of animations){

   /*/
       Create animation block elements
   /*/

   const animBlock = document.querySelector(animItem.block);
   animItem.scrollItem = crEl("scrollItem");
   animBlock.appendChild(animItem.scrollItem);

   const animElement = document.createElement("div"); // used in ScrollLottie
   animItem.scrollItem.appendChild(animElement);

   animItem.bubbleIndex = crEl("bubbleIndex");
   animBlock.appendChild(animItem.bubbleIndex);

   /*/
       Set up animation
   /*/
   const ScrollLottie = (obj) => {
       let anim = lottie.loadAnimation({
           container: animElement,
           renderer: "svg",
           loop: false,
           autoplay: false,
           animationData: obj.animationData,
           assetsPath: obj.assetsPath
       });

       let debug = false;
       let start = "top center";
       let end = "bottom center";
       let compoundLength = animItem.animBegin;
       for (let i = 0, n = animItem.sections.length; i < n; i++){
           let item = animItem.sections[i];
           let _compoundLength = compoundLength;

           const scrollBackElement = crEl("scrollAnim"); // create scroll back element (to be used in ScrollTrigger)
           animBlock.parentElement.appendChild(scrollBackElement); // add it to document
           scrollBackElement.appendChild(makeAnimSubsection(i, animItem))

           const scrollBubbleElement = crEl("scrollBubble");
           if (i == 0) scrollBubbleElement.classList.add("active");
           animItem.bubbleIndex.appendChild(scrollBubbleElement);
           scrollBubbleElement.onclick = () => {
               _ascroll.animateScroll(scrollBackElement, 1, {
                   speed: 400,
                   speedAsDuration: true,
                   offset: 160
               });
           };

           ScrollTrigger.create({
               trigger: scrollBackElement,
               scrub: true,
               pin: false,
               markers: debug,
               start: start,
               end: end,
               onUpdate: self => {
                   let animationProgress = (_compoundLength + self.progress * item.length);
                   if (debug) console.log((animationProgress + "").substr(0, 6)) // DEBUG
                   setBubblesSubsection(i, animItem);
                   anim.goToAndStop(animationProgress * (anim.totalFrames - 1), true);
               }
           });
           compoundLength += item.length;
       }
       
       const scrollBackPaddingElement = crEl("scrollAnim lastPad"); // for end padding
       animBlock.parentElement.appendChild(scrollBackPaddingElement); // add it to document
       anim.goToAndStop(animItem.animBegin * (anim.totalFrames - 1), true);
   }
   setBubblesSubsection(0, animItem);

   ScrollLottie({
       target: animItem.target,
       animationData: animItem.animationData,
       assetsPath: "https://static.igem.org/mediawiki/2020/",
   });

}