banner.html

<!-- Message Banner -->
<style>

    /* consider choosing colors from Atlassian https://atlassian.design/foundations/color */
    :root {
        --atl-squid-ink: #172B4D;
        --atl-snorlax: #253858;
        --atl-pet-rock: #344563;
        --atl-mcfanning: #42526E;
        --atl-karl: #C1C7D0;
        --atl-jolly-fun-time: #DFE1E6;
        --atl-wash-me: #FAFBFC;
        --atl-doctor: #FFFFFF;
        --atl-cheezy-blasters: #FF991F;
        --atl-james-blonde: #FFFAE6;
        --atl-chore-coat: #0747A6;
        --atl-pacific-bridge: #0052CC;
        --atl-sodium-explosion: #0065FF;
        --atl-schwag: #B3D4FF;
        --atl-pixie-dust: #DEEBFF;
        --atl-red-dirt: #DE350B;
    }
    
    #message-banner a:link {
        color: var(--atl-pacific-bridge);
        background-color: transparent;
        text-decoration: none;
    }

    #message-banner a:hover {
        color: var(--atl-sodium-explosion);
        background-color: transparent;
        text-decoration: underline;
    }

    #message-banner a:active {
        color: var(--atl-sodium-explosion);
        background-color: transparent;
        text-decoration: underline;
    }

    /*this changes the style of the div containing the message*/
    #message-banner {
        border: 2px solid;
        border-radius: 5px;
        font-weight: bold;
        text-align: center;
    }

    #message-banner-contents {
        margin: 3px auto;
    }
    
    #message-banner-buttons {
        margin-top: 2px;
    }

    #message-banner-buttons button {
        background-color: var(--atl-chore-coat);
        border: none;
        color: var(--atl-doctor);
        padding: 4px 10px;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        float: left;    
    }
    
    #message-banner-buttons button:hover {
        background-color: var(--atl-pacific-bridge);
    }   

    #hide-banner-btn-div button{
        background-color: var(--atl-jolly-fun-time);
        color: var(--atl-squid-ink);
    }

    #hide-banner-btn-div button:hover {
        background-color: var(--atl-karl);
    }
    
    .banner-bg-btn {
        width: 60px;
        padding: 0;
        margin: 0 auto;
    }

    .bttn-wpr {
        display: flex;
        justify-content: center; /* align horizontal */
    }
</style>


<div id="message-banner" data-theme="warning">
    <div id="message-banner-contents">
        <div id="message-banner-message">
            <strong>Reminder:</strong> There will be a Users forum. Teams meeting information
            can be found on the <a href=https://google.com>Calendar of Events</a>.
        </div>
        <div id="message-banner-buttons">
            <div id="message-banner-btn-wpr" class="bttn-wpr">
                <div id="hide-banner-btn-div">
                    <button id="hide-banner-btn">Dismiss (1 hr)</button>
                </div>
                &nbsp;
                <div id="message-banner-bg-btn-div">
                    <button class="banner-bg-btn" data-bg-color="atl-james-blonde" data-color="atl-squid-ink" data-bordercolor="atl-cheezy-blasters">Yellow</button>
                    <button class="banner-bg-btn" data-bg-color="atl-pixie-dust" data-color="atl-squid-ink" data-bordercolor="atl-chore-coat">Blue</button>
                    <button class="banner-bg-btn" data-bg-color="atl-pet-rock" data-color="atl-doctor" data-bordercolor="atl-pet-rock">Dark</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    // dict of atlassian color names and hex values
    // consider choosing colors from Atlassian https://atlassian.design/foundations/color
    var atlColors = {
        "atl-squid-ink" : "#172B4D",
        "atl-snorlax" : "#253858",
        "atl-pet-rock" : "#344563",
        "atl-mcfanning" : "#42526E",
        "atl-karl" : "#C1C7D0",
        "atl-jolly-fun-time" : "#DFE1E6",
        "atl-wash-me" : "#FAFBFC",
        "atl-doctor" : "#FFFFFF",
        "atl-cheezy-blasters" : "#FF991F",
        "atl-james-blonde" : "#FFFAE6",
        "atl-chore-coat" : "#0747A6",
        "atl-pacific-bridge" : "#0052CC",
        "atl-sodium-explosion" : "#0065FF",
        "atl-schwag" : "#B3D4FF",
        "atl-pixie-dust" : "#DEEBFF",
        "atl-red-dirt" : "#DE350B"
    }

    // themes
    var batBannerThemes = {
        "warning" : {
            "data-bg-color" : "atl-james-blonde",
            "data-color" : "atl-squid-ink",
            "data-bordercolor" : "atl-cheezy-blasters"
        },
        "info" : {
            "data-bg-color" : "atl-pixie-dust",
            "data-color" : "atl-squid-ink",
            "data-bordercolor" : "atl-chore-coat"
        }
    }

    function setCookie(name,value,hours){
        var expires = "";
        if (hours) {
            var date = new Date();
            date.setTime(date.getTime() + (hours * 3600 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + value + expires + "; path=/";
    }
    function getCookie(name){
        var nameEQ = name + "=";
        var cookies = document.cookie.split(';');
        for (var i=0; i < cookies.length; i++){
            var cookie = cookies[i];
            while (cookie.charAt(0) === ' ') {
                cookie = cookie.substring(1, cookie.length);
            }
            if (cookie.indexOf(nameEQ) === 0) {
                return cookie.substring(nameEQ.length, cookie.length);
            }
        }
        return null;
    }

    function changeBackgroundColor() {
        var bgColor = atlColors[this.getAttribute('data-bg-color')];
        var txtColor = atlColors[this.getAttribute('data-color')];
        var brdrColor = atlColors[this.getAttribute('data-bordercolor')];
        var cookieLength = 10; //the number of hours the cookies are good for
        messageBannerDiv.style.backgroundColor = bgColor;
        messageBannerDiv.style.color = txtColor;
        messageBannerDiv.style.borderColor = brdrColor;
        setCookie('messageBannerBg', bgColor, cookieLength);
        setCookie('messageBannerTxt', txtColor, cookieLength);
        setCookie('messageBannerBrdr', brdrColor, cookieLength);
        // if dark-mode, change link color
        if (bgColor == atlColors["atl-pet-rock"]){
            document.querySelector('#message-banner a').style.color = atlColors["atl-schwag"];
            setCookie('messageBannerAtags', atlColors["atl-schwag"], cookieLength);
        }
        else { 
            //set the a-tags style to blank for message-banner so that it uses the style section above.
            document.querySelector('#message-banner a').style.color = "";
            setCookie('messageBannerAtags', "", cookieLength);
        }
    }

    function hideMessageBanner() {
        setCookie('announcementBannerDisplay', "none", 1);
        announcementBannerDiv.style.display = "none";
    }

    const messageBannerDiv = document.getElementById("message-banner");
    const announcementBannerDiv = document.getElementById("announcement-banner");
    const hide_btn = document.getElementById("hide-banner-btn");

    hide_btn.onclick = hideMessageBanner;

    document.querySelectorAll('.banner-bg-btn').forEach(button => {
        button.addEventListener('click', changeBackgroundColor);
    });

    var initialMessageBannerBG = getCookie('messageBannerBg');
    var initialMessageBannerTxt = getCookie('messageBannerTxt');
    var initialMessageBannerBrdr = getCookie('messageBannerBrdr');
    var initialMessageBannerAtags = getCookie('messageBannerAtags');
    var initialAnnouncementBannerDisplay = getCookie('announcementBannerDisplay');
    var theme = messageBannerDiv.getAttribute('data-theme');
    // if no user pref cookies, use theme
    if (batBannerThemes[theme] && !initialMessageBannerBG) {
        initialMessageBannerBG = atlColors[batBannerThemes[theme]["data-bg-color"]];
        initialMessageBannerTxt = atlColors[batBannerThemes[theme]["data-color"]];
        initialMessageBannerBrdr = atlColors[batBannerThemes[theme]["data-bordercolor"]];
    }

    if (initialMessageBannerBG) {
        messageBannerDiv.style.backgroundColor = initialMessageBannerBG;
        messageBannerDiv.style.color = initialMessageBannerTxt;
        messageBannerDiv.style.borderColor = initialMessageBannerBrdr;
        document.querySelector('#message-banner a').style.color = initialMessageBannerAtags;
    }
    else {
        // set the default to yellow banner
        messageBannerDiv.style.backgroundColor = atlColors["atl-james-blonde"];
        messageBannerDiv.style.borderColor = atlColors["atl-cheezy-blasters"]
        messageBannerDiv.style.color = atlColors["atl-squid-ink"];
    }
    
    announcementBannerDiv.style.display = initialAnnouncementBannerDisplay;
    
</script>