https://blob.luznoticias.mx/jss/jss_ppc/js_generales.js

1document.addEventListener("DOMContentLoaded", () => {
2
3    // Helper para alternar display
4    const toggleDisplay = (el) => {
5        if (!el) return;
6        el.style.display = (el.style.display === "none" || el.style.display === "") ? "block" : "none";
7    };
8
9    // --- Toggle menú mobile ---
10    document.querySelectorAll(".header__mobile-toggle").forEach(btn => {
11        btn.addEventListener("click", e => {
12            e.preventDefault();
13            document.body.classList.toggle("header-nav-show");
14        });
15    });
16
17    // --- Toggle submenús mobile ---
18    document.querySelectorAll(".header__nav-toggle").forEach(btn => {
19        btn.addEventListener("click", e => {
20            e.preventDefault();
21            btn.classList.toggle("header__nav-toggle--active");
22            const mobileMenu = document.querySelector(".header__mobile-menu");
23            toggleDisplay(mobileMenu);
24        });
25    });
26
27    // --- Dropdowns solo en < 767px ---
28    if (window.innerWidth < 767) {
29        document.querySelectorAll(".header__nav-item--dropdown > a").forEach(link => {
30            link.addEventListener("click", e => {
31                e.preventDefault();
32                const parent = link.parentElement;
33                parent.classList.toggle("header__nav-item--dropdown-active");
34                const dropdown = parent.querySelector(".dropdown");
35                toggleDisplay(dropdown);
36            });
37        });
38    }
39
40    // --- Estado ---
41    let showrl = false;
42    let showevl = false;
43    let showrlmobile = false;
44
45    // --- Helpers ---
46    const $all = (sel) => Array.from(document.querySelectorAll(sel));
47    const hideAll = (sel) => $all(sel).forEach(el => el.style.display = "none");
48    const showAll = (sel) => $all(sel).forEach(el => el.style.display = "");
49
50    // --- Estado inicial (equivale a .hide()) ---
51    hideAll(".listadoderadios");
52    hideAll(".listadodeenvivos");
53    hideAll(".listadoderadiosmobile");
54
55    // --- Radios (desktop) ---
56    $all(".mostrardivconradios").forEach(btn => {
57        btn.style.cursor = "pointer"; // <-- para que se vea clickeable
58        btn.addEventListener("click", () => {
59            if (!showrl) {
60                showAll(".listadoderadios");
61                showrl = true;
62
63                if (showevl === true) {
64                    hideAll(".listadodeenvivos");
65                    showevl = false;
66                }
67            } else {
68                hideAll(".listadoderadios");
69                showrl = false;
70            }
71        });
72    });
73
74
75    // --- En vivo (desktop) ---
76    $all(".mostrardivconenvivo").forEach(btn => {
77        btn.style.cursor = "pointer"; // <-- hace que se note clickeable
78        btn.addEventListener("click", () => {
79            if (!showevl) {
80                showAll(".listadodeenvivos");
81                showevl = true;
82
83                if (showrl === true) {
84                    hideAll(".listadoderadios");
85                    showrl = false;
86                }
87            } else {
88                hideAll(".listadodeenvivos");
89                showevl = false;
90            }
91        });
92    });
93
94
95
96    // --- Radios (mobile) ---
97    $all(".mostrardivconradiosmobile").forEach(btn => {
98        btn.style.cursor = "pointer"; // <-- para que se vea clickeable
99        btn.addEventListener("click", () => {
100            if (!showrl) {
101                showAll(".listadoderadiosmobile");
102                showrl = true;
103
104            } else {
105                hideAll(".listadoderadiosmobile");
106                showrl = false;
107            }
108        });
109    });
110
111
112    // --- Header mobile toggle ---
113    $all(".header__mobile-toggle").forEach(el => {
114        el.addEventListener("click", (e) => {
115            if (el.id === "radio-mobile") {
116                setTimeout(() => {
117                    document.body.classList.remove("header-nav-show");
118                }, 700);
119
120                const href = el.getAttribute("href");
121                if (href) {
122                    e.preventDefault();          // evita navegación del enlace original
123                    window.open(href, "_blank"); // abre en nueva pestaña
124                }
125            }
126        });
127    });

128
129    // --- Sticky header on scroll ---
130    const currentPageInput = document.getElementById("currentpage");
131    const threshold = 300; // mismo valor en ambas ramas del ternario original
132
133    window.addEventListener("scroll", () => {
134        const scrolled = window.scrollY || document.documentElement.scrollTop;
135        const header = document.querySelector("header");
136        if (!header) return;
137
138        if (scrolled > threshold) {
139            header.classList.add("header-sticky");
140        } else {
141            header.classList.remove("header-sticky");
142        }
143    });
144
145
146
147
148    var lazyBackgrounds = document.querySelectorAll('.imglazy-loading');
149    window.addEventListener('scroll', function () {
150        lazyBackgrounds.forEach(function (background) {
151            if (isElementInViewport(background, 100)) {
152                background.classList.remove('imglazy-loading');
153                background.classList.add('imglazy-loaded');
154            }
155        });
156    });
157    function isElementInViewport(el, offset = 0) {
158        var rect = el.getBoundingClientRect();
159        return (
160            rect.top - offset <= (window.innerHeight || document.documentElement.clientHeight) &&
161            rect.left - offset <= (window.innerWidth || document.documentElement.clientWidth) &&
162            rect.bottom + offset >= 0 &&
163            rect.right + offset >= 0
164        );
165    }
166
167
168
169
170    const imgs = document.querySelectorAll(".lazy-image");
171    const observer = new IntersectionObserver(entries => {
172        entries.forEach(entry => {
173            if (entry.isIntersecting) {
174                const img = entry.target;
175                img.src = img.dataset.src;
176                observer.unobserve(img);
177            }
178        });
179    });
180    imgs.forEach(img => observer.observe(img));
181
182    document.querySelectorAll("iframe[data-src]").forEach(iframe => {
183        iframe.removeAttribute("height");
184        iframe.setAttribute("width", "100%");
185        if (!iframe.hasAttribute("loading")) {
186            iframe.setAttribute("loading", "lazy");
187        }
188        observer.observe(iframe);
189    });
190
191
192
193
194
195});