From d52847635f564e156b0ff45268bece5667bd3b1e Mon Sep 17 00:00:00 2001
From: buzz-lightsnack-2007
 <73412182+buzz-lightsnack-2007@users.noreply.github.com>
Date: Tue, 23 Apr 2024 21:53:44 +0800
Subject: [PATCH] seperate loader

---
 scripts/GUI/loader.js  | 56 ++++++++++++++++++++++++++++++++++++++++++
 scripts/pages/popup.js | 10 +++-----
 2 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 scripts/GUI/loader.js

diff --git a/scripts/GUI/loader.js b/scripts/GUI/loader.js
new file mode 100644
index 0000000..ac097fa
--- /dev/null
+++ b/scripts/GUI/loader.js
@@ -0,0 +1,56 @@
+import texts from "/scripts/strings/read.js";
+
+export default class Loader {
+     /* Link a loading screen. 
+     
+     @param {float} progress the current progress
+     */
+     constructor(progress) {
+          this.#element();
+          this.#content();
+          this.update(progress);
+     }
+
+     #element() {
+          this.elements = {};
+          (document.querySelector(`[for="loading"]`)) ? this.elements[`message`] = (document.querySelectorAll(`[for="loading"]`)) : null;
+          (document.querySelector(`[data-value="progress"]`)) ? this.elements[`bar`] = (document.querySelectorAll(`[data-value="progress"]`)) : null;
+     }
+
+     #content() {
+          if (this.elements[`message`] ? (this.elements[`message`].length > 0) : false) {
+               let MESSAGE_LOADING = {};
+               MESSAGE_LOADING[`index`] = Math.random() * (10**2);
+               MESSAGE_LOADING[`index`] = parseInt(MESSAGE_LOADING[`index`] / ((MESSAGE_LOADING[`index`] > 10) ? 10 : 1));
+               MESSAGE_LOADING[`message`] = (new texts(`message_loading_`.concat(MESSAGE_LOADING[`index`]))).localized;
+
+               (this.elements[`message`]).forEach(ELEMENT => {
+                    ELEMENT.textContent = MESSAGE_LOADING[`message`];
+               });
+		}
+     }
+
+     /* Update the status bar. 
+     
+     @param {float} progress the current progress
+     */
+     update(progress) {
+          this.progress = (progress != null && (typeof progress).includes(`num`)) ? Math.abs(progress) : null;
+
+          if (this.elements[`bar`] ? (this.elements[`bar`].length > 0) : false) {
+               (this.elements[`bar`]).forEach(ELEMENT => {
+                    if (ELEMENT.tagName.toLowerCase().includes(`progress`) || (ELEMENT.tagName.toLowerCase().includes(`input`) && ((ELEMENT.hasAttribute(`type`)) ? (ELEMENT.getAttribute(`type`).toLowerCase().includes(`range`)) : false))) {
+                         ELEMENT.setAttribute(`value`, (this.progress / 100));
+                         (!ELEMENT.hasAttribute(`min`)) ? ELEMENT.setAttribute(`min`, 0) : false;
+                         (!ELEMENT.hasAttribute(`max`)) ? ELEMENT.setAttribute(`max`, 100) : false;
+                    } else if (ELEMENT.tagName.toLowerCase().includes(`input`)) {
+                         ELEMENT.setAttribute(`value`, this.progress);
+                    } else if (ELEMENT.classList.contains(`progress`)) {
+                         ELEMENT.querySelector(`*`).style.width = `${this.progress}%`;
+                    } else {
+                         ELEMENT.innerText = `${this.progress}%`;
+                    }
+               });
+          }
+     }
+}
\ No newline at end of file
diff --git a/scripts/pages/popup.js b/scripts/pages/popup.js
index a084028..b27eeec 100644
--- a/scripts/pages/popup.js
+++ b/scripts/pages/popup.js
@@ -4,22 +4,20 @@
 
 // Import modules.
 import {read, forget} from "/scripts/secretariat.js";
-import windowman from "/scripts/GUI/windowman.js";
 import Window from "/scripts/GUI/window.js";
 import Page from "/scripts/pages/page.js";
-import texts from "/scripts/strings/read.js";
+import Loader from "/scripts/GUI/loader.js";
 
 class Page_Popup extends Page {
 	constructor() {
 		super();
 		(this.events) ? this.events() : false;
+		this.content();
 	};
 
 	content() {
-		if (document.querySelector(`[data-text="loading_text"]`)) {
-			document.querySelector(`[data-text="loading_text"]`).textContent = (new texts())
-		}
-	}
+		this.loading = new Loader();
+	};
 
 	events() {
 		(document.querySelector(`[data-action="open,settings"]`)) ? document.querySelector(`[data-action="open,settings"]`).addEventListener("click", () => {