Added 'Show all' button to output file overlay

This commit is contained in:
n1474335 2019-12-13 12:59:59 +00:00
parent 974ce1fd12
commit 813a151524
6 changed files with 51 additions and 8 deletions

View File

@ -197,6 +197,7 @@ class Manager {
this.addMultiEventListener("#output-text", "mousedown dblclick select", this.highlighter.outputMousedown, this.highlighter);
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-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);

View File

@ -355,15 +355,17 @@
<div class="card-body">
Size: <span id="output-file-size"></span><br>
<button id="output-file-download" type="button" class="btn btn-primary btn-outline">Download</button>
<button id="output-file-show-all" type="button" class="btn btn-warning btn-outline" data-toggle="tooltip" title="Warning: This could crash your browser. Use at your own risk.">Show all</button>
<div class="input-group">
<span class="input-group-btn">
<button id="output-file-slice" type="button" class="btn btn-secondary bmd-btn-icon" title="View slice">
<span class="input-group-prepend">
<button id="output-file-slice" type="button" class="btn btn-secondary bmd-btn-icon" data-toggle="tooltip" title="View slice">
<i class="material-icons">search</i>
</button>
</span>
<input type="number" class="form-control" id="output-file-slice-from" placeholder="From" value="0" step="1024" min="0">
<input type="number" class="form-control" id="output-file-slice-from" placeholder="From" value="0" step="128" min="0">
<div class="input-group-addon">to</div>
<input type="number" class="form-control" id="output-file-slice-to" placeholder="To" value="2048" step="1024" min="0">
<input type="number" class="form-control" id="output-file-slice-to" placeholder="To" value="256" step="128" min="0">
<div class="input-group-addon">KiB</div>
</div>
</div>
</div>

View File

@ -49,7 +49,7 @@ function main() {
attemptHighlight: true,
theme: "classic",
useMetaKey: false,
ioDisplayThreshold: 512,
ioDisplayThreshold: 2048,
logLevel: "info",
autoMagic: true,
imagePreview: true,

View File

@ -98,6 +98,11 @@
.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 {

View File

@ -767,7 +767,9 @@ class InputWaiter {
// and manually fire inputChange()
inputText.value = val;
inputText.setSelectionRange(selStart + pastedData.length, selStart + pastedData.length);
this.debounceInputChange(e);
// Don't debounce here otherwise the keyup event for the Ctrl key will cancel an autobake
// (at least for large inputs)
this.inputChange(e, true);
}
}

View File

@ -1122,8 +1122,8 @@ class OutputWaiter {
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),
sliceTo = parseInt(sliceToEl.value, 10),
sliceFrom = parseInt(sliceFromEl.value, 10) * 1024,
sliceTo = parseInt(sliceToEl.value, 10) * 1024,
output = this.outputs[this.manager.tabs.getActiveOutputTab()].data;
let str;
@ -1137,6 +1137,39 @@ class OutputWaiter {
showFileOverlay.style.display = "block";
outputText.value = Utils.printable(str, true);
outputText.style.display = "block";
outputHtml.style.display = "none";
outputFile.style.display = "none";
outputHighlighter.display = "block";
inputHighlighter.display = "block";
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 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"),
output = this.outputs[this.manager.tabs.getActiveOutputTab()].data;
let str;
if (output.type === "ArrayBuffer") {
str = Utils.arrayBufferToStr(output.result);
} else {
str = Utils.arrayBufferToStr(await this.getDishBuffer(output.dish));
}
outputText.classList.remove("blur");
showFileOverlay.style.display = "none";
outputText.value = Utils.printable(str, true);
outputText.style.display = "block";
outputHtml.style.display = "none";