Merge pull request #44435 from Gauravpadam/20231912_banner_dismissal

The announcement banners can now be made dismissible

Author: k8s-ci-robot

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