diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss index a0ebb42745..10935044a5 100644 --- a/assets/scss/_custom.scss +++ b/assets/scss/_custom.scss @@ -732,6 +732,8 @@ body.td-documentation { } } +/* Announcements */ + #announcement { > * { color: inherit; @@ -753,10 +755,21 @@ body.td-documentation { padding-top: 40px; } +// Don't show announcements when javascript is not available + +html.no-js body div#announcement { + display: none; +} + +#announcement.display-announcement{ + display: block; // apply this class to display the announcement +} + #announcement { // default background is blue; overrides are possible color: #fff; - + display: none; // When javascript is available, Let javascript handle the state of the announcement + .announcement-main { margin-left: auto; margin-right: auto; diff --git a/data/i18n/en/en.toml b/data/i18n/en/en.toml index df7760e731..d90808d533 100644 --- a/data/i18n/en/en.toml +++ b/data/i18n/en/en.toml @@ -12,6 +12,9 @@ other = """

This page is automatically generated.

If you plan to report [blog_post_show_more] other = "Show More Posts..." +[banner_acknowledgement] +other = "Hide this notice" + [caution] other = "Caution:" diff --git a/layouts/partials/announcement.html b/layouts/partials/announcement.html index bff71bfe4c..497a4b56ec 100644 --- a/layouts/partials/announcement.html +++ b/layouts/partials/announcement.html @@ -15,7 +15,7 @@ {{- if or (eq .endTime nil ) (gt ( time .endTime ) now ) -}} {{- if not $announcementShown -}} {{- $announcementShown = true -}} -

+
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 719142ab70..236ffac759 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -83,6 +83,10 @@ + + + + {{- if or (.HasShortcode "table") (.HasShortcode "feature-gate-table") -}} {{- end -}} diff --git a/static/js/dismiss_banner.js b/static/js/dismiss_banner.js new file mode 100644 index 0000000000..3d80069beb --- /dev/null +++ b/static/js/dismiss_banner.js @@ -0,0 +1,41 @@ +$(document).ready(function() { + function setCookie(name, value, days) { + let expires = ""; + let date = new Date(); // Create a new Date object + let dateToSecond = 24 * 60 * 60 * 1000; + + if (days) { + date.setTime(date.getTime() + days * dateToSecond); // Modify the existing Date object + expires = "; expires=" + date.toUTCString(); + } + + document.cookie = name + "=" + value + expires + "; path=/"; + } + + function getCookie(name) { + let matches = document.cookie.match(new RegExp( + "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" + )); + return matches ? "true" : undefined; + } + + /* Check the presence of a cookie */ + let announcement = document.querySelector("#announcement"); + let token = `announcement_ack_${announcement.getAttribute('data-announcement-name').replace(/\s/g, '_')}`; // Generate the unique token for announcement + let acknowledged = getCookie(token); + if (acknowledged === "true") { + announcement.remove(); // Remove the announcement if the cookie is set + } + else { + announcement.classList.add('display-announcement') // Display the announcement if the cookie is not set + } + + /* Driver code to set the cookie */ + let button = document.querySelector('#banner-dismiss'); + button.removeAttribute('style'); + button.addEventListener('click', function() { + setCookie(token, "true", + button.getAttribute('data-ttl')); // Set a cookie with time to live parameter + announcement.remove(); + }); +});