https://www.empresaqui.com.br/views/components/tutorialGifs/tutorialGifs.js

1function toggleSection(secao) {
2    const section = document.getElementById(secao).querySelector('.secaoContainer');
3    const allSections = document.querySelectorAll('.secaoContainer');
4    const allSubsections = document.querySelectorAll('.subSecoes');
5    const allBarrinhas = document.querySelectorAll('.barrinha');
6
7    allSections.forEach(sec => {
8        sec.classList.remove('selecionada');
9    });
10    allSubsections.forEach(sub => {
11        sub.style.display = 'none';
12    });
13    allBarrinhas.forEach(barrinha => {
14        barrinha.style.display = 'none';
15    });
16
17    section.classList.add('selecionada');
18    section.querySelector('.subSecoes').style.display = 'flex';
19    document.getElementById(secao + 'Barrinha').style.display = 'flex';
20}
21
22function selectSubsecao(secao, gifPath, subsecaoId) {
23    const isMobile = window.innerWidth <= 930;
24    const minWidthForGif = 600;
25    const modal = document.getElementById('gifModal');
26    const modalGif = document.getElementById('modalGif');
27    const gifElement = document.getElementById('selected-gif');
28    const spinner = document.getElementById(isMobile ? 'spinner' : 'spinnerDesktop');
29
30    // Update font weight for subsections
31    const allSubsections = document.querySelectorAll('.subsecaoTitulo');
32    allSubsections.forEach(subsecao => {
33        subsecao.style.fontWeight = 'normal';
34    });
35    const clickedSubsection = event.target;
36    clickedSubsection.style.fontWeight = 'bold';
37
38    // Toggle section to ensure the correct section is open
39    toggleSection(secao);
40
41    // Show spinner initially
42    spinner.style.display = 'block';
43
44    let element;
45    if (isMobile) {
46        if (window.innerWidth < minWidthForGif) {
47            const orientationPopup = document.getElementById('orientationPopup');
48            orientationPopup.style.display = 'block';
49            setTimeout(() => {
50                orientationPopup.style.display = 'none';
51            }, 3000);
52        }
53
54        modalGif.src = gifPath;
55        modalGif.alt = `GIF da seção ${secao}`;
56        modal.style.display = 'block';
57        modalGif.style.display = 'none'; // Hide video until ready
58        element = modalGif;
59    } else {
60        gifElement.src = gifPath;
61        gifElement.alt = `GIF da seção ${secao}`;
62        element = gifElement;
63    }
64
65    // Hide spinner and show video when ready
66    element.addEventListener('canplay', () => {
67        spinner.style.display = 'none';
68        if (isMobile) {
69            modalGif.style.display = 'block';
70        }
71        element.play();
72    }, { once: true }); // Ensure listener runs only once
73
74    element.load(); // Trigger loading of the new video source
75}
76
77function closeModal() {
78    const modal = document.getElementById('gifModal');
79    document.getElementById('spinner').style.display = 'block';
80    modal.style.display = 'none';
81}
82
83// Preload videos after page load
84document.addEventListener('DOMContentLoaded', () => {
85    // Assuming $secoes is available as a JavaScript object
86    const secoes = window.secoes || {};
87
88    Object.entries(secoes).forEach(([secao, subsecoes]) => {
89        if (typeof subsecoes === 'object') {
90            Object.values(subsecoes).forEach(gifPath => {
91                const preloadVideo = document.createElement('video');
92                preloadVideo.src = gifPath;
93                preloadVideo.preload = 'auto';
94                preloadVideo.style.display = 'none';
95                document.body.appendChild(preloadVideo);
96            });
97        }
98    });
99});