diff --git a/app/javascript/banner.js b/app/javascript/banner.js index 74691547..4f9aa34a 100644 --- a/app/javascript/banner.js +++ b/app/javascript/banner.js @@ -10,9 +10,13 @@ // place a button with the class "banner-close". // That's it! // +// To limit a banner to a specific time period, +// add data-from and data-to attributeseach containing an RFC3339 date string. +// The banner will only be considered for display if the current date is between the two dates. +// // Example in Slim: // -// .banner#my-banner-name style="display: none" +// .banner#my-banner-name style="display: none" data={from: "2025-01-05T09:00:00-08:00", to: "2025-01-12T00:15:00-08:00"} // | This is a banner. // button.btn.btn-secondary.banner-close Close @@ -22,6 +26,15 @@ const initBanners = function () { if (localStorage.getItem(storageKey) === "hide") { return; } + if (element.dataset.from && element.dataset.to) { + const from = new Date(element.dataset.from); + const to = new Date(element.dataset.to); + to.setDate(to.getDate() + 1); // Make the end date inclusive + const now = new Date(); + if (now < from || now > to) { + continue; + } + } element.style.display = "block"; } }; diff --git a/app/views/shared/_banners.slim b/app/views/shared/_banners.slim index fdeaf296..c2adbeca 100644 --- a/app/views/shared/_banners.slim +++ b/app/views/shared/_banners.slim @@ -10,23 +10,17 @@ article.pt-0.mb-3#survey-container style='display: none; max-width: 50em;' ' Please add an email address from the a href=settings_path settings page ' . -.m2: .banner.alert.alert-success.col-md-6.mx-auto#shutdown-saved-banner style="display: none" - a.font-weight-bold.float-left.text-white.bg-success.p-1.px-3 style="display: float; transform: rotate(-45deg); position: absolute; left: -2em; top: -1em;" Saved! - a.float-right.alert-link.banner-close.p-1 style="cursor: pointer" × - ' Thanks to a generous commitment from - a.alert-link target='_blank' href='https://gamesdonequick.com' Games Done Quick - ' to provide ongoing financial support, Splits.io will no longer be shutting down! Be sure to give them a - a.alert-link target='_blank' href='https://gamesdonequick.com' visit - | ! -/.m-2: .banner.alert.alert-success.col-md-12.col-lg-10.col-xl-8.mx-auto#gdq-test-banner style="display: none" - a.alert-link target='_blank' href='https://gamesdonequick.com' Awesome Games Done Quick - '< is happening right now! - - button_link = 'https://gamesdonequick.com' - .d-block.d-lg-none.mt-4 - a.btn-sm.btn-success.mr-3.p-2 target='_blank' href='#{button_link}' Watch - a.alert-link.banner-close style="cursor: pointer" Dismiss - .float-right.d-none.d-lg-block - a.btn-sm.btn-success.mr-3.p-2 target='_blank' href='#{button_link}' See Schedule - a.alert-link.banner-close style="cursor: pointer" X +.m-2 + .banner.alert.alert-success.col-md-12.col-lg-10.col-xl-8.mx-auto#agdq-2025 data={from: "2025-01-05T09:00:00-08:00", to: "2025-01-12T00:15:00-08:00"} style="display: none" + ' Tune in to + a.alert-link target='_blank' href='https://gamesdonequick.com' Awesome Games Done Quick + | ! + - button_link = 'https://www.twitch.tv/gamesdonequick' + .d-block.d-lg-none.mt-4 + a.btn-sm.btn-success.mr-3.p-2 target='_blank' href='#{button_link}' Watch + a.alert-link.banner-close style="cursor: pointer" Dismiss + .float-right.d-none.d-lg-block + a.btn-sm.btn-success.mr-3.p-2 target='_blank' href='#{button_link}' See Schedule + a.alert-link.banner-close style="cursor: pointer" X .row.mx-2: #alerts.w-100 data-turbolinks-temporary=true = render partial: 'shared/alerts'