From 7ea45e3a173345eb31617c5472a3c35bf0483798 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Tue, 2 Oct 2018 00:17:09 +0200 Subject: [PATCH] reintroducing dynmic modals --- src/Handler/Course.hs | 6 ++---- src/Handler/Utils/Table/Cells.hs | 2 +- src/Handler/Utils/Templates.hs | 19 +++++++------------ templates/adminTest.hamlet | 4 ++-- templates/profileData.hamlet | 2 +- templates/standalone/modal.julius | 24 ++++++++++++++++++++++-- templates/standalone/modal.lucius | 2 +- templates/widgets/modal.hamlet | 2 +- templates/widgets/modalWidget.hamlet | 2 +- 9 files changed, 38 insertions(+), 25 deletions(-) diff --git a/src/Handler/Course.hs b/src/Handler/Course.hs index 47240a3ed..fa898bc54 100644 --- a/src/Handler/Course.hs +++ b/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| ^{modalStatic descr} |] + [whamlet| ^{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 - - diff --git a/src/Handler/Utils/Table/Cells.hs b/src/Handler/Utils/Table/Cells.hs index 0b74f7e01..25a53e223 100644 --- a/src/Handler/Utils/Table/Cells.hs +++ b/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| ^{modalStatic descr} |] + (Just descr) -> cell [whamlet| ^{modalStatic "Beschreibung" descr} |] sheetCell :: IsDBTable m a => CourseLink -> SheetName -> DBCell m a sheetCell crse shn = diff --git a/src/Handler/Utils/Templates.hs b/src/Handler/Utils/Templates.hs index 771e922f4..182c1d6a5 100644 --- a/src/Handler/Utils/Templates.hs +++ b/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 modalContent = do +modalStatic :: Html -> Html -> WidgetT site IO () +modalStatic modalTrigger modalContent = do modalId <- newIdent triggerId <- newIdent $(widgetFile "widgets/modalStatic") - [whamlet|
MODALTRIGGER|] -- TODO: Content of Modal Trigger + [whamlet|
#{modalTrigger}|] -- TODO: modalDynamic -modalWidget :: Html -> WidgetT site IO () -> WidgetT site IO () -modalWidget modalTrigger modalContent = do +modalWidget :: Html -> WidgetT site IO () -> Bool -> WidgetT site IO () +modalWidget modalTrigger modalContent modalDynamic = do modalId <- newIdent triggerId <- newIdent $(widgetFile "widgets/modalWidget") [whamlet|
#{modalTrigger}|] -modal :: Text -> Maybe [Char] -> WidgetT site IO () -modal triggerId (Just modalContent) = do +modal :: Html -> [Char] -> Bool -> WidgetT site IO () +modal triggerId modalContent modalDynamic = do modalId <- newIdent $(widgetFile "widgets/modal") -modal triggerId Nothing = do - modalId <- newIdent - let modalContent :: [Char] - modalContent = "placeholder" - $(widgetFile "widgets/modal") diff --git a/templates/adminTest.hamlet b/templates/adminTest.hamlet index 7638cb944..6fbc3ce06 100644 --- a/templates/adminTest.hamlet +++ b/templates/adminTest.hamlet @@ -32,9 +32,9 @@ ^{btnWdgt}

  • Modals: - ^{modal "#toggler1" Nothing} + ^{modal "toggler1" "" True} Klick mich für Ajax-Test - ^{modal "#toggler2" (Just "Test Inhalt für Modal")} + ^{modal "toggler2" "Test Inhalt für Modal" False}
    Klick mich für Content-Test diff --git a/templates/profileData.hamlet b/templates/profileData.hamlet index 5b6726cf1..bf7419342 100644 --- a/templates/profileData.hamlet +++ b/templates/profileData.hamlet @@ -51,7 +51,7 @@ .

    - ^{modalWidget "Alle Benutzerbezogenen Daten löschen" delWdgt} + ^{modalWidget "Alle Benutzerbezogenen Daten löschen" delWdgt False}

    Hinweise:
      diff --git a/templates/standalone/modal.julius b/templates/standalone/modal.julius index 0de0ceb59..8bac72f12 100644 --- a/templates/standalone/modal.julius +++ b/templates/standalone/modal.julius @@ -28,8 +28,8 @@ } } - // open this modal with an event: - // document.dispatchEvent(new CustomEvent('modal-open', { details: { for: 'modal-13' }})) + // you can open this modal via event + // 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'); } diff --git a/templates/standalone/modal.lucius b/templates/standalone/modal.lucius index 404c355ce..589083ece 100644 --- a/templates/standalone/modal.lucius +++ b/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); diff --git a/templates/widgets/modal.hamlet b/templates/widgets/modal.hamlet index 6fc5eb9ca..ae09cb507 100644 --- a/templates/widgets/modal.hamlet +++ b/templates/widgets/modal.hamlet @@ -1,2 +1,2 @@ -
      +
      #{modalContent} diff --git a/templates/widgets/modalWidget.hamlet b/templates/widgets/modalWidget.hamlet index 286502e2b..80154aaba 100644 --- a/templates/widgets/modalWidget.hamlet +++ b/templates/widgets/modalWidget.hamlet @@ -1,2 +1,2 @@ -
      +
      ^{modalContent}