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