moved more js utils to static

src/Foundation.hs

@@ -1005,17 +1005,15 @@ siteLayout' headingOverride widget = do
       addScript $ StaticR js_utils_alerts_js
       addScript $ StaticR js_utils_asidenav_js
       addScript $ StaticR js_utils_inputs_js
+      addScript $ StaticR js_utils_showHide_js
       addStylesheet $ StaticR css_utils_tabber_scss
       addStylesheet $ StaticR css_utils_alerts_scss
       addStylesheet $ StaticR css_utils_asidenav_scss
+      addStylesheet $ StaticR css_utils_showHide_scss
+      addStylesheet $ StaticR css_utils_tooltip_scss
       -- widgets
       $(widgetFile "default-layout")
       $(widgetFile "standalone/modal")
-      $(widgetFile "standalone/showHide")
-      $(widgetFile "standalone/inputs")
-      $(widgetFile "standalone/tooltip")
-      $(widgetFile "standalone/tabber")
-      $(widgetFile "standalone/datepicker")
   withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
 
 

src/Handler/Utils/Table/Pagination.hs

@@ -576,7 +576,7 @@ dbTable PSValidator{..} dbtable@DBTable{ dbtIdent = dbtIdent'@(toPathPiece -> db
       , let t' = toPathPiece $ SortingSetting t d
       ]
     wIdent :: Text -> Text
-    wIdent = toPathPiece . WithIdent dbtIdent 
+    wIdent = toPathPiece . WithIdent dbtIdent
     dbsAttrs'
       | not $ null dbtIdent = ("id", dbtIdent) : dbsAttrs
       | otherwise           = dbsAttrs
@@ -802,7 +802,7 @@ cellTooltip :: (RenderMessage UniWorX msg, IsDBTable m a) => msg -> DBCell m a -
 cellTooltip msg = cellContents.mapped %~ (<> tipWdgt)
   where
     tipWdgt = [whamlet|
-        <div .js-tooltip>
+        <div .tooltip>
           <div .tooltip__handle>
           <div .tooltip__content>_{msg}
       |]

static/css/utils/tabber.scss

@@ -17,7 +17,7 @@
   text-align: center;
   padding: 0 13px;
   margin: 0 2px;
-  background-color: #b3b7c1;
+  background-color: var(--color-dark);
   color: white;
   font-size: 16px;
   text-transform: uppercase;
@@ -35,5 +35,5 @@
 .tab-opener.tab-visible {
   background-color: transparent;
   color: rgb(52, 48, 58);
-  border-bottom-color: #5F98C2;
+  border-bottom-color: var(--color-primary);
 }

static/css/utils/tooltip.scss

@@ -1,4 +1,4 @@
-.js-tooltip {
+.tooltip {
   position: relative;
   display: inline-block;
   height: 1.5rem;
@@ -67,7 +67,7 @@
 
 @media (max-width: 768px) {
 
-  .js-tooltip {
+  .tooltip {
     display: block;
     margin-top: 10px;
 

static/js/utils/showHide.js

@@ -0,0 +1,55 @@
+(function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  var LOCAL_STORAGE_SHOW_HIDE = 'SHOW_HIDE';
+  /**
+   * div
+   *   div.js-show-hide__toggle
+   *     toggle here
+   *   div
+   *     content here
+   */
+  window.utils.showHide = function(wrapper, options) {
+    function addEventHandler(el) {
+      el.addEventListener('click', function elClickListener() {
+        var newState = el.parentElement.classList.toggle('js-show-hide--collapsed');
+        updateLSState(el.dataset.shIndex || null, newState);
+      });
+    }
+
+    function updateLSState(index, state) {
+      if (!index) {
+        return false;
+      }
+      var lsData = fromLocalStorage();
+      lsData[index] = state;
+      window.localStorage.setItem(LOCAL_STORAGE_SHOW_HIDE, JSON.stringify(lsData));
+    }
+
+    function collapsedStateInLocalStorage(index) {
+      return fromLocalStorage()[index] || null;
+    }
+
+    function fromLocalStorage() {
+      return JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_SHOW_HIDE)) || {};
+    }
+
+    Array
+      .from(wrapper.querySelectorAll('.js-show-hide__toggle'))
+      .forEach(function(el) {
+        var index = el.dataset.shIndex || null;
+        el.parentElement.classList.toggle(
+          'js-show-hide--collapsed',
+          collapsedStateInLocalStorage(index) || el.dataset.collapsed === 'true'
+        );
+        Array.from(el.parentElement.children).forEach(function(el) {
+          if (!el.classList.contains('js-show-hide__toggle')) {
+            el.classList.add('js-show-hide__target');
+          }
+        });
+        addEventHandler(el);
+    });
+  };
+})();

templates/default-layout.julius

@@ -5,7 +5,7 @@ function setupDatepicker(wrapper) {
     dtLocal: {
       enableTime: true,
       altInput: true,
-      altFormat: "j. F Y, H:i",
+      altFormat: "j. F Y, H:i", // maybe interpolate these formats for locale
       dateFormat: "Y-m-dTH:i",
       time_24hr: true
     },
@@ -36,5 +36,13 @@ function setupDatepicker(wrapper) {
 }
 
 document.addEventListener('DOMContentLoaded', function() {
+  var I18N = {
+    filesSelected: 'Dateien ausgewählt', // TODO: interpolate these to be translated
+    selectFile: 'Datei auswählen',
+    selectFiles: 'Datei(en) auswählen',
+  };
+
   window.utils.setup('flatpickr', document.body, { setupFunction: setupDatepicker });
+  window.utils.setup('showHide', document.body);
+  window.utils.setup('inputs', document.body, { i18n: I18N });
 });

templates/multiFileField.hamlet

@@ -15,6 +15,6 @@ $# new files
 <div .file-input__unpack>
   <label for=#{fieldId}_zip>ZIPs automatisch entpacken
   <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
-  <div class="js-tooltip">
+  <div class="tooltip">
     <div class="tooltip__handle">
     <div class="tooltip__content">Entpackt hochgeladene Zip-Dateien (*.zip) automatisch und fügt den Inhalt dem Stamm-Verzeichnis der Abgabe hinzu.

templates/sheetShow.hamlet

@@ -21,7 +21,7 @@ $maybe descr <- sheetDescription sheet
     <dd .deflist__dd>_{sheetSubmissionMode sheet}
       $case sheetSubmissionMode sheet
         $of CorrectorSubmissions
-          <div .js-tooltip>
+          <div .tooltip>
             <div .tooltip__handle>
             <div .tooltip__content>_{MsgSheetCorrectorSubmissionsTip}
         $of _

templates/standalone/datepicker.hamlet

@@ -1 +0,0 @@
-<!-- only here to be able to include datepicker using `toWidget` -->

templates/standalone/inputs.hamlet

@@ -1 +0,0 @@
-<!-- only here to be able to include inputs using `toWidget` -->

templates/standalone/inputs.julius

@@ -1,8 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-  var i18n = {
-    filesSelected: 'Dateien ausgewählt',
-    selectFile: 'Datei auswählen',
-    selectFiles: 'Datei(en) auswählen',
-  };
-  window.utils.setup('inputs', document.body, { i18n });
-});

templates/standalone/showHide.hamlet

@@ -1 +0,0 @@
-<!-- only here to be able to include showHide using `toWidget` -->

templates/standalone/showHide.julius

@@ -1,58 +0,0 @@
-/**
- * div
- *   div.js-show-hide__toggle
- *     toggle here
- *   div
- *     content here
- */
-
-document.addEventListener('setup', function(e) {
-  if (e.detail.module && e.detail.module !== 'showHide')
-    return;
-
-  var LSNAME = 'SHOW_HIDE';
-
-  function addEventHandler(el) {
-    el.addEventListener('click', function elClickListener() {
-      var newState = el.parentElement.classList.toggle('js-show-hide--collapsed');
-      updateLSState(el.dataset.shIndex || null, newState);
-    });
-  }
-
-  function updateLSState(index, state) {
-    if (!index) {
-      return false;
-    }
-    var lsData = fromLocalStorage();
-    lsData[index] = state;
-    window.localStorage.setItem(LSNAME, JSON.stringify(lsData));
-  }
-
-  function collapsedStateInLocalStorage(index) {
-    return fromLocalStorage()[index] || null;
-  }
-
-  function fromLocalStorage() {
-    return JSON.parse(window.localStorage.getItem(LSNAME)) || {};
-  }
-
-  Array
-    .from(e.detail.scope.querySelectorAll('.js-show-hide__toggle'))
-    .forEach(function(el) {
-      var index = el.dataset.shIndex || null;
-      el.parentElement.classList.toggle(
-        'js-show-hide--collapsed',
-        collapsedStateInLocalStorage(index) || el.dataset.collapsed === 'true'
-      );
-      Array.from(el.parentElement.children).forEach(function(el) {
-        if (!el.classList.contains('js-show-hide__toggle')) {
-          el.classList.add('js-show-hide__target');
-        }
-      });
-      addEventHandler(el);
-  });
-});
-
-document.addEventListener('DOMContentLoaded', function() {
-  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'showHide' }, bubbles: true, cancelable: true }))
-});

templates/standalone/tabber.hamlet

@@ -1 +0,0 @@
-<!-- only here to be able to include tabber using `toWidget` -->

templates/standalone/tabber.lucius

@@ -1,7 +0,0 @@
-.tab-opener {
-  background-color: var(--color-dark);
-
-  &.tab-visible {
-    border-bottom-color: var(--color-primary);
-  }
-}

templates/standalone/tooltip.hamlet

@@ -1 +0,0 @@
-<!-- only here to be able to include tooltips using `toWidget` -->

templates/standalone/tooltip.julius

@@ -1,67 +0,0 @@
-(function() {;
-  'use strict';
-
-  window.utils = window.utils || {};
-
-  window.utils.tooltip = function(tt) {
-    var handle = tt.querySelector('.tooltip__handle');
-    var content = tt.querySelector('.tooltip__content');
-
-    var left = false;
-
-    // initially set content to hidden
-    content.classList.add('hidden');
-
-    handle.addEventListener('mouseenter', function() {
-      left = false;
-      content.classList.toggle('to-left', handle.getBoundingClientRect().left + 300 > window.innerWidth);
-      content.classList.remove('hidden');
-    });
-
-    handle.addEventListener('mouseleave', function() {
-      left = true;
-      window.setTimeout(function() {
-        if (left) {
-          content.classList.add('hidden');
-        }
-      }, 250);
-    });
-  };
-
-  window.utils.tooltipFromAttribute = function(el) {
-    var tt = document.createElement('div');
-    var handle = document.createElement('div');
-    var content = document.createElement('div');
-
-    tt.classList.add('js-tooltip');
-    handle.classList.add('tooltip__handle');
-    content.classList.add('tooltip__content', 'hidden');
-
-    handle.innerText = '?';
-    content.innerHTML = el.getAttribute('data-tooltip');
-
-    tt.appendChild(handle);
-    tt.appendChild(content);
-
-    if (el.nextSiblingElement) {
-      el.parentElement.insertBefore(tt, el.nextSiblingElement);
-    } else {
-      el.parentElement.appendChild(tt);
-    }
-  };
-
-})();
-
-document.addEventListener('setup', function(e) {
-  // JS-TOOLTIPS NOT USED CURRENTLY.
-
-  // initialize tooltips set via `data-tooltip`
-  // Array.from(e.detail.scope.querySelectorAll('[data-tooltip]')).forEach(function(el) {
-  //   window.utils.tooltipFromAttribute(el)
-  // });
-
-  // initialize tooltips
-  // Array.from(e.detail.scope.querySelectorAll('.js-tooltip')).forEach(function(tt) {
-  //   window.utils.tooltip(tt);
-  // });
-});

templates/widgets/form.hamlet

@@ -13,7 +13,7 @@ $case formLayout
           <label .form-group__label for=#{fvId view}>
             #{fvLabel view}
             $maybe tooltip <- fvTooltip view
-              <div .js-tooltip>
+              <div .tooltip>
                 <div .tooltip__handle>
                 <div .tooltip__content>^{tooltip}
         <div .form-group__input>