JSFiddle - React, Tailwind, and code Playground
HTML
<button id="start">Click me!</button>
JavaScript
"use strict";
/*
Usage:
TsNotification.notify("HTML message here");
*/
var TsNotification;
if (window.requestAnimationFrame && window.performance && window.performance.now) {
TsNotification = new (function() {
// Configuration.
var DURATION_MS = 1500;
var NOTIFICATION_STYLE = "display: none; position: absolute; top: 4px; right: 4px; border: 1px solid #BABAAC; background: #EDEDDB; color: #000; padding: 4px;";
// Working data.
var self = this;
var queue = [];
var notify_window = document.createElement("div");
notify_window.setAttribute("style", NOTIFICATION_STYLE);
var a_start_time = null;
var is_animating = false;
var inserted_notify_window = false;
var current_text = "";
this.notify = function(text) {
if (is_animating) {
if (text != current_text) queue.push(text);
}else{
is_animating = true;
if (!inserted_notify_window) {
inserted_notify_window = true;
document.body.appendChild(notify_window);
}
notify_window.innerHTML = text;
current_text = text;
notify_window.style.display = "block";
window.setTimeout(close, DURATION_MS);
}
}
function close() {
a_start_time = window.performance.now();
window.requestAnimationFrame(animate_close);
}
function animate_close(time) {
var diff = time - a_start_time;
if (diff < DURATION_MS) {
notify_window.style.opacity = 1 - diff / DURATION_MS;
window.requestAnimationFrame(animate_close);
}else{
is_animating = false;
a_start_time = null;
notify_window.style.display = "none";
notify_window.style.opacity = 1;
var new_text, found = false;
while((queue.length !== 0) && !found) {
new_text = queue.shift();
if (new_text !== current_text) found = true;
}
if (found) {
self.notify(new_text);
}
}
}
});
}else{
// stub
TsNotification = new (function() {
this.notify = function(text) {}
});
console.log("TsNotification is disabled: browser does not support required...