Debug javascript setup

src/Foundation.hs

@@ -804,7 +804,7 @@ siteLayout headingOverride widget = do
            return (c, courseRoute, items')
 
   mmsgs <- if
-    | isModal -> return []
+    | isModal -> getMessages
     | otherwise -> do
         applySystemMessages
         authTagPivots <- fromMaybe Set.empty <$> getSessionJson SessionInactiveAuthTags

src/Handler/Utils/Form.hs

@@ -593,7 +593,7 @@ formResultModal :: (MonadHandler m, RedirectUrl (HandlerSite m) route) => FormRe
 formResultModal res finalDest handler = maybeT_ $ do
   messages <- case res of
     FormMissing -> mzero
-    FormFailure errs -> return $ map (Message Error . toHtml) errs
+    FormFailure errs -> mapM_ (addMessage Error . toHtml) errs >> mzero
     FormSuccess val -> lift . execWriterT $ handler val
   
   isModal <- hasCustomHeader HeaderIsModal

templates/default-layout-wrapper.hamlet

@@ -17,10 +17,4 @@ $newline never
     <script>
       document.body.classList.remove('no-js');
 
-      document.addEventListener('DOMContentLoaded', function() {
-        console.log('Setup body');
-  
-        document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body }, bubbles: true, cancelable: true }));
-      });
-
     ^{pageBody pc}

templates/default-layout.hamlet

@@ -27,13 +27,13 @@ $if not isModal
         <!-- prime page actions -->
         ^{pageactionprime}
 
-        <!-- alerts -->
+      <!-- alerts -->
-        <div #alerts .alerts>
+      <div #alerts .alerts>
-          $forall (status, msg) <- mmsgs
+        $forall (status, msg) <- mmsgs
-            $with status2 <- bool status "info" (status == "")
+          $with status2 <- bool status "info" (status == "")
-              <div class="alert alert-#{status2}">
+            <div class="alert alert-#{status2}">
-                <div .alert__content>
+              <div .alert__content>
-                  #{msg}
+                #{msg}
 
       <!-- actual content -->
       ^{widget}

templates/standalone/alerts.julius

@@ -80,6 +80,9 @@
 })();
 
 document.addEventListener('setup', function(e) {
+  if (e.detail.module && e.detail.module !== 'alerts')
+    return;
+
 
   // setup alerts
   if (e.detail.scope.classList.contains('alerts')) {
@@ -90,3 +93,7 @@ document.addEventListener('setup', function(e) {
       window.utils.alerts(alertsEl);
   }
 });
+
+document.addEventListener('DOMContentLoaded', function() {
+  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'alerts' }, bubbles: true, cancelable: true }))
+});

templates/standalone/datepicker.julius

@@ -1,5 +1,8 @@
 document.addEventListener('setup', function(e) {
   "use strict";
+    
+  if (e.detail.module && e.detail.module !== 'datepicker')
+    return;
 
   var config = {
     dtLocal: {
@@ -34,3 +37,7 @@ document.addEventListener('setup', function(e) {
     flatpickr(el, config.dtLocal);
   });
 });
+
+document.addEventListener('DOMContentLoaded', function() {
+  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'datepicker' }, bubbles: true, cancelable: true }));
+});

templates/standalone/inputs.julius

@@ -114,6 +114,8 @@
 })();
 
 document.addEventListener('setup', function(e) {
+  if (e.detail.module && e.detail.module !== 'inputs')
+    return;
 
   // initialize checkboxes
   Array.from(e.detail.scope.querySelectorAll('input[type="checkbox"]')).forEach(function(inp) {
@@ -135,3 +137,7 @@ document.addEventListener('setup', function(e) {
     window.utils.reactiveFileCheckbox(inp);
   });
 });
+
+document.addEventListener('DOMContentLoaded', function() {
+  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'inputs' }, bubbles: true, cancelable: true }));
+});

templates/standalone/modal.julius

@@ -41,12 +41,10 @@
     }
 
     function close(event) {
-      if (typeof event === 'undefined' || event.target === closer || event.target === overlay || event.target === modal) {
+      overlay.remove();
-        overlay.remove();
+      // origParent.insertBefore(modal, null);
-        // origParent.insertBefore(modal, null);
+      modal.classList.remove('modal--open');
-        modal.classList.remove('modal--open');
+      closer.removeEventListener('click', close, false);
-        closer.removeEventListener('click', close, false);
-      }
     };
 
     function setup() {
@@ -54,12 +52,7 @@
 
       // every modal can be openend via document-wide event, see openOnEvent
       document.addEventListener('modal-open', openOnEvent, false);
-      // if modal has trigger assigned to it open modal on click
+      
-      if (trigger) {
-        trigger.classList.add('modal__trigger');
-        trigger.addEventListener('click', open, false);
-      }
-
       if ('dynamic' in modal.dataset) {
         function fetchModal(url, init) {
           function responseHtml(body) {
@@ -70,14 +63,17 @@
             var scriptTags = [];
             if (contentBody) {
               modalContent.querySelectorAll('script').forEach(function(scriptTag) {
-                if (Array.from(document.body.querySelectorAll('script')).some(function(haystack) {
+                var existsAlready = Array.from(document.body.querySelectorAll('script')).some(function(haystack) {
                   if (haystack.text === scriptTag.text && haystack.getAttribute('src') === scriptTag.getAttribute('src')) {
+                    scriptTags.push(haystack);
                     return true;
+                  } else {
+                    return false;
                   }
-                  return false;
+                });
-                })) { return }
+                if (existsAlready)
+                  return;
 
-                console.log(scriptTag);
                 var scriptClone = document.createElement('script');
                 if (scriptTag.text)
                   scriptClone.text = striptTag.text;
@@ -111,6 +107,21 @@
                   
                 document.head.insertBefore(linkTag, null);
               });
+
+              var modalAlertsEl = modalContent.querySelector('#alerts');
+              var alertsEl = document.body.querySelector('#alerts');
+              if (alertsEl && modalAlertsEl) {
+                var modalAlerts = Array.from(modalAlertsEl.childNodes);
+                  
+                modalAlerts.forEach(function(alertEl) {
+                  alertsEl.insertBefore(alertEl, alertsEl.querySelector('.alerts__toggler'));
+                });
+
+                if (modalAlerts.length !== 0)
+                  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: alertsEl } }));
+
+                contentBody.removeChild(modalAlertsEl);
+              }
                 
               modalContent = contentBody;
             }
@@ -130,9 +141,11 @@
             });
               
             modal.querySelectorAll('.modal__content').forEach(function(prev) { modal.removeChild(prev); });
-            modal.appendChild(modalContent);
+            modal.insertBefore(modalContent, null);
 
             var triggerContentLoad = function() {
+              console.log('contentReady', modal);
+                
               document.dispatchEvent(new CustomEvent('setup', {
                 detail: { scope: modal },
                 bubbles: true,
@@ -140,10 +153,7 @@
               }));
             }
 
-            if (scriptTags.length !== 0) {
+            scriptTags.forEach(function(t) { t.addEventListener('load', triggerContentLoad); });
-              scriptTags.forEach(function(t) { t.onload = triggerContentLoad; });
-            }
-
             triggerContentLoad();
 
             return 'html';
@@ -186,7 +196,6 @@
 
         modal.addEventListener('modal-fetch', function(event) {
           var dynamicContentURL = (event.detail && event.detail.url) || trigger.getAttribute('href');
-          console.log(dynamicContentURL);
 
           var fetchInit = (event.detail && event.detail.init) || {
             credentials: 'same-origin',
@@ -199,14 +208,29 @@
             fetchModal(dynamicContentURL, fetchInit).then((event.detail && event.detail.then) || (function(){}));
           }
         });
-        modal.dispatchEvent(new CustomEvent('modal-fetch'));
+        modal.dispatchEvent(new CustomEvent('modal-fetch', {
+          detail: {
+            then: (function() {
+              if (!trigger)
+                return;
+
+              trigger.classList.add('modal__trigger');
+              trigger.addEventListener('click', open, false);
+            })
+          }
+        }));
+      } else if (trigger) { // if modal has trigger assigned to it open modal on click
+        trigger.classList.add('modal__trigger');
+        trigger.addEventListener('click', open, false);
       }
+
         
       // tell further modals, that this one already got initialized
       modal.classList.add('js-modal-initialized');
 
       modal.addEventListener('modal-close', close);
     }
+
     setup();
   };
 
@@ -214,8 +238,6 @@
     function doSubmit(event) {
       event.preventDefault();
               
-      console.log('ajaxSubmit', modal, form);
-
       var modalContent = modal.querySelector('.modal__content');
       modalContent.style.pointerEvents = 'none';
       modalContent.style.opacity = 0.5;
@@ -232,11 +254,12 @@
             body: new FormData(form)
           },
           then: (function(typ) {
+            modal.dispatchEvent(new CustomEvent('modal-close'));
+
             modalContent.style.pointerEvents = 'auto';
             modalContent.style.opacity = 1;
 
             if (typ === 'json') {
-              modal.dispatchEvent(new CustomEvent('modal-close'));
               modal.dispatchEvent(new CustomEvent('modal-fetch'));
             }
           })
@@ -252,22 +275,26 @@
 })();
 
 document.addEventListener('setup', function(e) {
+  if (e.detail.module && e.detail.module !== 'modal')
+    return;
 
-  Array.from(e.detail.scope.querySelectorAll('.js-modal:not(.js-modal-initialized)')).map(function(modal) {
+  Array.from(e.detail.scope.querySelectorAll('.js-modal:not(.js-modal-initialized)')).forEach(function(modal) {
-    new utils.modal(modal);
+    window.utils.modal(modal);
   });
 
   if (e.detail.scope.classList.contains('js-modal')) {
-    Array.from(e.detail.scope.querySelectorAll('form[data-ajax-submit]:not(.js-ajax-initialized)')).map(function(form) {
+    Array.from(e.detail.scope.querySelectorAll('form[data-ajax-submit]:not(.js-ajax-initialized)')).forEach(function(form) {
       window.utils.ajaxSubmit(e.detail.scope, form);
     });
   } else {
     Array.from(e.detail.scope.querySelectorAll('.js-modal')).map(function(modal) {
-      Array.from(modal.querySelectorAll('form[data-ajax-submit]:not(.js-ajax-initialized)')).map(function(form) {
+      Array.from(modal.querySelectorAll('form[data-ajax-submit]:not(.js-ajax-initialized)')).forEach(function(form) {
         window.utils.ajaxSubmit(modal, form);
       });
     });
   };
-
 }, false);
 
+document.addEventListener('DOMContentLoaded', function() {
+  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'modal' }, bubbles: true, cancelable: true }))
+});

templates/standalone/modal.lucius

@@ -1,4 +1,4 @@
-div.modal {
+.modal {
   position: fixed;
   left: 50%;
   top: 50%;
@@ -11,8 +11,7 @@ div.modal {
   border-radius: 2px;
   z-index: -1;
   color: var(--color-font);
-  padding: 20px;
+  padding: 0 65px 0 20px;
-  padding-right: 65px;
   overflow: auto;
   transition: all .15s ease;
   pointer-events: none;
@@ -24,6 +23,10 @@ div.modal {
     z-index: 200;
     transform: translate(-50%, -50%) scale(1, 1);
   }
+
+  .modal__content {
+    margin: 20px 0;
+  }
 }
 
 @media (max-width: 1024px) {

templates/standalone/showHide.julius

@@ -7,6 +7,8 @@
  */
 
 document.addEventListener('setup', function(e) {
+  if (e.detail.module && e.detail.module !== 'showHide')
+    return;
 
   var LSNAME = 'SHOW_HIDE';
 
@@ -50,3 +52,7 @@ document.addEventListener('setup', function(e) {
       addEventHandler(el);
   });
 });
+
+document.addEventListener('DOMContentLoaded', function() {
+  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'showHide' }, bubbles: true, cancelable: true }))
+});

templates/standalone/tooltip.julius

@@ -53,7 +53,6 @@
 })();
 
 document.addEventListener('setup', function(e) {
-
   // JS-TOOLTIPS NOT USED CURRENTLY.
 
   // initialize tooltips set via `data-tooltip`

templates/widgets/asidenav.julius

@@ -18,9 +18,15 @@
 })();
 
 document.addEventListener('setup', function(e) {
+  if (e.detail.module && e.detail.module !== 'asidenav')
+    return;
 
   var asidenavEl = e.detail.scope.querySelector('.main__aside');
 
   window.utils.aside(asidenavEl);
 
 });
+
+document.addEventListener('DOMContentLoaded', function() {
+  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'asidenav' }, bubbles: true, cancelable: true }))
+});

templates/widgets/form.julius

@@ -69,6 +69,8 @@
 })();
 
 document.addEventListener('setup', function(e) {
+  if (e.detail.module && e.detail.module !== 'showHide')
+    return;
 
   console.log('form setup', e.detail.scope);
 
@@ -95,5 +97,8 @@ document.addEventListener('setup', function(e) {
     });
     return done;
   }
-
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'showHide' }, bubbles: true, cancelable: true }))
 });

templates/widgets/navbar.hamlet

@@ -17,7 +17,7 @@ $newline never
           $of NavbarAside
             <li .navbar__list-item :highlight (urlRoute menuItemRoute):.navbar__list-item--active>
               $if menuItemModal
-                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable=true data-dynamic=True>
+                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
               <a .navbar__link-wrapper href=#{route} ##{menuIdent}>
                 <i .fas.fa-#{fromMaybe "none" menuItemIcon}>
                 <div .navbar__link-label>_{SomeMessage menuItemLabel}
@@ -29,14 +29,14 @@ $newline never
           $of NavbarRight
             <li .navbar__list-item :highlight (urlRoute menuItemRoute):.navbar__list-item--active>
               $if menuItemModal
-                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable=true data-dynamic=True>
+                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
               <a .navbar__link-wrapper href=#{route} ##{menuIdent}>
                 <i .fas.fa-#{fromMaybe "none" menuItemIcon}>
                 <div .navbar__link-label>_{SomeMessage menuItemLabel}
           $of NavbarSecondary
             <li .navbar__list-item.navbar__list-item--secondary :highlight (urlRoute menuItemRoute):.navbar__list-item--active>
               $if menuItemModal
-                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable=true data-dynamic=True>
+                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
               <a .navbar__link-wrapper href=#{route} ##{menuIdent}>
                 <i .fas.fa-#{fromMaybe "none" menuItemIcon}>
                 <div .navbar__link-label>_{SomeMessage menuItemLabel}

templates/widgets/pageactionprime.hamlet

@@ -7,11 +7,11 @@ $if hasPageActions
           $of PageActionPrime
             <li .pagenav__list-item>
               $if menuItemModal
-                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable=true data-dynamic=True>
+                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
               <a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
           $of PageActionSecondary
             <li .pagenav__list-item>
               $if menuItemModal
-                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable=true data-dynamic=True>
+                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
               <a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
           $of _