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