mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-07 06:57:12 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix all ESlint errors

Browse source
This commit is contained in:
Robin Scholtes 2023-08-14 14:30:25 +12:00
parent daac91d970
commit eb53667919
8 changed files with 100 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/web/App.mjs
View file

@ -908,7 +908,7 @@ class App {
*/
buildCategoryList() {
// double-check if the c-category-list already exists,
if (document.querySelector("#categories > c-category-list")){
if (document.querySelector("#categories > c-category-list")) {
// then destroy it
document.querySelector("#categories > c-category-list").remove();
}

31
src/web/components/c-category-li.mjs
View file

@ -2,15 +2,16 @@ import {COperationList} from "./c-operation-list.mjs";
/**
* c(ustom element)-category-li ( list item )
*
* @param {App} app - The main view object for CyberChef
* @param {CatConf} category - The category and operations to be populated.
* @param {Object.<string, OpConf>} operations - The list of operation configuration objects.
* @param {Boolean} isExpanded - expand the category by default on init or not
* @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to each of the c-category-li >
* c-operation-list > c-operation-li list items in this category
* */
*/
export class CCategoryLi extends HTMLElement {
/**
* @param {App} app - The main view object for CyberChef
* @param {CatConf} category - The category and operations to be populated.
* @param {Object.<string, OpConf>} operations - The list of operation configuration objects.
* @param {Boolean} isExpanded - expand the category by default on init or not
* @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to each of the c-category-li >
* c-operation-list > c-operation-li list items in this category
*/
constructor(
app,
category,
@ -65,11 +66,11 @@ export class CCategoryLi extends HTMLElement {
const opList = new COperationList(
this.app,
this.category.ops.map( op => [op]),
this.category.ops.map(op => [op]),
this.includeOpLiStarIcon,
false,
true
)
);
opList.build();
@ -85,7 +86,7 @@ export class CCategoryLi extends HTMLElement {
li.classList.add("category");
return li;
};
}
/**
* Build the anchor element
@ -100,7 +101,7 @@ export class CCategoryLi extends HTMLElement {
a.innerText = this.label;
if (this.label === "Favourites"){
if (this.label === "Favourites") {
const editFavouritesButton = this.buildEditFavouritesButton(a);
// Note: I'm leaving this here as it was in the code originally, but it's not doing anything and it didn't
@ -118,12 +119,12 @@ export class CCategoryLi extends HTMLElement {
}
return a;
};
}
/**
* Build the collapsable panel that contains the op-list for this category
*/
buildCollapsablePanel(){
buildCollapsablePanel() {
const div = document.createElement("div");
div.setAttribute("id", `${"cat" + this.label.replace(/[\s/\-:_]/g, "")}`);
@ -137,7 +138,7 @@ export class CCategoryLi extends HTMLElement {
}
return div;
};
}
/**
* If this category is Favourites, build and return the star icon button

22
src/web/components/c-category-list.mjs
View file

@ -2,15 +2,21 @@ import {CCategoryLi} from "./c-category-li.mjs";
/**
* c(ustom element)-category-list
*
* @param {App} app - The main view object for CyberChef
* @param {CatConf[]} categories - The list of categories and operations to be populated.
* @param {Object.<string, OpConf>} operations - A list of operation configuration objects.
* @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to each of the c-category-li >
* c-operation-list > c-operation-li list items in this c-category-list
**/
*/
export class CCategoryList extends HTMLElement {
constructor(app, categories, operations, includeOpLiStarIcon) {
/**
* @param {App} app - The main view object for CyberChef
* @param {CatConf[]} categories - The list of categories and operations to be populated.
* @param {Object.<string, OpConf>} operations - A list of operation configuration objects.
* @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to each of the c-category-li >
* c-operation-list > c-operation-li list items in this c-category-list
*/
constructor(
app,
categories,
operations,
includeOpLiStarIcon
) {
super();
this.app = app;

24
src/web/components/c-ingredient-li.mjs
View file

@ -6,13 +6,18 @@ import HTMLIngredient from "../HTMLIngredient.mjs";
* Note: This is the #recipe-list list item component, not to be confused with HTMLIngredient which make up the smaller
* components of this list item. It would be good to eventually fuse that code into this component or alternatively, to
* turn that into a separate native web component .
*
* @param {App} app - The main view object for CyberChef
* @param {string} name - The operation ( or aka ingredient- in this context ) name
* @param {object[]} args - The args properties of the operation ( see operation config file )
* */
*/
export class CIngredientLi extends HTMLElement {
constructor(app, name, args = []) {
/**
* @param {App} app - The main view object for CyberChef
* @param {string} name - The operation ( or aka ingredient- in this context ) name
* @param {object[]} args - The args properties of the operation ( see operation config file )
*/
constructor(
app,
name,
args = []
) {
super();
this.app = app;
@ -38,12 +43,11 @@ export class CIngredientLi extends HTMLElement {
/**
* Handle double click
*
* @param {Event} e
*/
handleDoubleClick(e) {
// do not remove if icons or form elements are double clicked
if ( e.target === this.querySelector("li") || e.target === this.querySelector("div.op-title") ) {
if (e.target === this.querySelector("li") || e.target === this.querySelector("div.op-title")) {
this.remove();
}
}
@ -64,13 +68,13 @@ export class CIngredientLi extends HTMLElement {
ingredientDiv.classList.add("ingredients");
li.appendChild(titleDiv);
li.appendChild(ingredientDiv)
li.appendChild(ingredientDiv);
for (let i = 0; i < this.args.length; i++) {
ingredientDiv.innerHTML += (this.args[i].toHtml());
}
const icons = this.buildIcons();
const icons = this.buildIcons();
const clearfixDiv = document.createElement("div");

53
src/web/components/c-operation-li.mjs
View file

@ -2,16 +2,17 @@ import url from "url";
/**
* c(ustom element)-operation-li ( list item )
*
* @param {App} app - The main view object for CyberChef
* @param {string} name - The name of the operation
* @param {Object} icon - { class: string, innerText: string } - The optional and customizable icon displayed on the
* right side of the operation
* @param {Boolean} includeStarIcon - Include the left-side 'star' icon to favourite an operation
* @param {[number[]]} charIndicesToHighlight - optional array of indices that indicate characters to highlight (bold)
* in the operation name, for instance when the user searches for an operation by typing
*/
export class COperationLi extends HTMLElement {
/**
* @param {App} app - The main view object for CyberChef
* @param {string} name - The name of the operation
* @param {Object} icon - { class: string, innerText: string } - The optional and customizable icon displayed on the
* right side of the operation
* @param {Boolean} includeStarIcon - Include the left-side 'star' icon to favourite an operation
* @param {[number[]]} charIndicesToHighlight - optional array of indices that indicate characters to highlight (bold)
* in the operation name, for instance when the user searches for an operation by typing
*/
constructor(
app,
name,
@ -87,9 +88,9 @@ export class COperationLi extends HTMLElement {
*
* @param {HTMLElement} el
*/
handlePopover(el){
handlePopover(el) {
// never display popovers on mobile on this component
if (this.app.isMobileView()){
if (this.app.isMobileView()) {
$(el).popover("disable");
} else {
$(el).popover("enable");
@ -105,7 +106,7 @@ export class COperationLi extends HTMLElement {
const li = this.buildListItem();
const icon = this.buildIcon();
if ( this.includeStarIcon ){
if (this.includeStarIcon) {
const starIcon = this.buildStarIcon();
li.appendChild(starIcon);
}
@ -134,16 +135,16 @@ export class COperationLi extends HTMLElement {
$(".popover").on("mouseleave", function () {
$(_this).popover("hide");
});
}).on("mouseleave", function () {
const _this = this;
setTimeout(function() {
// Determine if the popover associated with this element is being hovered over
if ($(_this).data("bs.popover") &&
($(_this).data("bs.popover").tip && !$($(_this).data("bs.popover").tip).is(":hover"))) {
$(_this).popover("hide");
}
}, 50);
});
})
.on("mouseleave", function () {
const _this = this;
setTimeout(function() {
// Determine if the popover associated with this element is being hovered over
if ($(_this).data("bs.popover") && ($(_this).data("bs.popover").tip && !$($(_this).data("bs.popover").tip).is(":hover"))) {
$(_this).popover("hide");
}
}, 50);
});
}
/**
@ -180,7 +181,7 @@ export class COperationLi extends HTMLElement {
buildListItem() {
const li = document.createElement("li");
li.appendChild( this.buildOperationName() );
li.appendChild(this.buildOperationName());
li.setAttribute("data-name", this.name);
li.classList.add("operation");
@ -190,7 +191,7 @@ export class COperationLi extends HTMLElement {
}
if (this.config.description){
if (this.config.description) {
let dataContent = this.config.description;
if (this.config.infoURL) {
@ -234,7 +235,7 @@ export class COperationLi extends HTMLElement {
icon.classList.add("op-icon");
icon.classList.add("star-icon");
if (this.isFavourite){
if (this.isFavourite) {
icon.innerText = "star";
} else {
icon.innerText = "star_outline";
@ -261,7 +262,7 @@ export class COperationLi extends HTMLElement {
*/
cloneNode() {
const { app, name, icon, includeStarIcon, charIndicesToHighlight } = this;
return new COperationLi( app, name, icon, includeStarIcon, charIndicesToHighlight );
return new COperationLi(app, name, icon, includeStarIcon, charIndicesToHighlight);
}
@ -270,7 +271,7 @@ export class COperationLi extends HTMLElement {
* or simply sets the name in the span element
*/
buildOperationName() {
const span = document.createElement('span');
const span = document.createElement("span");
if (this.charIndicesToHighlight.length) {
let opName = "",

22
src/web/components/c-operation-list.mjs
View file

@ -3,15 +3,17 @@ import Sortable from "sortablejs";
/**
* c(ustom element)-operation-list
*
* @param {App} app - The main view object for CyberChef
* @param {[string, number[]]} operations - A list of operation names and indexes of characters to highlight
* @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to each of the c-category-li >
* c-operation-list > c-operation-li list items in this c-category-list
*
* @param {Object} icon ( { class: string, innerText: string } ). check-icon by default
*/
export class COperationList extends HTMLElement {
/**
* @param {App} app - The main view object for CyberChef
* @param {[string, number[]]} operations - A list of operation names and indexes of characters to highlight
* @param {Boolean} includeStarIcon - Include the left side 'star' icon to each of the c-category-li >
* c-operation-list > c-operation-li list items in this c-category-list
* @param {Boolean} isSortable - List items may be sorted ( reordered ). False by default
* @param {Boolean} isCloneable - List items are cloneable to a target list. True by default
* @param {Object} icon ( { class: string, innerText: string } ). 'check-icon' by default
*/
constructor(
app,
operations,
@ -50,19 +52,19 @@ export class COperationList extends HTMLElement {
);
ul.appendChild(cOpLi);
}))
}));
if (this.isSortable) {
this.createSortableList(ul);
} else if (!this.app.isMobileView() && this.isCloneable) {
this.createCloneableList(ul, "recipe", "rec-list"); // target name and id can be component params if needed to make it reusable
this.createCloneableList(ul, "recipe", "rec-list");
}
this.append(ul);
}
/**
* Create a sortable ( not cloneable ) list
* Create a sortable ( but not cloneable ) list
*
* @param { HTMLElement } ul
* */

7
src/web/waiters/OperationsWaiter.mjs
View file

@ -6,7 +6,6 @@
import {fuzzyMatch, calcMatchRanges} from "../../core/lib/FuzzyMatch.mjs";
import {COperationList} from "../components/c-operation-list.mjs";
import {COperationLi} from "../components/c-operation-li.mjs";
/**
* Waiter to handle events related to the operations.
@ -194,10 +193,10 @@ class OperationsWaiter {
// Get list of Favourite operation names
const favCatConfig = this.app.categories.find(catConfig => catConfig.name === "Favourites");
if(favCatConfig !== undefined) {
if (favCatConfig !== undefined) {
const opList = new COperationList(
this.app,
favCatConfig.ops.map( op => [op]),
favCatConfig.ops.map(op => [op]),
false,
true,
false,
@ -205,7 +204,7 @@ class OperationsWaiter {
class: "remove-icon",
innerText: "delete"
},
)
);
opList.build();
div.appendChild(opList);

17
src/web/waiters/RecipeWaiter.mjs
View file

@ -34,9 +34,18 @@ class RecipeWaiter {
initDragAndDrop() {
const recList = document.getElementById("rec-list");
let swapThreshold = this.app.isMobileView() ? 0.60 : 0.10;
let animation = this.app.isMobileView() ? 400 : 200;
let delay = this.app.isMobileView() ? 200 : 0;
let swapThreshold, animation, delay;
// tweak these values for better user experiences per device type and UI
if (this.app.isMobileView()) {
swapThreshold = 0.60;
animation = 400;
delay = 200;
} else {
swapThreshold = 0.10;
animation = 200;
delay = 0;
}
// Recipe list
Sortable.create(recList, {
@ -365,7 +374,7 @@ class RecipeWaiter {
* @param {string} name - The name of the operation to add
*/
addOperation(name) {
let item = this.buildRecipeOperation(name);
const item = this.buildRecipeOperation(name);
document.getElementById("rec-list").appendChild(item);
$(item).find("[data-toggle='tooltip']").tooltip();