feat: 'visible' can now be an option and behaves the same as show()/hide()

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

README.md

@@ -44,6 +44,7 @@ new Toast({
 | **`persistent`** | Boolean | `false` | Whether or not the toast is persistent. |
 | **`interactable`** | Boolean | `true` | If the toast can be manually closed or not. |
 | **`timeout`** | Number | `6000` | How long till the toast disappears. *Note: will be ignored if the toast is persistent.* |
+| **`visible`** | Boolean | `true` | If the toast will be visible when instantiated. |
 
 ## Potential future additions
 

example/index.js

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

src/toasters.js

@@ -4,23 +4,34 @@ let incrementer = 0;
 
 export default class Toast {
 	// should add type checking
-	constructor({ content, persistent, interactable, timeout }) {
+	constructor({ content, persistent, interactable, timeout, visible }) {
 		this.identifier = `toast-${incrementer}`;
 		incrementer++;
 
-		this.visible = false;
-
 		this.persistent = persistent !== undefined ? persistent : false;
 		this.timeout = timeout ? timeout : 6000;
 		this.interactable = interactable !== undefined ? interactable : true;
 
 		this.content = content;
 
+		this.visible = visible !== undefined ? visible : true;
+
 		if (!this.persistent) this.startTimer();
 
 		if (this.interactable) this.dragListener();
 	}
 
+	get visible() {
+		return this._visible;
+	}
+
+	set visible(value) {
+		this._visible = value;
+
+		if (!this.visible) this.hide();
+		else this.show();
+	}
+
 	get content() {
 		return this._content;
 	}
@@ -45,8 +56,6 @@ export default class Toast {
 			// detect click on "close" icon and therefore destroy the toast
 			this.element.children[0].addEventListener("click", () => this.destroy(), false);
 		}
-
-		this.visible = true;
 	}
 
 	startTimer() {
@@ -121,16 +130,12 @@ export default class Toast {
 	}
 
 	show() {
-		if (!this.visible) {
-			this.element.style.display = "flex";
-			this.visible = true;
-		}
+		this.element.style.display = "flex";
+		if (!this.visible) this.visible = true;
 	}
 
 	hide() {
-		if (this.visible) {
-			this.element.style.display = "none";
-			this.visible = false;
-		}
+		this.element.style.display = "none";
+		if (this.visible) this.visible = false;
 	}
 }