From fd0705dc203e8e05bcc75ae44a65c21f9d5bfc9d Mon Sep 17 00:00:00 2001
From: Brendan Hansen <brendan.f.hansen@gmail.com>
Date: Mon, 18 Apr 2022 21:09:57 +0000
Subject: [PATCH] added "tabs"; file upload; saving split state

---
 static/css/index.css         | 21 +++++++++++++++++++--
 static/src/index.js          | 20 +++++++++++++++++++-
 static/src/service-worker.js |  2 +-
 static/src/storage.js        | 15 +++++++++++++++
 templates/index.html         |  5 +++++
 5 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/static/css/index.css b/static/css/index.css
index f6f4c83..f52cc72 100644
--- 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%;
+    --tab-line-height: 24px;
 }
 
 * {
@@ -111,7 +112,7 @@ select:hover {
 
 #code-result {
     height: 100vh;
-    max-height: calc(100vh - var(--menu-bar-height) - var(--input-bar-height) - var(--top-half-height) - var(--divider-size));  /* subtract the padding */
+    max-height: calc(100vh - var(--menu-bar-height) - var(--input-bar-height) - var(--top-half-height) - var(--divider-size) - var(--tab-line-height));  /* subtract the padding */
 
     background: var(--terminal-background-color); 
     color: var(--terminal-foreground-color);
@@ -166,7 +167,7 @@ select:hover {
 
 #render-target {
     width: 100%;
-    height: var(--top-half-height);
+    height: calc(var(--top-half-height) - var(--tab-line-height));
 }
 
 .jquery-modal.blocker.current {
@@ -246,3 +247,19 @@ select:hover {
 .ace_editor {
     font-family: "mononoki Nerd Font Mono", "mononoki NF", Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace !important;
 }
+
+.tab-line {
+    background: var(--light-background-color);
+    border-bottom: 2px solid var(--dark-background-color);
+    cursor: default;
+    user-select: none;
+}
+
+.tab-line span {
+    background: var(--active-color);
+    border-radius: 8px 8px 0 0;
+    margin-left: 8px;
+    padding: 2px 6px;
+    height: 100%;
+    line-height: var(--tab-line-height);
+}
\ No newline at end of file
diff --git a/static/src/index.js b/static/src/index.js
index 775b516..e44323c 100644
--- a/static/src/index.js
+++ b/static/src/index.js
@@ -194,6 +194,7 @@ function load_settings() {
     editor_keybind_mode = localStorage["editor_keybind_mode"];
     ui_theme = localStorage["ui_theme"] || ui_theme;
 
+    load_split_sizes();
     change_editor_theme(editor_theme);
     change_keybindings(editor_keybind_mode);
     change_ui_theme(ui_theme);
@@ -281,6 +282,20 @@ async function request_permalink() {
     }
 }
 
+function load_split_sizes() {
+    let $root = $(":root");
+
+    $root.css("--top-half-height", localStorage.getItem("top-half-height"));
+    $root.css("--left-half-width", localStorage.getItem("left-half-width"));
+}
+
+function save_split_sizes() {
+    let $root = $(":root");
+
+    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", {
@@ -300,9 +315,12 @@ window.onload = () => {
 
     make_resizer("horizontal-divider", "--left-half-width", "", (e) => {
         editor.resize(true);
+        save_split_sizes();
     });
 
-    make_resizer("vertical-divider", "", "--top-half-height", null);
+    make_resizer("vertical-divider", "", "--top-half-height", (e) => {
+        save_split_sizes();
+    });
 
     document.getElementById("input-bar").addEventListener("keyup", (ev) => {
         if (ev.keyCode === 13) {
diff --git a/static/src/service-worker.js b/static/src/service-worker.js
index fcdb3ac..c9564c6 100644
--- a/static/src/service-worker.js
+++ b/static/src/service-worker.js
@@ -1,4 +1,4 @@
-const app_version = 1;
+const app_version = 2;
 
 const cacheName = 'cache-v1';
 const precacheResources = [
diff --git a/static/src/storage.js b/static/src/storage.js
index 8edd14f..29225df 100644
--- a/static/src/storage.js
+++ b/static/src/storage.js
@@ -95,3 +95,18 @@ function prompt_download() {
     download_link.remove();
 }
 
+function prompt_upload() {
+    $("#fileupload").click();
+}
+
+function file_uploaded(ev) {
+    let file = ev.target.files[0];
+
+    let reader = new FileReader();
+    reader.readAsText(file, 'UTF-8');
+    reader.onload = readerEvent => {
+        let code = readerEvent.target.result;
+        let editor = ace.edit('code-editor');
+        editor.setValue(code);
+    }
+}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index bda2f1d..f549c85 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -28,7 +28,9 @@
             <button title="Stop" onclick="kill_code()"><i class="fas fa-stop"></i></button>
             <button title="Save" onclick="prompt_save()"><i class="fas fa-save"></i></button>
             <button title="Load" onclick="prompt_load()"><i class="fas fa-folder"></i></button>
+            <button title="Upload" onclick="prompt_upload()"><i class="fas fa-upload"></i></button>
             <button title="Download" onclick="prompt_download()"><i class="fas fa-download"></i></button>
+            <input id="fileupload" style="display:none" type="file" onchange="file_uploaded(event)"/>
             <a title="Settings" href="#settings-modal" rel="modal:open" style="color: var(--foreground-color)"><i class="fas fa fa-gears"></i></a>
 
             <label style="margin-left: 64px" for="examples">Load example:</label>
@@ -38,16 +40,19 @@
         </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>
 
         <div id="horizontal-divider" class="divider"></div>
 
         <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 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()" /> -->
-- 
2.25.1