Dismissible GlobalMessage

oioioi/globalmessage/processors.py

@@ -16,10 +16,12 @@ def global_message_processor(request):
     if message.visible(time):
         return {
             'extra_body_global_message': render_to_string(
-                'global-message-user.html', {'global_message': message}
+                'global-message-user.html',
+                {'global_message': message, 'start': message.start.strftime('%s')},
             ),
             'extra_admin_global_message': render_to_string(
-                'global-message-admin.html', {'global_message': message}
+                'global-message-admin.html',
+                {'global_message': message, 'start': message.start.strftime('%s')},
             ),
         }
 

oioioi/globalmessage/templates/global-message-admin.html

@@ -1,3 +1,3 @@
-<div id="global-message-admin" class="full-bootstrap">
+<div id="global-message-admin" class="full-bootstrap" data-start="{{ start }}">
     {% include "global-message.html" %}
-</div>
+</div>

oioioi/globalmessage/templates/global-message-user.html

@@ -1,3 +1,3 @@
-<div id="global-message-user">
+<div id="global-message-user" data-start="{{ start }}">
     {% include "global-message.html" %}
-</div>
+</div>

oioioi/globalmessage/templates/global-message.html

@@ -1 +1,32 @@
-<div class="alert alert-info">{{ global_message }}</div>
+<div class="alert alert-info">
+    <button type="button" class="close" aria-label="Close" id="global-message-close" style="display:none;">
+        <span aria-hidden="true">×</span>
+    </button>
+    {{ global_message|safe }}
+</div>
+<script>
+    (() => {
+        const $globalMsgClose = document.getElementById("global-message-close");
+        const $globalMsgRoot =
+            document.getElementById("global-message-user") ||
+            document.getElementById("global-message-admin");
+        if ($globalMsgClose == null) {
+            throw new Error("No GlobalMessage close button found");
+        }
+        if ($globalMsgRoot == null) {
+            throw new Error("No GlobalMessage root element found");
+        }
+        $globalMsgClose.style.display = "";
+        const globalMsgData = localStorage.getItem("globalmessage_dismissed");
+        if (globalMsgData === $globalMsgRoot.dataset.start) {
+            $globalMsgRoot.style.display = "none";
+        }
+        $globalMsgClose.addEventListener("click", (e) => {
+            $globalMsgRoot.style.display = "none";
+            localStorage.setItem(
+                "globalmessage_dismissed",
+                $globalMsgRoot.dataset.start,
+            );
+        });
+    })();
+</script>