ヘッダーのカウントダウンスクリプトがアバタードロップダウンを重複させていますか？

ncaming215 · 2023 年 12 月 30 日午後 6:28

ヘッダーで実行しているスクリプトは問題なく表示されています。

しかし、トピックに移動すると、アバターのドロップダウンが次のように複製されます。

簡単な修正であることを願っていますが、コンポーネントでDiscourseに多くのことをさせようとしているのかもしれません。

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

    // Insert the Countdown Banner next to the logo
    var headerLogo = document.querySelector('.d-header .title');
    if (headerLogo) {
        headerLogo.insertAdjacentHTML('afterend', countdownHtml);
    } else {
        console.error("Header logo not found");
    }

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

    if (!countdownElement) {
        console.error("Countdown element not found");
        return;
    }

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

        if (distance < 0) {
            countdownElement.innerHTML = "The Game Has started!";
            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 · 2023 年 12 月 30 日午後 6:38

解決しました！ api.onPageChange(() => { を使用して修正しました。もし他の人が自分自身の良識を超えて凝りすぎようとして同じ問題に遭遇した場合に役立つでしょう。

Heliosurge · 2023 年 12 月 31 日午前 9:07

それはかなりクールに見えます。

このバナーは、この場合、ゲームが開始されるまでのカウントダウンを行うのですか？（スポーツ）

これは、ゲームの開始や今後のセールまでのカウントダウンとして使用できる、かなりクールな#theme-componentの始まりになる可能性があります。

修正が実装されたコードを投稿していただけますか？

ncaming215 · 2024 年 1 月 1 日午後 8:38

アバターメニューがクリックできなくなったため、諦めました。修正しようとしましたが、うまくいかなかったので諦めました。そうでなければ、提出したでしょう！

Firepup650 · 2024 年 1 月 1 日午後 10:26

そのままリリースして、バグに関する免責事項を記載し、他の人が修正を試みることができるようにしてはいかがでしょうか？

Heliosurge · 2024 年 1 月 2 日午前 5:18

ヘッダーで試すのはどうでしょうか。

ncaming215 · 2024 年 1 月 6 日午後 6:12

皆さんのご要望にお応えして、コードを共有します。

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // バナーが一度だけ追加されるようにする
        if (document.getElementById('countdown-banner')) return;

        // カウントダウンバナーを作成
        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>
        `;

        // ヘッダーロゴを見つけてカウントダウンバナーを挿入
        const headerLogo = document.querySelector('.d-header .title');
        if (headerLogo) {
            headerLogo.insertAdjacentElement('afterend', countdownBanner);
        }

        // カウントダウンを初期化
        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 = "試合が始まりました！";
                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 + "日 " + hours + "時間 " + minutes + "分 " + seconds + "秒 ";
        }, 1000);
    });
</script>

CSS …

#countdown-container, #countdown-banner a {
    background-color: #0076B6; /* ソリッドな背景色 */
    opacity: 0.8; /* 透明度を調整 */
    /* その他のスタイリング... */
}


#countdown-container {
    background-color: rgba(0, 118, 182, 0.3); /* 少し透明な背景 */
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
}

#countdown-banner a {
    background-color: rgba(0, 118, 182, 0.3); /* 少し透明な背景 */
    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); /* ホバー時に少し暗く、透明度を維持 */
}


#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; /* テキストのサイズ */
    color: gray; /* グレーに変更 */
    opacity: 0.5; /* 可視性のために不透明度を調整 */
    position: absolute;
    left: 0;
    top: -30px; /* より大きく上にシフト */
    z-index: 1;
    font-weight: bold; /* 太字フォント */
}

#foreground-text {
    color: white;
    position: relative;
    z-index: 2;
    padding-left: 140px; /* 実際のレイアウトに合わせて調整 */
}

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

ncaming215 · 2024 年 1 月 6 日午後 6:13

アバターメニューがクリック可能にならないのですが。 … もし修正して共有していただけるなら、素晴らしいです！

system · 2024 年 2 月 5 日午後 6:13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

トピック		返信	表示
Why isn't there an obvious link from meta.discourse.org to discourse.org in the header? Site feedback	20	2792	2017 年 11 月 2 日
How to increase Header avatar size? Dev	15	3403	2019 年 1 月 9 日
Search dropdown has layout shift on anon view UX	3	285	2023 年 7 月 11 日
Avatar shows over banner on mobile Bug	3	1320	2015 年 3 月 24 日
Message counter hidden behind avatar UX	6	788	2017 年 11 月 28 日

ヘッダーのカウントダウン スクリプトがアバター ドロップダウンを重複させていますか？

関連トピック

ヘッダーのカウントダウンスクリプトがアバタードロップダウンを重複させていますか？