From 65fffbbf287bfacdd820ba839ca0400272c100af Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 16 Feb 2019 00:12:35 +0100
Subject: [PATCH] add setup utility for js utils

---
 src/Foundation.hs                          |  1 +
 static/js/utils/alerts.js                  |  7 ++-
 static/js/utils/asidenav.js                |  1 -
 static/js/utils/setup.js                   | 54 ++++++++++++++++++++++
 templates/widgets/alerts/alerts.hamlet     |  4 +-
 templates/widgets/alerts/alerts.julius     | 18 +-------
 templates/widgets/asidenav/asidenav.julius |  2 +-
 7 files changed, 66 insertions(+), 21 deletions(-)
 create mode 100644 static/js/utils/setup.js

diff --git a/src/Foundation.hs b/src/Foundation.hs
index fb6fbfe61..c0526650f 100644
--- a/src/Foundation.hs
+++ b/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
diff --git a/static/js/utils/alerts.js b/static/js/utils/alerts.js
index eec2fb73a..d52a47376 100644
--- a/static/js/utils/alerts.js
+++ b/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;
diff --git a/static/js/utils/asidenav.js b/static/js/utils/asidenav.js
index 7c20e1f35..154232109 100644
--- a/static/js/utils/asidenav.js
+++ b/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);
diff --git a/static/js/utils/setup.js b/static/js/utils/setup.js
new file mode 100644
index 000000000..5c9c336e4
--- /dev/null
+++ b/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);
+      });
+    }
+  }
+})();
diff --git a/templates/widgets/alerts/alerts.hamlet b/templates/widgets/alerts/alerts.hamlet
index aa7169ca1..bc034c08e 100644
--- a/templates/widgets/alerts/alerts.hamlet
+++ b/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>
diff --git a/templates/widgets/alerts/alerts.julius b/templates/widgets/alerts/alerts.julius
index 14e679f61..659c9d921 100644
--- a/templates/widgets/alerts/alerts.julius
+++ b/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);
 });
diff --git a/templates/widgets/asidenav/asidenav.julius b/templates/widgets/asidenav/asidenav.julius
index 9f6e9ba37..9387bc714 100644
--- a/templates/widgets/asidenav/asidenav.julius
+++ b/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);
 });