diff --git a/src/Handler/Course.hs b/src/Handler/Course.hs index b656ccdd2..9a55c4943 100644 --- a/src/Handler/Course.hs +++ b/src/Handler/Course.hs @@ -58,7 +58,7 @@ colCShortDescr = sortable (Just "cshort") (i18nCell MsgCourseShort) (Just descr) -> cell [whamlet| $newline never - +
^{modal "Beschreibung" (Right $ toWidget descr)} |] ) diff --git a/src/Handler/Utils/Table/Cells.hs b/src/Handler/Utils/Table/Cells.hs index e5506de92..a164e9f96 100644 --- a/src/Handler/Utils/Table/Cells.hs +++ b/src/Handler/Utils/Table/Cells.hs @@ -81,7 +81,7 @@ courseCell Course{..} = anchorCell link name `mappend` desc Nothing -> mempty (Just descr) -> cell [whamlet| $newline never - +
^{modal "Beschreibung" (Right $ toWidget descr)} |] diff --git a/src/Handler/Utils/Templates.hs b/src/Handler/Utils/Templates.hs index 89cb2062c..221c72b76 100644 --- a/src/Handler/Utils/Templates.hs +++ b/src/Handler/Utils/Templates.hs @@ -4,9 +4,6 @@ import Data.Either (isLeft) import Import.NoFoundation -lipsum :: WidgetT site IO () -lipsum = $(widgetFile "widgets/lipsum") - modal :: WidgetT site IO () -> Either (SomeRoute site) (WidgetT site IO ()) -> WidgetT site IO () modal modalTrigger modalContent = do let modalDynamic = isLeft modalContent @@ -16,5 +13,14 @@ modal modalTrigger modalContent = do case modalContent of Left route -> do route' <- toTextUrl route - [whamlet|^{modalTrigger}|] - Right _ -> [whamlet|
^{modalTrigger}|] + [whamlet| + $newline never + + ^{modalTrigger} + |] + Right _ -> do + [whamlet| + $newline never +
+ ^{modalTrigger} + |] diff --git a/templates/standalone/modal.julius b/templates/standalone/modal.julius index 5c2eb991c..f624d1b46 100644 --- a/templates/standalone/modal.julius +++ b/templates/standalone/modal.julius @@ -13,7 +13,7 @@ if (!modal.classList.contains('js-modal-initialized')) { return; } - + // disable modals for narrow screens if (event) { event.preventDefault(); @@ -52,7 +52,7 @@ // every modal can be openend via document-wide event, see openOnEvent document.addEventListener('modal-open', openOnEvent, false); - + if ('dynamic' in modal.dataset) { function fetchModal(url, init) { function responseHtml(body) { @@ -83,7 +83,7 @@ scriptClone.setAttribute(attrs[i].name, attrs[i].value); } } - + document.body.insertBefore(scriptClone, null); scriptTags.push(scriptClone); }); @@ -92,7 +92,7 @@ if (Array.from(document.head.querySelectorAll('style')).some(function(haystack) { return haystack.innerText === styleTag.innerText; })) { return } - + document.head.insertBefore(styleTag, null); }); @@ -103,8 +103,8 @@ if (Array.from(document.head.querySelectorAll('link')).some(function(haystack) { return haystack.getAttribute('href') === linkTag.getAttribute('href'); })) { return } - - + + document.head.insertBefore(linkTag, null); }); @@ -112,7 +112,7 @@ var alertsEl = document.body.querySelector('#alerts'); if (alertsEl && modalAlertsEl) { var modalAlerts = Array.from(modalAlertsEl.childNodes); - + modalAlerts.forEach(function(alertEl) { alertsEl.insertBefore(alertEl, alertsEl.querySelector('.alerts__toggler')); }); @@ -122,30 +122,30 @@ contentBody.removeChild(modalAlertsEl); } - + modalContent = contentBody; } modalContent.classList.add('modal__content'); - + var nudgeAttr = function(attr, x) { var oldVal = x.getAttribute(attr); var newVal = modal.getAttribute('id') + '__' + oldVal; // console.log(oldVal, newVal); - x.setAttribute(attr, newVal); + x.setAttribute(attr, newVal); }; var idAttrs = ['id', 'for', 'data-conditional-id']; idAttrs.map(function(attr) { modalContent.querySelectorAll('[' + attr + ']').forEach(function(x) { nudgeAttr(attr, x); }); }); - + modal.querySelectorAll('.modal__content').forEach(function(prev) { modal.removeChild(prev); }); modal.insertBefore(modalContent, null); var triggerContentLoad = function() { console.log('contentReady', modal); - + document.dispatchEvent(new CustomEvent('setup', { detail: { scope: modal }, bubbles: true, @@ -163,7 +163,7 @@ var alertsEl = document.querySelector('#alerts'); if (!alertsEl) return null; - + for (var i = 0; i < data.length; i++) { var alert = document.createElement('div'); alert.classList.add('alert', 'alert-' + data[i].class); @@ -180,7 +180,7 @@ return 'json'; } - + return fetch(url, init).then(function(response) { var contentType = response.headers.get('Content-Type') if (contentType && contentType.includes('text/html')) { @@ -203,7 +203,7 @@ #{String (toPathPiece HeaderIsModal)}: 'True' } }; - + if (dynamicContentURL.length > 0) { fetchModal(dynamicContentURL, fetchInit).then((event.detail && event.detail.then) || (function(){})); } @@ -224,7 +224,7 @@ trigger.addEventListener('click', open, false); } - + // tell further modals, that this one already got initialized modal.classList.add('js-modal-initialized'); @@ -237,7 +237,7 @@ window.utils.ajaxSubmit = function(modal, form) { function doSubmit(event) { event.preventDefault(); - + var modalContent = modal.querySelector('.modal__content'); modalContent.style.pointerEvents = 'none'; modalContent.style.opacity = 0.5; @@ -265,7 +265,7 @@ }) }, bubbles: true, - cancelable: true + cancelable: true })); }; diff --git a/templates/standalone/modal.lucius b/templates/standalone/modal.lucius index 578694335..722f38a3a 100644 --- a/templates/standalone/modal.lucius +++ b/templates/standalone/modal.lucius @@ -68,6 +68,11 @@ cursor: pointer; } +.modal__trigger-label { + font-style: italic; + text-decoration: underline; +} + .modal__closer { position: absolute; top: 20px;