feat: added close icon to interactable toasts

Signed-off-by: Jonathan <theflametrooper@gmail.com>

example/index.js

@@ -1,27 +1,25 @@
 import Toast from "../dist/toasters.js";
 
 const TestNotification = new Toast({
-	content: "Test asdhasdasd",
+	content: "persistent",
 	persistent: true,
 	interactable: false
 });
 
-const TestNotification2 = new Toast({
-	content: "Hello World",
-	persistent: true,
-	interactable: true
-});
+// const TestNotification2 = new Toast({
+// 	content: "2",
+// 	persistent: true,
+// 	interactable: true
+// });
+
+// TestNotification2.hide();
+
+// setTimeout(() => {
+// 	TestNotification2.show();
+// }, 2000);
 
 const TestNotification3 = new Toast({
-	content: "Hello World",
-	persistent: true,
+	content: "lorem ispum lorem hello my name is lorem ispum lorem ispum lorem ispum lorem ispum ",
 	interactable: true
 });
 
-setTimeout(() => {
-	TestNotification.hide();
-
-	setTimeout(() => {
-		TestNotification.show();
-	}, 2000);
-}, 2000);

src/index.css

@@ -49,12 +49,15 @@ body {
 }
 
 .toast {
+	display: flex;
+    justify-content: space-between;
+	align-items: unset;
 	user-select: none;
 	z-index: 10000 !important;
 	cursor: pointer;
 	top: 0;
 	height: auto;
-	padding: 10px 25px;
+	padding: 10px 10px 10px 25px;
 	font-size: 1rem;
 	font-weight: 300;
 	width: var(--max-width);
@@ -70,3 +73,36 @@ body {
 .toast:not(:first-of-type) {
 	margin-top: 5px;
 }
+
+
+.close-icon {
+	min-width: 8px;
+	height: 8px;
+	padding: 8px;
+	position: relative;
+	margin-left: 5px;
+	opacity: 0.6;
+	border-radius: 100%;
+	background-color: rgb(34, 34, 34);
+}
+
+.close-icon:hover {
+	opacity: 1;
+}
+
+.close-icon:before, .close-icon:after {
+	position: absolute;
+	left: 11px;
+	content: ' ';
+	height: 8px;
+	width: 2px;
+	background-color: rgb(245, 245, 245);
+}
+
+.close-icon:before {
+	transform: rotate(45deg);
+}
+
+.close-icon:after {
+	transform: rotate(-45deg);
+}

src/toasters.js

@@ -10,11 +10,12 @@ export default class Toast {
 
 		this.visible = false;
 
-		this.content = content;
 		this.persistent = persistent !== undefined ? persistent : false;
 		this.timeout = timeout ? timeout : 6000;
 		this.interactable = interactable !== undefined ? interactable : true;
 
+		this.content = content;
+
 		if (!this.persistent) this.startTimer();
 
 		if (this.interactable) this.dragListener();
@@ -33,6 +34,18 @@ export default class Toast {
 		} else
 			this.element.innerHTML = this.content;
 
+		if (this.interactable) {
+			// create "close" icon
+			const closeIcon = document.createElement("span");
+			closeIcon.classList.add("close-icon");
+
+			// add "close" icon to toast
+			this.element.appendChild(closeIcon);
+
+			// detect click on "close" icon and therefore destroy the toast
+			this.element.children[0].addEventListener("click", () => this.destroy(), false);
+		}
+
 		this.visible = true;
 	}
 
@@ -86,7 +99,7 @@ export default class Toast {
 	}
 
 	handleInputLoss() {
-		if (this.element.style.opacity < 0.15) return this.destroy();
+		if (this.element.style.opacity && this.element.style.opacity < 0.15) return this.destroy();
 		else {
 			this.element.style.opacity = 1;
 			this.element.style.left = 0;