import { AeroElement } from "./AeroElement.js"; import { AeroUtilities } from "./AeroUtilities.js"; import { WebPage } from "./WebPage.js"; /* Turn this: { _type: "aero-slide-prime", theme: "dark", title: `The power of tomorrow`, 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:

Say Hello to OCTOFAN

The world's first H2-powered multirole heavy duty drone with switchable nacelles

*/ export const LOW_RESOLUTION_TAG = "-low"; export const HIGH_RESOLUTION_TAG = "-high"; export class SlideV2 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; /** * * @param {HTMLElement} sources */ constructor(page, sources) { super(); /* CSS requirements */ page.css_requireStylesheet("/aero/Slide.css"); page.css_requireStylesheet("/aero/gradient-backgrounds.css"); /* build nodes */ this.sectionNode = document.createElement("section"); this.sectionNode.classList.add("aero-slide"); /* */ this.id = sources.id; if (this.id) { this.sectionNode.id = this.id; } /* */ let val; /* */ this.type = (val = sources.getAttribute("type")) ? val : "prime"; this.sectionNode.setAttribute("type", this.type); /* */ /* */ this.theme = (val = sources.getAttribute("theme")) ? val : "light"; this.sectionNode.setAttribute("theme", this.theme); /* */ /* */ this.arrangement = (val = sources.getAttribute("arrangement")) ? val : "default"; this.sectionNode.setAttribute("arrangement", this.arrangement); /* */ /* */ if (sources.hasAttribute("backgroundColor")) { this.sectionNode.style.backgroundColor = sources.getAttribute("backgroundColor"); } else if (val = sources.getAttribute("backgroundGradient")) { this.sectionNode.classList.add("aero-background-gradient-" + val); } else if (val = sources.getAttribute("backgroundImage")) { this.sectionNode.classList.add("background-pic"); AeroUtilities.loadBackgroundImage(this.sectionNode, val, () => this.render(page)); } /* */ /* */ let textNode = document.createElement("div"); textNode.classList.add("aero-slide-text"); let sourceNode = sources.firstChild; while (sourceNode) { let type = sourceNode.nodeName.toLowerCase(); switch (type) { case "h1": { let h1Node = document.createElement("h1"); h1Node.innerHTML = sourceNode.innerHTML; textNode.appendChild(h1Node); } break; case "h2": { let h2Node = document.createElement("h2"); h2Node.innerHTML = sourceNode.innerHTML; textNode.appendChild(h2Node); } break; case "p": { let pNode = document.createElement("p"); pNode.innerHTML = sourceNode.innerHTML; textNode.appendChild(pNode); } break; } sourceNode = sourceNode.nextSibling; /* next source node */ } this.sectionNode.appendChild(textNode); /* */ /* */ //if (sources.metrics != undefined) { this.drawMetrics(this.props.metrics); } /* */ /* */ if (val = sources.getAttribute("asset")) { let assetImagePath = val; let assetNode = document.createElement("div"); assetNode.classList.add("aero-slide-picture"); if (val = sources.getAttribute("assetAspectRatio")) { assetNode.style.aspectRatio = val; } AeroUtilities.loadBackgroundImage(assetNode, assetImagePath, () => { }); this.sectionNode.appendChild(assetNode); } /* */ } html_getNode(){ return this.sectionNode; } /** * * @param {WebPage} page */ render(page) { if (!this.isInitialized) { this.draw(); this.isInitialized = true; } else if (this.isInitialized && page.imageResolution == 1) { this.redrawHighRes(); } } draw() { } drawMetrics(script) { /*
6000kg
Max nacelle weight
>12h
Flight time (ECO MODE 250 km/h, full load)
>3000km
Range (ECO MODE 250 km/h, full load)
>450km/h
Max speed
*/ let metricsNode = document.createElement("div"); metricsNode.classList.add(`aero-slide-metrics`); script.forEach(metric => { let metricsItemNode = document.createElement("div"); metricsItemNode.classList.add("aero-slide-metrics-item"); let metricsItemValueNode = document.createElement("div"); metricsItemValueNode.classList.add("aero-slide-metrics-item-value"); let content = ""; if (metric.modifier != undefined) { content += `${metric.modifier}`; } content += `${metric.number}`; content += `${metric.unit}`; metricsItemValueNode.innerHTML = content; metricsItemNode.appendChild(metricsItemValueNode); let metricsItemParameterNode = document.createElement("div"); metricsItemParameterNode.classList.add("aero-slide-metrics-item-parameter"); metricsItemParameterNode.innerHTML = metric.parameter; metricsItemNode.appendChild(metricsItemParameterNode); metricsNode.appendChild(metricsItemNode); }) this.sectionNode.appendChild(metricsNode); } redrawHighRes() { if (this.hasBackgroundImage && this.backgroundImagePath.includes(LOW_RESOLUTION_TAG)) { let highResPath = this.backgroundImagePath.replace(LOW_RESOLUTION_TAG, HIGH_RESOLUTION_TAG); let highResImageBuffer = new Image(); let _this = this; highResImageBuffer.onload = function () { _this.sectionNode.style.backgroundImage = `url(${highResImageBuffer.src})`; _this.isBackgroundImageLoaded = true; _this.page.notifyElementHasBeenLoaded(); }; this.isBackgroundImageLoaded = false; highResImageBuffer.src = highResPath; // trigger } if (this.hasAssetImage && this.assetImagePath.includes(LOW_RESOLUTION_TAG)) { let highResPath = this.assetImagePath.replace(LOW_RESOLUTION_TAG, HIGH_RESOLUTION_TAG); let highResImageBuffer = new Image(); let _this = this; highResImageBuffer.onload = function () { _this.assetNode.style.backgroundImage = `url(${highResImageBuffer.src})`; _this.isAssetImageLoaded = true; _this.page.notifyElementHasBeenLoaded(); }; this.isAssetImageLoaded = false; highResImageBuffer.src = highResPath; // trigger } } }