https://www.cinegy.com/page_modules/suite_products_module/suite_products_module.js

1// suite_products_module page module
2
3
4
5let isPresentationActive = false;
6
7
8
9const productIcon = document.getElementById('product_icon');
10let pressTimer = null;
11
12if (productIcon) {
13console.log("Click Ä°nitiated")
14
15  const startPress = () => {
16    pressTimer = setTimeout(() => {
17      suites_presentation();
18    }, 2000);
19  };
20  const cancelPress = () => {
21    clearTimeout(pressTimer);
22    pressTimer = null;
23  };
24
25  // mouse events
26  productIcon.addEventListener('mousedown', startPress);
27  productIcon.addEventListener('mouseup', cancelPress);
28  productIcon.addEventListener('mouseleave', cancelPress);
29
30  // touch events for handheld
31  productIcon.addEventListener('touchstart', startPress, { passive: true });
32  productIcon.addEventListener('touchend', cancelPress);
33  productIcon.addEventListener('touchcancel', cancelPress);
34}
35
36
37
38export function suites_presentation() {
39    // don't run on small screens
40    if (window.innerWidth < 1000) return;
41  
42    isPresentationActive = !isPresentationActive;
43  
44    const content = document.querySelector('.product_sub_content');
45    const imgBtns = document.querySelectorAll('.presentation_img');
46    if (!content) return;
47  
48    const toggleImgClass = () => {
49      imgBtns.forEach(btn => {
50        if (isPresentationActive) {
51          btn.classList.add('presentation_mode');
52        } else {
53          btn.classList.remove('presentation_mode');
54        }
55      });
56    };
57  
58    if (isPresentationActive) {
59      // fade out
60      gsap.to(content, {
61        opacity: 0,
62        duration: 0.5,
63        ease: 'power1.out',
64        onComplete: () => {
65          // enable presentation mode
66          content.classList.add('presentation_mode');
67          toggleImgClass();
68          // fade back in
69          gsap.to(content, {
70            opacity: 1,
71            duration: 0.5,
72            ease: 'power1.out'
73          });
74        }
75      });
76    } else {
77      // fade out
78      gsap.to(content, {
79        opacity: 0,
80        duration: 0.5,
81        ease: 'power1.out',
82        onComplete: () => {
83          // disable presentation mode
84          content.classList.remove('presentation_mode');
85          toggleImgClass();
86          // fade back in
87          gsap.to(content, {
88            opacity: 1,
89            duration: 0.5,
90            ease: 'power1.out'
91          });
92        }
93      });
94    }
95  }