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

General js-setup framework & revert to fetch-based modals

Browse Source
This commit is contained in:
Gregor Kleen 2018-11-22 12:31:11 +01:00
parent fe2786c533
commit cffc7f9ad3
14 changed files with 139 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
templates/default-layout-wrapper.hamlet
View File

@ -17,4 +17,10 @@ $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}

4
templates/profile.julius
View File

@ -1,6 +1,6 @@
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('setup', function (e) {
var themeSelector = document.querySelector('#theme-select');
var themeSelector = e.detail.scope.querySelector('#theme-select');
themeSelector.addEventListener('change', function() {
// get rid of old themes on body
var options = Array.from(themeSelector.options)

6
templates/standalone/alerts.julius
View File

@ -76,8 +76,10 @@
})();
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('setup', function(e) {
// setup alerts
window.utils.alerts(document.querySelector('.alerts'));
var alertsEl = e.detail.scope.querySelector('.alerts');
if (alertsEl)
window.utils.alerts(alertsEl);
});

8
templates/standalone/datepicker.julius
View File

@ -1,4 +1,4 @@
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('setup', function(e) {
"use strict";
var config = {
@ -24,13 +24,13 @@ document.addEventListener('DOMContentLoaded', function() {
}
};
Array.from(document.querySelectorAll('input[type="date"]')).forEach(function(el) {
Array.from(e.detail.scope.querySelectorAll('input[type="date"]')).forEach(function(el) {
flatpickr(el, config.d);
});
Array.from(document.querySelectorAll('input[type="time"]')).forEach(function(el) {
Array.from(e.detail.scope.querySelectorAll('input[type="time"]')).forEach(function(el) {
flatpickr(el, config.t);
});
Array.from(document.querySelectorAll('input[type="datetime-local"]')).forEach(function(el) {
Array.from(e.detail.scope.querySelectorAll('input[type="datetime-local"]')).forEach(function(el) {
flatpickr(el, config.dtLocal);
});
});

10
templates/standalone/inputs.julius
View File

@ -113,25 +113,25 @@
})();
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('setup', function(e) {
// initialize checkboxes
Array.from(document.querySelectorAll('input[type="checkbox"]')).forEach(function(inp) {
Array.from(e.detail.scope.querySelectorAll('input[type="checkbox"]')).forEach(function(inp) {
window.utils.initializeCheckboxRadio(inp, 'checkbox');
});
// initialize radios
Array.from(document.querySelectorAll('input[type="radio"]')).forEach(function(inp) {
Array.from(e.detail.scope.querySelectorAll('input[type="radio"]')).forEach(function(inp) {
window.utils.initializeCheckboxRadio(inp, 'radio');
});
// initialize file-upload-fields
Array.from(document.querySelectorAll('input[type="file"]')).forEach(function(inp) {
Array.from(e.detail.scope.querySelectorAll('input[type="file"]')).forEach(function(inp) {
window.utils.initializeFileUpload(inp);
});
// initialize file-checkbox-fields
Array.from(document.querySelectorAll('.js-file-checkbox')).forEach(function(inp) {
Array.from(e.detail.scope.querySelectorAll('.js-file-checkbox')).forEach(function(inp) {
window.utils.reactiveFileCheckbox(inp);
});
});

150
templates/standalone/modal.julius
View File

@ -20,7 +20,7 @@
document.body.insertBefore(overlay, modal);
overlay.classList.add('modal__overlay--open');
if (modal.dataset.closeable === 'true') {
if ('closeable' in modal.dataset) {
closer.classList.add('modal__closer');
modal.insertBefore(closer, null);
closer.addEventListener('click', close, false);
@ -56,63 +56,106 @@
trigger.addEventListener('click', open, false);
}
if (modal.dataset.dynamic === 'True') {
// var dynamicContentURL = trigger.getAttribute('href');
// console.log(dynamicContentURL);
// if (dynamicContentURL.length > 0) {
// fetch(dynamicContentURL, {
// credentials: 'same-origin',
// }).then(function(response) {
// return response.text();
// }).then(function(body) {
// var modalContent = document.createElement('div');
// modalContent.innerHTML = body;
// var main = modalContent.querySelector('.main__content-body');
// if (main) {
// modal.appendChild(main);
// } else {
// replaceMe.innerHTML = body;
// }
// });
// }
if ('dynamic' in modal.dataset) {
var dynamicContentURL = trigger.getAttribute('href');
console.log(dynamicContentURL);
var frame = document.createElement('iframe');
frame.setAttribute('id', "frame-" + modal.getAttribute('id'));
modal.insertBefore(frame, null);
var resizeFrame = function() {
frame.style.visibility = 'hidden';
frame.style.height = '0';
var doc = frame.contentDocument ? frame.contentDocument : frame.contentWindow.document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
frame.style.height = height.toPrecision() + "px";
frame.style.visibility = 'visible';
frame.setAttribute("scrolling", "no");
doc.querySelectorAll("form").forEach(function(form) {
form.setAttribute("target", "_top");
});
};
frame.onload = function() {
frame.contentWindow.onresize = resizeFrame;
resizeFrame();
}
var url = "";
var i = dynamicContentURL.indexOf('?');
if (i === -1) {
url = dynamicContentURL + "?" + #{String modalParameter};
dynamicContentURL = dynamicContentURL + "?" + #{String modalParameter};
} else {
url = dynamicContentURL.slice(0,i) + "?" + #{String modalParameter} + "&" + dynamicContentURL.slice(i + 1);
dynamicContentURL = dynamicContentURL.slice(0,i) + "?" + #{String modalParameter} + "&" + dynamicContentURL.slice(i + 1);
}
console.log(dynamicContentURL);
frame.setAttribute('src', url);
if (dynamicContentURL.length > 0) {
fetch(dynamicContentURL, {
credentials: 'same-origin',
}).then(function(response) {
return response.text();
}).then(function(body) {
var modalContent = document.createElement('div');
modalContent.classList.add('modal__content');
modalContent.innerHTML = body;
var contentBody = modalContent.querySelector('.main__content-body');
var scriptTags = [];
if (contentBody) {
modalContent.querySelectorAll('script').forEach(function(scriptTag) {
if (Array.from(document.body.querySelectorAll('script')).some(function(haystack) {
if (haystack.text === scriptTag.text && haystack.getAttribute('src') === scriptTag.getAttribute('src')) {
return true;
}
return false;
})) { return }
console.log(scriptTag);
var scriptClone = document.createElement('script');
if (scriptTag.text)
scriptClone.text = striptTag.text;
if (scriptTag.hasAttributes()) {
var attrs = scriptTag.attributes;
for (var i = attrs.length - 1; i >= 0; i--) {
scriptClone.setAttribute(attrs[i].name, attrs[i].value);
}
}
document.body.insertBefore(scriptClone, null);
scriptTags.push(scriptClone);
});
modalContent.querySelectorAll('style').forEach(function(styleTag) {
if (Array.from(document.head.querySelectorAll('style')).some(function(haystack) {
return haystack.innerText === styleTag.innerText;
})) { return }
document.head.insertBefore(styleTag, null);
});
modalContent.querySelectorAll('link').forEach(function(linkTag) {
if (linkTag.getAttribute('rel') !== 'stylesheet')
return;
if (Array.from(document.head.querySelectorAll('link')).some(function(haystack) {
return haystack.getAttribute('href') === linkTag.getAttribute('href');
})) { return }
document.head.insertBefore(linkTag, null);
});
modalContent = contentBody;
}
var nudgeAttr = function(attr, x) {
var oldVal = x.getAttribute(attr);
var newVal = modal.getAttribute('id') + '__' + oldVal;
// console.log(oldVal, 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.appendChild(modalContent);
var triggerContentLoad = function() {
document.dispatchEvent(new CustomEvent('setup', {
detail: { scope: modalContent },
bubbles: true,
cancelable: true
}));
}
if (scriptTags.length !== 0) {
scriptTags.forEach(function(t) { t.onload = triggerContentLoad; });
}
triggerContentLoad();
});
}
}
// tell further modals, that this one already got initialized
modal.classList.add('js-modal-initialized');
@ -121,10 +164,11 @@
};
})();
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('setup', function(e) {
Array.from(document.querySelectorAll('.js-modal:not(.js-modal-initialized)')).map(function(modal) {
Array.from(e.detail.scope.querySelectorAll('.js-modal:not(.js-modal-initialized)')).map(function(modal) {
new utils.modal(modal);
});
}, false);

13
templates/standalone/modal.lucius
View File

@ -11,7 +11,7 @@ div.modal {
border-radius: 2px;
z-index: -1;
color: var(--color-font);
/* padding: 20px; */
padding: 20px;
padding-right: 65px;
overflow: auto;
transition: all .15s ease;
@ -24,17 +24,6 @@ div.modal {
z-index: 200;
transform: translate(-50%, -50%) scale(1, 1);
}
iframe {
height: calc(60vh);
width: 100%;
border-style: none;
overflow: auto;
[scrolling='no'] {
overflow: hidden;
}
}
}
@media (max-width: 1024px) {

4
templates/standalone/showHide.julius
View File

@ -6,7 +6,7 @@
* content here
*/
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('setup', function(e) {
var LSNAME = 'SHOW_HIDE';
@ -35,7 +35,7 @@ document.addEventListener('DOMContentLoaded', function() {
}
Array
.from(document.querySelectorAll('.js-show-hide__toggle'))
.from(e.detail.scope.querySelectorAll('.js-show-hide__toggle'))
.forEach(function(el) {
var index = el.dataset.shIndex || null;
el.parentElement.classList.toggle(

6
templates/standalone/tooltip.julius
View File

@ -52,17 +52,17 @@
})();
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('setup', function(e) {
// JS-TOOLTIPS NOT USED CURRENTLY.
// initialize tooltips set via `data-tooltip`
// Array.from(document.querySelectorAll('[data-tooltip]')).forEach(function(el) {
// Array.from(e.detail.scope.querySelectorAll('[data-tooltip]')).forEach(function(el) {
// window.utils.tooltipFromAttribute(el)
// });
// initialize tooltips
// Array.from(document.querySelectorAll('.js-tooltip')).forEach(function(tt) {
// Array.from(e.detail.scope.querySelectorAll('.js-tooltip')).forEach(function(tt) {
// window.utils.tooltip(tt);
// });
});

7
templates/table/layout.julius
View File

@ -1,7 +1,7 @@
(function collonadeClosure() {
'use strict';
document.addEventListener('DOMContentLoaded', function DOMContentLoaded() {
document.addEventListener('setup', function DOMContentLoaded(e) {
function setupAsync(wrapper) {
@ -71,7 +71,8 @@
}
}
var selector = '#' + #{String $ dbtIdent} + '-table-wrapper';
setupAsync(document.querySelector(selector));
var wrapperEl = e.detail.scope.querySelector('#' + #{String $ dbtIdent} + '-table-wrapper');
if (wrapperEl)
setupAsync(wrapperEl);
});
})();

4
templates/widgets/asidenav.julius
View File

@ -17,9 +17,9 @@
};
})();
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('setup', function(e) {
var asidenavEl = document.querySelector('.main__aside');
var asidenavEl = e.detail.scope.querySelector('.main__aside');
window.utils.aside(asidenavEl);

8
templates/widgets/form.julius
View File

@ -55,6 +55,8 @@
function addEventListeners() {
fields.forEach(function(field) {
console.log('interactiveFieldset', 'addEventListeners', field);
field.condEl.addEventListener('input', updateFields)
});
}
@ -66,9 +68,11 @@
};
})();
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('setup', function(e) {
var forms = document.querySelectorAll('form');
console.log('form setup', e.detail.scope);
var forms = e.detail.scope.querySelectorAll('form');
Array.from(forms).forEach(function(form) {
// auto reactiveButton submit-buttons with required fields
var submitBtns = Array.from(form.querySelectorAll('[type=submit]'));

2
templates/widgets/modal.hamlet
View File

@ -1,4 +1,4 @@
<div .modal.js-modal #modal-#{modalId} data-trigger=#{triggerId} data-closeable=true data-dynamic=#{modalDynamic}>
<div .modal.js-modal #modal-#{modalId} data-trigger=#{triggerId} data-closeable :modalDynamic:data-dynamic>
$case modalContent
$of Right content
^{content}

4
templates/widgets/navbar.julius
View File

@ -26,6 +26,6 @@
})();
document.addEventListener('DOMContentLoaded', function () {
// utils.stickynav(document.querySelector('.js-sticky-navbar'));
document.addEventListener('setup', function (e) {
// utils.stickynav(e.detail.scope.querySelector('.js-sticky-navbar'));
});