mirror of
https://github.com/gchq/CyberChef.git
synced 2025-05-07 06:57:12 -04:00
[#181] add some functions that allow for an individual Category to be re-rendered ( such as Favourites, but can be used for any Category in the future if needed ), additional refactoring to make previously mentioned functionality work
This commit is contained in:
Robin Scholtes
parent
bff22d4b7f
commit
8d14dfa554
1 changed files with 142 additions and 67 deletions
209
src/web/App.mjs
209
src/web/App.mjs
|
|
@ -50,6 +50,9 @@ class App {
|
|||
this.breakpoint = 768;
|
||||
}
|
||||
|
||||
/**
|
||||
* Is current view < breakpoint
|
||||
*/
|
||||
isMobileView() {
|
||||
return window.innerWidth < this.breakpoint;
|
||||
}
|
||||
|
|
@ -64,7 +67,7 @@ class App {
|
|||
|
||||
this.initialiseUI();
|
||||
this.loadLocalStorage();
|
||||
this.populateOperationsList();
|
||||
this.buildOperationsList();
|
||||
this.manager.setup();
|
||||
this.manager.output.saveBombe();
|
||||
this.uriParams = this.getURIParams();
|
||||
|
|
@ -241,59 +244,6 @@ class App {
|
|||
}
|
||||
|
||||
|
||||
/**
|
||||
* Populates the operations accordion list with the categories and operations specified in the
|
||||
* view constructor.
|
||||
*
|
||||
* @fires Manager#oplistcreate
|
||||
*/
|
||||
populateOperationsList() {
|
||||
// Move edit button away before we overwrite it
|
||||
document.body.appendChild(document.getElementById("edit-favourites"));
|
||||
|
||||
let html = "";
|
||||
let i;
|
||||
|
||||
for (i = 0; i < this.categories.length; i++) {
|
||||
const catConf = this.categories[i],
|
||||
selected = i === 0,
|
||||
cat = new HTMLCategory(catConf.name, selected);
|
||||
|
||||
for (let j = 0; j < catConf.ops.length; j++) {
|
||||
const opName = catConf.ops[j];
|
||||
if (!(opName in this.operations)) {
|
||||
log.warn(`${opName} could not be found.`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const op = new HTMLOperation(opName, this.operations[opName], this, this.manager);
|
||||
cat.addOperation(op);
|
||||
}
|
||||
|
||||
html += cat.toHtml();
|
||||
}
|
||||
|
||||
document.getElementById("categories").innerHTML = html;
|
||||
|
||||
const opLists = document.querySelectorAll("#categories .op-list");
|
||||
|
||||
for (i = 0; i < opLists.length; i++) {
|
||||
opLists[i].dispatchEvent(this.manager.oplistcreate);
|
||||
}
|
||||
|
||||
// Add edit button to first category (Favourites)
|
||||
const favCat = document.querySelector("#categories a[data-target='#catFavourites']");
|
||||
favCat.appendChild(document.getElementById("edit-favourites"));
|
||||
favCat.setAttribute("data-help-title", "Favourite operations");
|
||||
favCat.setAttribute("data-help", `<p>This category displays your favourite operations.</p>
|
||||
<ul>
|
||||
<li><b>To add:</b> drag an operation over the Favourites category</li>
|
||||
<li><b>To reorder:</b> Click on the 'Edit favourites' button and drag operations up and down in the list provided</li>
|
||||
<li><b>To remove:</b> Click on the 'Edit favourites' button and hit the delete button next to the operation you want to remove</li>
|
||||
</ul>`);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Sets up the adjustable splitter to allow the user to resize areas of the page.
|
||||
*
|
||||
|
|
@ -367,7 +317,6 @@ class App {
|
|||
}
|
||||
this.manager.options.load(lOptions);
|
||||
|
||||
// Load favourites
|
||||
this.loadFavourites();
|
||||
}
|
||||
|
||||
|
|
@ -449,11 +398,7 @@ class App {
|
|||
* refreshes the operation list.
|
||||
*/
|
||||
resetFavourites() {
|
||||
this.saveFavourites(this.dfavourites);
|
||||
this.loadFavourites();
|
||||
this.populateOperationsList();
|
||||
this.manager.recipe.initialiseOperationDragNDrop();
|
||||
this.manager.recipe.updateSelectedOperations();
|
||||
this.updateFavourites(this.dfavourites);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -471,14 +416,54 @@ class App {
|
|||
}
|
||||
|
||||
favourites.push(name);
|
||||
this.updateFavourites(favourites, false);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Update favourites in localstorage, load the updated
|
||||
* favourites and re-render the favourites category.
|
||||
*
|
||||
* Apply 'favourite' classes and set icons appropriately
|
||||
*
|
||||
* @param {string[]} favourites
|
||||
* @param {boolean} updateAllIcons
|
||||
*/
|
||||
updateFavourites(favourites, updateAllIcons = true) {
|
||||
this.saveFavourites(favourites);
|
||||
this.loadFavourites();
|
||||
this.populateOperationsList();
|
||||
this.manager.recipe.initialiseOperationDragNDrop();
|
||||
this.manager.recipe.updateSelectedOperations();
|
||||
this.buildFavouritesCategory();
|
||||
|
||||
if (updateAllIcons) {
|
||||
this.manager.ops.updateOpsFavouriteIcons();
|
||||
}
|
||||
|
||||
if (!this.isMobileView()) {
|
||||
this.manager.recipe.initialiseOperationDragNDrop();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Build the Favourites category and insert it into #categories
|
||||
*/
|
||||
buildFavouritesCategory() {
|
||||
// Move the edit button away before we re-render the favourite category
|
||||
// A note: this is hacky and should be solved in a proper way once the entire
|
||||
// codebase and architecture gets a thorough refactoring.
|
||||
document.body.appendChild(document.getElementById("edit-favourites"));
|
||||
|
||||
// rerender the favourites category
|
||||
const catConf = this.categories.find((cat) => cat.name === "Favourites");
|
||||
this.removeCategoryFromDOM("catFavourites");
|
||||
this.addCategoryToElement(catConf, document.getElementById("categories"));
|
||||
|
||||
// Restore "edit favourites" after the favourites category has been re-rendered, and reinitialize the listener
|
||||
this.setEditFavourites();
|
||||
document.getElementById("edit-favourites").addEventListener("click", this.manager.ops.editFavouritesClick.bind(this.manager.ops));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Gets the URI params from the window and parses them to extract the actual values.
|
||||
*
|
||||
|
|
@ -881,8 +866,6 @@ class App {
|
|||
this.setCompileMessage();
|
||||
this.setDesktopSplitter(minimise);
|
||||
this.adjustComponentSizes();
|
||||
this.populateOperationsList();
|
||||
this.manager.recipe.clearAllSelectedClasses();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -892,8 +875,6 @@ class App {
|
|||
$("[data-toggle=tooltip]").tooltip("disable");
|
||||
this.setMobileSplitter();
|
||||
this.assignAvailableHeight();
|
||||
this.populateOperationsList();
|
||||
this.manager.recipe.updateSelectedOperations();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -920,6 +901,100 @@ class App {
|
|||
// set the ops-dropdown height
|
||||
document.getElementById("operations-dropdown").style.maxHeight = `${window.innerHeight - (bannerHeight+operationsHeight)}px`;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create the template for a single category
|
||||
*
|
||||
* @param {object} catConf
|
||||
* @param {boolean} selected
|
||||
*/
|
||||
createCategory(catConf, selected) {
|
||||
const cat = new HTMLCategory(catConf.name, selected);
|
||||
|
||||
catConf.ops.forEach(opName => {
|
||||
if (!(opName in this.operations)) {
|
||||
log.warn(`${opName} could not be found.`);
|
||||
return;
|
||||
}
|
||||
|
||||
const op = new HTMLOperation(opName, this.operations[opName], this, this.manager);
|
||||
cat.addOperation(op);
|
||||
});
|
||||
|
||||
return cat;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a category to an element
|
||||
*
|
||||
* @param {object} catConf
|
||||
* @param {HTMLElement} targetElement
|
||||
* @param {boolean} selected ( false by default )
|
||||
*/
|
||||
addCategoryToElement(catConf, targetElement, selected = false) {
|
||||
const cat = this.createCategory(catConf, selected);
|
||||
const catName = "cat" + cat.name.replace(/[\s/\-:_]/g, "");
|
||||
|
||||
if (catConf.name === "Favourites") {
|
||||
targetElement.innerHTML = cat.toHtml() + targetElement.innerHTML;
|
||||
} else {
|
||||
targetElement.innerHTML += cat.toHtml();
|
||||
}
|
||||
|
||||
targetElement.querySelector(`#${catName} > .op-list`).dispatchEvent(this.manager.oplistcreate);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a category from the DOM
|
||||
*
|
||||
* @param {string} catName
|
||||
*/
|
||||
removeCategoryFromDOM(catName) {
|
||||
document.querySelector(`#${catName}`).parentNode.remove();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the #operations accordion list with the categories and operations specified in the
|
||||
* view constructor.
|
||||
*
|
||||
* @fires Manager#oplistcreate
|
||||
*/
|
||||
buildOperationsList() {
|
||||
const targetElement = document.getElementById("categories");
|
||||
|
||||
// Move the edit button away before we overwrite the categories.
|
||||
// A note: this is hacky and should be solved in a proper way once the entire
|
||||
// codebase and architecture gets a thorough refactoring.
|
||||
document.body.appendChild(document.getElementById("edit-favourites"));
|
||||
|
||||
this.categories.forEach((catConf, index) => {
|
||||
this.addCategoryToElement(catConf, targetElement, index === 0);
|
||||
});
|
||||
|
||||
this.setEditFavourites();
|
||||
|
||||
this.manager.ops.updateListItemsClasses("#catFavourites > .op-list", "favourite");
|
||||
this.manager.ops.updateListItemsClasses("#rec-list", "selected");
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Set appropriate attributes and values and append "edit-favourites"
|
||||
* to the favourites category
|
||||
*/
|
||||
setEditFavourites() {
|
||||
// Add edit button to first category (Favourites)
|
||||
const favCat = document.querySelector("#categories a[data-target='#catFavourites']");
|
||||
favCat.appendChild(document.getElementById("edit-favourites"));
|
||||
favCat.setAttribute("data-help-title", "Favourite operations");
|
||||
favCat.setAttribute("data-help", `<p>This category displays your favourite operations.</p>
|
||||
<ul>
|
||||
<li><b>To add:</b> drag an operation over the Favourites category</li>
|
||||
<li><b>To reorder:</b> Click on the 'Edit favourites' button and drag operations up and down in the list provided</li>
|
||||
<li><b>To remove:</b> Click on the 'Edit favourites' button and hit the delete button next to the operation you want to remove</li>
|
||||
</ul>`);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue