https://www.teatroreal.es/themes/custom/teatro_real/dist/js/teatro.js?tm4g3z

1jQuery(document).ready(function ($) {
2
3    // ESPECTACULOS - SPONSORS DENTRO DE LA CABECERA EN MOBILE
4    if ($(window).width() < 480) {
5        if ( $(".page-node-type-espectaculo .outstanding-play .wrap-content-hero").length > 0 && $(".page-node-type-espectaculo .page-sponsor-shows").length > 0 )  {
6            
7            $(".page-node-type-espectaculo .outstanding-play .wrap-content-hero").append($(".page-node-type-espectaculo .page-sponsor-shows"));
8            
9        }
10    }
11    //PINTAMOS EL CAPTION DE LAS NOTICIAS DE GRIS
12    if( $(".page-node-type-noticias figcaption").length > 0 ){
13        if ($(".page-node-type-noticias figcaption").text().trim() != ""){
14            $(".page-node-type-noticias figcaption").addClass("caption-gris");
15        }
16    }
17
18    //Enlace directo a Mis funciones desde espectáculos
19    $(".goMisfunciones").click(function(e){
20        $("html, body").animate({ scrollTop: $(".misfunciones").offset().top }, 600);
21        $(".page-menu__list--item").removeClass("active")
22        $(e.target).parent().addClass("active")
23        e.preventDefault();
24    });
25
26    //Enlace directo a Equipo artístico desde espectáculos
27    $(".goMisArtistas").click(function(e){
28        $("html, body").animate({ scrollTop: $("#ancla-informacion-artistica").offset().top - 100 }, 600);
29        $(".page-menu__list--item").removeClass("active")
30        $(e.target).parent().addClass("active")
31        e.preventDefault();
32    });
33
34    //Enlace directo a Actividades culturales desde espectáculos
35    $(".goActividades").click(function(e){
36        $("html, body").animate({ scrollTop: $(".actividadesculturales").offset().top }, 600);
37        $(".page-menu__list--item").removeClass("active")
38        $(e.target).parent().addClass("active")
39        e.preventDefault();
40    });
41
42    // si hay ancla "#actividadesCulturales" en la url, hacemos scroll a esa sección
43    if (window.location.hash === "#actividadesCulturales") {
44        $("html, body").animate({ scrollTop: $(".actividadesculturales").offset().top }, 600);
45    }
46    
47
48    //Movemos sponsor
49    $(".container-sponsor").appendTo( $(".pshow"));
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65}); // FIN
66
67
68/**
69 * Cuenta Atrás — Múltiples instancias
70 * Uso: <div class="cuenta_atras" data-fecha="2026-03-18T19:00:00"></div>
71 * Clase opcional: ca--dark para fondo oscuro
72 *
73 * Sin dependencias externas.
74 */
75
76(function () {
77  'use strict';
78
79  const LABELS = ['DAYS', 'HOURS', 'MINUTES', 'SECONDS'];
80  const LABELS_ES = ['DÍAS', 'HORAS', 'MINUTOS', 'SEGUNDOS'];
81
82  /**
83   * Construye el HTML interno de una cuenta atrás.
84   * @param {HTMLElement} el
85   * @param {boolean} useEs  — true para labels en español
86   */
87  function buildDOM(el, useEs) {
88    const labels = useEs ? LABELS_ES : LABELS;
89    const keys = ['dias', 'horas', 'minutos', 'segundos'];
90
91    let html = '';
92
93    keys.forEach(function (key, i) {
94      if (i > 0) {
95        html += '<span class="ca-sep" aria-hidden="true">:</span>';
96      }
97      html +=
98        '<div class="ca-bloque">' +
99        '<span class="ca-label">' + labels[i] + '</span>' +
100        '<span class="ca-numero" data-ca-' + key + '>00</span>' +
101        '</div>';
102    });
103
104    el.innerHTML = html;
105    el.setAttribute('role', 'timer');
106    el.setAttribute('aria-live', 'off');
107  }
108
109  /**
110   * Formatea un número a dos dígitos mínimo.
111   */
112  function pad(n) {
113    return String(Math.max(0, n)).padStart(2, '0');
114  }
115
116  /**
117   * Calcula el tiempo restante hasta `targetDate`.
118   * Devuelve null si ya ha pasado.
119   */
120  function calcRestante(targetDate) {
121    var diff = targetDate - Date.now();
122
123    if (diff <= 0) return null;
124
125    var totalSeg = Math.floor(diff / 1000);
126    return {
127      dias:     Math.floor(totalSeg / 86400),
128      horas:    Math.floor((totalSeg % 86400) / 3600),
129      minutos:  Math.floor((totalSeg % 3600) / 60),
130      segundos: totalSeg % 60,
131    };
132  }
133
134  /**
135   * Actualiza los nodos de texto de una instancia.
136   * Aplica un micro-fade al cambiar el dígito.
137   */
138  function actualizarNodos(nodos, restante) {
139    var keys = ['dias', 'horas', 'minutos', 'segundos'];
140
141    keys.forEach(function (key) {
142      var el = nodos[key];
143      var valor = pad(restante[key]);
144
145      if (el.textContent !== valor) {
146        el.style.opacity = '0';
147        // Usamos rAF para que el navegador pinte el fade-out antes de cambiar
148        requestAnimationFrame(function () {
149          el.textContent = valor;
150          el.style.opacity = '1';
151        });
152      }
153    });
154  }
155
156  /**
157   * Inicializa una instancia.
158   */
159  function initInstancia(el) {
160    var fechaStr = el.getAttribute('data-fecha');
161    console.log("fecha cuenta atras: " + fechaStr)
162
163    if (!fechaStr) return;
164
165    var targetDate = new Date(fechaStr);
166    if (isNaN(targetDate.getTime())) {
167      console.warn('[cuenta_atras] Fecha inválida:', fechaStr, el);
168      return;
169    }
170    // Detectar idioma: atributo data-lang="es" o lang del html
171    var lang = el.getAttribute('data-lang') || document.documentElement.lang || 'es';
172    var useEs = lang.toLowerCase().startsWith('es');
173
174    buildDOM(el, useEs);
175
176    // Cachear referencias a los nodos numéricos
177    var nodos = {
178      dias:     el.querySelector('[data-ca-dias]'),
179      horas:    el.querySelector('[data-ca-horas]'),
180      minutos:  el.querySelector('[data-ca-minutos]'),
181      segundos: el.querySelector('[data-ca-segundos]'),
182    };
183
184    var intervalo;
185
186    function tick() {
187      var restante = calcRestante(targetDate);
188
189      if (!restante) {
190        // Ocultar la cuenta atrás
191        el.classList.add('ca--oculta');
192        clearInterval(intervalo);
193
194        el.addEventListener('transitionend', function () {
195            el.style.display = 'none';
196
197            // Buscar el h2.cuenta-title en el mismo contenedor padre
198            var titulo = el.parentElement
199            ? el.parentElement.querySelector('.cuenta-title')
200            : null;
201
202            // Buscar el h3.cuenta-subtitle en el mismo contenedor padre
203            var subtitulo = el.parentElement
204            ? el.parentElement.querySelector('.cuenta-subtitle')
205            : null;
206
207            if (titulo) {
208            titulo.classList.remove('hide');
209            titulo.classList.add('ca--visible');            
210            }
211
212            if(subtitulo){
213            subtitulo.classList.add('hide');   
214            }
215
216        }, { once: true });
217
218        return;
219    }
220
221      actualizarNodos(nodos, restante);
222    }
223
224    // Primera actualización inmediata
225    tick();
226
227    // Actualizar cada segundo
228    intervalo = setInterval(tick, 1000);
229  }
230
231  /**
232   * Punto de entrada: busca todos los elementos .cuenta_atras
233   * en el momento en que el DOM esté listo.
234   */

235  function init() {
236    console.log("iniciamos cuenta atras")
237    // vamos a esperar 1 segundo
238    setTimeout(function(){
239        var elementos = document.querySelectorAll('.cuenta_atras');
240        console.log(elementos)
241        elementos.forEach(initInstancia);
242    }, 1000)
243    
244  }
245
246  if (document.readyState === 'loading') {
247    document.addEventListener('DOMContentLoaded', init);
248  } else {
249    init();
250  }
251})();