@needle-tools/engine/lib/engine/webcomponents/logo-element.js

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

import { needleLogoOnlySVG, needleLogoSVG } from "../assets/index.js";
const elementName = "needle-logo-element";
/**
 * Needle logo web component used in the hosting UI (small, compact logo or full)
 * @element needle-logo-element
 */
export class NeedleLogoElement extends HTMLElement {
    static get elementName() { return elementName; }
    static create() {
        return document.createElement(elementName);
    }
    _didInitialize = false;
    constructor() {
        super();
    }
    initializeDom() {
        this._root = this.attachShadow({ mode: 'closed' });
        const template = document.createElement('template');
        template.innerHTML = `<style>
        :host {
            position: relative;
            min-width: fit-content;
            /* height: 100%; can not have height 100% because of align-items: stretch; in the parent */
            display: flex;
        }

        .wrapper {
            position: relative;
            display: grid;
            grid-template-columns: auto auto;
            padding: .1rem;
        }
        .wrapper:hover {
            cursor: pointer;
        }
        img {
            height: 100%;
            align-self: end;
            transition: transform 0.2s;
        }
        img.with-text {
            width: 11.5ch;
            &:hover {
                transform: scale(1.02);
            }
        }
        img.compact {
            width: 1.7em;
            &:hover {
                transform: scale(1.1);
            }
        }
        span {
            font-size: 1rem;
            white-space: nowrap;
        }
        </style>
        <div class="wrapper">
            <img class="logo with-text" src=${needleLogoSVG} />
        </div>
        `;
        this._root.appendChild(template.content.cloneNode(true));
        this.wrapper = this._root.querySelector(".wrapper");
        this._root.appendChild(this.wrapper);
        this.logoElement = this._root.querySelector("img.logo");
        // this.wrapper.classList.add("wrapper");
        // this.wrapper.appendChild(this.logoElement);
        // this.logoElement.src = logoSVG;
        // this.textElement.textContent = "Needle Engine";
        // this.wrapper.appendChild(this.textElement);
        this.addEventListener("click", () => {
            globalThis.open("https://needle.tools", "_blank");
        });
    }
    ensureInitialized() {
        if (!this._didInitialize) {
            this._didInitialize = true;
            this.initializeDom();
        }
    }
    connectedCallback() {
        this.ensureInitialized();
        if (!this.wrapper)
            return;
        this.wrapper.setAttribute("title", "Made with Needle Engine");
        this.setAttribute("aria-label", "Needle Engine logo. Click to open the Needle Engine website.");
    }
    _root;
    wrapper;
    logoElement;
    /** Show or hide the logo element (used by the menu) */
    setLogoVisible(val) {
        this.ensureInitialized();
        if (!this.logoElement)
            return;
        this.logoElement.style.display = val ? "block" : "none";
    }
    /** Switch the logo between full and compact versions */
    setType(type) {
        this.ensureInitialized();
        if (!this.logoElement)
            return;
        if (type === "full") {
            this.logoElement.src = needleLogoSVG;
            this.logoElement.classList.remove("with-text");
            this.logoElement.classList.remove("compact");
        }
        else {
            this.logoElement.src = needleLogoOnlySVG;
            this.logoElement.classList.add("with-text");
            this.logoElement.classList.add("compact");
        }
    }
}
if (!customElements.get(elementName))
    customElements.define(elementName, NeedleLogoElement);
//# sourceMappingURL=logo-element.js.map