feat: remove jquery and cookies. replace with localstorage and plain …

…javascript
localgovdrupal · May 9, 2024 · 3296269 · 3296269
1 parent 317fcaf
commit 3296269
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 103 deletions.
diff --git a/composer.json b/composer.json
@@ -7,8 +7,7 @@
     "license": "GPL-2.0-or-later",
     "require": {
         "drupal/condition_field": "^2.0",
-        "drupal/core": "^9.4 || ^10.0",
-        "drupal/js_cookie": "^1.0"
+        "drupal/core": "^9.4 || ^10.0"
     },
     "require-dev": {
         "drupal/group": "^3.2",

diff --git a/js/alert_banner.js b/js/alert_banner.js
@@ -5,36 +5,44 @@
  * This is so if the alert changes, the banner is reshown.
  */
 
-(function($, cookies) {
+(function() {
 
   'use strict';
 
-  function setAlertBannerHideCookie(cookie_tokens, token) {
-    cookie_tokens.push(token);
-    var new_cookie = cookie_tokens.join('+')
-    cookies.set('hide-alert-banner-token', new_cookie, { path: '/', expires: 30, SameSite: 'Lax' });
+  function setAlertBannerToHide(tokens, token) {
+    tokens.push(token);
+    var new_tokens = tokens.join('+')
+    localStorage.setItem('hide-alert-banner-token', new_tokens);
   }
 
-  $(document).ready(function() {
-
-    var cookie = cookies.get('hide-alert-banner-token');
-    var cookie_tokens = typeof cookie !== 'undefined' ? cookie.split('+') : [];
-
-    $('.js-localgov-alert-banner').each(function() {
-      $(this).removeClass('hidden');
-      var token = $(this).data('dismiss-alert-token');
-      if ($.inArray(token, cookie_tokens) > -1) {
-        $(this).hide();
+  Drupal.behaviors.alertBanner = {
+    attach: function () {
+      var hidden_tokens = localStorage.getItem('hide-alert-banner-token');
+      var hidden_tokens_array = hidden_tokens !== null ? hidden_tokens.split('+') : [];
+
+      const banners = document.querySelectorAll('.js-localgov-alert-banner');
+      for (const banner of banners) {
+        banner.classList.remove('hidden');
+        var token = banner.getAttribute('data-dismiss-alert-token');
+
+        if (hidden_tokens_array.indexOf(token) > -1) {
+          banner.style.display = 'none';
+        }
       }
-    });
-
-    $('.js-localgov-alert-banner__close').click(function(e) {
-      e.preventDefault();
-      var banner = $(this).closest('.js-localgov-alert-banner');
-      banner.attr("aria-hidden", "true").slideUp('fast');
-      setAlertBannerHideCookie(cookie_tokens, banner.data('dismiss-alert-token'));
-    });
-
-  });
+
+      const buttons = document.querySelectorAll('.js-localgov-alert-banner__close');
+      for (const button of buttons) {
+        button.addEventListener('click', (e) => {
+          e.preventDefault();
+
+          var banner = button.closest('.js-localgov-alert-banner');
+          banner.setAttribute('aria-hidden', 'true');
+          banner.style.display = 'none';
+
+          setAlertBannerToHide(hidden_tokens_array, banner.getAttribute('data-dismiss-alert-token'));
+        });
+      }
+    }
+  };
 
-}) (jQuery, window.Cookies);
+})();
diff --git a/localgov_alert_banner.libraries.yml b/localgov_alert_banner.libraries.yml
@@ -5,6 +5,3 @@ alert_banner:
       css/localgov-alert-banner.css: {}
   js:
     js/alert_banner.js: {}
-  dependencies:
-    - core/jquery
-    - js_cookie/js-cookie
diff --git a/modules/localgov_alert_banner_full_page/js/full-page-alert-banner.es6.js b/modules/localgov_alert_banner_full_page/js/full-page-alert-banner.es6.js
diff --git a/modules/localgov_alert_banner_full_page/js/full-page-alert-banner.js b/modules/localgov_alert_banner_full_page/js/full-page-alert-banner.js
@@ -1,11 +1,14 @@
 /**
-* DO NOT EDIT THIS FILE.
-* See the following change record for more information,
-* https://www.drupal.org/node/2815083
-* @preserve
-**/
+ * @file
+ * Present a full page alert banner as a dialog.
+ *
+ * The alert banner is added by the localgov_alert_banner module.
+ *
+ * @see localgov_alert_banner_preprocess_localgov_alert_banner__full()
+ * @see localgov-alert-banner--full.html.twig
+ */
 
-(function launchModalAlertBanner(Drupal, drupalSettings, cookieMonster) {
+(function launchModalAlertBanner(Drupal, drupalSettings) {
   Drupal.behaviors.launchModalAlertBanner = {
     attach: function attach() {
       var alertId = drupalSettings.localgov_alert_banner_full_page.localgov_full_page_alert_banner_id;
@@ -30,11 +33,11 @@
       lgAlert.showModal();
     },
     isHiddenAlert: function isHiddenAlert(lgAlert) {
-      var cookie = cookieMonster.get("hide-alert-banner-token");
-      var cookieTokens = typeof cookie !== "undefined" ? cookie.split("+") : [];
+      var hidden_tokens = localStorage.getItem('hide-alert-banner-token');
+      var hidden_tokens_array = hidden_tokens !== null ? hidden_tokens.split('+') : [];
       var dismissToken = lgAlert.getAttribute("data-dismiss-alert-token");
-      var isHidden = cookieTokens.includes(dismissToken);
+      var isHidden = hidden_tokens_array.includes(dismissToken);
       return isHidden;
     }
   };
-})(Drupal, drupalSettings, window.Cookies);
+})(Drupal, drupalSettings);
diff --git a/modules/localgov_alert_banner_full_page/localgov_alert_banner_full_page.libraries.yml b/modules/localgov_alert_banner_full_page/localgov_alert_banner_full_page.libraries.yml
@@ -12,4 +12,3 @@ full_page_alert_banner:
   dependencies:
     - core/drupalSettings
     - localgov_alert_banner/alert_banner
-    - js_cookie/js-cookie