Debug javascript setup

This commit is contained in:
Gregor Kleen 2018-11-22 20:56:49 +01:00
parent 213f3a39cc
commit 67f6103f87
15 changed files with 116 additions and 56 deletions

View File

@ -804,7 +804,7 @@ siteLayout headingOverride widget = do
return (c, courseRoute, items')
mmsgs <- if
| isModal -> return []
| isModal -> getMessages
| otherwise -> do
applySystemMessages
authTagPivots <- fromMaybe Set.empty <$> getSessionJson SessionInactiveAuthTags

View File

@ -593,7 +593,7 @@ formResultModal :: (MonadHandler m, RedirectUrl (HandlerSite m) route) => FormRe
formResultModal res finalDest handler = maybeT_ $ do
messages <- case res of
FormMissing -> mzero
FormFailure errs -> return $ map (Message Error . toHtml) errs
FormFailure errs -> mapM_ (addMessage Error . toHtml) errs >> mzero
FormSuccess val -> lift . execWriterT $ handler val
isModal <- hasCustomHeader HeaderIsModal

View File

@ -17,10 +17,4 @@ $newline never
<script>
document.body.classList.remove('no-js');
document.addEventListener('DOMContentLoaded', function() {
console.log('Setup body');
document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body }, bubbles: true, cancelable: true }));
});
^{pageBody pc}

View File

@ -27,13 +27,13 @@ $if not isModal
<!-- prime page actions -->
^{pageactionprime}
<!-- alerts -->
<div #alerts .alerts>
$forall (status, msg) <- mmsgs
$with status2 <- bool status "info" (status == "")
<div class="alert alert-#{status2}">
<div .alert__content>
#{msg}
<!-- alerts -->
<div #alerts .alerts>
$forall (status, msg) <- mmsgs
$with status2 <- bool status "info" (status == "")
<div class="alert alert-#{status2}">
<div .alert__content>
#{msg}
<!-- actual content -->
^{widget}

View File

@ -80,6 +80,9 @@
})();
document.addEventListener('setup', function(e) {
if (e.detail.module && e.detail.module !== 'alerts')
return;
// setup alerts
if (e.detail.scope.classList.contains('alerts')) {
@ -90,3 +93,7 @@ document.addEventListener('setup', function(e) {
window.utils.alerts(alertsEl);
}
});
document.addEventListener('DOMContentLoaded', function() {
document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'alerts' }, bubbles: true, cancelable: true }))
});

View File

@ -1,5 +1,8 @@
document.addEventListener('setup', function(e) {
"use strict";
if (e.detail.module && e.detail.module !== 'datepicker')
return;
var config = {
dtLocal: {
@ -34,3 +37,7 @@ document.addEventListener('setup', function(e) {
flatpickr(el, config.dtLocal);
});
});
document.addEventListener('DOMContentLoaded', function() {
document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'datepicker' }, bubbles: true, cancelable: true }));
});

View File

@ -114,6 +114,8 @@
})();
document.addEventListener('setup', function(e) {
if (e.detail.module && e.detail.module !== 'inputs')
return;
// initialize checkboxes
Array.from(e.detail.scope.querySelectorAll('input[type="checkbox"]')).forEach(function(inp) {
@ -135,3 +137,7 @@ document.addEventListener('setup', function(e) {
window.utils.reactiveFileCheckbox(inp);
});
});
document.addEventListener('DOMContentLoaded', function() {
document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'inputs' }, bubbles: true, cancelable: true }));
});

View File

@ -41,12 +41,10 @@
}
function close(event) {
if (typeof event === 'undefined' || event.target === closer || event.target === overlay || event.target === modal) {
overlay.remove();
// origParent.insertBefore(modal, null);
modal.classList.remove('modal--open');
closer.removeEventListener('click', close, false);
}
overlay.remove();
// origParent.insertBefore(modal, null);
modal.classList.remove('modal--open');
closer.removeEventListener('click', close, false);
};
function setup() {
@ -54,12 +52,7 @@
// 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
if (trigger) {
trigger.classList.add('modal__trigger');
trigger.addEventListener('click', open, false);
}
if ('dynamic' in modal.dataset) {
function fetchModal(url, init) {
function responseHtml(body) {
@ -70,14 +63,17 @@
var scriptTags = [];
if (contentBody) {
modalContent.querySelectorAll('script').forEach(function(scriptTag) {
if (Array.from(document.body.querySelectorAll('script')).some(function(haystack) {
var existsAlready = Array.from(document.body.querySelectorAll('script')).some(function(haystack) {
if (haystack.text === scriptTag.text && haystack.getAttribute('src') === scriptTag.getAttribute('src')) {
scriptTags.push(haystack);
return true;
} else {
return false;
}
return false;
})) { return }
});
if (existsAlready)
return;
console.log(scriptTag);
var scriptClone = document.createElement('script');
if (scriptTag.text)
scriptClone.text = striptTag.text;
@ -111,6 +107,21 @@
document.head.insertBefore(linkTag, null);
});
var modalAlertsEl = modalContent.querySelector('#alerts');
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'));
});
if (modalAlerts.length !== 0)
document.dispatchEvent(new CustomEvent('setup', { detail: { scope: alertsEl } }));
contentBody.removeChild(modalAlertsEl);
}
modalContent = contentBody;
}
@ -130,9 +141,11 @@
});
modal.querySelectorAll('.modal__content').forEach(function(prev) { modal.removeChild(prev); });
modal.appendChild(modalContent);
modal.insertBefore(modalContent, null);
var triggerContentLoad = function() {
console.log('contentReady', modal);
document.dispatchEvent(new CustomEvent('setup', {
detail: { scope: modal },
bubbles: true,
@ -140,10 +153,7 @@
}));
}
if (scriptTags.length !== 0) {
scriptTags.forEach(function(t) { t.onload = triggerContentLoad; });
}
scriptTags.forEach(function(t) { t.addEventListener('load', triggerContentLoad); });
triggerContentLoad();
return 'html';
@ -186,7 +196,6 @@
modal.addEventListener('modal-fetch', function(event) {
var dynamicContentURL = (event.detail && event.detail.url) || trigger.getAttribute('href');
console.log(dynamicContentURL);
var fetchInit = (event.detail && event.detail.init) || {
credentials: 'same-origin',
@ -199,14 +208,29 @@
fetchModal(dynamicContentURL, fetchInit).then((event.detail && event.detail.then) || (function(){}));
}
});
modal.dispatchEvent(new CustomEvent('modal-fetch'));
modal.dispatchEvent(new CustomEvent('modal-fetch', {
detail: {
then: (function() {
if (!trigger)
return;
trigger.classList.add('modal__trigger');
trigger.addEventListener('click', open, false);
})
}
}));
} else if (trigger) { // if modal has trigger assigned to it open modal on click
trigger.classList.add('modal__trigger');
trigger.addEventListener('click', open, false);
}
// tell further modals, that this one already got initialized
modal.classList.add('js-modal-initialized');
modal.addEventListener('modal-close', close);
}
setup();
};
@ -214,8 +238,6 @@
function doSubmit(event) {
event.preventDefault();
console.log('ajaxSubmit', modal, form);
var modalContent = modal.querySelector('.modal__content');
modalContent.style.pointerEvents = 'none';
modalContent.style.opacity = 0.5;
@ -232,11 +254,12 @@
body: new FormData(form)
},
then: (function(typ) {
modal.dispatchEvent(new CustomEvent('modal-close'));
modalContent.style.pointerEvents = 'auto';
modalContent.style.opacity = 1;
if (typ === 'json') {
modal.dispatchEvent(new CustomEvent('modal-close'));
modal.dispatchEvent(new CustomEvent('modal-fetch'));
}
})
@ -252,22 +275,26 @@
})();
document.addEventListener('setup', function(e) {
if (e.detail.module && e.detail.module !== 'modal')
return;
Array.from(e.detail.scope.querySelectorAll('.js-modal:not(.js-modal-initialized)')).map(function(modal) {
new utils.modal(modal);
Array.from(e.detail.scope.querySelectorAll('.js-modal:not(.js-modal-initialized)')).forEach(function(modal) {
window.utils.modal(modal);
});
if (e.detail.scope.classList.contains('js-modal')) {
Array.from(e.detail.scope.querySelectorAll('form[data-ajax-submit]:not(.js-ajax-initialized)')).map(function(form) {
Array.from(e.detail.scope.querySelectorAll('form[data-ajax-submit]:not(.js-ajax-initialized)')).forEach(function(form) {
window.utils.ajaxSubmit(e.detail.scope, form);
});
} else {
Array.from(e.detail.scope.querySelectorAll('.js-modal')).map(function(modal) {
Array.from(modal.querySelectorAll('form[data-ajax-submit]:not(.js-ajax-initialized)')).map(function(form) {
Array.from(modal.querySelectorAll('form[data-ajax-submit]:not(.js-ajax-initialized)')).forEach(function(form) {
window.utils.ajaxSubmit(modal, form);
});
});
};
}, false);
document.addEventListener('DOMContentLoaded', function() {
document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'modal' }, bubbles: true, cancelable: true }))
});

View File

@ -1,4 +1,4 @@
div.modal {
.modal {
position: fixed;
left: 50%;
top: 50%;
@ -11,8 +11,7 @@ div.modal {
border-radius: 2px;
z-index: -1;
color: var(--color-font);
padding: 20px;
padding-right: 65px;
padding: 0 65px 0 20px;
overflow: auto;
transition: all .15s ease;
pointer-events: none;
@ -24,6 +23,10 @@ div.modal {
z-index: 200;
transform: translate(-50%, -50%) scale(1, 1);
}
.modal__content {
margin: 20px 0;
}
}
@media (max-width: 1024px) {

View File

@ -7,6 +7,8 @@
*/
document.addEventListener('setup', function(e) {
if (e.detail.module && e.detail.module !== 'showHide')
return;
var LSNAME = 'SHOW_HIDE';
@ -50,3 +52,7 @@ document.addEventListener('setup', function(e) {
addEventHandler(el);
});
});
document.addEventListener('DOMContentLoaded', function() {
document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'showHide' }, bubbles: true, cancelable: true }))
});

View File

@ -53,7 +53,6 @@
})();
document.addEventListener('setup', function(e) {
// JS-TOOLTIPS NOT USED CURRENTLY.
// initialize tooltips set via `data-tooltip`

View File

@ -18,9 +18,15 @@
})();
document.addEventListener('setup', function(e) {
if (e.detail.module && e.detail.module !== 'asidenav')
return;
var asidenavEl = e.detail.scope.querySelector('.main__aside');
window.utils.aside(asidenavEl);
});
document.addEventListener('DOMContentLoaded', function() {
document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'asidenav' }, bubbles: true, cancelable: true }))
});

View File

@ -69,6 +69,8 @@
})();
document.addEventListener('setup', function(e) {
if (e.detail.module && e.detail.module !== 'showHide')
return;
console.log('form setup', e.detail.scope);
@ -95,5 +97,8 @@ document.addEventListener('setup', function(e) {
});
return done;
}
});
document.addEventListener('DOMContentLoaded', function() {
document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'showHide' }, bubbles: true, cancelable: true }))
});

View File

@ -17,7 +17,7 @@ $newline never
$of NavbarAside
<li .navbar__list-item :highlight (urlRoute menuItemRoute):.navbar__list-item--active>
$if menuItemModal
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable=true data-dynamic=True>
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<a .navbar__link-wrapper href=#{route} ##{menuIdent}>
<i .fas.fa-#{fromMaybe "none" menuItemIcon}>
<div .navbar__link-label>_{SomeMessage menuItemLabel}
@ -29,14 +29,14 @@ $newline never
$of NavbarRight
<li .navbar__list-item :highlight (urlRoute menuItemRoute):.navbar__list-item--active>
$if menuItemModal
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable=true data-dynamic=True>
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<a .navbar__link-wrapper href=#{route} ##{menuIdent}>
<i .fas.fa-#{fromMaybe "none" menuItemIcon}>
<div .navbar__link-label>_{SomeMessage menuItemLabel}
$of NavbarSecondary
<li .navbar__list-item.navbar__list-item--secondary :highlight (urlRoute menuItemRoute):.navbar__list-item--active>
$if menuItemModal
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable=true data-dynamic=True>
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<a .navbar__link-wrapper href=#{route} ##{menuIdent}>
<i .fas.fa-#{fromMaybe "none" menuItemIcon}>
<div .navbar__link-label>_{SomeMessage menuItemLabel}

View File

@ -7,11 +7,11 @@ $if hasPageActions
$of PageActionPrime
<li .pagenav__list-item>
$if menuItemModal
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable=true data-dynamic=True>
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
$of PageActionSecondary
<li .pagenav__list-item>
$if menuItemModal
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable=true data-dynamic=True>
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
$of _