reintroducing dynmic modals

src/Handler/Course.hs

@@ -59,7 +59,7 @@ colDescription = sortable Nothing (i18nCell MsgCourseDescription)
           $ \DBRow{ dbrOutput=(Entity cid Course{..}, _, _, _) } ->
             case courseDescription of
               Nothing      -> mempty
-              (Just descr) -> cell $ modalStatic descr
+              (Just descr) -> cell $ modalStatic "Beschreibung" descr
 
 colCShort :: IsDBTable m a => Colonnade _ CourseTableData (DBCell m a)
 colCShort = sortable (Just "cshort") (i18nCell MsgCourseShort)
@@ -73,7 +73,7 @@ colCShortDescr = sortable (Just "cshort") (i18nCell MsgCourseShort)
             ( case courseDescription of
                 Nothing      -> mempty
                 (Just descr) -> cell
-                  [whamlet|<span style="float:right"> ^{modalStatic descr} |]
+                  [whamlet|<span style="float:right"> ^{modalStatic "Beschreibung" descr} |]
             )
 
 colTerm :: IsDBTable m a => Colonnade _ CourseTableData (DBCell m a)
@@ -612,5 +612,3 @@ getCUserR tid ssh csh uuid = do
 
 getCHiWisR :: TermId -> SchoolId -> CourseShorthand -> Handler Html
 getCHiWisR tid ssh csh = undefined -- TODO
-
-

src/Handler/Utils/Table/Cells.hs

@@ -76,7 +76,7 @@ courseCell (Course {..}) = anchorCell link name `mappend` desc
     name = citext2widget courseName
     desc = case courseDescription of
             Nothing      -> mempty
-            (Just descr) -> cell [whamlet| <span style="float:right"> ^{modalStatic descr} |]
+            (Just descr) -> cell [whamlet| <span style="float:right"> ^{modalStatic "Beschreibung" descr} |]
 
 sheetCell :: IsDBTable m a => CourseLink -> SheetName -> DBCell m a
 sheetCell crse shn =

src/Handler/Utils/Templates.hs

@@ -7,26 +7,21 @@ import Import.NoFoundation
 lipsum :: WidgetT site IO ()
 lipsum = $(widgetFile "widgets/lipsum")
 
-modalStatic :: Html -> WidgetT site IO ()
+modalStatic :: Html -> Html -> WidgetT site IO ()
-modalStatic modalContent = do
+modalStatic modalTrigger modalContent = do
   modalId <- newIdent
   triggerId <- newIdent
   $(widgetFile "widgets/modalStatic")
-  [whamlet|<div ##{triggerId}>MODALTRIGGER|] -- TODO: Content of Modal Trigger
+  [whamlet|<div ##{triggerId}>#{modalTrigger}|] -- TODO: modalDynamic
 
-modalWidget :: Html -> WidgetT site IO () -> WidgetT site IO ()
+modalWidget :: Html -> WidgetT site IO () -> Bool -> WidgetT site IO ()
-modalWidget modalTrigger modalContent = do
+modalWidget modalTrigger modalContent modalDynamic  = do
   modalId <- newIdent
   triggerId <- newIdent
   $(widgetFile "widgets/modalWidget")
   [whamlet|<div .btn ##{triggerId}>#{modalTrigger}|]
 
-modal :: Text -> Maybe [Char] -> WidgetT site IO ()
+modal :: Html -> [Char] -> Bool -> WidgetT site IO ()
-modal triggerId (Just modalContent) = do
+modal triggerId modalContent modalDynamic = do
   modalId <- newIdent
   $(widgetFile "widgets/modal")
-modal triggerId Nothing = do
-  modalId <- newIdent
-  let modalContent :: [Char]
-      modalContent = "placeholder"
-  $(widgetFile "widgets/modal")

templates/adminTest.hamlet

@@ -32,9 +32,9 @@
           ^{btnWdgt}
     <li><br>
       Modals:
-      ^{modal "#toggler1" Nothing}
+      ^{modal "toggler1" "" True}
       <a href=@{UsersR} .btn #toggler1>Klick mich für Ajax-Test
         <noscript>(Für Modals bitte JS aktivieren)</noscript>
-      ^{modal "#toggler2" (Just "Test Inhalt für Modal")}
+      ^{modal "toggler2" "Test Inhalt für Modal" False}
       <div .btn #toggler2>Klick mich für Content-Test
         <noscript>(Für Modals bitte JS aktivieren)</noscript>

templates/profileData.hamlet

@@ -51,7 +51,7 @@
     .
 
   <h2>
-        ^{modalWidget "Alle Benutzerbezogenen Daten löschen" delWdgt}
+        ^{modalWidget "Alle Benutzerbezogenen Daten löschen" delWdgt False}
   <p>
     <h4>Hinweise:
     <ul>

templates/standalone/modal.julius

@@ -28,8 +28,8 @@
       }
     }
 
-    // open this modal with an event:
+    // you can open this modal via event
-    // document.dispatchEvent(new CustomEvent('modal-open', { details: { for: 'modal-13' }}))
+    // example: document.dispatchEvent(new CustomEvent('modal-open', { details: { for: 'modal-[id]' }}))
     function openOnEvent(event) {
       if (event.detail.for === modal.getAttribute('id')) {
         open();
@@ -53,6 +53,26 @@
         trigger.classList.add('modal__trigger');
         trigger.addEventListener('click', open, false);
       }
+
+      if (modal.dataset.dynamic === 'True') {
+        var dynamicContentURL = trigger.getAttribute('href');
+        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;
+            }
+          });
+        }
+      }
       // tell further modals, that this one already got initialized
       modal.classList.add('js-modal-initialized');
     }

templates/standalone/modal.lucius

@@ -4,7 +4,7 @@
   top: 50%;
   transform: translate(-50%, -50%) scale(0.8, 0.8);
   display: block;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.99);
   min-width: 60vw;
   min-height: 100px;
   max-height: calc(100vh - 30px);

templates/widgets/modal.hamlet

@@ -1,2 +1,2 @@
-<div .modal.js-modal #{modalId} data-trigger=#{triggerId} data-closeable=true>
+<div .modal.js-modal #modal-#{modalId} data-trigger=#{triggerId} data-closeable=true data-dynamic=#{modalDynamic}>
   #{modalContent}

templates/widgets/modalWidget.hamlet

@@ -1,2 +1,2 @@
-<div .modal.js-modal ##{modalId} data-trigger=#{triggerId} data-closeable=true>
+<div .modal.js-modal #modal-#{modalId} data-trigger=#{triggerId} data-closeable=true data-dynamic=#{modalDynamic}>
   ^{modalContent}