seperate loader
This commit is contained in:
parent
75a98bd384
commit
d52847635f
2 changed files with 60 additions and 6 deletions
56
scripts/GUI/loader.js
Normal file
56
scripts/GUI/loader.js
Normal 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}%`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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", () => {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue