Countdown-Skript im Header dupliziert Avatar-Dropdown?

[ncaming215 (nate c.)]

Ich habe das folgende Skript in meiner Kopfzeile laufen, und es wird einwandfrei gerendert.

Aber wenn ich zu einem Thema navigiere, dupliziert sich das Avatar-Dropdown wie folgt:

Ich hoffe, es ist eine einfache Lösung, aber vielleicht versuche ich, zu viel mit einer Komponente in Discourse zu machen.

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Erstelle Countdown-HTML mit Styling
    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>`;

    // Füge das Countdown-Banner neben dem Logo ein
    var headerLogo = document.querySelector('.d-header .title');
    if (headerLogo) {
        headerLogo.insertAdjacentHTML('afterend', countdownHtml);
    } else {
        console.error("Header-Logo nicht gefunden");
    }

    // Countdown-Funktionalität
    const eventTime = new Date('December 30, 2023 20:00:00 GMT-0400').getTime();
    const countdownElement = document.getElementById('countdown');

    if (!countdownElement) {
        console.error("Countdown-Element nicht gefunden");
        return;
    }

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

        if (distance < 0) {
            countdownElement.innerHTML = "Das Spiel hat begonnen!";
            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 + "t " + hours + "h " + minutes + "m " + seconds + "s ";
    }

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

[ncaming215 (nate c.)]

Gelöst! Ich habe es mit api.onPageChange(() => { behoben, falls jemand anderes versucht, zu schlau zu sein und auf dasselbe Problem stößt.

[Heliosurge (Dan DeMontmorency)]

Das sieht ziemlich cool aus.

Zählt dieses Banner also in diesem Fall bis zum Spielbeginn herunter? (Sport)

Dies könnte der Beginn einer ziemlich coolen Theme component sein, die eine E-Commerce-Seite oder dergleichen verwenden könnte, um den Start oder einen bevorstehenden Verkauf herunterzuzählen.

Können Sie Ihren Code mit der implementierten Korrektur posten, bitte?

[ncaming215 (nate c.)]

Ich habe es aufgegeben, weil das Avatar-Menü nicht mehr klickbar ist. Ich habe alles versucht, um es zu beheben, aber ohne Erfolg, also habe ich aufgegeben, sonst hätte ich es eingereicht!

[Firepup650 (Firepup Sixfifty)]

Vielleicht könnten Sie es so veröffentlichen, mit einem Haftungsausschluss bezüglich der Fehler, die es verursacht, damit andere es möglicherweise beheben können?

[Heliosurge (Dan DeMontmorency)]

Könnte eine Idee sein, es vielleicht in der Kopfzeile zu versuchen?

[ncaming215 (nate c.)]

Hier ist der Code für alle, die danach gefragt haben.

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // Ensure the banner is only added once
        if (document.getElementById('countdown-banner')) return;

        // Create the countdown banner
        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>
        `;

        // Find the header logo and insert the countdown banner
        const headerLogo = document.querySelector('.d-header .title');
        if (headerLogo) {
            headerLogo.insertAdjacentElement('afterend', countdownBanner);
        }

        // Initialize the countdown
        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 = "The Game Has started!";
                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; /* Solid background color */
    opacity: 0.8; /* Adjust transparency */
    /* Other styling... */
}


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

#countdown-banner a {
    background-color: rgba(0, 118, 182, 0.3); /* Slightly transparent background */
    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); /* Slightly darker on hover with transparency */
}


#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; /* Size of the text */
    color: gray; /* Changed to gray */
    opacity: 0.5; /* Adjust opacity for visibility */
    position: absolute;
    left: 0;
    top: -30px; /* More significantly shifted up */
    z-index: 1;
    font-weight: bold; /* Bold font */
}

#foreground-text {
    color: white;
    position: relative;
    z-index: 2;
    padding-left: 140px; /* Adjust based on actual layout */
}

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

[ncaming215 (nate c.)]

Bitte beachten Sie, dass das Avatar-Menü nie klickbar wurde. … wenn Sie es korrigieren und teilen können, wäre das fantastisch!