create OOBE popup

This commit is contained in:
buzz-lightsnack-2007 2024-05-13 23:49:30 +08:00
parent dc5a2e91cd
commit 1e8db3dee4
2 changed files with 78 additions and 0 deletions

26
pages/popup/hello.htm Normal file
View 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
View 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();