From 6d824d33928a39c66054cc814648787213ce2984 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Wed, 3 Apr 2019 23:23:53 +0200
Subject: [PATCH] WIP: refactor show hide JS utility to work with new registry

---
 src/Foundation.hs           |   2 +-
 static/js/utils/showHide.js | 106 ++++++++++++++++++++++--------------
 2 files changed, 65 insertions(+), 43 deletions(-)

diff --git a/src/Foundation.hs b/src/Foundation.hs
index a15dd5a9b..a0d739bc7 100644
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@@ -1077,7 +1077,7 @@ siteLayout' headingOverride widget = do
       -- addScript $ StaticR js_utils_modal_js
       addScript $ StaticR js_utils_registry_js
       addScript $ StaticR js_utils_poc_js
-      -- addScript $ StaticR js_utils_showHide_js
+      addScript $ StaticR js_utils_showHide_js
       -- addScript $ StaticR js_utils_tabber_js
       addStylesheet $ StaticR css_utils_alerts_scss
       addStylesheet $ StaticR css_utils_asidenav_scss
diff --git a/static/js/utils/showHide.js b/static/js/utils/showHide.js
index 0441cde4b..6689b83bd 100644
--- a/static/js/utils/showHide.js
+++ b/static/js/utils/showHide.js
@@ -1,77 +1,99 @@
 (function() {
   'use strict';
 
-  window.utils = window.utils || {};
+  var UTIL_NAME = 'showHide';
+  var UTIL_SELECTOR = '[uw-show-hide]';
 
   var JS_INITIALIZED_CLASS = 'js-show-hide-initialized';
   var LOCAL_STORAGE_SHOW_HIDE = 'SHOW_HIDE';
-  var SHOW_HIDE_TOGGLE_CLASS = 'js-show-hide__toggle';
   var SHOW_HIDE_COLLAPSED_CLASS = 'js-show-hide--collapsed';
   var SHOW_HIDE_TARGET_CLASS = 'js-show-hide__target';
 
   /**
-   * div
-   *   div.js-show-hide__toggle
-   *     toggle here
-   *   div
-   *     content here
+   * <div>
+   *   <div uw-show-hide>
+   *     [toggle here]
+   *   <div>
+   *     [content here]
    */
-  window.utils.showHide = function(wrapper, options) {
+  var util = function(element) {
 
-    options = options || {};
+    function _init() {
+      if (!element) {
+        throw new Error('ShowHide utility cannot be setup without an element!');
+      }
 
-    function addEventHandler(el) {
-      el.addEventListener('click', function elClickListener() {
-        var newState = el.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS);
-        updateLSState(el.dataset.shIndex || null, newState);
+      if (element.classList.contains(JS_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      _addEventHandler();
+    }
+
+    function _addEventHandler() {
+      element.addEventListener('click', function clickListener() {
+        console.log('showhide clicked');
+        var newState = element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS);
+        _updateLSState(element.dataset.shIndex || null, newState);
       });
     }
 
-    function updateLSState(index, state) {
+    function _updateLSState(index, state) {
       if (!index) {
         return false;
       }
-      var lsData = getLocalStorageData();
+      var lsData = _getLocalStorageData();
       lsData[index] = state;
       window.localStorage.setItem(LOCAL_STORAGE_SHOW_HIDE, JSON.stringify(lsData));
     }
 
-    function collapsedStateInLocalStorage(index) {
-      var lsState = getLocalStorageData();
-      return lsState[index];
-    }
+    // function _getCollapsedLSState(index) {
+    //   var lsState = _getLocalStorageData();
+    //   return lsState[index];
+    // }
 
-    function getLocalStorageData() {
+    function _getLocalStorageData() {
       return JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_SHOW_HIDE)) || {};
     }
 
-    Array
-      .from(wrapper.querySelectorAll('.' + SHOW_HIDE_TOGGLE_CLASS))
-      .forEach(function(el) {
-        if (el.classList.contains(JS_INITIALIZED_CLASS)) {
-          return false;
-        }
+    // var showHides = Array.from(scope.querySelectorAll(UTIL_SELECTOR));
+    // showHides.forEach(function(el) {
+    //   if (el.classList.contains(JS_INITIALIZED_CLASS)) {
+    //     return false;
+    //   }
 
-        var index = el.dataset.shIndex || null;
-        var isCollapsed = el.dataset.collapsed === 'true';
-        var lsCollapsedState = collapsedStateInLocalStorage(index);
-        if (typeof lsCollapsedState !== 'undefined') {
-          isCollapsed = lsCollapsedState;
-        }
-        el.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS, isCollapsed);
+    //   var index = el.dataset.shIndex || null;
+    //   var isCollapsed = el.dataset.collapsed === 'true';
+    //   var lsCollapsedState = _getCollapsedLSState(index);
+    //   if (typeof lsCollapsedState !== 'undefined') {
+    //     isCollapsed = lsCollapsedState;
+    //   }
+    //   el.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS, isCollapsed);
 
-        Array.from(el.parentElement.children).forEach(function(el) {
-          if (!el.classList.contains('' + SHOW_HIDE_TOGGLE_CLASS)) {
-            el.classList.add(SHOW_HIDE_TARGET_CLASS);
-          }
-        });
-        el.classList.add(JS_INITIALIZED_CLASS);
-        addEventHandler(el);
-    });
+    //   Array.from(el.parentElement.children).forEach(function(el) {
+    //     if (!el.matches(UTIL_SELECTOR)) {
+    //       el.classList.add(SHOW_HIDE_TARGET_CLASS);
+    //     }
+    //   });
+    //   el.classList.add(JS_INITIALIZED_CLASS);
+    //   _addEventHandler(el);
+    // });
+
+    _init();
 
     return {
-      scope: wrapper,
+      name: UTIL_NAME,
+      element: element,
       destroy: function() {},
     };
   };
+
+  if (UtilRegistry) {
+    UtilRegistry.register({
+      name: UTIL_NAME,
+      selector: UTIL_SELECTOR,
+      setup: util
+    });
+  }
+
 })();