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

Revision as of 22:01, 16 October 2020

//cycles let engCyc = document.querySelector('#engineering-cycle svg'); let dtpCyc = document.querySelector('#dtp-cycle svg'); let stopEl = document.querySelector('.spacer'); let isMobile = false; let eXc, eYc, dXc, dYc let innHeight = 700

window.addEventListener('load', function() {

   if (window.innerWidth < 767) {
       if (window.innerWidth < window.innerHeight) isMobile = true
   } else {
       isMobile = false;
   }
   eXc = window.innerWidth * (isMobile ? 0 : 0.5);
   eYc = window.innerHeight * (isMobile ? 0.6 : 0.7);
   dXc = window.innerWidth * (isMobile ? 0 : 0.1);
   dYc = window.innerHeight * (isMobile ? 1 : 1.2)
   innHeight = window.innerHeight;

})

window.addEventListener('resize', function() {

   if (window.innerWidth < 767) {
       if (window.innerWidth < window.innerHeight) isMobile = true
   } else {
       isMobile = false;
   }
   eXc = window.innerWidth * (isMobile ? 0 : 0.5);
   eYc = window.innerHeight * (isMobile ? 0.6 : 0.7);
   dXc = window.innerWidth * (isMobile ? 0 : 0.1);
   dYc = window.innerHeight * (isMobile ? 1 : 1.2)
   innHeight = window.innerHeight;
   if (!clicked) {
       if (window.innerWidth >= 767) {
           document.getElementById('click-info-desktop').classList.add('visible')
           document.getElementById('click-info-mobile').classList.remove('visible')
       } else {
           document.getElementById('click-info-mobile').classList.add('visible')
           document.getElementById('click-info-desktop').classList.remove('visible')
       }
   }

})

window.addEventListener("scroll", () => {

   if (stopEl.getBoundingClientRect().top > 0) {
       let dist = window.scrollY / innHeight;
       engCyc.style.transform = `scale(${1 - dist * (isMobile ? 0.5 : 0.65)}) translate(-${dist * eXc}px,-${dist * eYc}px)`;
       dtpCyc.style.transform = `scale(${1 - dist * (isMobile ? 0.15 : 0.3)}) translate(${dist * dXc}px,-${dist * dYc}px)`;
   }

}); window.addEventListener('load', function() {

       setTimeout(function() {
           let dist = window.scrollY / innHeight;
           if (dist > 0.95) {
               dist = 1;
               engCyc.style.transform = `scale(${1 - 0.95 * (isMobile ? 0.5 : 0.65)}) translate(-${0.95 * eXc}px,-${0.95 * eYc}px)`;
               dtpCyc.style.transform = `scale(${1 - 0.95 * (isMobile ? 0.15 : 0.3)}) translate(${0.95 * dXc}px,-${0.95 * dYc}px)`;
           }
       }, 500)
       if (window.innerWidth >= 767) {
           document.getElementById('click-info-desktop').classList.add('visible')
           document.getElementById('click-info-mobile').classList.remove('visible')
       } else {
           document.getElementById('click-info-mobile').classList.add('visible')
           document.getElementById('click-info-desktop').classList.remove('visible')
       }
   })
   //waves

var setWaveParams = () => {

       let container = document.querySelector(".milkWave");
       return {
           width: container.offsetWidth,
           height: container.offsetHeight,
           waveWidth: container.offsetWidth,
           waveHeight: container.offsetHeight * 0.2,
           waveDelta: 25,
           speed: 0.15,
           wavePoints: 5,
       };
   }
   //move footer to main tag 

window.addEventListener('load', function() {

 document.querySelector('main').appendChild(document.getElementById('footerWrapper'));

}); var acc = document.querySelectorAll(".iteration-nr"); let separator = document.getElementById('separator'); let clickIndicator = document.querySelectorAll('.section-iteration svg'); let clicked = false

for (let i = 0; i < acc.length; i++) {

   acc[i].addEventListener("click", function() {
       clicked = true;
       this.classList.toggle("active");
       var panel = this.parentElement.parentElement.nextElementSibling
       let circles = panel.querySelectorAll('.circle');
       clickIndicator.forEach((el) => {
           el.classList.remove('visible');
       })
       if (panel.style.maxHeight) {
           panel.style.maxHeight = null;
           height = separator.previousElementSibling.scrollHeight - document.getElementById('footerWrapper').getBoundingClientRect().height + "px";
           separator.style.height = height;
           circles.forEach((circle) => {
               circle.classList.remove('visible')
           })
       } else {
           panel.style.maxHeight = panel.scrollHeight + "px";
           separator.style.height = null;
           circles.forEach((circle) => {
               circle.classList.add('visible')
           })
       }
   });

}

let links = document.querySelectorAll('#dtp-cycle ellipse'); links.forEach((link) => {

   link.addEventListener('click', function() {
       console.log(link)
   })

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

   $('#detection').on('click', function() {
       $('html, body').animate({
           'scrollTop': $('#detection-section').offset().top
       }, 2000);
   });
   $('#prevention').on('click', function() {
       $('html, body').animate({
           'scrollTop': $('#prevention-section').offset().top
       }, 2000);
   });
   $('#treatment').on('click', function() {
       $('html, body').animate({
           'scrollTop': $('#treatment-section').offset().top
       }, 2000);
   });

});