https://www.movistar.com.co/shared/new-header/notifications/js/notifications.js?n=0f282d996e

1document.addEventListener('DOMContentLoaded', () => {
2
3  // --- 1. Consultar Elementos (Rápido) ---
4  const iconElements = document.querySelectorAll('.js-notification-icon');
5  const countElements = document.querySelectorAll('.js-notification-count');
6  const panel = document.getElementById('notificationPanel');
7  const closeBtn = document.getElementById('closeNotificationPanel');
8  const overlay = document.querySelector(".menu-overlay");
9
10  // Si no hay íconos de notificación en la página, no hacer nada.
11  if (!iconElements.length || !panel || !overlay) {
12    return;
13  }
14
15  const NOTIF_KEY = 'notification-viewed';
16  const EXPIRATION_KEY = 'notification-expiration';
17  const EXPIRATION_TIME_MS = 24 * 60 * 60 * 1000; // 24 horas
18
19  // --- 2. Lógica Pesada (Será Diferida) ---
20  const updateInitialNotificationState = () => {
21    try {
22      const NOTIF_COUNT = document.querySelectorAll('.notification-item').length;
23      const now = new Date().getTime();
24      const expiration = localStorage.getItem(EXPIRATION_KEY);
25
26      // Si ha expirado, limpiar localStorage
27      if (expiration && now > parseInt(expiration)) {
28        localStorage.removeItem(NOTIF_KEY);
29        localStorage.removeItem(EXPIRATION_KEY);
30      }
31
32      const wasViewed = localStorage.getItem(NOTIF_KEY);
33
34      // Actualizar la UI
35      countElements.forEach(el => {
36        if (!wasViewed && NOTIF_COUNT > 0) {
37          el.textContent = NOTIF_COUNT;
38          el.style.display = 'block';
39        } else {
40          el.textContent = '';
41          el.style.display = 'none';
42        }
43      });
44    } catch (e) {
45      console.warn('Error al inicializar el estado de notificaciones:', e);
46      // Ocultar contadores si localStorage falla (ej. modo privado)
47      countElements.forEach(el => { el.style.display = 'none'; });
48    }
49  };
50
51  // --- 3. Lógica de Clic (Marca como visto) ---
52  const setNotificationsAsViewed = () => {
53    try {
54      const now = new Date().getTime();
55      localStorage.setItem(NOTIF_KEY, 'true');
56      localStorage.setItem(EXPIRATION_KEY, (now + EXPIRATION_TIME_MS).toString());
57      
58      // Ocultar contadores
59      countElements.forEach(el => {
60        el.textContent = '';
61        el.style.display = 'none';
62      });
63    } catch (e) {
64      console.warn('Error al guardar el estado de notificaciones:', e);
65    }
66  };
67
68  // --- 4. Adjuntar Event Listeners (Rápido) ---
69  iconElements.forEach(icon => {
70    icon.addEventListener('click', () => {
71      // Cerrar el menú principal si está abierto (lógica de header.js)
72      const menuPanel = document.querySelector('.menu-panel.active');
73      if (menuPanel && menuPanel.contains(icon)) {
74        menuPanel.classList.remove('active');
75      }
76
77      // Mostrar u ocultar el panel de notificaciones
78      const isActive = panel.classList.toggle('active');
79
80      if (isActive) {
81        overlay.classList.remove("full");
82        overlay.classList.add("partial", "active");
83        // Marcar como visto SÓLO cuando se abre
84        setNotificationsAsViewed();
85      } else {
86        overlay.classList.remove("partial", "active");
87      }
88    });
89  });
90
91  // Listener para el botón de cerrar
92  if (closeBtn) {
93    closeBtn.addEventListener('click', () => {
94      panel.classList.remove('active');
95      overlay.classList.remove("active", "full", "partial");
96    });
97  }
98
99  // --- 5. DIFERIR LA EJECUCIÓN ---
100  setTimeout(updateInitialNotificationState, 0);
101
102});