start_page.js

/**
 * The landing screen shown when no project is loaded.
 * Provides a "New Project" button and a link to the docs.
 */
export class StartPage {
    /**
     * @param {object} callbacks - event callbacks for start page actions
     * @param {function} callbacks.onNewProject - Called when the "New Project" button is clicked.
     * @param {function} callbacks.onOpenProject - Called when the "Open local project" button is clicked.
     */
    constructor({ onNewProject, onOpenProject }) {
        this._onNewProject = onNewProject ?? (() => {});
        this._onOpenProject = onOpenProject ?? (() => {});

        this.loadElements();
        this.#setupListeners();

    }

    /** Binds DOM elements from the #startPage template to instance properties. */
    loadElements() {
        this.root = document.getElementById("startPage");
        this.newProjectButton = this.root.querySelector("#newProjectButton");
        this.openLocalProjectButton = this.root.querySelector("#openLocalProjectButton");
        this.openDocsButton = this.root.querySelector("#openDocsButtonStartPage");
    }

    /** Attaches click handlers to the new-project and open-docs buttons. */
    #setupListeners() {
        this.newProjectButton.addEventListener("click", () => {
            this._onNewProject();
        });

        this.openLocalProjectButton.addEventListener("click", () => {
            this._onOpenProject();
        });

        this.openDocsButton.addEventListener("click", () => {
            window.open("/docs", "_blank");
        });
    }
}