feat: implement livestream post functionality and update site theme assets

sis_charity_professional_v4/script.js

@@ -0,0 +1,64 @@
+(function(){
+  const stage = document.getElementById('galleryStage');
+  const cards = Array.from(document.querySelectorAll('.photo-card'));
+  const dots = Array.from(document.querySelectorAll('.dot'));
+  let active = 0;
+  let timer = null;
+  const duration = 2800;
+
+  function setActive(index){
+    active = index % cards.length;
+    stage.classList.add('is-playing');
+
+    cards.forEach((card, i) => {
+      card.classList.remove('is-active','is-dim','is-next','is-exit');
+      const diff = (i - active + cards.length) % cards.length;
+      if(i === active){
+        card.classList.add('is-active');
+      }else if(diff === 1 || diff === 2){
+        card.classList.add('is-next');
+      }else if(diff === cards.length - 1){
+        card.classList.add('is-exit');
+      }else{
+        card.classList.add('is-dim');
+      }
+    });
+
+    dots.forEach((dot, i) => dot.classList.toggle('is-active', i === active));
+  }
+
+  function next(){
+    setActive(active + 1);
+  }
+
+  function start(){
+    stop();
+    timer = setInterval(next, duration);
+  }
+
+  function stop(){
+    if(timer) clearInterval(timer);
+  }
+
+  cards.forEach((card, i) => {
+    card.addEventListener('mouseenter', () => {
+      stop();
+      setActive(i);
+    });
+    card.addEventListener('mouseleave', start);
+  });
+
+  dots.forEach((dot, i) => {
+    dot.addEventListener('click', () => {
+      setActive(i);
+      start();
+    });
+  });
+
+  window.addEventListener('load', () => {
+    setTimeout(() => {
+      setActive(0);
+      start();
+    }, 900);
+  });
+})();