From 99e9df0211d666573013085601b7164a32c95f34 Mon Sep 17 00:00:00 2001 From: j433866 Date: Tue, 4 Jun 2019 11:42:27 +0100 Subject: [PATCH] Holding down on tab change buttons will scroll. Hide loading stats when there's only one input --- src/web/InputWaiter.mjs | 56 ++++++++++++++++++++++++++++++++++++---- src/web/Manager.mjs | 12 ++++++--- src/web/OutputWaiter.mjs | 40 ++++++++++++++++++++++++++++ 3 files changed, 99 insertions(+), 9 deletions(-) diff --git a/src/web/InputWaiter.mjs b/src/web/InputWaiter.mjs index 4e15196a..710366d8 100644 --- a/src/web/InputWaiter.mjs +++ b/src/web/InputWaiter.mjs @@ -898,7 +898,13 @@ class InputWaiter { msg += "
loading: " + loadingStr; } - document.getElementById("input-files-info").innerHTML = msg; + const inFiles = document.getElementById("input-files-info"); + if (total > 1) { + inFiles.innerHTML = msg; + inFiles.style.display = ""; + } else { + inFiles.style.display = "none"; + } this.updateFileProgress(loadedData.activeProgress.inputNum, loadedData.activeProgress.progress); @@ -1238,8 +1244,8 @@ class InputWaiter { */ inputAdded(changeTab, inputNum) { this.addTab(inputNum, changeTab); - this.manager.output.addOutput(inputNum, changeTab); + this.manager.output.addOutput(inputNum, changeTab); this.manager.worker.addChefWorker(); } @@ -1345,11 +1351,51 @@ class InputWaiter { } else if (wheelEvent.deltaY < 0) { this.changeTabRight(); } - } /** - * Handler for clicking on next tab button + * Handler for mouse down on the next tab button + */ + nextTabClick() { + this.mousedown = true; + this.changeTabRight(); + const time = 200; + const func = function(time) { + if (this.mousedown) { + this.changeTabRight(); + const newTime = (time > 50) ? time = time - 10 : 50; + setTimeout(func.bind(this, [newTime]), newTime); + } + }; + setTimeout(func.bind(this, [time]), time); + } + + /** + * Handler for mouse down on the previous tab button + */ + previousTabClick() { + this.mousedown = true; + this.changeTabLeft(); + const time = 200; + const func = function(time) { + if (this.mousedown) { + this.changeTabLeft(); + const newTime = (time > 50) ? time = time - 10 : 50; + setTimeout(func.bind(this, [newTime]), newTime); + } + }; + setTimeout(func.bind(this, [time]), time); + } + + /** + * Handler for mouse up event on the tab buttons + */ + tabMouseUp() { + this.mousedown = false; + } + + /** + * Changes to the next (right) tab */ changeTabRight() { const activeTab = this.getActiveTab(); @@ -1363,7 +1409,7 @@ class InputWaiter { } /** - * Handler for clicking on previous tab button + * Changes to the previous (left) tab */ changeTabLeft() { const activeTab = this.getActiveTab(); diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index b0430775..4e4ea1ea 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -158,8 +158,10 @@ class Manager { this.addMultiEventListener("#input-text", "mousedown dblclick select", this.highlighter.inputMousedown, this.highlighter); document.querySelector("#input-file .close").addEventListener("click", this.input.clearIoClick.bind(this.input)); document.getElementById("btn-new-tab").addEventListener("click", this.input.addInputClick.bind(this.input)); - document.getElementById("btn-previous-input-tab").addEventListener("click", this.input.changeTabLeft.bind(this.input)); - document.getElementById("btn-next-input-tab").addEventListener("click", this.input.changeTabRight.bind(this.input)); + document.getElementById("btn-previous-input-tab").addEventListener("mousedown", this.input.previousTabClick.bind(this.input)); + document.getElementById("btn-next-input-tab").addEventListener("mousedown", this.input.nextTabClick.bind(this.input)); + this.addListeners("#btn-next-input-tab,#btn-previous-input-tab", "mouseup", this.input.tabMouseUp, this.input); + this.addListeners("#btn-next-input-tab,#btn-previous-input-tab", "mouseout", this.input.tabMouseUp, this.input); document.getElementById("btn-go-to-input-tab").addEventListener("click", this.input.goToTab.bind(this.input)); document.getElementById("btn-find-input-tab").addEventListener("click", this.input.findTab.bind(this.input)); this.addDynamicListener("#input-tabs li .input-tab-content", "wheel", this.input.scrollTab, this.input); @@ -199,8 +201,10 @@ class Manager { 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); this.addDynamicListener("#output-tabs-wrapper #output-tabs li .output-tab-content", "wheel", this.output.scrollTab, this.output); - document.getElementById("btn-previous-output-tab").addEventListener("click", this.output.changeTabLeft.bind(this.output)); - document.getElementById("btn-next-output-tab").addEventListener("click", this.output.changeTabRight.bind(this.output)); + document.getElementById("btn-previous-output-tab").addEventListener("mousedown", this.output.previousTabClick.bind(this.output)); + document.getElementById("btn-next-output-tab").addEventListener("mousedown", this.output.nextTabClick.bind(this.output)); + this.addListeners("#btn-next-output-tab,#btn-previous-output-tab", "mouseup", this.output.tabMouseUp, this.output); + this.addListeners("#btn-next-output-tab,#btn-previous-output-tab", "mouseout", this.output.tabMouseUp, this.output); document.getElementById("btn-go-to-output-tab").addEventListener("click", this.output.goToTab.bind(this.output)); document.getElementById("btn-find-output-tab").addEventListener("click", this.output.findTab.bind(this.output)); document.getElementById("output-show-pending").addEventListener("change", this.output.filterTabSearch.bind(this.output)); diff --git a/src/web/OutputWaiter.mjs b/src/web/OutputWaiter.mjs index 709e3e37..2d98e0b3 100755 --- a/src/web/OutputWaiter.mjs +++ b/src/web/OutputWaiter.mjs @@ -773,7 +773,47 @@ class OutputWaiter { } else if (wheelEvent.deltaY < 0) { this.changeTabRight(); } + } + /** + * Handler for mouse down on the next tab button + */ + nextTabClick() { + this.mousedown = true; + this.changeTabRight(); + const time = 200; + const func = function(time) { + if (this.mousedown) { + this.changeTabRight(); + const newTime = (time > 50) ? time = time - 10 : 50; + setTimeout(func.bind(this, [newTime]), newTime); + } + }; + setTimeout(func.bind(this, [time]), time); + } + + /** + * Handler for mouse down on the previous tab button + */ + previousTabClick() { + this.mousedown = true; + this.changeTabLeft(); + const time = 200; + const func = function(time) { + if (this.mousedown) { + this.changeTabLeft(); + const newTime = (time > 50) ? time = time - 10 : 50; + setTimeout(func.bind(this, [newTime]), newTime); + } + }; + setTimeout(func.bind(this, [time]), time); + } + + /** + * Handler for mouse up event on the tab buttons + */ + tabMouseUp() { + this.mousedown = false; } /**