Debug javascript setup
This commit is contained in:
parent
213f3a39cc
commit
67f6103f87
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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 }))
|
||||
});
|
||||
|
||||
@ -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 }));
|
||||
});
|
||||
|
||||
@ -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 }));
|
||||
});
|
||||
|
||||
@ -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 }))
|
||||
});
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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 }))
|
||||
});
|
||||
|
||||
@ -53,7 +53,6 @@
|
||||
})();
|
||||
|
||||
document.addEventListener('setup', function(e) {
|
||||
|
||||
// JS-TOOLTIPS NOT USED CURRENTLY.
|
||||
|
||||
// initialize tooltips set via `data-tooltip`
|
||||
|
||||
@ -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 }))
|
||||
});
|
||||
|
||||
@ -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 }))
|
||||
});
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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 _
|
||||
|
||||
Loading…
Reference in New Issue
Block a user