fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feat/modalicons' into 'master'

Browse Source 
Make modal triggers not look like buttons anymore

See merge request !80
This commit is contained in:
Felix Hamann 2019-02-09 21:24:49 +01:00
commit 3f383d1608
5 changed files with 36 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Handler/Course.hs
View File

@ -58,7 +58,7 @@ colCShortDescr = sortable (Just "cshort") (i18nCell MsgCourseShort)
(Just descr) -> cell
[whamlet|
$newline never
<span style="float:right">
<div>
^{modal "Beschreibung" (Right $ toWidget descr)}
|]
)

2
src/Handler/Utils/Table/Cells.hs
View File

@ -81,7 +81,7 @@ courseCell Course{..} = anchorCell link name `mappend` desc
Nothing -> mempty
(Just descr) -> cell [whamlet|
$newline never
<span style="float:right">
<div>
^{modal "Beschreibung" (Right $ toWidget descr)}
|]

16
src/Handler/Utils/Templates.hs
View File

@ -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|<a .btn ##{triggerId} href=#{route'}>^{modalTrigger}|]
Right _ -> [whamlet|<div .btn ##{triggerId}>^{modalTrigger}|]
[whamlet|
$newline never
<a .modal__trigger href=#{route'} ##{triggerId}>
<span .modal__trigger-label>^{modalTrigger}
|]
Right _ -> do
[whamlet|
$newline never
<div .modal__trigger ##{triggerId}>
<span .modal__trigger-label>^{modalTrigger}
|]

36
templates/standalone/modal.julius
View File

@ -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
}));
};

5
templates/standalone/modal.lucius
View File

@ -68,6 +68,11 @@
cursor: pointer;
}
.modal__trigger-label {
font-style: italic;
text-decoration: underline;
}
.modal__closer {
position: absolute;
top: 20px;