Merge branch 'master' of gitlab.cip.ifi.lmu.de:jost/UniWorX

src/Foundation.hs

@@ -16,6 +16,8 @@ import Auth.PWHash
 import Auth.Dummy
 import Jobs.Types
 
+import Handler.Utils.Templates (siteModalId, modalParameter)
+
 import qualified Network.Wai as W (pathInfo)
 
 import Yesod.Default.Util   (addStaticContentExternal)
@@ -697,8 +699,14 @@ siteLayout headingOverride widget = do
   master <- getYesod
   let AppSettings { appUserDefaults = UserDefaultConf{..}, .. } = appSettings master
 
-  applySystemMessages
+  isModal <- isJust <$> siteModalId
-  mmsgs  <- getMessages
+  $logDebugS "siteLayout" $ "isModal = " <> tshow isModal
+
+  mmsgs <- if
+    | isModal -> return []
+    | otherwise -> do
+        applySystemMessages
+        getMessages
 
   mcurrentRoute <- getCurrentRoute
 

src/Handler/Utils/Templates.hs

@@ -7,6 +7,12 @@ import Import.NoFoundation
 lipsum :: WidgetT site IO ()
 lipsum = $(widgetFile "widgets/lipsum")
 
+modalParameter :: Text
+modalParameter = "_modal"
+
+siteModalId :: MonadHandler m => m (Maybe Text)
+siteModalId = lookupGetParam modalParameter
+
 modal :: WidgetT site IO () -> Either (Route site) (WidgetT site IO ()) -> WidgetT site IO ()
 modal modalTrigger modalContent = do
   let modalDynamic = isLeft modalContent

templates/default-layout.hamlet

@@ -1,16 +1,19 @@
-<!-- navigation -->
+$if not isModal
-^{navbar}
+  <!-- navigation -->
+  ^{navbar}
 
 <div .main>
 
-  <!-- secondary navigation at the side -->
+  $if not isModal
-  ^{asidenav}
+    <!-- secondary navigation at the side -->
+    ^{asidenav}
 
   <div .main__content>
 
-    <!-- breadcrumbs -->
+    $if not isModal
-    $if not $ Just HomeR == mcurrentRoute
+      <!-- breadcrumbs -->
-      ^{breadcrumbsWgt}
+      $if not $ Just HomeR == mcurrentRoute
+        ^{breadcrumbsWgt}
 
     <div .main__content-body>
 
@@ -20,17 +23,17 @@
             <a .breadcrumbs__link href="@{fst back}">#{snd back}  -->
           ^{headline}
 
-      <!-- prime page actions -->
+      $if not isModal
-      ^{pageactionprime}
+        <!-- prime page actions -->
+        ^{pageactionprime}
 
-      <!-- alerts -->
+        <!-- alerts -->
-      <div .alerts>
+        <div .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/modal.julius

@@ -7,7 +7,7 @@
     var overlay = document.createElement('div');
     var closer = document.createElement('div');
     var trigger = document.querySelector('#' + modal.dataset.trigger);
-    var origParent = modal.parentNode;
+    // var origParent = modal.parentNode;
 
     function open(event) {
       // disable modals for narrow screens
@@ -16,8 +16,8 @@
       }
       modal.classList.add('modal--open');
       overlay.classList.add('modal__overlay');
-      document.body.insertBefore(modal, null);
+      // document.body.insertBefore(modal, null);
-      document.body.insertBefore(overlay, modal);
+       document.body.insertBefore(overlay, modal);
       overlay.classList.add('modal__overlay--open');
 
       if (modal.dataset.closeable === 'true') {
@@ -39,13 +39,15 @@
     function close(event) {
       if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
         overlay.remove();
-        origParent.insertBefore(modal, null);
+        // origParent.insertBefore(modal, null);
         modal.classList.remove('modal--open');
         closer.removeEventListener('click', close, false);
       }
     };
 
     function setup() {
+       document.body.insertBefore(modal, null);
+
       // 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
@@ -55,24 +57,48 @@
       }
 
       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;
+        //     }
+        //   });
+        // }
+
         var dynamicContentURL = trigger.getAttribute('href');
         console.log(dynamicContentURL);
-        if (dynamicContentURL.length > 0) {
+        var frame = document.createElement('iframe');
-          fetch(dynamicContentURL, {
+        frame.setAttribute('id', "frame-" + modal.getAttribute('id'));
-            credentials: 'same-origin',
+        modal.insertBefore(frame, null);
-          }).then(function(response) {
+
-            return response.text();
+        frame.onload = function() {
-          }).then(function(body) {
+            frame.style.visibility = 'hidden';
-            var modalContent = document.createElement('div');
+            frame.style.height = '0';
-            modalContent.innerHTML = body;
+
-            var main = modalContent.querySelector('.main__content-body');
+            var doc = frame.contentDocument ? frame.contentDocument : frame.contentWindow.document;
-            if (main) {
+            var body = doc.body, html = doc.documentElement;
-              modal.appendChild(main);
+            var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
-            } else {
+
-              replaceMe.innerHTML = body;
+            frame.style.height = "calc(" + (height + "px") + " + 1em)";
-            }
+            frame.style.visibility = 'visible';
-          });
+
+            doc.querySelectorAll("form").forEach(function(form) {
+                form.setAttribute("target", "_top");
+            });
         }
+
+        frame.setAttribute('src', dynamicContentURL + "?" + #{String modalParameter});
       }
       // tell further modals, that this one already got initialized
       modal.classList.add('js-modal-initialized');

templates/standalone/modal.lucius

@@ -14,15 +14,23 @@
   padding: 20px;
   padding-right: 65px;
   overflow: auto;
-  opacity: 0;
   transition: all .15s ease;
   pointer-events: none;
+  opacity: 0;
 
   &.modal--open {
     opacity: 1;
+    pointer-events: auto;
     z-index: 200;
     transform: translate(-50%, -50%) scale(1, 1);
-    pointer-events: all;
+  }
+
+  iframe {
+    height: calc(60vh);
+    width: 100%;
+    border-style: none;
+    scroll: auto;
+    overflow: auto;
   }
 }
 
@@ -50,10 +58,11 @@
   width: 100%;
   background-color: transparent;
   z-index: -1;
-  opacity: 0;
   transition: all .2s ease;
+  display: none;
 
   &.modal__overlay--open {
+    display: block;
     z-index: 199;
     opacity: 1;
     background-color: rgba(0, 0, 0, 0.4);