add setup utility for js utils

src/Foundation.hs

@@ -993,6 +993,7 @@ siteLayout' headingOverride widget = do
       addScript $ StaticR js_vendor_flatpickr_js
       addScript $ StaticR js_polyfills_fetchPolyfill_js
       addScript $ StaticR js_polyfills_urlPolyfill_js
+      addScript $ StaticR js_utils_setup_js
       addScript $ StaticR js_utils_featureChecker_js
       addScript $ StaticR js_utils_tabber_js
       addScript $ StaticR js_utils_alerts_js

static/js/utils/alerts.js

@@ -3,6 +3,7 @@
 
   window.utils = window.utils || {};
 
+  var ALERTS_CLASS = 'alerts';
   var ALERTS_TOGGLER_CLASS = 'alerts__toggler';
   var ALERTS_TOGGLER_VISIBLE_CLASS = 'alerts__toggler--visible';
   var ALERTS_TOGGLER_APPEAR_DELAY = 120;
@@ -18,7 +19,11 @@
   window.utils.alerts = function(alertsEl) {
 
     if (alertsEl.classList.contains(JS_INITIALIZED_CLASS)) {
-      return;
+      return false;
+    }
+
+    if (!alertsEl || !alertsEl.classList.contains(ALERTS_CLASS)) {
+      throw new Error('utils.alerts has to be called with alerts element');
     }
 
     var togglerCheckRequested = false;

static/js/utils/asidenav.js

@@ -25,7 +25,6 @@
     }
 
     function initAsidenavSubmenus() {
-      // find list items first (not nested), and then look for link wrappers inside each list item
       var asidenavLinksWithSubmenus = Array.from(asideEl.querySelectorAll('.' + ASIDENAV_LIST_ITEM_CLASS))
         .map(function(listItem) {
           var submenu = listItem.querySelector('.' + ASIDENAV_SUBMENU_CLASS);

static/js/utils/setup.js

@@ -0,0 +1,54 @@
+(function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  var registeredSetupListeners = {};
+
+  window.utils.setup = function(utilType, scope, options) {
+
+    if (!utilType) {
+      return;
+    }
+
+    var listener = function(event) {
+
+      if (event.detail.targetUtil !== utilType) {
+        return false;
+      }
+
+      if (options && options.setupFunction) {
+        options.setupFunction(scope, options);
+      } else {
+        var util = window.utils[utilType];
+        if (!util) {
+          throw new Error('"' + utilType + '" is not a known js util');
+        }
+
+        util(scope, options);
+      }
+    };
+
+    if (registeredSetupListeners[utilType]) {
+      registeredSetupListeners[utilType].push(listener);
+    } else {
+      registeredSetupListeners[utilType] = [ listener ];
+    }
+
+    document.addEventListener('setup', listener);
+
+    document.dispatchEvent(new CustomEvent('setup', {
+      detail: { targetUtil: utilType, module: 'none' },
+      bubbles: true,
+      cancelable: true,
+    }));
+  };
+
+  window.utils.teardown = function(utilType) {
+    if (registeredSetupListeners[utilType]) {
+      registeredSetupListeners[utilType].forEach(function(listener) {
+        document.removeEventListener('setup', listener);
+      });
+    }
+  }
+})();

templates/widgets/alerts/alerts.hamlet

@@ -1,8 +1,8 @@
-<div #alerts .alerts>
+<div #alerts-1 .alerts> <!-- make wIdent work here instead of '#alerts-1' -->
   <div .alerts__toggler>
   $forall (status, msg) <- mmsgs
     $with status2 <- bool status "info" (status == "")
-      <div class="alert alert-#{status2}">
+      <div .alert.alert-#{status2}>
         <div .alert__closer>
         <div .alert__icon>
         <div .alert__content>

templates/widgets/alerts/alerts.julius

@@ -1,18 +1,4 @@
-document.addEventListener('setup', function(e) {
-  if (!e.detail.module || e.detail.module !== 'alerts') {
-    return;
-  }
-
-  // setup alerts
-  if (e.detail.scope.classList.contains('alerts')) {
-    window.utils.alerts(e.detail.scope);
-  } else {
-    var alertsEl = e.detail.scope.querySelector('.alerts');
-    if (alertsEl)
-      window.utils.alerts(alertsEl);
-  }
-});
-
 document.addEventListener('DOMContentLoaded', function() {
-  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'alerts' }, bubbles: true, cancelable: true }))
+  var alertsElement = document.querySelector('#' + 'alerts-1');
+  window.utils.setup('alerts', alertsElement);
 });

templates/widgets/asidenav/asidenav.julius

@@ -1,4 +1,4 @@
 document.addEventListener('DOMContentLoaded', function() {
   var asidenavEl = document.querySelector('.main__aside');
-  window.utils.aside(asidenavEl);
+  window.utils.setup('aside', asidenavEl);
 });