From cffc7f9ad35d9533afe105ae72feffd4d4894000 Mon Sep 17 00:00:00 2001
From: Gregor Kleen <gkleen@yggdrasil.li>
Date: Thu, 22 Nov 2018 12:31:11 +0100
Subject: [PATCH] General js-setup framework & revert to fetch-based modals

---
 templates/default-layout-wrapper.hamlet |   6 +
 templates/profile.julius                |   4 +-
 templates/standalone/alerts.julius      |   6 +-
 templates/standalone/datepicker.julius  |   8 +-
 templates/standalone/inputs.julius      |  10 +-
 templates/standalone/modal.julius       | 150 +++++++++++++++---------
 templates/standalone/modal.lucius       |  13 +-
 templates/standalone/showHide.julius    |   4 +-
 templates/standalone/tooltip.julius     |   6 +-
 templates/table/layout.julius           |   7 +-
 templates/widgets/asidenav.julius       |   4 +-
 templates/widgets/form.julius           |   8 +-
 templates/widgets/modal.hamlet          |   2 +-
 templates/widgets/navbar.julius         |   4 +-
 14 files changed, 139 insertions(+), 93 deletions(-)

diff --git a/templates/default-layout-wrapper.hamlet b/templates/default-layout-wrapper.hamlet
index c293b607a..b5b94d5d1 100644
--- a/templates/default-layout-wrapper.hamlet
+++ b/templates/default-layout-wrapper.hamlet
@@ -17,4 +17,10 @@ $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}
diff --git a/templates/profile.julius b/templates/profile.julius
index 578693cdc..af27cebab 100644
--- a/templates/profile.julius
+++ b/templates/profile.julius
@@ -1,6 +1,6 @@
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('setup', function (e) {
 
-  var themeSelector = document.querySelector('#theme-select');
+  var themeSelector = e.detail.scope.querySelector('#theme-select');
   themeSelector.addEventListener('change', function() {
     // get rid of old themes on body
     var options = Array.from(themeSelector.options)
diff --git a/templates/standalone/alerts.julius b/templates/standalone/alerts.julius
index a07a002e6..242ca3362 100644
--- a/templates/standalone/alerts.julius
+++ b/templates/standalone/alerts.julius
@@ -76,8 +76,10 @@
 
 })();
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('setup', function(e) {
 
   // setup alerts
-  window.utils.alerts(document.querySelector('.alerts'));
+  var alertsEl = e.detail.scope.querySelector('.alerts');
+  if (alertsEl)
+    window.utils.alerts(alertsEl);
 });
diff --git a/templates/standalone/datepicker.julius b/templates/standalone/datepicker.julius
index 640824a46..8a10fd0e4 100644
--- a/templates/standalone/datepicker.julius
+++ b/templates/standalone/datepicker.julius
@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('setup', function(e) {
   "use strict";
 
   var config = {
@@ -24,13 +24,13 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   };
 
-  Array.from(document.querySelectorAll('input[type="date"]')).forEach(function(el) {
+  Array.from(e.detail.scope.querySelectorAll('input[type="date"]')).forEach(function(el) {
     flatpickr(el, config.d);
   });
-  Array.from(document.querySelectorAll('input[type="time"]')).forEach(function(el) {
+  Array.from(e.detail.scope.querySelectorAll('input[type="time"]')).forEach(function(el) {
     flatpickr(el, config.t);
   });
-  Array.from(document.querySelectorAll('input[type="datetime-local"]')).forEach(function(el) {
+  Array.from(e.detail.scope.querySelectorAll('input[type="datetime-local"]')).forEach(function(el) {
     flatpickr(el, config.dtLocal);
   });
 });
diff --git a/templates/standalone/inputs.julius b/templates/standalone/inputs.julius
index ed129274e..533c50370 100644
--- a/templates/standalone/inputs.julius
+++ b/templates/standalone/inputs.julius
@@ -113,25 +113,25 @@
 
 })();
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('setup', function(e) {
 
   // initialize checkboxes
-  Array.from(document.querySelectorAll('input[type="checkbox"]')).forEach(function(inp) {
+  Array.from(e.detail.scope.querySelectorAll('input[type="checkbox"]')).forEach(function(inp) {
     window.utils.initializeCheckboxRadio(inp, 'checkbox');
   });
 
   // initialize radios
-  Array.from(document.querySelectorAll('input[type="radio"]')).forEach(function(inp) {
+  Array.from(e.detail.scope.querySelectorAll('input[type="radio"]')).forEach(function(inp) {
     window.utils.initializeCheckboxRadio(inp, 'radio');
   });
 
   // initialize file-upload-fields
-  Array.from(document.querySelectorAll('input[type="file"]')).forEach(function(inp) {
+  Array.from(e.detail.scope.querySelectorAll('input[type="file"]')).forEach(function(inp) {
     window.utils.initializeFileUpload(inp);
   });
 
   // initialize file-checkbox-fields
-  Array.from(document.querySelectorAll('.js-file-checkbox')).forEach(function(inp) {
+  Array.from(e.detail.scope.querySelectorAll('.js-file-checkbox')).forEach(function(inp) {
     window.utils.reactiveFileCheckbox(inp);
   });
 });
diff --git a/templates/standalone/modal.julius b/templates/standalone/modal.julius
index d80d6161f..61760f730 100644
--- a/templates/standalone/modal.julius
+++ b/templates/standalone/modal.julius
@@ -20,7 +20,7 @@
        document.body.insertBefore(overlay, modal);
       overlay.classList.add('modal__overlay--open');
 
-      if (modal.dataset.closeable === 'true') {
+      if ('closeable' in modal.dataset) {
         closer.classList.add('modal__closer');
         modal.insertBefore(closer, null);
         closer.addEventListener('click', close, false);
@@ -56,63 +56,106 @@
         trigger.addEventListener('click', open, false);
       }
 
-      if (modal.dataset.dynamic === 'True') {
-        // var dynamicContentURL = trigger.getAttribute('href');
-        // console.log(dynamicContentURL);
-        // if (dynamicContentURL.length > 0) {
-        //   fetch(dynamicContentURL, {
-        //     credentials: 'same-origin',
-        //   }).then(function(response) {
-        //     return response.text();
-        //   }).then(function(body) {
-        //     var modalContent = document.createElement('div');
-        //     modalContent.innerHTML = body;
-        //     var main = modalContent.querySelector('.main__content-body');
-        //     if (main) {
-        //       modal.appendChild(main);
-        //     } else {
-        //       replaceMe.innerHTML = body;
-        //     }
-        //   });
-        // }
-
+      if ('dynamic' in modal.dataset) {
         var dynamicContentURL = trigger.getAttribute('href');
-        console.log(dynamicContentURL);
-        var frame = document.createElement('iframe');
-        frame.setAttribute('id', "frame-" + modal.getAttribute('id'));
-        modal.insertBefore(frame, null);
 
-        var resizeFrame = function() {
-            frame.style.visibility = 'hidden';
-            frame.style.height = '0';
-
-            var doc = frame.contentDocument ? frame.contentDocument : frame.contentWindow.document;
-            var body = doc.body, html = doc.documentElement;
-            var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
-
-            frame.style.height = height.toPrecision() + "px";
-            frame.style.visibility = 'visible';
-            frame.setAttribute("scrolling", "no");
-
-            doc.querySelectorAll("form").forEach(function(form) {
-                form.setAttribute("target", "_top");
-            });
-        };
-
-        frame.onload = function() {
-            frame.contentWindow.onresize = resizeFrame;
-            resizeFrame();
-        }
-
-        var url = "";
         var i = dynamicContentURL.indexOf('?');
         if (i === -1) {
-          url = dynamicContentURL + "?" + #{String modalParameter};
+          dynamicContentURL = dynamicContentURL + "?" + #{String modalParameter};
         } else {
-          url = dynamicContentURL.slice(0,i) + "?" + #{String modalParameter} + "&" + dynamicContentURL.slice(i + 1);
+          dynamicContentURL = dynamicContentURL.slice(0,i) + "?" + #{String modalParameter} + "&" + dynamicContentURL.slice(i + 1);
         }
+        console.log(dynamicContentURL);
 
-        frame.setAttribute('src', url);
+        if (dynamicContentURL.length > 0) {
+          fetch(dynamicContentURL, {
+            credentials: 'same-origin',
+          }).then(function(response) {
+            return response.text();
+          }).then(function(body) {
+            var modalContent = document.createElement('div');
+            modalContent.classList.add('modal__content');
+            modalContent.innerHTML = body;
+
+            var contentBody = modalContent.querySelector('.main__content-body');
+            var scriptTags = [];
+            if (contentBody) {
+              modalContent.querySelectorAll('script').forEach(function(scriptTag) {
+                if (Array.from(document.body.querySelectorAll('script')).some(function(haystack) {
+                  if (haystack.text === scriptTag.text && haystack.getAttribute('src') === scriptTag.getAttribute('src')) {
+                    return true;
+                  }
+                  return false;
+                })) { return }
+
+                console.log(scriptTag);
+                var scriptClone = document.createElement('script');
+                if (scriptTag.text)
+                  scriptClone.text = striptTag.text;
+                if (scriptTag.hasAttributes()) {
+                  var attrs = scriptTag.attributes;
+                  for (var i = attrs.length - 1; i >= 0; i--) {
+                    scriptClone.setAttribute(attrs[i].name, attrs[i].value);
+                  }
+                }
+                  
+                document.body.insertBefore(scriptClone, null);
+                scriptTags.push(scriptClone);
+              });
+
+              modalContent.querySelectorAll('style').forEach(function(styleTag) {
+                if (Array.from(document.head.querySelectorAll('style')).some(function(haystack) {
+                  return haystack.innerText === styleTag.innerText;
+                })) { return }
+                  
+                document.head.insertBefore(styleTag, null);
+              });
+
+              modalContent.querySelectorAll('link').forEach(function(linkTag) {
+                if (linkTag.getAttribute('rel') !== 'stylesheet')
+                  return;
+
+                if (Array.from(document.head.querySelectorAll('link')).some(function(haystack) {
+                  return haystack.getAttribute('href') === linkTag.getAttribute('href');
+                })) { return }
+                  
+                  
+                document.head.insertBefore(linkTag, null);
+              });
+                
+              modalContent = contentBody;
+            }
+              
+            var nudgeAttr = function(attr, x) {
+              var oldVal = x.getAttribute(attr);
+              var newVal = modal.getAttribute('id') + '__' + oldVal;
+
+              // console.log(oldVal, newVal);
+              x.setAttribute(attr, newVal); 
+            };
+
+            var idAttrs = ['id', 'for', 'data-conditional-id'];
+            idAttrs.map(function(attr) {
+              modalContent.querySelectorAll('[' + attr + ']').forEach(function(x) { nudgeAttr(attr, x); });
+            });
+              
+            modal.appendChild(modalContent);
+
+            var triggerContentLoad = function() {
+              document.dispatchEvent(new CustomEvent('setup', {
+                detail: { scope: modalContent },
+                bubbles: true,
+                cancelable: true
+              }));
+            }
+
+            if (scriptTags.length !== 0) {
+              scriptTags.forEach(function(t) { t.onload = triggerContentLoad; });
+            }
+
+            triggerContentLoad();
+          });
+        }
       }
       // tell further modals, that this one already got initialized
       modal.classList.add('js-modal-initialized');
@@ -121,10 +164,11 @@
   };
 })();
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('setup', function(e) {
 
-  Array.from(document.querySelectorAll('.js-modal:not(.js-modal-initialized)')).map(function(modal) {
+  Array.from(e.detail.scope.querySelectorAll('.js-modal:not(.js-modal-initialized)')).map(function(modal) {
     new utils.modal(modal);
   });
 
 }, false);
+
diff --git a/templates/standalone/modal.lucius b/templates/standalone/modal.lucius
index 5ba3a7a07..356e9d10d 100644
--- a/templates/standalone/modal.lucius
+++ b/templates/standalone/modal.lucius
@@ -11,7 +11,7 @@ div.modal {
   border-radius: 2px;
   z-index: -1;
   color: var(--color-font);
-  /* padding: 20px; */
+  padding: 20px;
   padding-right: 65px;
   overflow: auto;
   transition: all .15s ease;
@@ -24,17 +24,6 @@ div.modal {
     z-index: 200;
     transform: translate(-50%, -50%) scale(1, 1);
   }
-
-  iframe {
-    height: calc(60vh);
-    width: 100%;
-    border-style: none;
-    overflow: auto;
-
-    [scrolling='no'] {
-        overflow: hidden;
-    }
-  }
 }
 
 @media (max-width: 1024px) {
diff --git a/templates/standalone/showHide.julius b/templates/standalone/showHide.julius
index 09b3c3e2e..abaa9fc29 100644
--- a/templates/standalone/showHide.julius
+++ b/templates/standalone/showHide.julius
@@ -6,7 +6,7 @@
  *     content here
  */
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('setup', function(e) {
 
   var LSNAME = 'SHOW_HIDE';
 
@@ -35,7 +35,7 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 
   Array
-    .from(document.querySelectorAll('.js-show-hide__toggle'))
+    .from(e.detail.scope.querySelectorAll('.js-show-hide__toggle'))
     .forEach(function(el) {
       var index = el.dataset.shIndex || null;
       el.parentElement.classList.toggle(
diff --git a/templates/standalone/tooltip.julius b/templates/standalone/tooltip.julius
index 42f283dd8..f94369951 100644
--- a/templates/standalone/tooltip.julius
+++ b/templates/standalone/tooltip.julius
@@ -52,17 +52,17 @@
 
 })();
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('setup', function(e) {
 
   // JS-TOOLTIPS NOT USED CURRENTLY.
 
   // initialize tooltips set via `data-tooltip`
-  // Array.from(document.querySelectorAll('[data-tooltip]')).forEach(function(el) {
+  // Array.from(e.detail.scope.querySelectorAll('[data-tooltip]')).forEach(function(el) {
   //   window.utils.tooltipFromAttribute(el)
   // });
 
   // initialize tooltips
-  // Array.from(document.querySelectorAll('.js-tooltip')).forEach(function(tt) {
+  // Array.from(e.detail.scope.querySelectorAll('.js-tooltip')).forEach(function(tt) {
   //   window.utils.tooltip(tt);
   // });
 });
diff --git a/templates/table/layout.julius b/templates/table/layout.julius
index 79862009f..1ed9c1f88 100644
--- a/templates/table/layout.julius
+++ b/templates/table/layout.julius
@@ -1,7 +1,7 @@
 (function collonadeClosure() {
   'use strict';
 
-  document.addEventListener('DOMContentLoaded', function DOMContentLoaded() {
+  document.addEventListener('setup', function DOMContentLoaded(e) {
 
     function setupAsync(wrapper) {
 
@@ -71,7 +71,8 @@
       }
     }
 
-    var selector = '#' + #{String $ dbtIdent} + '-table-wrapper';
-    setupAsync(document.querySelector(selector));
+    var wrapperEl = e.detail.scope.querySelector('#' + #{String $ dbtIdent} + '-table-wrapper');
+    if (wrapperEl)
+      setupAsync(wrapperEl);
   });
 })();
diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius
index b43b2f97c..9c253bd1a 100644
--- a/templates/widgets/asidenav.julius
+++ b/templates/widgets/asidenav.julius
@@ -17,9 +17,9 @@
   };
 })();
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('setup', function(e) {
 
-  var asidenavEl = document.querySelector('.main__aside');
+  var asidenavEl = e.detail.scope.querySelector('.main__aside');
 
   window.utils.aside(asidenavEl);
 
diff --git a/templates/widgets/form.julius b/templates/widgets/form.julius
index 90a1f53b1..2fe1c13b7 100644
--- a/templates/widgets/form.julius
+++ b/templates/widgets/form.julius
@@ -55,6 +55,8 @@
 
     function addEventListeners() {
       fields.forEach(function(field) {
+        console.log('interactiveFieldset', 'addEventListeners', field);
+          
         field.condEl.addEventListener('input', updateFields)
       });
     }
@@ -66,9 +68,11 @@
   };
 })();
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('setup', function(e) {
 
-  var forms = document.querySelectorAll('form');
+  console.log('form setup', e.detail.scope);
+
+  var forms = e.detail.scope.querySelectorAll('form');
   Array.from(forms).forEach(function(form) {
     // auto reactiveButton submit-buttons with required fields
     var submitBtns = Array.from(form.querySelectorAll('[type=submit]'));
diff --git a/templates/widgets/modal.hamlet b/templates/widgets/modal.hamlet
index a971aab83..8ffb8a53a 100644
--- a/templates/widgets/modal.hamlet
+++ b/templates/widgets/modal.hamlet
@@ -1,4 +1,4 @@
-<div .modal.js-modal #modal-#{modalId} data-trigger=#{triggerId} data-closeable=true data-dynamic=#{modalDynamic}>
+<div .modal.js-modal #modal-#{modalId} data-trigger=#{triggerId} data-closeable :modalDynamic:data-dynamic>
   $case modalContent
     $of Right content
       ^{content}
diff --git a/templates/widgets/navbar.julius b/templates/widgets/navbar.julius
index 31ad506b6..13dbe009a 100644
--- a/templates/widgets/navbar.julius
+++ b/templates/widgets/navbar.julius
@@ -26,6 +26,6 @@
 
 })();
 
-document.addEventListener('DOMContentLoaded', function () {
-  // utils.stickynav(document.querySelector('.js-sticky-navbar'));
+document.addEventListener('setup', function (e) {
+  // utils.stickynav(e.detail.scope.querySelector('.js-sticky-navbar'));
 });