seperate loader

This commit is contained in:
buzz-lightsnack-2007 2024-04-23 21:53:44 +08:00
parent 75a98bd384
commit d52847635f
2 changed files with 60 additions and 6 deletions

56
scripts/GUI/loader.js Normal file
View file

@ -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}%`;
}
});
}
}
}

View file

@ -4,22 +4,20 @@
// Import modules. // Import modules.
import {read, forget} from "/scripts/secretariat.js"; import {read, forget} from "/scripts/secretariat.js";
import windowman from "/scripts/GUI/windowman.js";
import Window from "/scripts/GUI/window.js"; import Window from "/scripts/GUI/window.js";
import Page from "/scripts/pages/page.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 { class Page_Popup extends Page {
constructor() { constructor() {
super(); super();
(this.events) ? this.events() : false; (this.events) ? this.events() : false;
this.content();
}; };
content() { content() {
if (document.querySelector(`[data-text="loading_text"]`)) { this.loading = new Loader();
document.querySelector(`[data-text="loading_text"]`).textContent = (new texts()) };
}
}
events() { events() {
(document.querySelector(`[data-action="open,settings"]`)) ? document.querySelector(`[data-action="open,settings"]`).addEventListener("click", () => { (document.querySelector(`[data-action="open,settings"]`)) ? document.querySelector(`[data-action="open,settings"]`).addEventListener("click", () => {