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 {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", () => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue