153 lines
3.6 KiB
JavaScript
153 lines
3.6 KiB
JavaScript
import { AeroElement } from "./AeroElement.js";
|
|
import { AeroUtilities } from "./AeroUtilities.js";
|
|
import { Icon } from "./Icon.js";
|
|
import { WebPage } from "./WebPage.js";
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
Turn this:
|
|
{
|
|
_type: "aero-slide-prime",
|
|
theme: "dark",
|
|
title: `The power of <b>tomorrow</b>`,
|
|
subtitle: "Hi There",
|
|
paragraph: `this is a very
|
|
long text indeed that spread on multiple lines`,
|
|
background : {
|
|
_type : "pic",
|
|
source : "assets/truc0002.jpg"
|
|
}
|
|
},
|
|
|
|
into this:
|
|
|
|
<section class="aero-slide-prime aero-theme-dark background-black">
|
|
<div class="text">
|
|
<h1>Say Hello to <span class="emphasis">OCTOFAN</span></h1>
|
|
<h2>The world's first H2-powered multirole heavy duty drone with
|
|
switchable nacelles</h2>
|
|
</div>
|
|
<div class="asset"
|
|
style="background-image: url('assets/aircrafts/freighter/render0x07-low.png');">
|
|
</div>
|
|
</section>
|
|
*/
|
|
|
|
|
|
|
|
|
|
export class SpText extends AeroElement {
|
|
|
|
/** @type {HTMLElement } */
|
|
sectionNode;
|
|
|
|
type;
|
|
|
|
props;
|
|
|
|
/** @type{boolean} */
|
|
hasBackgroundImage = false;
|
|
|
|
/** @type{boolean} */
|
|
isBackgroundImageLoaded = false;
|
|
|
|
/** @type{string} */
|
|
backgroundImagePath;
|
|
|
|
/** @type{boolean} */
|
|
hasAssetImage = false;
|
|
|
|
/** @type{boolean} */
|
|
isAssetImageLoaded = false;
|
|
|
|
/** @type{string} */
|
|
assetImagePath;
|
|
|
|
/** @type {HTMLDivElement} */
|
|
assetNode;
|
|
|
|
constructor(contentPathname, props) {
|
|
super();
|
|
this.contentPathname = contentPathname;
|
|
this.props = props;
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param {WebPage} handler
|
|
* @returns {HTMLElement}
|
|
*/
|
|
build(page) {
|
|
|
|
/* CSS requirements */
|
|
page.css_requireStylesheet("/aero/SpText.css");
|
|
|
|
/* build nodes */
|
|
this.sectionNode = document.createElement("section");
|
|
this.sectionNode.classList.add("sptext");
|
|
this.sectionNode.setAttribute("type", this.type);
|
|
|
|
|
|
this.setTheme(this.props.theme ? this.props.theme : "light");
|
|
if (this.props.arrangement) { this.setArrangement(this.props.arrangement); }
|
|
|
|
/* <id> */
|
|
if (this.props.id != undefined) {
|
|
this.sectionNode.id = this.props.id;
|
|
}
|
|
/* </id> */
|
|
|
|
|
|
/* <background> */
|
|
if (this.props.backgroundColor != undefined) {
|
|
this.sectionNode.style.backgroundColor = this.props.backgroundColor;
|
|
}
|
|
else if (this.props.backgroundGradient != undefined) {
|
|
this.sectionNode.classList.add("aero-background-gradient-" + this.props.backgroundGradient);
|
|
}
|
|
else if (this.props.backgroundImage != undefined) {
|
|
let backgroundImagePath = this.props.backgroundImage;
|
|
this.sectionNode.classList.add("background-pic");
|
|
AeroUtilities.loadBackgroundImage(this.sectionNode, backgroundImagePath, () => this.render(page));
|
|
|
|
}
|
|
/* </background> */
|
|
|
|
|
|
/* <elements> */
|
|
AeroUtilities.sendRequest_HTTP_GET(this.contentPathname, "text", content => {
|
|
this.sectionNode.innerHTML = content;
|
|
});
|
|
/* </elements> */
|
|
|
|
/* return wrapper node */
|
|
return this.sectionNode;
|
|
}
|
|
|
|
|
|
setTheme(theme) {
|
|
this.sectionNode.setAttribute("theme", theme);
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param {WebPage} page
|
|
*/
|
|
render(page) {
|
|
if (!this.isInitialized) {
|
|
this.draw();
|
|
this.isInitialized = true;
|
|
}
|
|
else if (this.isInitialized && page.imageResolution == 1) {
|
|
this.redrawHighRes();
|
|
}
|
|
}
|
|
|
|
draw() {
|
|
|
|
}
|
|
}
|