documentation for alerts and configurable auto-disappearing

This commit is contained in:
Felix Hamann 2018-07-06 00:23:23 +02:00
parent 8227672fa6
commit cc64fe2e40
2 changed files with 21 additions and 2 deletions

View File

@ -5,6 +5,11 @@
window.utils.alert = function(alertEl) {
var closeEl = document.createElement('DIV');
var dataDecay = alertEl.dataset.decay;
var autoDecay = 3;
if (dataDecay) {
autoDecay = parseInt(dataDecay, 10);
}
closeEl.classList.add('alert__close');
closeEl.innerText = #{String (messageRender MsgCloseAlert)};
closeEl.addEventListener('click', function(event) {
@ -13,10 +18,10 @@
alertEl.insertBefore(closeEl, alertEl.children[0]);
// auto-hide info and success-alerts after 3 seconds
if (!alertEl.matches('.alert-danger, .alert-warning')) {
if (autoDecay > 0 && !alertEl.matches('.alert-danger, .alert-warning')) {
window.setTimeout(function() {
alertEl.classList.add('alert--invisible');
}, 3000);
}, autoDecay * 1000);
}
}

View File

@ -1,4 +1,18 @@
/* ALERTS */
/**
.alert
Regular Info Alert
Disappears automatically after 3 seconds
Disappears after x seconds if sepcified via data-alert-decay='x'
Can be told not to disappear with data-alert-decay='0'
.alert-warning, .alert-error
Warning or Error alert
Don't disappear, only difference is color
.alert-warning is orange regardless of user's selected theme
.alert-error is red regardless of user's selected theme
*/
.alerts {
position: fixed;
bottom: 5%;