Add workspace and work on it.

.gitignore

@@ -2,6 +2,12 @@
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
 
+# Images binary
+*.jpg
+*.png
+*.jpeg
+*.webp
+
 # User-specific stuff:
 .idea/**/workspace.xml
 .idea/**/tasks.xml

assets/chooser.js

@@ -0,0 +1,30 @@
+import { database } from "./database.js";
+import { items_list } from "./items_list.js";
+
+class chooser {
+    #list;
+    #store;
+    #container;
+
+    constructor(store, click) {
+        if (!(store instanceof database)) {
+            throw "Store must be instance of an database.";
+        }
+
+        if (typeof(click) !== "function") {
+            throw "Click function must be an function instance.";
+        }
+
+        this.#container = document.createElement("div");
+        this.#container.className = "chooser";
+        this.#list = new items_list(this.#container, click);
+
+        this.#list.update(store.content.submissions);
+    }
+
+    get ui() {
+        return this.#container;
+    }
+}
+
+export { chooser };

assets/core.js

@@ -1,10 +1,12 @@
 import { search } from "./search.js";
 import { pixel, percent, auto } from "./size.js";
-import { position, place_top } from "./position.js";
+import { position, place_top, place_left } from "./position.js";
 import { sticky } from "./sticky.js";
 import { loader } from "./loader.js";
 import { database } from "./database.js";
 import { logo } from "./logo.js";
+import { chooser } from "./chooser.js";
+import { workspace } from "./workspace.js";
 
 document.addEventListener("DOMContentLoaded", async () => {
     const container = document.querySelector(".container");
@@ -29,6 +31,22 @@ document.addEventListener("DOMContentLoaded", async () => {
     const name = new logo(store.content.name);
     top_bar.appendChild(name.ui);
 
+    const left_bar_builder = new sticky();
+    left_bar_builder.width = new pixel(240);
+    left_bar_builder.height = new percent(100);
+    left_bar_builder.position = new place_left();
+
+    const left_bar = left_bar_builder.element;
+    left_bar.className = "left-bar";
+
+    const choose = new chooser(store, () => {});
+    left_bar.appendChild(choose.ui);
+
+    const center = new workspace();
+    center.update(store.content.submissions[1]);
+
     container.appendChild(top_bar);
+    container.appendChild(left_bar);
+    container.appendChild(center.ui);
 });
 

assets/items_list.js

@@ -37,8 +37,9 @@ class items_list {
         const name = document.createElement("span");
 
         name.innerText = content.name;
-        icon.className = "material-symbols-outlined";
         container.className = "single-element";
+        icon.classList.add("icon");
+        icon.classList.add("material-symbols-outlined");
 
         container.addEventListener("click", () => {
             this.#click(content);

assets/workspace.js

@@ -0,0 +1,75 @@
+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 };

database/elements.json

@@ -1,47 +0,0 @@
-{
-    "name": "Elements database project.",
-    "description": "This is sample example project documentary.",
-    "submissions": [
-        {
-            "name": "Objects twice submission",
-            "description": "This is first submission",
-            "thumbnail": "https://i.redd.it/jxbc2sbfdkmd1.jpeg",
-            "elements": [
-                {
-                    "name": "Object 1",
-                    "description": "Sample object",
-                    "attributes" : {
-                        "width": "110mm",
-                        "height": "50mm",
-                        "depth": "60mm"
-                    },
-                    "links": {
-                        "Ebay": "https://ebay.com"
-                    },
-                    "thumbnail": "https://preview.redd.it/how-cute-is-this-street-cat-v0-3yt7hznrfhmd1.jpeg?width=640&crop=smart&auto=webp&s=fdf36a3c7b36e52b541421c58fdec811ded8df2f",
-                    "pictures": [
-                        "https://preview.redd.it/she-seems-pleased-with-herself-v0-gk0rylncqfmd1.jpeg?width=640&crop=smart&auto=webp&s=b9f523953de121e5f85d283eb13801e6b10fa13b",
-                        "https://preview.redd.it/how-cute-is-this-street-cat-v0-3yt7hznrfhmd1.jpeg?width=640&crop=smart&auto=webp&s=fdf36a3c7b36e52b541421c58fdec811ded8df2f"
-                    ]   
-                }, 
-                {
-                    "name": "Object 2",
-                    "description": "Sample object",
-                    "attributes" : {
-                        "width": "110mm",
-                        "height": "50mm",
-                        "depth": "60mm"
-                    },
-                    "links": {
-                        "Ebay": "https://ebay.com"
-                    },
-                    "thumbnail": "https://preview.redd.it/how-cute-is-this-street-cat-v0-3yt7hznrfhmd1.jpeg?width=640&crop=smart&auto=webp&s=fdf36a3c7b36e52b541421c58fdec811ded8df2f",
-                    "pictures": [
-                        "https://preview.redd.it/she-seems-pleased-with-herself-v0-gk0rylncqfmd1.jpeg?width=640&crop=smart&auto=webp&s=b9f523953de121e5f85d283eb13801e6b10fa13b",
-                        "https://preview.redd.it/how-cute-is-this-street-cat-v0-3yt7hznrfhmd1.jpeg?width=640&crop=smart&auto=webp&s=fdf36a3c7b36e52b541421c58fdec811ded8df2f"
-                    ]   
-                }
-            ]
-        },
-    ]
-}

database/project.json

@@ -10,7 +10,7 @@
         {
             "name": "Second submission",
             "description": "This is second submission.",
-            "thumbnail": "test.png",
+            "thumbnail": "test.jpg",
             "elements": [
                 {
                     "name": "Element",

theme/chooser.css

@@ -0,0 +1,22 @@
+.chooser {
+    border-radius: 0px 10px 10px 0px;
+    border: var(--primary-color) 3px solid;
+    border-left: none;
+    margin-top: 50vh;
+    transform: translateY(-50%);
+    padding : 0px;
+}
+
+.chooser .single-element {
+    cursor: pointer;
+    transition: background-color 0.5s;
+    border-bottom: var(--primary-color) 3px solid;
+}
+
+.chooser .single-element:last-child {
+    border-bottom: none;
+}
+
+.chooser .single-element:hover {
+    background-color: var(--primary-color);
+}

theme/core.css

@@ -5,3 +5,5 @@
 @import url("./logo.css");
 @import url("./search.css");
 @import url("./items_list.css");
+@import url("./chooser.css");
+@import url("./workspace.css");

theme/items_list.css

@@ -2,4 +2,14 @@
     display: flex;
     align-content: center;
     align-items: center;
+    margin: 0px;
+    padding: 10px 20px;
+}
+
+.elements-list .single-element p .icon {
+    padding-right: 5px;
+}
+
+.elements-list .single-element {
+    margin: 0px;
 }

theme/workspace.css

@@ -0,0 +1,55 @@
+.workspace {
+    box-sizing: border-box;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(calc(-50% + 150px), -50%);
+    width: calc(100vw - 300px);
+    border: var(--primary-color) 3px solid;
+    padding: 0px;
+    margin: 0px;
+    border-radius: 10px 0px 0px 10px;
+    border-right: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.workspace .header p:first-child {
+    font-size: 1.5em;
+    color: var(--secondary-color);
+    font-weight: 600;
+}
+
+.workspace .header p:first-child::before {
+    content: "# ";
+}
+
+.workspace .header {
+    padding: 20px;
+    border-bottom: var(--primary-color) 3px solid;
+}
+
+.workspace .thumbnail-container {
+    width: calc(100% - 300px);
+    height: auto;
+    max-height: calc(100vh - 400px);
+    overflow: hidden;
+    margin: 10px;
+    border-radius: 10px;
+}
+
+.workspace .thumbnail {
+    max-width: 100%;
+    max-height: 100%;
+    margin: 0px;
+    padding: 0px;
+    transition: transform 0.5s;
+    border-radius: 10px;
+}
+
+.workspace .thumbnail:hover {
+    transform: scale(1.5);
+}