refactor of modals

templates/home.hamlet

@@ -74,8 +74,8 @@
           ^{btnWdgt}
     <li><br>
       Modals:
-      ^{modal ".toggler" Nothing}
+      ^{modal ".toggler1" Nothing}
-      <a href="/course/new" .btn.toggler>Klick mich für Ajax-Test
+      <a href="/" .btn.toggler1>Klick mich für Ajax-Test
         <noscript>(Für Modals bitte JS aktivieren)</noscript>
       ^{modal ".toggler2" (Just "Test wegen Modal")}
       <div .btn.toggler2>Klick mich für Content-Test

templates/standalone/modal.julius

@@ -8,11 +8,8 @@
     var closer = document.createElement('div');
     var trigger = document.querySelector(modal.dataset.trigger);
     var origParent = modal.parentNode;
-    var closeBound;
-    var self = this;
-    var lastOverlayTouch = 0;
 
-    this.open = function openFn(event) {
+    function open(event) {
       if (event) {
         event.preventDefault();
       }
@@ -26,80 +23,65 @@
       if (modal.dataset.closeable === 'true') {
         closer.classList.add('modal__closer');
         modal.insertBefore(closer, null);
-        closer.addEventListener('click', closeBound, false);
+        closer.addEventListener('click', close, false);
-        overlay.addEventListener('click', closeBound, false);
+        overlay.addEventListener('click', close, false);
       }
-    };
+    }
 
-    this.openOnEvent = function openOnEventFn(event) {
+    // open this modal with an event:
+    // document.dispatchEvent(new CustomEvent('modal-open', { dateils: {for: 'modal-13'}}))
+    function openOnEvent(event) {
       if (event.detail.for === modal.getAttribute('id')) {
-        self.open();
+        open();
       }
-    };
+    }
-    this.close = function closeFn(event) {
+
+    function close(event) {
       if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
         overlay.remove();
         origParent.insertBefore(modal, null);
         modal.classList.remove('modal--open');
         toggleScroll(true);
-        closer.removeEventListener('click', closeBound, false);
+        closer.removeEventListener('click', close, false);
       }
     };
 
-    document.addEventListener('modal-open', self.openOnEvent, false);
+    function setup() {
-    closeBound = self.close;
+      document.addEventListener('modal-open', openOnEvent, false);
-    if (trigger) {
+      if (trigger) {
-      trigger.classList.add('modal__trigger');
+        trigger.classList.add('modal__trigger');
-      trigger.addEventListener('click', self.open, false);
+        trigger.addEventListener('click', open, false);
+      }
+      var replaceMe = modal.querySelector('.replace-me');
+      var replaceWith = trigger ? trigger.getAttribute('href') : '';
+      if (replaceMe) {
+        replaceMe.classList.remove('replace-me');
+        replaceMe.innerText = '...loading';
+        if (replaceWith.length > 0) {
+          fetch(replaceWith).then(function(response) {
+            return response.text();
+          }).then(function(body) {
+            var modalContent = document.createElement('div');
+            modalContent.innerHTML = body;
+            var main = modalContent.querySelector('.main__content');
+            if (main) {
+              replaceMe.innerText = '';
+              replaceMe.insertBefore(main, null);
+            } else {
+              replaceMe.innerhTML = body;
+            }
+          });
+
+        }
+      }
+      modal.classList.add('js-modal-initialized');
     }
-    modal.classList.add('js-modal-initialized');
+    setup();
   };
 
   function toggleScroll(scrollable) {
-    if (!scrollable) {
+    document.body.classList.toggle('no-scroll', !scrollable);
-      // document.addEventListener('scroll', catchScroll, false);
-      disableScroll();
-    } else {
-      enableScroll();
-    }
   }
-
-
- // following from here: https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
-  var keys = {37: 1, 38: 1, 39: 1, 40: 1};
-
-  function preventDefault(e) {
-    e = e || window.event;
-    if (e.preventDefault)
-        e.preventDefault();
-    e.returnValue = false;
-  }
-
-  function preventDefaultForScrollKeys(e) {
-      if (keys[e.keyCode]) {
-          preventDefault(e);
-          return false;
-      }
-  }
-
-  function disableScroll() {
-    if (window.addEventListener) // older FF
-        window.addEventListener('DOMMouseScroll', preventDefault, false);
-    window.onwheel = preventDefault; // modern standard
-    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
-    window.ontouchmove  = preventDefault; // mobile
-    document.onkeydown  = preventDefaultForScrollKeys;
-  }
-
-  function enableScroll() {
-      if (window.removeEventListener)
-          window.removeEventListener('DOMMouseScroll', preventDefault, false);
-      window.onmousewheel = document.onmousewheel = null;
-      window.onwheel = null;
-      window.ontouchmove = null;
-      document.onkeydown = null;
-  }
-  // till here
 })();
 
 document.addEventListener('DOMContentLoaded', function() {

templates/standalone/modal.lucius

@@ -73,6 +73,7 @@
   background-color: var(--darkbase);
   border-radius: 2px;
   cursor: pointer;
+  z-index: 20;
 
   &::before {
     content: '\e014';