diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 319110f4..d48dd8ad 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -198,10 +198,6 @@ class Manager { document.getElementById("switch").addEventListener("click", this.output.switchClick.bind(this.output)); document.getElementById("maximise-output").addEventListener("click", this.output.maximiseOutputClick.bind(this.output)); document.getElementById("magic").addEventListener("click", this.output.magicClick.bind(this.output)); - this.addDynamicListener("#output-file-download", "click", this.output.downloadFile, this.output); - this.addDynamicListener("#output-file-show-all", "click", this.output.showAllFile, this.output); - this.addDynamicListener("#output-file-slice i", "click", this.output.displayFileSlice, this.output); - document.getElementById("show-file-overlay").addEventListener("click", this.output.showFileOverlayClick.bind(this.output)); this.addDynamicListener(".extract-file,.extract-file i", "click", this.output.extractFileClick, this.output); this.addDynamicListener("#output-tabs-wrapper #output-tabs li .output-tab-content", "click", this.output.changeTabClick, this.output); document.getElementById("btn-previous-output-tab").addEventListener("mousedown", this.output.previousTabClick.bind(this.output)); diff --git a/src/web/html/index.html b/src/web/html/index.html index f30636dd..a5897840 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -323,31 +323,6 @@
- -
-
-
-
- -
- Size:
- - -
- - - - -
to
- -
KiB
-
-
-
-
-
diff --git a/src/web/stylesheets/components/_pane.css b/src/web/stylesheets/components/_pane.css index f251fa27..54e67b3b 100755 --- a/src/web/stylesheets/components/_pane.css +++ b/src/web/stylesheets/components/_pane.css @@ -46,72 +46,6 @@ padding: 0; } -.io-card.card { - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); - transition: 0.3s; - width: 400px; - height: 150px; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-family: var(--primary-font-family); - color: var(--primary-font-colour); - line-height: 30px; - background-color: var(--primary-background-colour); - flex-direction: row; - padding-left: 10px; -} - -.io-card.card:hover { - box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); -} - -.io-card.card>img { - float: left; - width: auto; - height: auto; - max-width: 128px; - max-height: 128px; - margin-left: auto; - margin-top: auto; - margin-right: auto; - margin-bottom: auto; - padding: 0px; - -} - -.io-card.card .card-body .close { - position: absolute; - right: 10px; - top: 4px; -} - -.io-card.card .card-body { - float: left; - padding: 16px; - width: 250px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - user-select: text; -} - -.io-card.card .card-body>.btn { - margin-bottom: 5px; - margin-top: 5px; -} - -.io-card.card input[type=number] { - padding-right: 6px; - padding-left: 6px; - height: unset; -} - -.io-card.card .input-group { - padding-top: 5px; -} - #files .card-header .float-right a:hover { text-decoration: none; } diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css index 2d40fe4c..b6cc74bf 100755 --- a/src/web/stylesheets/layout/_io.css +++ b/src/web/stylesheets/layout/_io.css @@ -165,10 +165,6 @@ height: calc(100% - var(--tab-height) - var(--title-height)); } -#show-file-overlay { - height: 32px; -} - .input-wrapper.textarea-wrapper { width: 100%; box-sizing: border-box; @@ -221,30 +217,6 @@ transition: all 0.5s ease; } -#output-file { - position: absolute; - left: 0; - top: 50%; - width: 100%; - display: none; -} - -.file-overlay { - position: absolute; - opacity: 0.8; - background-color: var(--title-background-colour); - width: 100%; - height: 100%; -} - -#show-file-overlay { - position: absolute; - right: 15px; - top: calc(var(--title-height) + 10px); - cursor: pointer; - display: none; -} - .io-info { margin-right: 18px; margin-top: 1px; diff --git a/src/web/waiters/OutputWaiter.mjs b/src/web/waiters/OutputWaiter.mjs index f36841e1..843adcf0 100755 --- a/src/web/waiters/OutputWaiter.mjs +++ b/src/web/waiters/OutputWaiter.mjs @@ -512,8 +512,6 @@ class OutputWaiter { return new Promise(async function(resolve, reject) { const output = this.outputs[inputNum]; - const outputFile = document.getElementById("output-file"); - // Update the EOL value this.outputEditorView.dispatch({ effects: this.outputEditorConf.eol.reconfigure( @@ -539,18 +537,12 @@ class OutputWaiter { this.manager.recipe.updateBreakpointIndicator(false); } - document.getElementById("show-file-overlay").style.display = "none"; - if (output.status === "pending" || output.status === "baking") { // show the loader and the status message if it's being shown // otherwise don't do anything document.querySelector("#output-loader .loading-msg").textContent = output.statusMessage; } else if (output.status === "error") { - // style the tab if it's being shown this.toggleLoader(false); - this.outputTextEl.style.display = "block"; - this.outputTextEl.classList.remove("blur"); - outputFile.style.display = "none"; this.clearHTMLOutput(); if (output.error) { @@ -560,15 +552,10 @@ class OutputWaiter { } } else if (output.status === "baked" || output.status === "inactive") { document.querySelector("#output-loader .loading-msg").textContent = `Loading output ${inputNum}`; - this.closeFile(); if (output.data === null) { - this.outputTextEl.style.display = "block"; - outputFile.style.display = "none"; - this.clearHTMLOutput(); this.setOutput(""); - this.toggleLoader(false); return; } @@ -577,7 +564,6 @@ class OutputWaiter { switch (output.data.type) { case "html": - outputFile.style.display = "none"; // TODO what if the HTML content needs to be in a certain character encoding? // Grey out chr enc selection? Set back to Raw Bytes? @@ -586,9 +572,6 @@ class OutputWaiter { case "ArrayBuffer": case "string": default: - this.outputTextEl.style.display = "block"; - outputFile.style.display = "none"; - this.clearHTMLOutput(); this.setOutput(output.data.result); break; @@ -600,34 +583,6 @@ class OutputWaiter { }.bind(this)); } - /** - * Shows file details - * - * @param {ArrayBuffer} buf - * @param {number} activeTab - */ - setFile(buf, activeTab) { - if (activeTab !== this.manager.tabs.getActiveTab("output")) return; - // Display file overlay in output area with details - const fileOverlay = document.getElementById("output-file"), - fileSize = document.getElementById("output-file-size"), - fileSlice = buf.slice(0, 4096); - - fileOverlay.style.display = "block"; - fileSize.textContent = buf.byteLength.toLocaleString() + " bytes"; - - this.outputTextEl.classList.add("blur"); - this.setOutput(Utils.arrayBufferToStr(fileSlice)); - } - - /** - * Clears output file details - */ - closeFile() { - document.getElementById("output-file").style.display = "none"; - this.outputTextEl.classList.remove("blur"); - } - /** * Retrieves the dish as a string, returning the cached version if possible. * @@ -1297,80 +1252,6 @@ class OutputWaiter { magicButton.setAttribute("data-original-title", "Magic!"); } - - /** - * Handler for file slice display events. - */ - async displayFileSlice() { - document.querySelector("#output-loader .loading-msg").textContent = "Loading file slice..."; - this.toggleLoader(true); - const outputFile = document.getElementById("output-file"), - showFileOverlay = document.getElementById("show-file-overlay"), - sliceFromEl = document.getElementById("output-file-slice-from"), - sliceToEl = document.getElementById("output-file-slice-to"), - sliceFrom = parseInt(sliceFromEl.value, 10) * 1024, - sliceTo = parseInt(sliceToEl.value, 10) * 1024, - output = this.outputs[this.manager.tabs.getActiveTab("output")].data; - - let str; - if (output.type === "ArrayBuffer") { - str = Utils.arrayBufferToStr(output.result.slice(sliceFrom, sliceTo)); - } else { - str = Utils.arrayBufferToStr(await this.getDishBuffer(output.dish).slice(sliceFrom, sliceTo)); - } - - this.outputTextEl.classList.remove("blur"); - showFileOverlay.style.display = "block"; - this.clearHTMLOutput(); - this.setOutput(str); - - this.outputTextEl.style.display = "block"; - outputFile.style.display = "none"; - - this.toggleLoader(false); - } - - /** - * Handler for showing an entire file at user's discretion (even if it's way too big) - */ - async showAllFile() { - document.querySelector("#output-loader .loading-msg").textContent = "Loading entire file at user instruction. This may cause a crash..."; - this.toggleLoader(true); - const outputFile = document.getElementById("output-file"), - showFileOverlay = document.getElementById("show-file-overlay"), - output = this.outputs[this.manager.tabs.getActiveTab("output")].data; - - let str; - if (output.type === "ArrayBuffer") { - str = Utils.arrayBufferToStr(output.result); - } else { - str = Utils.arrayBufferToStr(await this.getDishBuffer(output.dish)); - } - - this.outputTextEl.classList.remove("blur"); - showFileOverlay.style.display = "none"; - this.clearHTMLOutput(); - this.setOutput(str); - - this.outputTextEl.style.display = "block"; - outputFile.style.display = "none"; - - this.toggleLoader(false); - } - - /** - * Handler for show file overlay events - * - * @param {Event} e - */ - showFileOverlayClick(e) { - const showFileOverlay = e.target; - - this.outputTextEl.classList.add("blur"); - showFileOverlay.style.display = "none"; - this.set(this.manager.tabs.getActiveTab("output")); - } - /** * Handler for extract file events. *