Moved modals to standalones

src/Foundation.hs

@@ -399,12 +399,6 @@ defaultMenuLayout menu widget = do
         asidenav = $(widgetFile "widgets/asidenav")
         breadcrumbs :: Widget
         breadcrumbs = $(widgetFile "widgets/breadcrumbs")
-        modal :: [Char] -> [Char] -> Widget
-        modal modalTrigger modalContent = do
-          let
-            modalId :: Int32
-            modalId = 13
-          $(widgetFile "widgets/modal")
         pageactionprime :: Widget
         pageactionprime = $(widgetFile "widgets/pageactionprime")
         -- functions to determine if there are page-actions
@@ -420,6 +414,7 @@ defaultMenuLayout menu widget = do
         addStylesheet $ StaticR css_fonts_css
         addStylesheet $ StaticR css_icons_css
         $(widgetFile "default-layout")
+        $(widgetFile "standalone/modal")
         $(widgetFile "standalone/showHide")
         $(widgetFile "standalone/sortable")
         $(widgetFile "standalone/inputs")

src/Handler/Utils/Templates.hs

@@ -6,3 +6,17 @@ import Import.NoFoundation
 
 lipsum :: WidgetT site IO ()
 lipsum = $(widgetFile "widgets/lipsum")
+
+modal :: [Char] -> Maybe [Char] -> WidgetT site IO ()
+modal modalTrigger (Just modalContent) = do
+  let
+    modalId :: Int32
+    modalId = 13
+  $(widgetFile "widgets/modal")
+modal modalTrigger Nothing = do
+  let
+    modalId :: Int32
+    modalId = 13
+    modalContent :: [Char]
+    modalContent = "placeholder"
+  $(widgetFile "widgets/modal")

templates/default-layout.hamlet

@@ -6,8 +6,6 @@
   <!-- secondary navigation at the side -->
   ^{asidenav}
 
-  ^{modal ".toggler" "<h2>Neue Veranstaltung</h2><br>Erstelle eine neue Veranstaltung! Jetzt und hier. Kostenlos."}
-
   <div .main__content>
 
     <!-- alerts -->

templates/home.hamlet

@@ -72,11 +72,14 @@
       Knopf-Test:
         <form .form-inline method=post action=@{HomeR} enctype=#{btnEnctype}>
           ^{btnWdgt}
-    $if True
+    <li><br>
-    $# meant to be 'if js-supported'
+      Modals:
-      <li><br>
+      ^{modal ".toggler" Nothing}
-        Modals:
+      <a href="/course/new" .btn.toggler>Klick mich für Ajax-Test
-        <button type="button" .toggler>Klick mich
+        <noscript>(Für Modals bitte JS aktivieren)</noscript>
+      ^{modal ".toggler2" (Just "Test wegen Modal")}
+      <div .btn.toggler2>Klick mich für Content-Test
+        <noscript>(Für Modals bitte JS aktivieren)</noscript>
 
     <li><br>
       Multi-File-Input für bereits hochgeladene Dateien:

templates/standalone/modal.hamlet

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

templates/standalone/modal.julius

@@ -0,0 +1,111 @@
+(function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  window.utils.modal = function(modal) {
+    var overlay = document.createElement('div');
+    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) {
+      if (event) {
+        event.preventDefault();
+      }
+      modal.classList.add('modal--open');
+      overlay.classList.add('modal__overlay');
+      document.body.insertBefore(modal, null);
+      document.body.insertBefore(overlay, modal);
+      overlay.classList.add('modal__overlay--open');
+      toggleScroll(false);
+
+      if (modal.dataset.closeable === 'true') {
+        closer.classList.add('modal__closer');
+        modal.insertBefore(closer, null);
+        closer.addEventListener('click', closeBound, false);
+        overlay.addEventListener('click', closeBound, false);
+      }
+    };
+
+    this.openOnEvent = function openOnEventFn(event) {
+      if (event.detail.for === modal.getAttribute('id')) {
+        self.open();
+      }
+    };
+    this.close = function closeFn(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);
+      }
+    };
+
+    document.addEventListener('modal-open', self.openOnEvent, false);
+    closeBound = self.close;
+    if (trigger) {
+      trigger.classList.add('modal__trigger');
+      trigger.addEventListener('click', self.open, false);
+    }
+    modal.classList.add('js-modal-initialized');
+  };
+
+  function toggleScroll(scrollable) {
+    if (!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() {
+
+  Array.from(document.querySelectorAll('.js-modal:not(.js-modal-initialized)')).map(function(modal) {
+    new utils.modal(modal);
+  });
+
+}, false);

templates/widgets/modal.hamlet

@@ -1,17 +1,18 @@
 <div .modal.js-modal #modal-#{modalId} data-trigger=#{modalTrigger} data-closeable=true>
-  <h2>Neue Veranstaltung
+  $if 11 == length modalContent
-  #{modalContent}
+    <div .replace-me>
-  <form>
+  $else
-    <div .form-group>
+    <h2>Neue Veranstaltung
-      <label .reactive-label for="inp1">Name
+    #{modalContent}
-      <input type="text" id="inp1">
+    <form>
-    <div .form-group>
+      <div .form-group>
-      <label .reactive-label for="inp2">Kürzel
+        <label .reactive-label for="inp1">Name
-      <input type="text" id="inp2">
+        <input type="text" id="inp1">
-    <div .form-group>
+      <div .form-group>
-      <label .reactive-label for="inp3">Aktiv?
+        <label .reactive-label for="inp2">Kürzel
-      <div .checkbox>
+        <input type="text" id="inp2">
-        <input id="inp3" name="f2" type="checkbox">
+      <div .form-group>
-        <label for="inp3">
+        <label .reactive-label for="inp3">Semester
-    <div .form-group>
+        <input type="text" id="inp3">
-      <input type="submit" value="Submit">
+      <div .form-group>
+        <input type="submit" value="Submit">

templates/widgets/modal.julius

@@ -1,61 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-  'use strict';
-
-  window.utils = window.utils || {};
-
-  if (!window.utils.modal) {
-    window.utils.modal = function(modal) {
-      var overlay = document.createElement('div');
-      var closer = document.createElement('div');
-      var trigger = document.querySelector(modal.dataset.trigger);
-      var closeBound;
-
-      this.open = function openFn(event) {
-        if (event) {
-          event.preventDefault();
-        }
-        modal.classList.add('modal--open');
-        overlay.classList.add('modal__overlay');
-        document.body.insertBefore(modal, null);
-        document.body.insertBefore(overlay, modal);
-        overlay.classList.add('modal__overlay--open');
-        toggleScroll(false);
-
-        if (modal.dataset.closeable === 'true') {
-          closer.classList.add('modal__closer');
-          modal.insertBefore(closer, null);
-          closer.addEventListener('click', closeBound, false);
-          overlay.addEventListener('click', closeBound, false);
-        }
-      };
-
-      this.openOnEvent = function openOnEventFn(event) {
-        if (event.detail.for === modal.getAttribute('id')) {
-          this.open();
-        }
-      };
-      this.close = function closeFn(event) {
-        if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
-          modal.classList.remove('modal--open');
-          overlay.classList.remove('modal__overlay--open');
-          toggleScroll(true);
-          closer.removeEventListener('click', closeBound, false);
-        }
-      };
-
-      document.addEventListener('modal-open', this.openOnEvent.bind(this), false);
-      closeBound = this.close.bind(this);
-      if (trigger) {
-        trigger.classList.add('modal__trigger');
-        trigger.addEventListener('click', this.open.bind(this), false);
-      }
-    }
-  }
-
-  function toggleScroll(scrollable) {
-    document.body.classList.toggle('no-scroll', !scrollable);
-  }
-
-  new utils.modal(document.querySelector('#modal-13')); // hashtag{modalId} scope-variable
-
-}, false);