cx-live-documentary/assets/workspace.js

import { submission } from "./submission.js";
import { items_list } from "./items_list.js";

class workspace {
    #container; 

    constructor() {
        this.#container = document.createElement("div");
        this.#container.className = "workspace";
    }

    #clean() {
        while (this.#container.firstChild) {
            this.#container.firstChild.remove();
        }
    }

    click_element(item) {
        console.log(item.name);
    }

    update(item) {
        if (!(item instanceof submission)) {
            throw "Element in workspace must be an submission.";
        }

        this.#clean();
   
        const thumbnail_container = document.createElement("div");
        thumbnail_container.className = "thumbnail-container";

        const thumbnail = document.createElement("img");
        thumbnail.className = "thumbnail";
        thumbnail.src = item.thumbnail;
        thumbnail_container.appendChild(thumbnail);

        const elements = document.createElement("div");
        const list = new items_list(elements, this.click_element);
        list.update(item.elements);

        const title = document.createElement("p");
        title.innerText = item.name;

        const description = document.createElement("p");
        description.innerText = item.description;
        
        const header = document.createElement("div");
        header.className = "header";
        header.appendChild(title);
        header.appendChild(description);

        const bottom = document.createElement("div");
        bottom.className = "bottom";
        bottom.appendChild(thumbnail_container);
        
        const left = document.createElement("div");
        left.className = "left";

        const right = document.createElement("div");
        right.className = "right";

        left.appendChild(header);
        left.appendChild(bottom);
        right.appendChild(elements);

        this.#container.appendChild(left);
        this.#container.appendChild(right);
    }

    get ui() {
        return this.#container;
    }
}

export { workspace };