63 lines
2.1 KiB
JavaScript
63 lines
2.1 KiB
JavaScript
|
/**
|
||
|
|
* Toast — lightweight notification
|
||
|
|
* Usage: window.Toast.success('msg'), Toast.error('msg'), Toast.warning('msg'), Toast.info('msg')
|
||
|
|
* window.Toast.show('msg', { type: 'info', duration: 2500 })
|
||
|
|
*/
|
||
|
|
(function() {
|
||
|
|
var container = null;
|
||
|
|
var counter = 0;
|
||
|
|
|
||
|
|
function ensureContainer() {
|
||
|
|
if (container) return;
|
||
|
|
container = document.createElement('div');
|
||
|
|
container.className = 'ying-toast-container';
|
||
|
|
document.body.appendChild(container);
|
||
|
|
}
|
||
|
|
|
||
|
|
function remove(el, delay) {
|
||
|
|
setTimeout(function() {
|
||
|
|
el.classList.remove('ying-toast--visible');
|
||
|
|
el.addEventListener('transitionend', function onEnd(e) {
|
||
|
|
if (e.propertyName !== 'opacity') return;
|
||
|
|
el.removeEventListener('transitionend', onEnd);
|
||
|
|
if (el.parentNode) el.parentNode.removeChild(el);
|
||
|
|
});
|
||
|
|
}, delay);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.Toast = {
|
||
|
|
show: function(text, options) {
|
||
|
|
options = options || {};
|
||
|
|
var type = options.type || 'info';
|
||
|
|
var duration = options.duration || 2200;
|
||
|
|
|
||
|
|
ensureContainer();
|
||
|
|
|
||
|
|
var el = document.createElement('div');
|
||
|
|
el.className = 'ying-toast ying-toast--' + type;
|
||
|
|
el.textContent = text;
|
||
|
|
el.setAttribute('role', 'status');
|
||
|
|
el.setAttribute('aria-live', 'polite');
|
||
|
|
container.appendChild(el);
|
||
|
|
|
||
|
|
/* Force layout then animate in */
|
||
|
|
void el.offsetWidth;
|
||
|
|
el.classList.add('ying-toast--visible');
|
||
|
|
|
||
|
|
remove(el, duration);
|
||
|
|
},
|
||
|
|
|
||
|
|
success: function(text, duration) {
|
||
|
|
this.show(text, { type: 'success', duration: duration });
|
||
|
|
},
|
||
|
|
error: function(text, duration) {
|
||
|
|
this.show(text, { type: 'error', duration: duration });
|
||
|
|
},
|
||
|
|
warning: function(text, duration) {
|
||
|
|
this.show(text, { type: 'warning', duration: duration });
|
||
|
|
},
|
||
|
|
info: function(text, duration) {
|
||
|
|
this.show(text, { type: 'info', duration: duration });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
})();
|