let toaster = function(text){
navigator.mozApps.getSelf().onsuccess = function(e) {
var app = e.target.result;
app.connect('systoaster').then(function(conns) {
conns.forEach(function(conn) {
conn.postMessage({message: text});
});
});
}
}
//by arma7x[8110]
var queue = [];
var timeout;
function toaster(text, time) {
const len = queue.length;
queue.push({ text: text, time: time });
if (len === 0) {
toast_q(text, time);
}
}
function toast_q(text, time) {
var x = document.getElementById("toast");
x.innerHTML = queue[0].text;
x.style.transform = "translate(0px, 10px)";
timeout = setTimeout(function () {
timeout = null;
x.style.transform = "translate(0px, -100px)";
queue = queue.slice(1);
if (queue.length > 0) {
setTimeout(() => {
toast_q(text, time);
}, 1000);
}
}, time);
}
toaster("hey", 3000)//call;
CSS:
/* ============== Toast ============== */
.kui-toast {
animation: toaster 0.3s;
height: 42px;
line-height: 42px;
color: #fff;
text-align: center;
background-color: #323232;
width: 100%;
position: fixed;
top: 0;
display: none;
}
.kui-toast .kui-pri {
margin: 0;
}
.kui-toast-shadow {
height: 6px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
}
@keyframes toaster {
from {
transform: translateY(-50px);
}
to {
transform: none;
}
}
@keyframes gatst {
from {
transform: none;
}
to {
transform: translateY(-50px);
}
}
.byetoast {
animation: gatst 0.5s;
}
function showToast(text,time) {
document.querySelector(".kui-toast").style.display = "block";
document.querySelector(".kui-pri").innerHTML = text;
setTimeout(function() {
document.querySelector(".kui-toast").classList.add("byetoast")
setTimeout(function() {
document.querySelector(".kui-toast").style.display = "none";
document.querySelector(".kui-toast").classList.remove("byetoast");
}, 500);
}, time);
}
<div class="kui-toast">
<p class="kui-pri">This is a toast message.</p>
</div>