Added script for managing state of announcement banner

Script for dismissing the banners

Integration of the script

Some optimizations for the script

Reverting test changes for scheduled.yaml

rebase commit

Enhanced code readability

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;

data/i18n/en/en.toml

@@ -12,6 +12,9 @@ other = """<p>This page is automatically generated.</p><p>If you plan to report
 [blog_post_show_more]
 other = "Show More Posts..."
 
+[banner_acknowledgement]
+other = "Hide this notice"
+
 [caution]
 other = "Caution:"
 

layouts/partials/announcement.html

@@ -15,7 +15,7 @@
     {{- if or (eq .endTime nil ) (gt ( time .endTime ) now ) -}}
       {{- if not $announcementShown -}}
       {{- $announcementShown = true -}}
-  <div lang="en" id="announcement" style="background-color: #3371e3; color: #fff; {{ .style | safeCSS }}">
+  <div lang="en" id="announcement" data-announcement-name="{{ .name }}" style="background-color: #3371e3; color: #fff; {{ .style | safeCSS }}">
     <aside>
       <div class="announcement-main" data-nosnippet>
         {{ if .title }}
@@ -24,6 +24,9 @@
         </h4>
         {{ end }}
         <p>{{ .message | markdownify }}</p>
+        {{- if eq .dismissParameters.dismissible true -}}
+        <button  id="banner-dismiss" class="button" style="display: none;" data-ttl={{ .dismiss_params.showDismissedAnnouncementAfterDays }}>{{ T "banner_acknowledgement" }}</button> <!-- Only JS enabled users will see this button -->
+        {{- end -}}      
       </div>
     </aside>
   </div>

layouts/partials/head.html

@@ -83,6 +83,10 @@
 <!--script src="https://unpkg.com/split.js/dist/split.min.js"></script-->
 <script src="/js/split-1.6.0.js" intregrity="sha384-0blL3GqHy6+9fw0cyY2Aoiwg4onHAtslAs4OkqZY7UQBrR65/K4gI+hxLdWDrjpz"></script>
 
+<!--Script for dismissing banners/notices-->
+<script defer src="{{ "js/dismiss_banner.js" | relURL }}"></script>
+
+
 {{- if or (.HasShortcode "table")  (.HasShortcode "feature-gate-table") -}}
 <script defer src="{{ "js/sortable-table.js" | relURL }}"></script>
 {{- end -}}

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();
+  });
+});