Add localstore trigger to remember alert closed

Author: berrydenhartog

src/assets/js/main.js

@@ -1,10 +1,19 @@
 import "../css/main.css";
 
 document.addEventListener("DOMContentLoaded", function () {
-  document
-    .querySelector(".rvo-alert .rvo-button__close")
-    .addEventListener("click", function (event) {
-      const parrent = event.target.closest(".rvo-alert");
-      parrent.style.display = "none";
+  document.querySelectorAll(".rvo-alert").forEach(function (alertDiv) {
+    const closeButton = alertDiv.querySelector(".rvo-button__close");
+    const alertId = alertDiv.getAttribute("data-alert-id");
+
+    if (localStorage.getItem(`alertClosed-${alertId}`) === "true") {
+      alertDiv.style.display = "none";
+    }
+
+    closeButton.addEventListener("click", function (event) {
+      alertDiv.style.display = "none";
+
+      // Set a localStorage item to remember the alert is closed
+      localStorage.setItem(`alertClosed-${alertId}`, "true");
     });
+  });
 });

src/index.html

@@ -33,7 +33,10 @@
       <div
         class="rvo-max-width-layout rvo-max-width-layout--md rvo-min-width-layout--sm"
       >
-        <div class="rvo-alert rvo-alert--info rvo-alert--padding-md">
+        <div
+          class="rvo-alert rvo-alert--info rvo-alert--padding-md"
+          data-alert-id="index-poc-alert"
+        >
           <span
             class="utrecht-icon rvo-icon rvo-icon-info rvo-icon--xl rvo-status-icon-info"
             role="img"

webpack.config.js

@@ -49,6 +49,13 @@ module.exports = {
           filename: "assets/images/[name][ext][query]",
         },
       },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: "asset/resource",
+        generator: {
+          filename: "assets/fonts/[name][ext][query]",
+        },
+      },
     ],
   },
   optimization: {