From 383eb3c6209ce30a9da2d598bdbd5e44f8e25617 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Wed, 28 Mar 2018 01:05:28 +0200 Subject: [PATCH 1/4] added modal widget --- src/Foundation.hs | 6 +++ templates/default-layout.hamlet | 2 + templates/home.hamlet | 5 +++ templates/widgets/modal.hamlet | 4 ++ templates/widgets/modal.julius | 56 ++++++++++++++++++++++++++++ templates/widgets/modal.lucius | 66 +++++++++++++++++++++++++++++++++ 6 files changed, 139 insertions(+) create mode 100644 templates/widgets/modal.hamlet create mode 100644 templates/widgets/modal.julius create mode 100644 templates/widgets/modal.lucius diff --git a/src/Foundation.hs b/src/Foundation.hs index 50b84b6d8..96c620455 100644 --- a/src/Foundation.hs +++ b/src/Foundation.hs @@ -399,6 +399,12 @@ defaultMenuLayout menu widget = do asidenav = $(widgetFile "widgets/asidenav") breadcrumbs :: Widget breadcrumbs = $(widgetFile "widgets/breadcrumbs") + modal :: [Char] -> [Char] -> Widget + modal modalTrigger modalContent = do + let + modalId :: Int32 + modalId = 13 + $(widgetFile "widgets/modal") pc <- widgetToPageContent $ do addStylesheetRemote "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900" diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet index 64ec8c8f1..9476d7889 100644 --- a/templates/default-layout.hamlet +++ b/templates/default-layout.hamlet @@ -6,6 +6,8 @@ ^{asidenav} + ^{modal ".toggler" "Sit quis culpa eiusmod consectetur laborum aliquip consequat nisi exercitation eu pariatur laboris elit sit. Incididunt nulla quis sint duis ut ipsum incididunt magna. Pariatur aliquip fugiat exercitation non irure sunt id id cillum in nisi. Ad dolor qui enim ad labore est pariatur dolor occaecat excepteur ex labore exercitation velit laborum amet cupidatat. Pariatur veniam proident minim cillum ad sint ad officia cillum deserunt dolore mollit commodo exercitation. Anim laborum non sunt exercitation labore cupidatat amet aliquip ex anim ut do voluptate voluptate tempor."} +
diff --git a/templates/home.hamlet b/templates/home.hamlet index 940318c76..71c1d41d4 100644 --- a/templates/home.hamlet +++ b/templates/home.hamlet @@ -67,3 +67,8 @@ Knopf-Test:
^{btnWdgt} + +
+
+
+ ^{lipsum} diff --git a/templates/widgets/modal.hamlet b/templates/widgets/modal.hamlet new file mode 100644 index 000000000..6906448e7 --- /dev/null +++ b/templates/widgets/modal.hamlet @@ -0,0 +1,4 @@ +
+ $# #{modalContent} + ^{lipsum} + ^{lipsum} diff --git a/templates/widgets/modal.julius b/templates/widgets/modal.julius new file mode 100644 index 000000000..53b118672 --- /dev/null +++ b/templates/widgets/modal.julius @@ -0,0 +1,56 @@ +document.addEventListener('DOMContentLoaded', function() { + 'use strict'; + + window.utils = window.utils || {}; + + if (!window.utils.modal) { + window.utils.modal = function(modal) { + var overlay = document.createElement('div'); + var closer = document.createElement('div'); + var trigger = document.querySelector(modal.dataset.trigger); + var closeBound; + + this.open = function openFn() { + modal.classList.add('modal--open'); + overlay.classList.add('modal__overlay'); + modal.parentNode.insertBefore(overlay, modal); + overlay.classList.add('modal__overlay--open'); + toggleScroll(false); + + if (modal.dataset.closeable === 'true') { + closer.classList.add('modal__closer'); + modal.insertBefore(closer, null); + closer.addEventListener('click', closeBound, false); + overlay.addEventListener('click', closeBound, false); + } + }; + + this.openOnEvent = function openOnEventFn(event) { + if (event.detail.for === modal.getAttribute('id')) { + this.open(); + } + }; + this.close = function closeFn(event) { + if (typeof event === 'undefined' || event.target === closer || event.target === overlay) { + modal.classList.remove('modal--open'); + overlay.classList.remove('modal__overlay--open'); + toggleScroll(true); + closer.removeEventListener('click', closeBound, false); + } + }; + + document.addEventListener('modal-open', this.openOnEvent.bind(this), false); + closeBound = this.close.bind(this); + if (trigger) { + trigger.addEventListener('click', this.open.bind(this), false); + } + } + } + + function toggleScroll(scrollable) { + document.body.classList.toggle('no-scroll', !scrollable); + } + + new utils.modal(document.querySelector('#modal-13')); // hashtag{modalId} scope-variable + +}, false); diff --git a/templates/widgets/modal.lucius b/templates/widgets/modal.lucius new file mode 100644 index 000000000..8c49cb4cd --- /dev/null +++ b/templates/widgets/modal.lucius @@ -0,0 +1,66 @@ +.modal { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: block; + background-color: rgba(130, 130, 130, 0.9); + min-width: 60vw; + min-height: 100px; + max-height: calc(100vh - 30px); + border-radius: 20px; + z-index: -1; + color: white; + padding: 20px; + overflow: scroll; + + &.modal--open { + z-index: 200; + } +} + +@media (max-width: 999px) { + .modal { + min-width: 80vw; + } +} +@media (max-width: 666px) { + .modal { + min-width: 90vw; + } +} +@media (max-width: 444px) { + .modal { + min-width: calc(100vw - 20px); + } +} + +.modal__overlay { + position: fixed; + left: 0; + top: 0; + height: 100%; + width: 100%; + background-color: transparent; + z-index: -1; + transition: background-color .2s ease; + + &.modal__overlay--open { + z-index: 199; + background-color: rgba(0, 0, 0, 0.4); + } +} + +.modal__closer { + position: absolute; + top: 10px; + right: 10px; + display: block; + width: 20px; + height: 50px; + background-color: blue; +} + +.no-scroll { + overflow: hidden; +} From 511a3fef7bc5679c45620871952f0fc1099ddff1 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Wed, 28 Mar 2018 23:41:17 +0200 Subject: [PATCH 2/4] example modal --- templates/widgets/modal.hamlet | 15 +++++++++++++-- templates/widgets/modal.lucius | 4 ++-- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/templates/widgets/modal.hamlet b/templates/widgets/modal.hamlet index 6906448e7..24236abdc 100644 --- a/templates/widgets/modal.hamlet +++ b/templates/widgets/modal.hamlet @@ -1,4 +1,15 @@
$# #{modalContent} - ^{lipsum} - ^{lipsum} +

Neue Veranstaltung + +
+