From 28182713bfda31a686bdb72a95e844fa8fcf7fe7 Mon Sep 17 00:00:00 2001 From: j433866 Date: Wed, 8 May 2019 10:10:14 +0100 Subject: [PATCH] Fix showing slice of output not working. Fix output status message not being reset. Hide magic button when baking. --- src/web/Manager.mjs | 2 +- src/web/OutputWaiter.mjs | 62 +++++++++++++++++++++++++++--- src/web/WorkerWaiter.mjs | 4 +- src/web/stylesheets/layout/_io.css | 2 +- 4 files changed, 61 insertions(+), 9 deletions(-) diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index ad57f015..533afb5a 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -196,7 +196,7 @@ class Manager { this.addMultiEventListener("#output-html", "mousedown dblclick select", this.highlighter.outputHtmlMousedown, this.highlighter); this.addDynamicListener("#output-file-download", "click", this.output.downloadFile, 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)); + 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("click", this.output.changeTabLeft.bind(this.output)); diff --git a/src/web/OutputWaiter.mjs b/src/web/OutputWaiter.mjs index 6d272d9e..cc05dd85 100755 --- a/src/web/OutputWaiter.mjs +++ b/src/web/OutputWaiter.mjs @@ -158,9 +158,6 @@ class OutputWaiter { this.outputs[inputNum].error = error; this.outputs[inputNum].progress = progress; this.updateOutputStatus("error", inputNum); - - // call handle error here - // or make the error handling part of set() } /** @@ -245,6 +242,8 @@ 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 @@ -256,6 +255,7 @@ class OutputWaiter { // run app.handleError() this.toggleLoader(false); outputText.style.display = "block"; + outputText.classList.remove("blur"); outputHtml.style.display = "none"; outputFile.style.display = "none"; outputHighlighter.display = "none"; @@ -439,7 +439,10 @@ class OutputWaiter { * Handler for file download events. */ async downloadFile() { - const fileName = window.prompt("Please enter a filename: ", "download.dat"); + let fileName = window.prompt("Please enter a filename: ", "download.dat"); + + if (fileName === null) fileName = "download.dat"; + const file = new File([this.getActive(true)], fileName); FileSaver.saveAs(file, fileName, false); } @@ -608,6 +611,7 @@ class OutputWaiter { document.getElementById("output-highlighter").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("output-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("output-loader").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; + document.getElementById("show-file-overlay").style.top = "calc(var(--tab-height) + var(--title-height) + 10px)"; document.getElementById("save-all-to-file").style.display = "inline-block"; } else { @@ -617,6 +621,7 @@ class OutputWaiter { document.getElementById("output-highlighter").style.height = "calc(100% - var(--title-height))"; document.getElementById("output-file").style.height = "calc(100% - var(--title-height))"; document.getElementById("output-loader").style.height = "calc(100% - var(--title-height))"; + document.getElementById("show-file-overlay").style.top = "calc(var(--title-height) + 10px)"; document.getElementById("save-all-to-file").style.display = "none"; } @@ -882,6 +887,7 @@ class OutputWaiter { document.getElementById("output-highlighter").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("output-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("output-loader").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; + document.getElementById("show-file-overlay").style.top = "calc(var(--tab-height) + var(--title-height) + 10px)"; document.getElementById("save-all-to-file").style.display = "inline-block"; @@ -892,6 +898,7 @@ class OutputWaiter { document.getElementById("output-highlighter").style.height = "calc(100% - var(--title-height))"; document.getElementById("output-file").style.height = "calc(100% - var(--title-height))"; document.getElementById("output-loader").style.height = "calc(100% - var(--title-height))"; + document.getElementById("show-file-overlay").style.top = "calc(var(--title-height) + 10px)"; document.getElementById("save-all-to-file").style.display = "none"; } @@ -1059,7 +1066,11 @@ class OutputWaiter { * Handler for file slice display events. */ displayFileSlice() { - const startTime = new Date().getTime(), + const outputText = document.getElementById("output-text"), + outputHtml = document.getElementById("output-html"), + outputFile = document.getElementById("output-file"), + outputHighlighter = document.getElementById("output-highlighter"), + inputHighlighter = document.getElementById("input-highlighter"), showFileOverlay = document.getElementById("show-file-overlay"), sliceFromEl = document.getElementById("output-file-slice-from"), sliceToEl = document.getElementById("output-file-slice-to"), @@ -1067,11 +1078,50 @@ class OutputWaiter { sliceTo = parseInt(sliceToEl.value, 10), str = Utils.arrayBufferToStr(this.getActive(true).slice(sliceFrom, sliceTo)); - document.getElementById("output-text").classList.remove("blur"); + outputText.classList.remove("blur"); showFileOverlay.style.display = "block"; + outputText.value = str; + + + outputText.style.display = "block"; + outputHtml.style.display = "none"; + outputFile.style.display = "none"; + outputHighlighter.display = "block"; + inputHighlighter.display = "block"; } + /** + * Handler for show file overlay events + * + * @param {Event} e + */ + showFileOverlayClick(e) { + const showFileOverlay = e.target; + + document.getElementById("output-text").classList.add("blur"); + showFileOverlay.style.display = "none"; + this.set(this.getActiveTab()); + } + + /** + * Handler for extract file events. + * + * @param {Event} e + */ + async extractFileClick(e) { + e.preventDefault(); + e.stopPropagation(); + + const el = e.target.nodeName === "I" ? e.target.parentNode : e.target; + const blobURL = el.getAttribute("blob-url"); + const fileName = el.getAttribute("file-name"); + + const blob = await fetch(blobURL).then(r => r.blob()); + this.manager.input.loadUIFiles([new File([blob], fileName, {type: blob.type})]); + } + + /** * Handler for copy click events. diff --git a/src/web/WorkerWaiter.mjs b/src/web/WorkerWaiter.mjs index feae5e56..f5256963 100644 --- a/src/web/WorkerWaiter.mjs +++ b/src/web/WorkerWaiter.mjs @@ -205,6 +205,8 @@ class WorkerWaiter { setBakingStatus(bakingStatus) { this.app.baking = bakingStatus; this.manager.controls.toggleBakeButtonFunction(bakingStatus); + + if (bakingStatus) this.manager.output.hideMagicButton(); } /** @@ -403,7 +405,7 @@ class WorkerWaiter { } } this.manager.output.updateOutputStatus("pending", inputData.inputNum); - this.manager.output.updateOutputMessage(`Input ${inputData.inputNum} has not been baked yet.`); + this.manager.output.updateOutputMessage(`Input ${inputData.inputNum} has not been baked yet.`, inputData.inputNum); if (inputData.override) { diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css index be7fe842..7e7122e7 100755 --- a/src/web/stylesheets/layout/_io.css +++ b/src/web/stylesheets/layout/_io.css @@ -233,7 +233,7 @@ #show-file-overlay { position: absolute; right: 15px; - top: 15px; + top: calc(var(--title-height) + 10px); cursor: pointer; display: none; }