From 03011065868d34b09f6b40d20089e87f3badb9e2 Mon Sep 17 00:00:00 2001 From: Brendan Hansen Date: Wed, 20 Apr 2022 15:00:42 +0000 Subject: [PATCH] flushing out ide mode --- static/src/folders.js | 146 ++++++++++++++++++++++++++++++++++++++---- static/src/index.js | 8 ++- templates/index.html | 23 ++++++- 3 files changed, 161 insertions(+), 16 deletions(-) diff --git a/static/src/folders.js b/static/src/folders.js index 5dc1e03..9adec43 100644 --- a/static/src/folders.js +++ b/static/src/folders.js @@ -67,6 +67,10 @@ class FolderSystem { } create_directory(path) { + if (path == "") { + return { type:"dir", elems:this.folders } + } + let parts = path.split("/"); let name = parts.at(-1); @@ -101,25 +105,73 @@ class FolderSystem { return root[root.length - 1]; } + get_containing_directory(path) { + let last_slash = path.lastIndexOf("/"); + if (last_slash == -1) return ""; + + return path.substring(0, last_slash); + } + + create_file(path, contents) { + let containing_dir = this.get_containing_directory(path); + let dir = this.create_directory(containing_dir); + + let filename = path.substring(path.lastIndexOf("/") + 1); + + let existing = dir.elems.find(x => x == filename) + if (existing) { + return existing; + } + + dir.elems.push({ + name: filename, + type: "file", + contents + }) + + return dir.elems[dir.elems.length - 1]; + } + + remove(path) { + let containing_dir = this.get_containing_directory(path); + let dir = this.create_directory(containing_dir); + + let filename = path.substring(path.lastIndexOf("/") + 1); + dir.elems.splice(dir.elems.findIndex(x => x.name == filename), 1); + } + + // Returns null if the item at the path does not exist lookup(path) { let parts = path.split("/"); + + let root = { type:"dir", elems:this.folders }; + let i; + for (i=0; i x.name == parts[i]); + if (elems.length != 1) { + root = null; + break; + } - let root = this.folders; - for (let part of parts) { - if (!Array.isArray(root)) return null; + root = elems[0]; - let elems = root.filter((x) => x.name == part); - if (elems.length != 1) return null; + } else if (root.type == "file") { + if (root.name != parts[i] || i != parts.length - 1) { + root = null; + } - root = elems[0]; - if (root.type == "dir") { - root = root.elems; + break; } } return root; } + move_file(old_path, new_path) { + let existing = this.lookup(old_path); + } + build_folder_view(onclick, selector=".folder-root") { let $root = $(selector); @@ -127,7 +179,7 @@ class FolderSystem { let output = ""; switch (t.type) { case "dir": { - output += `
+ output += `
${t.name} @@ -175,6 +227,8 @@ class FolderSystem { $root.html(root_html); $root.find(".folder-item").click(onclick); + $root.find(".folder-item i.fa-pencil-alt").click(folder_start_rename); + $root.find(".folder-item i.fa-trash").click(folder_start_remove); } save() { @@ -260,11 +314,8 @@ function folder_item_click(e) { let $target = $(e.target); if ($target.hasClass("file")) { - let editor = ace.edit("code-editor"); let filename = $target.attr("data-filename"); - let file = folders.lookup(filename); - editor.setValue(file.contents); - editor.clearSelection(); + folder_open_file(filename); } if ($target.hasClass("directory")) { @@ -278,4 +329,71 @@ function folder_item_click(e) { $target.next().removeClass("hidden"); } } -} \ No newline at end of file +} + +function folder_open_file(filename) { + let editor = ace.edit("code-editor"); + let file = folders.lookup(filename); + editor.setValue(file.contents); + editor.clearSelection(); +} + +function folder_start_create_file() { + let $modal = $("#create-file-modal"); + $modal.find("input").val(""); + $modal.modal(); +} + +function folder_finalize_create_file() { + let $modal = $("#create-file-modal"); + let path = $modal.find("input").val(); + + folders.create_file(path, ""); + folders.save(); + folders.build_folder_view(folder_item_click); + + folder_open_file(path); + + $.modal.close(); +} + +function folder_start_rename(e) { + let filename = $(e.target).parent().attr("data-filename"); + let $modal = $("#rename-modal"); + $modal.find("input").val(filename); + $modal.attr("data-filename", filename); + $modal.modal(); +} + +function folder_finalize_rename(e) { + let $modal = $("#rename-modal"); + let current_filename = $modal.attr("data-filename"); + let new_filename = $modal.find("input").val(); + $.modal.close(); + + folders.move_file(current_filename, new_filename); + folders.save(); + folders.build_folder_view(folder_item_click); + + folder_open_file(new_filename); +} + +function folder_start_remove(e) { + let filename = $(e.target).parent().attr("data-filename"); + let $modal = $("#remove-modal"); + $modal.find("p").html(`Are you sure you want to remove ${filename}?`); + $modal.attr("data-filename", filename); + $modal.modal(); +} + +function folder_finalize_remove() { + let $modal = $("#remove-modal"); + let filename = $modal.attr("data-filename"); + + folders.remove(filename); + folders.save(); + folders.build_folder_view(folder_item_click); + + $.modal.close(); +} + diff --git a/static/src/index.js b/static/src/index.js index dfdeaa8..4223ee9 100644 --- a/static/src/index.js +++ b/static/src/index.js @@ -2,6 +2,7 @@ let wasm_worker = null; let editor_keybind_mode = "normal"; let editor_theme = "chrome"; let ui_theme = "dark"; +let ui_mode = "simple"; let input_shared_buffer = new SharedArrayBuffer(1024 * Uint8Array.BYTES_PER_ELEMENT); let canvas_shared_buffer = new SharedArrayBuffer(7 * Int32Array.BYTES_PER_ELEMENT); @@ -197,23 +198,29 @@ function change_ui_mode(value) { } else { disable_ide_mode(); } + + ui_mode = value; + persist_settings(); } function persist_settings() { localStorage["editor_theme"] = editor_theme; localStorage["editor_keybind_mode"] = editor_keybind_mode; localStorage["ui_theme"] = ui_theme; + localStorage["ui_mode"] = ui_mode; } function load_settings() { editor_theme = localStorage["editor_theme"]; editor_keybind_mode = localStorage["editor_keybind_mode"]; ui_theme = localStorage["ui_theme"] || ui_theme; + ui_mode = localStorage["ui_mode"] || ui_mode; load_split_sizes(); change_editor_theme(editor_theme); change_keybindings(editor_keybind_mode); change_ui_theme(ui_theme); + change_ui_mode(ui_mode); } async function handle_drop(e) { @@ -329,7 +336,6 @@ window.onload = () => { populate_examples(); load_settings(); - change_ui_mode("ide"); make_resizer("main-horizontal-divider", "--folder-width", "", (e) => { save_split_sizes(); diff --git a/templates/index.html b/templates/index.html index 6b18f7f..c519b88 100644 --- a/templates/index.html +++ b/templates/index.html @@ -51,7 +51,7 @@
Storage
- + @@ -159,5 +159,26 @@
+ + + + + + -- 2.25.1