You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.5 KiB
75 lines
2.5 KiB
/**
|
|
* This file is part of the jps-like-websites lib
|
|
* URL: https://git.labos.goip.de/chris/jpc-like-websites
|
|
* @copyright by its creator Christian Martin
|
|
*/
|
|
|
|
|
|
/**
|
|
* The class provides overreaching options for building the website.
|
|
* @extends ScriptAndStyleContext
|
|
*/
|
|
class PageBuilder extends ScriptAndStyleContext {
|
|
#autoRegisteredComponents;
|
|
#registeredComponents;
|
|
|
|
constructor() {
|
|
super();
|
|
this.#autoRegisteredComponents = [];
|
|
this.#registeredComponents = [];
|
|
}
|
|
|
|
autoRegisterComponent() {
|
|
let compName = 'comp-el-' + this.#autoRegisteredComponents.length;
|
|
this.#autoRegisteredComponents.push(compName);
|
|
return compName;
|
|
}
|
|
|
|
registerComponent(compName) {
|
|
this.#registeredComponents.push(compName);
|
|
return compName;
|
|
}
|
|
|
|
/**
|
|
* Determines that the jpc-like-websites libs shouldn't be part of the resulting page.
|
|
* Therefore the generate() methods will package/generate finalized js, css and html elements
|
|
* into the final html page in the end.
|
|
* Especially tricky are reusable elements and functions that use such.
|
|
*
|
|
* @todo This method/feature will have to have a logic implemented for state altering components
|
|
* that then can be "packaged" into a single page.
|
|
* @todo This method/feature will work only, if an automatic reuse logic for elements/components is implemented within the jpc lib.
|
|
* @ATTENTION DO NOT USE
|
|
*/
|
|
packageWithoutFramework() {
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Little helper function.
|
|
* If a single page application is in development.
|
|
* This method sets an autoreload interval for the page.
|
|
* @param {number} relaunchSeconds timeinterval for page to reload (changes)
|
|
*/
|
|
inDev(relaunchSeconds = 20) {
|
|
let head = document.querySelector("head");
|
|
let meta = document.createElement("meta");
|
|
meta.setAttribute("http-equiv", "refresh");
|
|
meta.setAttribute("content", `${relaunchSeconds}`);
|
|
|
|
let devScript = document.createElement('script');
|
|
devScript.setAttribute("data-label", "devScript");
|
|
devScript.innerText = `
|
|
let ts = new Date();
|
|
console.log("Page is in Dev-Mode (through 'inDev()' call of PageBuilder.");
|
|
console.log("Refreshed at: ", ts.getHours()+':'+ts.getMinutes()+':'+ts.getSeconds(), "Intervall ${relaunchSeconds}s");
|
|
`;
|
|
head.appendChild(devScript);
|
|
head.insertAdjacentElement("beforeend", meta);
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
const Page = new PageBuilder();
|
|
|