(function() { 'use strict'; window.utils = window.utils || {}; var ALERT_INVISIBLE_CLASS = 'alert--invisible'; var TOGGLER_INVISIBLE_CLASS = 'alerts__toggler--visible'; 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 = 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); } 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 })) });