¿El script de cuenta regresiva en el encabezado duplica el menú desplegable del avatar?

[ncaming215 (nate c.)]

Tengo el siguiente script ejecutándose en mi encabezado, y se está renderizando perfectamente.

Pero cuando navego a un tema, el menú desplegable del avatar se replica así:

Espero que sea una solución simple, pero tal vez estoy intentando que Discourse haga demasiado con un componente.

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Crear HTML de la cuenta regresiva con estilo
    var countdownHtml = `
        <div id="countdown-banner" style="position: relative; display: inline-block; margin-left: 20px; vertical-align: middle;">
            <span id="background-text" style="opacity: 0.2; color: gray; font-size: 4.5em; position: absolute; left: 0; top: -31px; z-index: 1;">
                DET vs. DAL <i class="fas fa-football-ball"></i>
            </span>
            <div id="foreground-text" style="color: white; position: relative; z-index: 2; display: flex; align-items: center;">
                <span id="countdown-container" style="background-color: #0076B6; padding: 5px 10px; border-radius: 5px; margin-right: 10px;">
                    Lions at Cowboys: <span id="countdown" style="font-family: 'LCD', 'Courier New', monospace;"></span>
                </span>
                <a href="https://thedenforum.com/t/official-lions-vs-cowboys-game-day-thread-2023/30290" style="background-color: #0076B6; color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none;">
                    Game Thread
                </a>
            </div>
        </div>`;

    // Insertar el banner de cuenta regresiva junto al logo
    var headerLogo = document.querySelector('.d-header .title');
    if (headerLogo) {
        headerLogo.insertAdjacentHTML('afterend', countdownHtml);
    } else {
        console.error("No se encontró el logo del encabezado");
    }

    // Funcionalidad de cuenta regresiva
    const eventTime = new Date('December 30, 2023 20:00:00 GMT-0400').getTime();
    const countdownElement = document.getElementById('countdown');

    if (!countdownElement) {
        console.error("No se encontró el elemento de cuenta regresiva");
        return;
    }

    function updateCountdown() {
        const now = new Date().getTime();
        const distance = eventTime - now;

        if (distance < 0) {
            countdownElement.innerHTML = "¡El juego ha comenzado!";
            clearInterval(interval);
            return;
        }

        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
    }

    var interval = setInterval(updateCountdown, 1000);
});
</script>

[ncaming215 (nate c.)]

¡Resuelto! Lo arreglé usando api.onPageChange(() => { si alguien más intenta ser demasiado ambicioso por su propio bien y se encuentra con lo mismo.

[Heliosurge (Dan DeMontmorency)]

Eso se ve muy bien.

¿Entonces este banner hace una cuenta regresiva en este caso hasta que comience el juego? (deportes)

Este podría ser el comienzo de un componente temático bastante interesante, un sitio de comercio o lo que sea podría usarlo como cuenta regresiva para el lanzamiento o una venta próxima.

¿Puedes publicar tu código con la corrección implementada, por favor?

[ncaming215 (nate c.)]

Lo dejé porque hace que el menú del avatar no se pueda hacer clic. Intenté de todo para arreglarlo sin éxito, así que me di por vencido, ¡de lo contrario lo habría enviado!

[Firepup650 (Firepup Sixfifty)]

¿Quizás podrías lanzarlo tal cual, con una advertencia sobre los errores que causa para que otros potencialmente intenten solucionarlo?

[Heliosurge (Dan DeMontmorency)]

Quizás sea una idea intentar en el encabezado?

[ncaming215 (nate c.)]

Aquí está el código para todos los que lo han pedido.

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // Asegúrate de que el banner solo se agregue una vez
        if (document.getElementById('countdown-banner')) return;

        // Crea el banner de cuenta regresiva
        const countdownBanner = document.createElement('div');
        countdownBanner.id = 'countdown-banner';
        countdownBanner.style.cssText = 'position: relative; display: inline-block; margin-left: 20px; vertical-align: middle;';
        countdownBanner.innerHTML = `
            <span id="background-text" style="opacity: 0.2; color: gray; font-size: 4.5em; position: absolute; left: 0; top: -31px; z-index: 1;">
                DET vs. DAL <i class="fas fa-football-ball"></i>
            </span>
            <div id="foreground-text" style="color: white; position: relative; z-index: 2; display: flex; align-items: center;">
                <span id="countdown-container" style="background-color: #0076B6; padding: 5px 10px; border-radius: 5px; margin-right: 10px;">
                    Lions at Cowboys: <span id="countdown" style="font-family: 'LCD', 'Courier New', monospace;"></span>
                </span>
                <a href="[URL]" style="background-color: #0076B6; color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none;">
                    Game Thread
                </a>
            </div>
        `;

        // Encuentra el logo del encabezado e inserta el banner de cuenta regresiva
        const headerLogo = document.querySelector('.d-header .title');
        if (headerLogo) {
            headerLogo.insertAdjacentElement('afterend', countdownBanner);
        }

        // Inicializa la cuenta regresiva
        const eventTime = new Date('December 30, 2024 20:00:00 GMT-0400').getTime();
        const countdownElement = document.getElementById('countdown');
        setInterval(() => {
            const now = new Date().getTime();
            const distance = eventTime - now;

            if (!countdownElement) return;

            if (distance < 0) {
                countdownElement.innerHTML = "¡El juego ha comenzado!";
                return;
            }

            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        }, 1000);
    });
</script>

CSS …

#countdown-container, #countdown-banner a {
    background-color: #0076B6; /* Color de fondo sólido */
    opacity: 0.8; /* Ajusta la transparencia */
    /* Otro estilo... */
}


#countdown-container {
    background-color: rgba(0, 118, 182, 0.3); /* Fondo ligeramente transparente */
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
}

#countdown-banner a {
    background-color: rgba(0, 118, 182, 0.3); /* Fondo ligeramente transparente */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

#countdown-banner a:hover {
    background-color: rgba(0, 95, 138, 0.3); /* Ligeramente más oscuro al pasar el ratón con transparencia */
}


#countdown-banner {
    font-family: Arial, sans-serif;
    position: relative;
    display: inline-block;
    margin-left: 20px;
    vertical-align: middle;
}

#background-text {
    font-family: 'Impact', sans-serif;
    font-size: 5em; /* Tamaño del texto */
    color: gray; /* Cambiado a gris */
    opacity: 0.5; /* Ajusta la opacidad para la visibilidad */
    position: absolute;
    left: 0;
    top: -30px; /* Desplazado más significativamente hacia arriba */
    z-index: 1;
    font-weight: bold; /* Fuente en negrita */
}

#foreground-text {
    color: white;
    position: relative;
    z-index: 2;
    padding-left: 140px; /* Ajusta según el diseño real */
}

#countdown {
    font-family: 'LCD', 'Courier New', monospace;
    font-size: 1.2em;
}

[ncaming215 (nate c.)]

Tenga en cuenta que nunca pude hacer que el menú de avatar fuera clicable. … ¡si puede corregirlo y compartirlo, sería increíble!