84 lines
2.3 KiB
Plaintext
84 lines
2.3 KiB
Plaintext
(function() {
|
|
'use strict';
|
|
|
|
window.utils = window.utils || {};
|
|
|
|
var ALERT_INVISIBLE_CLASS = 'alert--invisible';
|
|
var TOGGLER_INVISIBLE_CLASS = 'alerts__toggler--visible';
|
|
|
|
window.utils.alerts = function(alertsEl) {
|
|
|
|
var alerts = Array.from(alertsEl.querySelectorAll('.alert'));
|
|
var toggler;
|
|
var showingToggler = false;
|
|
|
|
function makeToggler() {
|
|
toggler = document.createElement('DIV');
|
|
toggler.classList.add('alerts__toggler');
|
|
toggler.addEventListener('click', function() {
|
|
alerts.forEach(function(alert) {
|
|
alert.classList.remove(ALERT_INVISIBLE_CLASS);
|
|
toggler.classList.remove(TOGGLER_INVISIBLE_CLASS);
|
|
});
|
|
checkToggler();
|
|
});
|
|
alertsEl.appendChild(toggler);
|
|
}
|
|
|
|
function makeAlert(alertEl) {
|
|
var iconEl = document.createElement('DIV');
|
|
var closeEl = document.createElement('DIV');
|
|
var dataDecay = alertEl.dataset.decay;
|
|
var autoDecay = 30;
|
|
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);
|
|
}
|
|
}
|
|
|
|
function closeAlert(alertEl) {
|
|
alertEl.classList.add(ALERT_INVISIBLE_CLASS);
|
|
checkToggler();
|
|
}
|
|
|
|
function checkToggler() {
|
|
var hidden = true;
|
|
alerts.forEach(function(alert) {
|
|
if (hidden && !alert.classList.contains(ALERT_INVISIBLE_CLASS)) {
|
|
hidden = false;
|
|
}
|
|
});
|
|
if (!showingToggler) {
|
|
showingToggler = true;
|
|
window.setTimeout(function() {
|
|
toggler.classList.toggle(TOGGLER_INVISIBLE_CLASS, hidden);
|
|
showingToggler = false;
|
|
}, 120);
|
|
}
|
|
}
|
|
|
|
makeToggler();
|
|
alerts.map(makeAlert);
|
|
}
|
|
|
|
})();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// setup alerts
|
|
window.utils.alerts(document.querySelector('.alerts'));
|
|
});
|