Make input and output tab areas scrollable

This commit is contained in:
j433866 2019-06-03 16:10:05 +01:00
parent f5cf7bb1f2
commit 2575a762e1
3 changed files with 37 additions and 3 deletions

View File

@ -265,7 +265,7 @@ class InputWaiter {
this.showLoadingInfo(r.data, true);
break;
case "setInput":
this.set(r.data.inputObj, r.data.silent);
this.app.debounce(this.set, 50, "setInput", this, [r.data.inputObj, r.data.siilent])();
break;
case "inputAdded":
this.inputAdded(r.data.changeTab, r.data.inputNum);
@ -1299,6 +1299,22 @@ class InputWaiter {
}
}
/**
* Handler for scrolling on the input tabs area
*
* @param {event} wheelEvent
*/
scrollTab(wheelEvent) {
wheelEvent.preventDefault();
if (wheelEvent.deltaY > 0) {
this.changeTabLeft();
} else if (wheelEvent.deltaY < 0) {
this.changeTabRight();
}
}
/**
* Handler for clicking on next tab button
*/

View File

@ -162,6 +162,7 @@ class Manager {
document.getElementById("btn-next-input-tab").addEventListener("click", this.input.changeTabRight.bind(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);
this.addDynamicListener("#input-tabs li .input-tab-content", "click", this.input.changeTabClick, this.input);
document.getElementById("input-show-pending").addEventListener("change", this.input.filterTabSearch.bind(this.input));
document.getElementById("input-show-loading").addEventListener("change", this.input.filterTabSearch.bind(this.input));
@ -197,6 +198,7 @@ class Manager {
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);
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-go-to-output-tab").addEventListener("click", this.output.goToTab.bind(this.output));

View File

@ -51,7 +51,7 @@ class OutputWaiter {
* @returns {string | ArrayBuffer}
*/
getOutput(inputNum, raw=true) {
if (this.outputs[inputNum] === undefined || this.outputs[inputNum] === null) return -1;
if (!this.outputExists(inputNum)) return -1;
if (this.outputs[inputNum].data === null) return "";
@ -740,7 +740,7 @@ class OutputWaiter {
}
}
this.set(inputNum);
this.app.debounce(this.set, 50, "setOutput", this, [inputNum])();
if (changeInput) {
this.manager.input.changeTab(inputNum, false);
@ -760,6 +760,22 @@ class OutputWaiter {
}
}
/**
* Handler for scrolling on the output tabs area
*
* @param {event} wheelEvent
*/
scrollTab(wheelEvent) {
wheelEvent.preventDefault();
if (wheelEvent.deltaY > 0) {
this.changeTabLeft();
} else if (wheelEvent.deltaY < 0) {
this.changeTabRight();
}
}
/**
* Handler for changing to the left tab
*/