diff --git a/src/Foundation.hs b/src/Foundation.hs index 435c8a838..5b7ec8500 100644 --- a/src/Foundation.hs +++ b/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 - mmsgs <- getMessages + isModal <- isJust <$> siteModalId + $logDebugS "siteLayout" $ "isModal = " <> tshow isModal + + mmsgs <- if + | isModal -> return [] + | otherwise -> do + applySystemMessages + getMessages mcurrentRoute <- getCurrentRoute diff --git a/src/Handler/Utils/Templates.hs b/src/Handler/Utils/Templates.hs index 14f8ce38c..ed4f0111a 100644 --- a/src/Handler/Utils/Templates.hs +++ b/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 diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet index f9f4bb3cb..9cae5ae39 100644 --- a/templates/default-layout.hamlet +++ b/templates/default-layout.hamlet @@ -1,16 +1,19 @@ - -^{navbar} +$if not isModal + + ^{navbar}
- - ^{asidenav} + $if not isModal + + ^{asidenav}
- - $if not $ Just HomeR == mcurrentRoute - ^{breadcrumbsWgt} + $if not isModal + + $if not $ Just HomeR == mcurrentRoute + ^{breadcrumbsWgt}
@@ -20,17 +23,17 @@ #{snd back} --> ^{headline} - - ^{pageactionprime} + $if not isModal + + ^{pageactionprime} - -
- $forall (status, msg) <- mmsgs - $with status2 <- bool status "info" (status == "") -
-
- #{msg} + +
+ $forall (status, msg) <- mmsgs + $with status2 <- bool status "info" (status == "") +
+
+ #{msg} - ^{widget} diff --git a/templates/standalone/modal.julius b/templates/standalone/modal.julius index 77a8f2252..b4b96a335 100644 --- a/templates/standalone/modal.julius +++ b/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(overlay, modal); + // document.body.insertBefore(modal, null); + 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) { - 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 frame = document.createElement('iframe'); + frame.setAttribute('id', "frame-" + modal.getAttribute('id')); + modal.insertBefore(frame, null); + + frame.onload = function() { + frame.style.visibility = 'hidden'; + frame.style.height = '0'; + + var doc = frame.contentDocument ? frame.contentDocument : frame.contentWindow.document; + var body = doc.body, html = doc.documentElement; + var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); + + 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'); diff --git a/templates/standalone/modal.lucius b/templates/standalone/modal.lucius index e14dbad72..043775e19 100644 --- a/templates/standalone/modal.lucius +++ b/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);