started sketching folder layout for saved files

diff --git a/static/css/index.css b/static/css/index.css
index b09150cdfd98475850488a74db1e80c83f080c0f..20e8e39402faf6c050edc68a5b4a0b27fbad4e60 100644 (file)
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -4,6 +4,7 @@
     --divider-size: 4px;
     --left-half-width: 70%;
     --top-half-height: 30%;
+    --folder-width: 10%;
     --tab-line-height: 24px;
 }
 
@@ -82,6 +83,16 @@ select:hover {
     cursor: pointer;
 }
 
+#folder-view {
+    width: calc(var(--folder-width) - var(--divider-size));
+    float: left;
+}
+
+#code-container {
+    width: calc(100% - var(--folder-width));
+    float: left;
+}
+
 .left-half, .right-half {
     height: calc(100vh - var(--menu-bar-height));
     float: left;
@@ -89,11 +100,11 @@ select:hover {
 }
 
 .left-half {
-    width: calc(var(--left-half-width) - var(--divider-size) / 2);
+    width: var(--left-half-width);
 }
 
 .right-half {
-    width: calc((100vw - var(--left-half-width)) - var(--divider-size) / 2);
+    width: calc(100% - var(--left-half-width) - var(--divider-size));
 }
 
 .top-half, .bottom-half {
@@ -130,7 +141,7 @@ select:hover {
     color: #f55;
 }
 
-#horizontal-divider {
+#code-horizontal-divider, #main-horizontal-divider {
     min-width: var(--divider-size);
     height: calc(100vh - var(--menu-bar-height));
     background-color: #777;
@@ -138,6 +149,7 @@ select:hover {
 
     display: inline-block;
     float: left;
+    z-index: 1000;
 }
 
 #vertical-divider {
@@ -274,5 +286,41 @@ select:hover {
 
 ::-webkit-scrollbar-thumb {
     background-color: var(--active-color);
-    outline: 1px solid: var(--background-color);
+    outline: 1px solid var(--background-color);
+}
+
+.folder-item {
+    user-select: none;
+    position: relative;
+    cursor: pointer;
+    transition: all 200ms;
+    /* border-left: 2px solid var(--active-color); */
+    padding-left: 4px;
+}
+
+.folder-item:hover {
+    background-color: var(--light-background-color);
+}
+
+.folder {
+    position: relative;
+    left: 32px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.folder.root {
+    left: 0px !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100%;
+    max-height: calc(100vh - var(--menu-bar-height) - var(--tab-line-height));  /* subtract the padding */
+}
+
+.folder.root > .folder-item {
+    border-left: none !important;
+}
+
+.hidden {
+    display: none !important;
 }
\ No newline at end of file

diff --git a/static/src/index.js b/static/src/index.js
index 6a6ef71d471da23ffe11a2791e333513e1669337..a5f4e77903c9daa9bc9a5314ffc82506dc93e5c4 100644 (file)
--- a/static/src/index.js
+++ b/static/src/index.js
@@ -285,6 +285,7 @@ async function request_permalink() {
 function load_split_sizes() {
     let $root = $(":root");
 
+    $root.css("--folder-width",    localStorage.getItem("folder-width"));
     $root.css("--top-half-height", localStorage.getItem("top-half-height"));
     $root.css("--left-half-width", localStorage.getItem("left-half-width"));
 }
@@ -292,10 +293,10 @@ function load_split_sizes() {
 function save_split_sizes() {
     let $root = $(":root");
 
+    localStorage.setItem("folder-width",    $root.css("--folder-width"));
     localStorage.setItem("top-half-height", $root.css("--top-half-height"));
     localStorage.setItem("left-half-width", $root.css("--left-half-width"));
 }
-
 window.onload = () => {
     if ('serviceWorker' in navigator) {
         navigator.serviceWorker.register("/playground/static/src/service-worker.js", {
@@ -312,8 +313,13 @@ window.onload = () => {
 
     populate_examples();
     load_settings();
+    // build_folder_view();
+
+    make_resizer("main-horizontal-divider", "--folder-width", "", (e) => {
+        save_split_sizes();
+    });
 
-    make_resizer("horizontal-divider", "--left-half-width", "", (e) => {
+    make_resizer("code-horizontal-divider", "--left-half-width", "", (e) => {
         editor.resize(true);
         save_split_sizes();
     });
@@ -331,3 +337,126 @@ window.onload = () => {
     $("#save-filename").on('keyup', (ev) => { if (ev.keyCode === 13) save_to_local_storage() });
     $("#load-filename").on('keyup', (ev) => { if (ev.keyCode === 13) load_from_local_storage() });
 };
+
+// Experimental Folder System
+/*
+let folders = [
+    {
+        "name": "Examples",
+        "type": "dir",
+        "state": "open",
+        "elems": [
+            {
+                "name": "example 1",
+                "type": "file",
+            },
+            {
+                "name": "example 2",
+                "type": "file",
+            },
+            {
+                "name": "example 3",
+                "type": "file",
+            },
+            {
+                "name": "Built ins",
+                "type": "dir",
+                "state": "open",
+                "elems": [
+                    {
+                        "name": "example 1",
+                        "type": "file",
+                    },
+                    {
+                        "name": "example 2",
+                        "type": "file",
+                    },
+                    {
+                        "name": "example 3",
+                        "type": "file",
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        "name": "Built ins",
+        "type": "dir",
+        "state": "open",
+        "elems": [
+            {
+                "name": "example 1",
+                "type": "file",
+            },
+            {
+                "name": "example 2",
+                "type": "file",
+            },
+            {
+                "name": "example 3",
+                "type": "file",
+            },
+        ],
+    },
+]
+
+function build_folder_view() {
+    let $root = $(".folder.root");
+
+    let build = (t) => {
+        let output = "";
+        switch (t.type) {
+            case "dir": {
+                output += `<div class="folder-item directory ${t.state}">
+                <i class="fa ${t.state == "open" ? "fa-folder-open" : "fa-folder"}"></i>
+                ${t.name}</div>`;
+
+                if (t.state == "open") {
+                    output += `<div class="folder">`;
+                    for (let i of t.elems) {
+                        output += build(i);
+                    }
+                    output += `</div>`;
+                }
+
+                break;
+            }
+
+            case "file": {
+                output += `<div class="folder-item file">${t.name}</div>`;
+                break;
+            }
+        }
+
+        return output;
+    }
+
+    let root_html = "";
+    for (let elem of folders) {
+        root_html += build(elem);
+    }
+
+    $root.html(root_html);
+    $(".folder-item").click(folder_item_click);
+}
+
+function folder_item_click(e) {
+    let $target = $(e.target);
+    console.log($target);
+    
+    if ($target.hasClass("file")) {
+    }
+
+    if ($target.hasClass("directory")) {
+        if ($target.hasClass("open")) {
+            $target.removeClass("open").addClass("closed");
+            $target.children("i").removeClass("fa-folder-open").addClass("fa-folder");
+            $target.next().addClass("hidden");
+        } else {
+            $target.removeClass("closed").addClass("open");
+            $target.children("i").removeClass("fa-folder").addClass("fa-folder-open");
+            $target.next().removeClass("hidden");
+        }
+    }
+}
+*/
\ No newline at end of file

diff --git a/templates/index.html b/templates/index.html
index f549c85c13750dc17d8debd98b1368d3a67273f2..7b49e1fd397a28806ceef7f7e21d122bc812d10a 100644 (file)
--- a/templates/index.html
+++ b/templates/index.html
@@ -38,26 +38,40 @@
                 <option value="none">---</option>
             </select>
         </div>
+        
+        <!--
+        <div id="folder-view" class="hidden">
+            <div class="tab-line"><span>Storage</span></div>
 
-        <div class="left-half">
-            <div class="tab-line"><span>Code</span></div>
-            <pre id="code-editor" ondragover="handle_dragover(event);" ondrop="handle_drop(event);">{{ code_body }}</pre>
+            <div class="folder root">
+            </div>
         </div>
 
-        <div id="horizontal-divider" class="divider"></div>
+        <div id="main-horizontal-divider" class="divider hidden"></div>
+        -->
+
+        <div id="code-container">
+            <div class="left-half">
+                <div class="tab-line"><span>Code</span></div>
+                <pre id="code-editor" ondragover="handle_dragover(event);" ondrop="handle_drop(event);">{{ code_body }}</pre>
+            </div>
+
+            <div id="code-horizontal-divider" class="divider"></div>
 
-        <div class="right-half">
-            <div class="tab-line"><span>Canvas</span></div>
-            <canvas id="render-target"></canvas>
+            <div class="right-half">
+                <div class="tab-line"><span>Canvas</span></div>
+                <canvas id="render-target"></canvas>
 
-            <div id="vertical-divider" class="divider"></div>
+                <div id="vertical-divider" class="divider"></div>
 
-            <div class="tab-line"><span>Output</span></div>
-            <pre id="code-result"></pre>
-            <input type="textbox" id="input-bar" placeholder="Input" />
-            <!--<input type="button" id="input-submit" value="Enter" onclick="submit_input()" /> -->
+                <div class="tab-line"><span>Output</span></div>
+                <pre id="code-result"></pre>
+                <input type="textbox" id="input-bar" placeholder="Input" />
+                <!--<input type="button" id="input-submit" value="Enter" onclick="submit_input()" /> -->
+            </div>
         </div>
 
+
         <div id="settings-modal" class="modal">
             <h2>Settings</h2>