Merge branch 'toast'

scripts/startup/preload.js

@@ -1,9 +1,11 @@
 const os = require('os');
+const moment = require('../dep/moment');
 
 const setButtons = require('./setbuttons');
 const hideContext = require('../contextmenu/hidecontext');
 const lightRefresh = require('../fileview/lightrefresh');
 const checkDir = require('../fileview/checkdir');
+const createToast = require('../toast/createtoast');
 
 window.addEventListener('DOMContentLoaded', () => {
     window.kade = {
@@ -38,6 +40,9 @@ window.addEventListener('DOMContentLoaded', () => {
     window.kade.checkDirInterval = setInterval(checkDir, 5000);
 
     require('../keybinds/handleKey')();
+
+    setTimeout(() => {createToast("Welcome", [`Today is ${moment().format('MMMM Do, YYYY')}`, `The time is ${moment().format('h:mma')}`], '#5d60ca', false, 10);}, 1000);
+    setTimeout(() => {createToast("Welcome", ["Welcome to FileKade!", "App by WubzyGD", "Alpha/Pre-release Build"], '#5d60ca', false, 10);}, 1300);
 });
 
 window.addEventListener('contextmenu', e => {

scripts/toast/createtoast.js

@@ -1,3 +1,5 @@
+const removeToast = require('./removetoast');
+
 module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5, onclick = () => {}, selectable = false) => {
     if (!name || !text) {return;}
     if (!Array.isArray(text)) {text = [text];}
@@ -5,10 +7,15 @@ module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5,
     toast.className = 'toast';
     toast.style.backgroundColor = `${bg}c2`;
     toast.style.borderColor = `${bg}c2`;
+    toast.classList.add('toast-entering');
     toast.onmouseenter = () => {toast.style.backgroundColor = bg;};
     toast.onmouseleave = () => {toast.style.backgroundColor = `${bg}c2`;};
+    let continueTimeout = true;
     toast.onclick = () => {
-        if (!persistOnClick) {}
+        if (!persistOnClick) {
+            removeToast(toast);
+            continueTimeout = false;
+        }
         onclick();
     };
     document.getElementById('toast-container').appendChild(toast);
@@ -25,4 +32,5 @@ module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5,
         }
         else {toast.appendChild(document.createElement('br'));}
     }
+    setTimeout(() => {if (continueTimeout) {removeToast(toast);}}, time * 1000);
 };

scripts/toast/removetoast.js

@@ -0,0 +1,5 @@
+module.exports = (toast) => {
+    toast.classList.remove('toast-entering');
+    toast.classList.add('toast-leaving');
+    toast.onanimationend = () => {toast.remove();};
+};

styles/toast.css

@@ -8,6 +8,16 @@
         transform: translateX(0);
     }
 }
+@keyframes leave-toast {
+    to {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    from {
+        opacity: 100;
+        transform: translateX(0);
+    }
+}
 
 #toast-container {
     position: fixed;
@@ -39,6 +49,16 @@
     border-color: white;
 }
 
+.toast-entering {
+    animation: enter-toast .25s ease-out 1;
+    animation-fill-mode: both;
+}
+
+.toast-leaving {
+    animation: leave-toast .25s ease-out 1;
+    animation-fill-mode: both;
+}
+
 .toast p {
     font-family: 'Montserrat', sans-serif;
     margin: 8px;