e2e5e47077
Production vite build copies assets/MenuScene.glb and bundled chunks into dist/. Made-with: Cursor
103 lines
3.4 KiB
JavaScript
103 lines
3.4 KiB
JavaScript
|
|
|
|
// Needle Engine attributes we want to allow to be overriden
|
|
const knownAttributes = [
|
|
"src",
|
|
"background-color",
|
|
"background-image",
|
|
"environment-image",
|
|
"focus-rect",
|
|
];
|
|
|
|
const scriptUrl = new URL(import.meta.url);
|
|
const componentName = scriptUrl.searchParams.get("component-name") || 'needle-app';
|
|
|
|
|
|
if (!customElements.get(componentName)) {
|
|
console.debug(`Defining needle-app as <${componentName}>`);
|
|
customElements.define(componentName, class extends HTMLElement {
|
|
|
|
static get observedAttributes() {
|
|
return knownAttributes;
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: 'open' });
|
|
const template = document.createElement('template');
|
|
template.innerHTML = `
|
|
<style>
|
|
:host {
|
|
position: relative;
|
|
display: block;
|
|
width: max(360px 100%);
|
|
height: max(240px, 100%);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
needle-engine {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
`;
|
|
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
|
|
|
const script = document.createElement('script');
|
|
script.type = 'module';
|
|
const url = new URL('.', import.meta.url);
|
|
this.basePath = this.getAttribute('base-path') || `${url.protocol}//${url.host}${url.pathname}`;
|
|
while(this.basePath.endsWith('/')) {
|
|
this.basePath = this.basePath.slice(0, -1);
|
|
}
|
|
script.src = this.getAttribute('script-src') || `${this.basePath}/assets/index-dZODtGdh.js`;
|
|
this.shadowRoot.appendChild(script);
|
|
|
|
this.needleEngine = document.createElement('needle-engine');
|
|
this.updateAttributes();
|
|
this.shadowRoot.appendChild(this.needleEngine);
|
|
|
|
console.debug(this.basePath, script.src, this.needleEngine.getAttribute("src"));
|
|
}
|
|
|
|
onConnectedCallback() {
|
|
console.debug('NeedleEmbed connected to the DOM');
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
console.debug('NeedleEmbed disconnected from the DOM');
|
|
}
|
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
console.debug(`NeedleApp attribute changed: ${name} from ${oldValue} to ${newValue}`);
|
|
this.updateAttributes();
|
|
}
|
|
|
|
updateAttributes() {
|
|
console.debug("NeedleApp updating attributes");
|
|
|
|
const src = this.getAttribute('src') || null;
|
|
if(src) this.needleEngine.setAttribute("src", src);
|
|
else this.needleEngine.removeAttribute("src");
|
|
|
|
for(const attr of knownAttributes) {
|
|
|
|
if(attr === "src") continue; // already handled above
|
|
|
|
if(this.hasAttribute(attr)) {
|
|
this.needleEngine.setAttribute(attr, this.getAttribute(attr));
|
|
}
|
|
else {
|
|
this.needleEngine.removeAttribute(attr);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
console.warn(`needle-app <${componentName}> already defined.`);
|
|
}
|