102 lines
3.1 KiB
Plaintext
102 lines
3.1 KiB
Plaintext
(function() {
|
|
'use strict';
|
|
|
|
window.utils = window.utils || {};
|
|
|
|
var ALERT_INVISIBLE_CLASS = 'alert--invisible';
|
|
var TOGGLER_INVISIBLE_CLASS = 'alerts__toggler--visible';
|
|
var ALERT_AUTO_DISAPPEAR_DELAY = 10;
|
|
|
|
var alertsShowingToggler = false;
|
|
|
|
window.utils.alerts = function(alertsEl) {
|
|
|
|
var toggler = alertsEl.querySelector('.alerts__toggler');
|
|
|
|
function makeToggler() {
|
|
toggler = document.createElement('DIV');
|
|
toggler.classList.add('alerts__toggler');
|
|
toggler.addEventListener('click', function() {
|
|
Array.from(alertsEl.querySelectorAll('.alert')).forEach(function(alert) {
|
|
alert.classList.remove(ALERT_INVISIBLE_CLASS);
|
|
toggler.classList.remove(TOGGLER_INVISIBLE_CLASS);
|
|
});
|
|
checkToggler();
|
|
});
|
|
alertsEl.appendChild(toggler);
|
|
alertsEl.classList.add('js-initialized');
|
|
}
|
|
|
|
function makeAlert(alertEl) {
|
|
var iconEl = document.createElement('DIV');
|
|
var closeEl = document.createElement('DIV');
|
|
var dataDecay = alertEl.dataset.decay;
|
|
var autoDecay = ALERT_AUTO_DISAPPEAR_DELAY;
|
|
if (dataDecay) {
|
|
autoDecay = parseInt(dataDecay, 10);
|
|
}
|
|
iconEl.classList.add('alert__icon');
|
|
closeEl.classList.add('alert__close');
|
|
closeEl.addEventListener('click', function(event) {
|
|
closeAlert(alertEl);
|
|
});
|
|
alertEl.insertBefore(iconEl, alertEl.children[0]);
|
|
alertEl.insertBefore(closeEl, alertEl.children[0]);
|
|
|
|
// auto-hide info and success-alerts after 3 seconds
|
|
if (autoDecay > 0 && !alertEl.matches('.alert-warning, .alert-error')) {
|
|
window.setTimeout(function() {
|
|
closeAlert(alertEl);
|
|
}, autoDecay * 1000);
|
|
}
|
|
|
|
alertEl.classList.add('js-initialized');
|
|
}
|
|
|
|
function closeAlert(alertEl) {
|
|
alertEl.classList.add(ALERT_INVISIBLE_CLASS);
|
|
checkToggler();
|
|
}
|
|
|
|
function checkToggler() {
|
|
var hidden = true;
|
|
Array.from(alertsEl.querySelectorAll('.alert')).forEach(function(alert) {
|
|
if (hidden && !alert.classList.contains(ALERT_INVISIBLE_CLASS)) {
|
|
hidden = false;
|
|
}
|
|
});
|
|
if (!alertsShowingToggler) {
|
|
alertsShowingToggler = true;
|
|
window.setTimeout(function() {
|
|
toggler.classList.toggle(TOGGLER_INVISIBLE_CLASS, hidden);
|
|
alertsShowingToggler = false;
|
|
}, 120);
|
|
}
|
|
}
|
|
|
|
if (!alertsEl.classList.contains('js-initialized') || !toggler)
|
|
makeToggler();
|
|
Array.from(alertsEl.querySelectorAll('.alert:not(.js-initialized)')).map(makeAlert);
|
|
}
|
|
|
|
})();
|
|
|
|
document.addEventListener('setup', function(e) {
|
|
if (e.detail.module && e.detail.module !== 'alerts')
|
|
return;
|
|
|
|
|
|
// setup alerts
|
|
if (e.detail.scope.classList.contains('alerts')) {
|
|
window.utils.alerts(e.detail.scope);
|
|
} else {
|
|
var alertsEl = e.detail.scope.querySelector('.alerts');
|
|
if (alertsEl)
|
|
window.utils.alerts(alertsEl);
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'alerts' }, bubbles: true, cancelable: true }))
|
|
});
|