refactor asidenav js util

src/Foundation.hs

@@ -1069,8 +1069,8 @@ siteLayout' headingOverride widget = do
       addScript $ StaticR js_services_httpClient_js
       addScript $ StaticR js_services_i18n_js
       -- addScript $ StaticR js_utils_alerts_js
-      -- addScript $ StaticR js_utils_asidenav_js
       -- JavaScript utils
+      addScript $ StaticR js_utils_asidenav_js
       addScript $ StaticR js_utils_asyncForm_js
       addScript $ StaticR js_utils_asyncTable_js
       addScript $ StaticR js_utils_checkAll_js

static/js/utils/asidenav.js

@@ -1,31 +1,74 @@
 (function() {
   'use strict';
 
-  window.utils = window.utils || {};
+  /**
+   *
+   * Asidenav Utility
+   *  Correctly positions hovered asidenav submenus and handles the favorites button on mobile
+   *
+   * Attribute: uw-asidenav
+   *
+   * Example usage:
+   *  <div uw-asidenav>
+   *    <div .asidenav>
+   *      <div .asidenav__box>
+   *        <ul .asidenav__list.list--iconless>
+   *          <li .asidenav__list-item>
+   *            <a .asidenav__link-wrapper href="#">
+   *              <div .asidenav__link-shorthand>EIP
+   *              <div .asidenav__link-label>Einführung in die Programmierung
+   *            <div .asidenav__nested-list-wrapper>
+   *              <ul .asidenav__nested-list.list--iconless>
+   *                Übungsblätter
+   *                ...
+   *
+   */
+
+  var ASIDENAV_UTIL_NAME = 'asidenav';
+  var ASIDENAV_UTIL_SELECTOR = '[uw-asidenav]';
 
   var FAVORITES_BTN_CLASS = 'navbar__list-item--favorite';
   var FAVORITES_BTN_ACTIVE_CLASS = 'navbar__list-item--active';
+  var ASIDENAV_INITIALIZED_CLASS = 'asidenav--initialized';
   var ASIDENAV_EXPANDED_CLASS = 'main__aside--expanded';
   var ASIDENAV_LIST_ITEM_CLASS = 'asidenav__list-item';
   var ASIDENAV_SUBMENU_CLASS = 'asidenav__nested-list-wrapper';
 
-  window.utils.aside = function(asideEl) {
+  var asidenavUtil = function(element) {
 
-    if (!asideEl) {
-      throw new Error('asideEl not defined');
+    function init() {
+      if (!element) {
+        throw new Error('Asidenav utility cannot be setup without an element!');
+      }
+
+      if (element.classList.contains(ASIDENAV_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      initFavoritesButton();
+      initAsidenavSubmenus();
+
+      // mark initialized
+      element.classList.add(ASIDENAV_INITIALIZED_CLASS);
+
+      return {
+        name: ASIDENAV_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
     }
 
     function initFavoritesButton() {
       var favoritesBtn = document.querySelector('.' + FAVORITES_BTN_CLASS);
       favoritesBtn.addEventListener('click', function(event) {
         favoritesBtn.classList.toggle(FAVORITES_BTN_ACTIVE_CLASS);
-        asideEl.classList.toggle(ASIDENAV_EXPANDED_CLASS);
+        element.classList.toggle(ASIDENAV_EXPANDED_CLASS);
         event.preventDefault();
       }, true);
     }
 
     function initAsidenavSubmenus() {
-      var asidenavLinksWithSubmenus = Array.from(asideEl.querySelectorAll('.' + ASIDENAV_LIST_ITEM_CLASS))
+      var asidenavLinksWithSubmenus = Array.from(element.querySelectorAll('.' + ASIDENAV_LIST_ITEM_CLASS))
         .map(function(listItem) {
           var submenu = listItem.querySelector('.' + ASIDENAV_SUBMENU_CLASS);
           return { listItem, submenu };
@@ -53,12 +96,14 @@
       };
     }
 
-    initFavoritesButton();
-    initAsidenavSubmenus();
-
-    return {
-      scope: asideEl,
-      destroy: function() {},
-    };
+    return init();
   };
+
+  if (UtilRegistry) {
+    UtilRegistry.register({
+      name: ASIDENAV_UTIL_NAME,
+      selector: ASIDENAV_UTIL_SELECTOR,
+      setup: asidenavUtil,
+    });
+  }
 })();

templates/widgets/asidenav/asidenav.hamlet

@@ -1,5 +1,5 @@
 $newline never
-<aside .main__aside>
+<aside .main__aside uw-asidenav>
   <div .asidenav__logo>
     <a href="/" .asidenav__logo-link>
       <span .asidenav__logo-link-item.asidenav__logo-lmu>LMU

templates/widgets/asidenav/asidenav.julius

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