create OOBE popup
This commit is contained in:
		
							parent
							
								
									dc5a2e91cd
								
							
						
					
					
						commit
						1e8db3dee4
					
				
					 2 changed files with 78 additions and 0 deletions
				
			
		
							
								
								
									
										26
									
								
								pages/popup/hello.htm
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										26
									
								
								pages/popup/hello.htm
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,26 @@ | ||||||
|  | <html> | ||||||
|  | 	<head> | ||||||
|  | 		<title for="hello"></title> | ||||||
|  | 		<script src="/scripts/pages/hello.js" type="module"></script> | ||||||
|  | 		<script src="/styles/external/materialize/js/materialize.js"></script> | ||||||
|  | 	</head> | ||||||
|  | 	<body> | ||||||
|  | 		<main class="container"> | ||||||
|  | 			<ul class="collapsible"> | ||||||
|  | 				<li id="OOBE_Hello"> | ||||||
|  | 					<header class="collapsible-header waves-effect"><h1 for="hello" class="flow-text"></h1></header> | ||||||
|  | 					<section class="collapsible-body"> | ||||||
|  | 						<h2 for="GUI_welcome_headline" class="flow-text"></h2> | ||||||
|  | 					</section> | ||||||
|  | 				</li> | ||||||
|  | 				<li id="OOBE_APISetup"> | ||||||
|  | 					<header class="collapsible-header"><span for="OOBE_header_APISetup"></span></header> | ||||||
|  | 					<section class="collapsible-body"> | ||||||
|  | 
 | ||||||
|  | 						<label id="tip" for="OOBE_tip_seeAgain"></label> | ||||||
|  | 					</section> | ||||||
|  | 				</li> | ||||||
|  | 			</ul> | ||||||
|  | 		</main> | ||||||
|  | 	</body> | ||||||
|  | </html> | ||||||
							
								
								
									
										52
									
								
								scripts/pages/hello.js
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										52
									
								
								scripts/pages/hello.js
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,52 @@ | ||||||
|  | /* | ||||||
|  | 	hello.js | ||||||
|  | 	Build the interface for the welcome and configuration page.  | ||||||
|  | */ | ||||||
|  | 
 | ||||||
|  | // Import modules.
 | ||||||
|  | import {global} from "/scripts/secretariat.js"; | ||||||
|  | import Page from "/scripts/pages/page.js"; | ||||||
|  | import texts from "/scripts/mapping/read.js"; | ||||||
|  | import filters from "/scripts/filters.js"; | ||||||
|  | import logging from "/scripts/logging.js"; | ||||||
|  | 
 | ||||||
|  | class Page_MiniConfig extends Page { | ||||||
|  | 	constructor () { | ||||||
|  | 		super(); | ||||||
|  | 		this.#get(); | ||||||
|  | 		this.content(); | ||||||
|  | 	}; | ||||||
|  | 
 | ||||||
|  | 	/* | ||||||
|  | 	Get all elements needed for content(). | ||||||
|  | 	*/ | ||||||
|  | 	#get() { | ||||||
|  | 		this.elements = (this.elements) ? this.elements : {}; | ||||||
|  | 		this.elements[`1`] = (this.elements[`1`]) ? this.elements[`1`] : {}; | ||||||
|  | 
 | ||||||
|  | 		this.elements[`1`]["headline"] = document.querySelectorAll(`[for="GUI_welcome_headline"]`); | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	/* | ||||||
|  | 	Build the additional content for the page.  | ||||||
|  | 	*/ | ||||||
|  | 	content() { | ||||||
|  | 		if (this.elements[`1`][`headline`].length) { | ||||||
|  | 			let RANDOM = Math.floor(Math.random() * 2) + 1; | ||||||
|  | 			(this.elements[`1`]["headline"]).forEach((ELEMENT) => { | ||||||
|  | 				console.log(RANDOM, texts.localized(`OOBE_welcome_headline_`.concat(String(RANDOM)))); | ||||||
|  | 				ELEMENT.textContent = texts.localized(`OOBE_welcome_headline_`.concat(String(RANDOM))); | ||||||
|  | 			}); | ||||||
|  | 		}; | ||||||
|  | 	}; | ||||||
|  | 
 | ||||||
|  | 	/* | ||||||
|  | 	Assist with navigation.  | ||||||
|  | 	*/ | ||||||
|  | 	navigate() { | ||||||
|  | 		this.navigation = (this.navigation) ? this.navigation : {}; | ||||||
|  | 		this.navigation.selection = (this.navigation.selection) ? this.navigation.selection : 0; | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | new Page_MiniConfig(); | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue