Mirrors/CyberChef
2
0
Fork 0
mirror of https://github.com/gchq/CyberChef synced 2024-11-16 09:27:56 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fix more tab weirdness.

Browse source 
Move tab buttons onto tab bar.
Calculate size of maxTabs automatically on page load.
Display total execution time when a bake finishes.
This commit is contained in:
j433866 2019-04-04 10:15:13 +01:00
parent 1eadc08098
commit b90cca77a9
4 changed files with 88 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/web/App.mjs
View file

@ -96,6 +96,9 @@ class App {
window.removeEventListener("error", window.loadingErrorHandler);
document.dispatchEvent(this.manager.apploaded);
this.manager.input.calcMaxTabs();
this.manager.output.calcMaxTabs();
}

103
src/web/InputWaiter.mjs
View file

@ -51,6 +51,14 @@ class InputWaiter {
this.maxTabs = 4; // Calculate this
}
/**
* Calculates the maximum number of tabs to display
*/
calcMaxTabs() {
const numTabs = Math.floor((document.getElementById("IO").offsetWidth - 75) / 120);
this.maxTabs = numTabs;
}
/**
* Terminates any existing loader workers and sets up a new worker
*/
@ -779,11 +787,6 @@ class InputWaiter {
if (numTabs > 0) {
tabsWrapper.parentElement.style.display = "block";
const tabButtons = document.getElementsByClassName("input-tab-buttons");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons.item(i).style.display = "inline-block";
}
document.getElementById("input-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("input-highlighter").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("input-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
@ -851,22 +854,12 @@ class InputWaiter {
if (newInputs.length > 1) {
tabsList.parentElement.style.display = "block";
const tabButtons = document.getElementsByClassName("input-tab-buttons");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons.item(i).style.display = "inline-block";
}
document.getElementById("input-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("input-highlighter").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("input-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
} else {
tabsList.parentElement.style.display = "none";
const tabButtons = document.getElementsByClassName("input-tab-buttons");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons.item(i).style.display = "none";
}
document.getElementById("input-wrapper").style.height = "calc(100% - var(--title-height))";
document.getElementById("input-highlighter").style.height = "calc(100% - var(--title-height))";
document.getElementById("input-file").style.height = "calc(100% - var(--title-height))";
@ -898,65 +891,40 @@ class InputWaiter {
/**
* Generates a list of the nearby inputNums
*
* @param {number} inputNum
* @param {string} direction
* @param inputNum
* @param direction
*/
getNearbyNums(inputNum, direction) {
const inputs = [];
if (direction === "left") {
let reachedEnd = false;
for (let i = 0; i < this.maxTabs; i++) {
let newNum;
if (i === 0) {
newNum = inputNum;
} else {
newNum = this.getNextInputNum(inputs[i-1]);
}
if (newNum === inputs[i-1]) {
reachedEnd = true;
inputs.sort(function(a, b) {
return b - a;
});
break;
}
if (reachedEnd) {
newNum = this.getPreviousInputNum(inputs[i-1]);
}
if (newNum >= 0) {
inputs.push(newNum);
const nums = [];
for (let i = 0; i < this.maxTabs; i++) {
let newNum;
if (i === 0) {
newNum = inputNum;
} else {
switch (direction) {
case "left":
newNum = this.getNextInputNum(nums[i - 1]);
if (newNum === nums[i - 1]) {
direction = "right";
newNum = this.getPreviousInputNum(nums[i - 1]);
}
break;
case "right":
newNum = this.getPreviousInputNum(nums[i - 1]);
if (newNum === nums[i - 1]) {
direction = "left";
newNum = this.getNextInputNum(nums[i - 1]);
}
}
}
} else {
let reachedEnd = false;
for (let i = 0; i < this.maxTabs; i++) {
let newNum;
if (i === 0) {
newNum = inputNum;
} else {
if (!reachedEnd) {
newNum = this.getPreviousInputNum(inputs[i-1]);
}
if (newNum === inputs[i-1]) {
reachedEnd = true;
inputs.sort(function(a, b) {
return b - a;
});
break;
}
if (reachedEnd) {
newNum = this.getNextInputNum(inputs[i-1]);
}
}
if (newNum >= 0) {
inputs.push(newNum);
}
if (!nums.includes(newNum) && (newNum > 0)) {
nums.push(newNum);
}
}
inputs.sort(function(a, b) {
nums.sort(function(a, b) {
return a - b;
});
return inputs;
return nums;
}
/**
@ -1162,7 +1130,8 @@ class InputWaiter {
clearAllIoClick() {
this.manager.worker.cancelBake();
for (let i = this.inputs.length - 1; i >= 0; i--) {
this.removeTab(this.inputs[i].inputNum);
this.manager.output.removeOutput(this.inputs[i].inputNum);
this.removeInput(this.inputs[i].inputNum);
}
this.refreshTabs();
}

97
src/web/OutputWaiter.mjs
View file

@ -27,9 +27,18 @@ class OutputWaiter {
this.manager = manager;
this.outputs = [];
this.maxTabs = 4; // Calculate this
}
/**
* Calculates the maximum number of tabs to display
*/
calcMaxTabs() {
const numTabs = Math.floor((document.getElementById("IO").offsetWidth - 75) / 120);
this.maxTabs = numTabs;
}
/**
* Gets the output for the specified input number
*
@ -40,7 +49,6 @@ class OutputWaiter {
const index = this.getOutputIndex(inputNum);
if (index === -1) return -1;
log.error(this.outputs[index]);
if (typeof this.outputs[index].data.dish.value === "string") {
return this.outputs[index].data.dish.value;
} else {
@ -112,6 +120,7 @@ class OutputWaiter {
let index = this.getOutputIndex(inputNum);
if (index === -1) {
index = this.addOutput(inputNum);
this.addTab(inputNum, true);
}
this.outputs[index].data = data;
@ -439,11 +448,6 @@ class OutputWaiter {
if (numTabs > 0) {
tabsWrapper.parentElement.style.display = "block";
const tabButtons = document.getElementsByClassName("output-tab-buttons");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons.item(i).style.display = "inline-block";
}
document.getElementById("output-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
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))";
@ -547,59 +551,34 @@ class OutputWaiter {
/**
* Generates a list of the nearby inputNums
*
* @param {number} inputNum
* @param {string} direction
* @param inputNum
* @param direction
*/
getNearbyNums(inputNum, direction) {
const nums = [];
if (direction === "left") {
let reachedEnd = false;
for (let i = 0; i < this.maxTabs; i++) {
let newNum;
if (i === 0) {
newNum = inputNum;
} else {
newNum = this.getNextInputNum(nums[i-1]);
}
if (newNum === nums[i-1]) {
reachedEnd = true;
nums.sort(function(a, b) {
return b - a;
});
break;
}
if (reachedEnd) {
newNum = this.getPreviousInputNum(nums[i-1]);
}
if (newNum >= 0) {
nums.push(newNum);
for (let i = 0; i < this.maxTabs; i++) {
let newNum;
if (i === 0) {
newNum = inputNum;
} else {
switch (direction) {
case "left":
newNum = this.getNextInputNum(nums[i - 1]);
if (newNum === nums[i - 1]) {
direction = "right";
newNum = this.getPreviousInputNum(nums[i - 1]);
}
break;
case "right":
newNum = this.getPreviousInputNum(nums[i - 1]);
if (newNum === nums[i - 1]) {
direction = "left";
newNum = this.getNextInputNum(nums[i - 1]);
}
}
}
} else {
let reachedEnd = false;
for (let i = 0; i < this.maxTabs; i++) {
let newNum;
if (i === 0) {
newNum = inputNum;
} else {
if (!reachedEnd) {
newNum = this.getPreviousInputNum(nums[i-1]);
}
if (newNum === nums[i-1]) {
reachedEnd = true;
nums.sort(function(a, b) {
return b - a;
});
break;
}
if (reachedEnd) {
newNum = this.getNextInputNum(nums[i-1]);
}
}
if (newNum >= 0) {
nums.push(newNum);
}
if (!nums.includes(newNum) && (newNum > 0)) {
nums.push(newNum);
}
}
nums.sort(function(a, b) {
@ -722,11 +701,6 @@ class OutputWaiter {
if (newInputs.length > 1) {
tabsList.parentElement.style.display = "block";
const tabButtons = document.getElementsByClassName("output-tab-buttons");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons.item(i).style.display = "inline-block";
}
document.getElementById("output-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
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))";
@ -735,11 +709,6 @@ class OutputWaiter {
} else {
tabsList.parentElement.style.display = "none";
const tabButtons = document.getElementsByClassName("output-tab-buttons");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons.item(i).style.display = "none";
}
document.getElementById("output-wrapper").style.height = "calc(100% - var(--title-height))";
document.getElementById("output-highlighter").style.height = "calc(100% - var(--title-height))";
document.getElementById("output-file").style.height = "calc(100% - var(--title-height))";

16
src/web/WorkerWaiter.mjs
View file

@ -275,7 +275,22 @@ class WorkerWaiter {
*/
bakingComplete() {
this.setBakingStatus(false);
let duration = new Date().getTime() - this.bakeStartTime;
duration = duration.toString() + "ms";
const progress = this.getBakeProgress();
let width = progress.total.toString().length;
if (duration.length > width) {
width = duration.length;
}
width = width < 2 ? 2 : width;
const totalStr = progress.total.toString().padStart(width, " ").replace(/ /g, "&nbsp;");
const durationStr = duration.padStart(width, " ").replace(/ /g, "&nbsp;");
const msg = `Total: ${totalStr}<br>Time: ${durationStr}`;
document.getElementById("bake-info").innerHTML = msg;
// look into changing this to something better
// for (let i = 0; i < this.outputs.length; i++) {
// if (this.outputs[i].data.error) {
@ -308,6 +323,7 @@ class WorkerWaiter {
*/
bake(input, recipeConfig, options, progress, step) {
this.setBakingStatus(true);
this.bakeStartTime = new Date().getTime();
if (typeof input === "string") {
input = [{