https://atardefm.com.br/themes/default/assets/js/widgets/blocoPodcast.js?_=1784838626

1document.addEventListener('DOMContentLoaded', function () {
2    const splideItemsPodcast = document.querySelectorAll('.bloco-podcast-splide .splide__list li');
3    const imagePodcastVideo = document.getElementById('image-podcast-video');
4
5    splideItemsPodcast.forEach(item => {
6        item.addEventListener('click', () => {
7            const externalId = item.getAttribute('data-external-id');
8            console.log('externalId', externalId)
9            const thumbnail = item.getAttribute('data-thumbnail');
10            console.log('thumbnail', thumbnail)
11            const thumbnailPodcast = item.getAttribute('data-thumbnail-podcast');
12            console.log('thumbnailPodcast', thumbnailPodcast)
13            const namePodcast = item.getAttribute('data-name-podcast');
14            console.log('namePodcast', namePodcast)
15            const titlePodcast = item.getAttribute('data-title-podcast');
16            console.log('titlePodcast', titlePodcast)
17            const btnText = item.getAttribute('data-btn-text');
18            console.log('btnText', btnText)
19
20            // Atribui os atributos diretamente na div
21            imagePodcastVideo.setAttribute('data-external-id', externalId);
22            imagePodcastVideo.querySelector('img').src = thumbnail;
23            imagePodcastVideo.querySelector('.capa-podcast').src = thumbnailPodcast;
24            imagePodcastVideo.querySelector('.titulo-podcastNome').textContent = namePodcast;
25            document.getElementById('title-podcasts').textContent = titlePodcast;
26            document.querySelector(".blocoPodcast > div > figure > button > span").textContent = btnText;
27        });
28    });
29});
30
31function openModalBlocoPodcastVideo() {
32    if (document.querySelector('.modalBlocoPodcast-overlay')) return;
33
34    let urlVideo = document.getElementById('image-podcast-video').getAttribute('data-external-id');
35    const modalBlocoPodcastOverlay = document.createElement('div');
36    modalBlocoPodcastOverlay.className = 'modalBlocoPodcast-overlay';
37
38    modalBlocoPodcastOverlay.innerHTML = `
39    <div class="modalBlocoPodcast-content">
40        <button class="modalBlocoPodcast-close" onclick="closeModalBlocoPodcast(event)">&times;</button>
41        <iframe src="${urlVideo}" allow="autoplay; fullscreen" allowfullscreen></iframe>
42    </div>
43    `;
44    
45    document.body.style.overflow = "hidden"; // Evitar scroll com modal aberto
46
47    modalBlocoPodcastOverlay.onclick = (event) => {
48    if (event.target === modalBlocoPodcastOverlay) {
49        closeModalBlocoPodcast({ target: modalBlocoPodcastOverlay });
50    }
51    };
52
53    document.body.appendChild(modalBlocoPodcastOverlay);
54}
55
56function closeModalBlocoPodcast(event) {
57    const modalBlocoPodcastOverlay = event.target.closest('.modalBlocoPodcast-overlay');
58    if (modalBlocoPodcastOverlay) {
59    document.body.removeChild(modalBlocoPodcastOverlay);
60    document.body.style.overflow = "visible";
61    }
62}