updated Toast class

Author: AndyBitz

dev/js/hexer.js

@@ -20,7 +20,7 @@ hexer.prototype.init_u_area = function() {
 
 	this.inputfield.addEventListener('change', (e)=>{
 		if (e.target.files.length > 1) {
-			t.newToast('Only one file is allowed');
+			
 		}
 		this.fileHandler(e.target.files[0]);
 	});
@@ -44,7 +44,7 @@ hexer.prototype.init_u_area = function() {
 		e.preventDefault();
 
 		if (e.dataTransfer.files.length > 1) {
-			t.newToast('Only one file is allowed');
+			Toast('Only one file is allowed');
 		}
 
 		this.fileHandler(e.dataTransfer.files[0]);
@@ -66,12 +66,12 @@ hexer.prototype.readFile = function() {
 
 	fr.onloadstart = (e)=>{
 		document.getElementById('up-status').className = 'soft-blink';
-		t.newToast('Reading file.', toastt.SHORT);
+		Toast('Reading file.', Toast.SHORT);
 	};
 
 	fr.onloadend = (e)=>{
 		document.getElementById('up-status').className = 'done';
-		t.newToast('File has been read.', toastt.SHORT);
+		Toast('File has been read.', Toast.SHORT);
 		this.buffer = new Uint8Array(e.target.result);
 		this.createHexPage();
 	};
@@ -514,7 +514,7 @@ hexer.prototype.saveFile = function() {
 			document.getElementById('download-file').click();
 
 		} else {
-			t.newToast('You have to load a file in order to save it.', toastt.SHORT);
+			Toast('You have to load a file in order to save it.', Toast.SHORT);
 		}
 
 	});

dev/js/page.js

@@ -55,7 +55,7 @@ pages.prototype.loadPreviousPage = function(sp) {
 	let p = document.querySelector(`[data-page-id="${sp}"]`);
 	if (p == undefined) {
 		console.error("Back: Page does not exist!");
-		t.newToast("Back: Page does not exist!", toastt.SHORT);
+		Toast('Back: Page does not exist!', Toast.SHORT);
 	} else {
 		this.currentPage = sp;
 
@@ -72,7 +72,7 @@ pages.prototype.loadPageById = function(sp) {
 	let p = document.querySelector(`[data-page-id="${sp}"]`);
 	if (p == undefined) {
 		console.error("Page does not exist!");
-		t.newToast("Page does not exist!", toastt.SHORT);
+		Toast('Page does not exist!', Toast.SHORT);
 	} else {
 		this.previousPage.push(this.currentPage);
 		this.currentPage = sp;

dev/js/toast.js

@@ -1,35 +1,17 @@
-var toastt = {
-	LONG: 6000,
-	SHORT: 3200
-};
+function Toast(text, time=Toast.SHORT) {
 
-function toast() {
+	const cont = document.getElementById('toast-container');
+	const chil = document.createElement('div');
+	chil.className = 'toast';
+	chil.innerHTML = `<p>${text}</p>`;
 
-	this.toast = document.getElementById('toast');
-	this.next = [];
-	this.active = false;
-}
-
-toast.prototype.newToast = function(text, length) {
-
-	if (!this.active) {
-		this.active = true;
+	cont.appendChild(chil);
 
-		document.getElementById('toast-text').innerHTML = text;
-		this.toast.className = 'show';
+	setTimeout(()=>{
+		chil.remove();
+	}, time);
 
-		this.timer = setTimeout( ()=>{
-			this.toast.className += ' hide';
-			setTimeout( ()=>{
-				this.toast.className = '';
-				this.toastText = '';
-				this.active = false;
-			}, 250 );
-
-		}, length);
-
-	} else {
-		document.getElementById('toast-text').innerHTML += '<br>' + text;
-	}
+}
 
-};
+Toast.LONG	= 6000;
+Toast.SHORT	= 3200;

dev/js/zinit.js

@@ -19,7 +19,6 @@ window.addEventListener('click', (e)=>{
 	c = new config();
 	s = new settings();
 	p = new pages();
-	t = new toast();
 	h = new hexer();
 
 }();

dev/sass/modules/_toast.sass

@@ -1,43 +1,27 @@
-.toast-positioner
-	display: flex;
-	justify-content: center;
-
-#toast
+.toast-position
 	position: fixed;
-	bottom: -100%;
-	min-height: 60px;
-	color: $col-inv;
-	background-color: $col-font;
-	margin: 0 12px 12px 12px;
-	border-radius: 4px;
-	max-width: 730px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-
-	p
-		margin: 0;
-		padding: 12px 24px;
-		font-size: 1.2em;
-
-
-.show
-	animation: -show-toast 200ms forwards;
+	bottom: 0;
+	width: 100%;
 
-@keyframes -show-toast
-	0%
-		bottom: -100%;
-
-	100%
-		bottom: 0;
-
-.hide
-	animation: -hide-toast 200ms forwards;
-
-@keyframes -hide-toast
-	0%
-		bottom: 0;
-
-	100%
-		bottom: -100%;
+#toast-container
+	display: flex;
+	flex-direction: column;
+	transition: all 200ms ease-out;
+
+	.toast
+		margin: auto;
+		width: 100%;
+
+		@media #{$mq-desktop}
+			width: 420px;
+
+		background-color: $col-font;
+		margin-bottom: 12px;
+		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+		border-radius: 2px;
+
+		p
+			padding: 21px 36px;
+			margin: 0;
+			color: $col-inv;
+			font-size: 1.2em;

public/css/main.css

@@ -199,45 +199,30 @@ a {
   opacity: 1 !important;
   background-color: #4CAF50 !important; }
 
-.toast-positioner {
-  display: flex;
-  justify-content: center; }
-
-#toast {
+.toast-position {
   position: fixed;
-  bottom: -100%;
-  min-height: 60px;
-  color: #fefefe;
-  background-color: #333333;
-  margin: 0 12px 12px 12px;
-  border-radius: 4px;
-  max-width: 730px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
-  #toast p {
-    margin: 0;
-    padding: 12px 24px;
-    font-size: 1.2em; }
-
-.show {
-  animation: -show-toast 200ms forwards; }
-
-@keyframes -show-toast {
-  0% {
-    bottom: -100%; }
-  100% {
-    bottom: 0; } }
-
-.hide {
-  animation: -hide-toast 200ms forwards; }
+  bottom: 0;
+  width: 100%; }
 
-@keyframes -hide-toast {
-  0% {
-    bottom: 0; }
-  100% {
-    bottom: -100%; } }
+#toast-container {
+  display: flex;
+  flex-direction: column;
+  transition: all 200ms ease-out; }
+  #toast-container .toast {
+    margin: auto;
+    width: 100%;
+    background-color: #333333;
+    margin-bottom: 12px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+    border-radius: 2px; }
+    @media (min-width: 1200px) {
+      #toast-container .toast {
+        width: 420px; } }
+    #toast-container .toast p {
+      padding: 21px 36px;
+      margin: 0;
+      color: #fefefe;
+      font-size: 1.2em; }
 
 #hex-view {
   padding: 12px 0; }

public/index.html

@@ -232,9 +232,9 @@ <h2>Configuration</h2>
 		&copy; Andy Bitz 2017
 	</div>
 
-	<div class="toast-positioner">
-		<div id="toast">
-			<p id="toast-text"></p>
+	<div class="toast-position">
+		<div id="toast-container">
+
 		</div>
 	</div>
 

public/js/script.js

@@ -506,7 +506,7 @@ hexer.prototype.init_u_area = function() {
 
 	this.inputfield.addEventListener('change', (e)=>{
 		if (e.target.files.length > 1) {
-			t.newToast('Only one file is allowed');
+			
 		}
 		this.fileHandler(e.target.files[0]);
 	});
@@ -530,7 +530,7 @@ hexer.prototype.init_u_area = function() {
 		e.preventDefault();
 
 		if (e.dataTransfer.files.length > 1) {
-			t.newToast('Only one file is allowed');
+			Toast('Only one file is allowed');
 		}
 
 		this.fileHandler(e.dataTransfer.files[0]);
@@ -552,12 +552,12 @@ hexer.prototype.readFile = function() {
 
 	fr.onloadstart = (e)=>{
 		document.getElementById('up-status').className = 'soft-blink';
-		t.newToast('Reading file.', toastt.SHORT);
+		Toast('Reading file.', Toast.SHORT);
 	};
 
 	fr.onloadend = (e)=>{
 		document.getElementById('up-status').className = 'done';
-		t.newToast('File has been read.', toastt.SHORT);
+		Toast('File has been read.', Toast.SHORT);
 		this.buffer = new Uint8Array(e.target.result);
 		this.createHexPage();
 	};
@@ -1000,7 +1000,7 @@ hexer.prototype.saveFile = function() {
 			document.getElementById('download-file').click();
 
 		} else {
-			t.newToast('You have to load a file in order to save it.', toastt.SHORT);
+			Toast('You have to load a file in order to save it.', Toast.SHORT);
 		}
 
 	});
@@ -1063,7 +1063,7 @@ pages.prototype.loadPreviousPage = function(sp) {
 	let p = document.querySelector(`[data-page-id="${sp}"]`);
 	if (p == undefined) {
 		console.error("Back: Page does not exist!");
-		t.newToast("Back: Page does not exist!", toastt.SHORT);
+		Toast('Back: Page does not exist!', Toast.SHORT);
 	} else {
 		this.currentPage = sp;
 
@@ -1080,7 +1080,7 @@ pages.prototype.loadPageById = function(sp) {
 	let p = document.querySelector(`[data-page-id="${sp}"]`);
 	if (p == undefined) {
 		console.error("Page does not exist!");
-		t.newToast("Page does not exist!", toastt.SHORT);
+		Toast('Page does not exist!', Toast.SHORT);
 	} else {
 		this.previousPage.push(this.currentPage);
 		this.currentPage = sp;
@@ -1157,41 +1157,23 @@ settings.prototype.toggle = function() {
 
 };
 
-var toastt = {
-	LONG: 6000,
-	SHORT: 3200
-};
-
-function toast() {
-
-	this.toast = document.getElementById('toast');
-	this.next = [];
-	this.active = false;
-}
-
-toast.prototype.newToast = function(text, length) {
+function Toast(text, time=Toast.SHORT) {
 
-	if (!this.active) {
-		this.active = true;
+	const cont = document.getElementById('toast-container');
+	const chil = document.createElement('div');
+	chil.className = 'toast';
+	chil.innerHTML = `<p>${text}</p>`;
 
-		document.getElementById('toast-text').innerHTML = text;
-		this.toast.className = 'show';
+	cont.appendChild(chil);
 
-		this.timer = setTimeout( ()=>{
-			this.toast.className += ' hide';
-			setTimeout( ()=>{
-				this.toast.className = '';
-				this.toastText = '';
-				this.active = false;
-			}, 250 );
+	setTimeout(()=>{
+		chil.remove();
+	}, time);
 
-		}, length);
-
-	} else {
-		document.getElementById('toast-text').innerHTML += '<br>' + text;
-	}
+}
 
-};
+Toast.LONG	= 6000;
+Toast.SHORT	= 3200;
 var g, h, t, p, s, c;
 
 var mq = {
@@ -1213,7 +1195,6 @@ window.addEventListener('click', (e)=>{
 	c = new config();
 	s = new settings();
 	p = new pages();
-	t = new toast();
 	h = new hexer();
 
 }();