diff --git a/src/web/HTMLIngredient.mjs b/src/web/HTMLIngredient.mjs
index be62f222..adb89811 100755
--- a/src/web/HTMLIngredient.mjs
+++ b/src/web/HTMLIngredient.mjs
@@ -9,8 +9,8 @@ import Utils from "../core/Utils.mjs";
/**
* Object to handle the creation of operation ingredients.
*
- * @TODO: would be nice to refactor this. Move everything to c-ingredient-li and
- * implement there accordingly, delete this file
+ * Note: Not to be confused with the native web component c-ingredient-li, which is the component that makes the parent
+ * list item 'ingredient' in recipe-list.
*/
class HTMLIngredient {
diff --git a/src/web/TODO.md b/src/web/TODO.md
index e69de29b..b6a963dc 100644
--- a/src/web/TODO.md
+++ b/src/web/TODO.md
@@ -0,0 +1,21 @@
+recipe:
+- ignore dropped item outside of rec-list
+- bit smoother sort experience would be nice
+- RecipeWaiter opSortEnd()
+
+operations:
+- can only drag an op to favourites 1 time
+- initial search is kinda slow
+- popovers should also show on key up and down per operation
+- little line on click ( for all input fields, also ingredient focus )
+- after dragging op to rec, popover no longer works on original op ( see opSortEnd )
+
+- stupid popovers on deleting favs for instance ( dont always close nicely )
+- native focus thingy is a bit ugly
+- UI tests etc.
+
+--------
+
+x highlight strings
+x esc on focused-op search results will add that op to recipe
+x be able to tab from panel to panel, open and close them, use up and down arrows
diff --git a/src/web/components/c-category-li.mjs b/src/web/components/c-category-li.mjs
index baa1cf50..5826f61f 100644
--- a/src/web/components/c-category-li.mjs
+++ b/src/web/components/c-category-li.mjs
@@ -6,8 +6,9 @@ import {COperationList} from "./c-operation-list.mjs";
* @param {App} app - The main view object for CyberChef
* @param {CatConf} category - The category and operations to be populated.
* @param {Object.} operations - The list of operation configuration objects.
- * @param {Boolean} isExpanded - expand the category on init or not
- * @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to favourite an operation easily
+ * @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 {
constructor(
@@ -102,6 +103,9 @@ export class CCategoryLi extends HTMLElement {
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
+ // do anything before my refactoring. I imagine we may want to fix that at some point though,
+ // hence I'm leaving this here.
a.setAttribute("data-help-title", "Favourite operations");
a.setAttribute("data-help", `This category displays your favourite operations.
@@ -136,7 +140,7 @@ export class CCategoryLi extends HTMLElement {
};
/**
- * If this category is Favourites, build and return the star icon to the category
+ * If this category is Favourites, build and return the star icon button
*/
buildEditFavouritesButton() {
const button = document.createElement("button");
diff --git a/src/web/components/c-category-list.mjs b/src/web/components/c-category-list.mjs
index bdd9c8f0..efbb47ca 100644
--- a/src/web/components/c-category-list.mjs
+++ b/src/web/components/c-category-list.mjs
@@ -6,7 +6,8 @@ import {CCategoryLi} from "./c-category-li.mjs";
* @param {App} app - The main view object for CyberChef
* @param {CatConf[]} categories - The list of categories and operations to be populated.
* @param {Object.} operations - A list of operation configuration objects.
- * @param {boolean} includeOpLiStarIcon - optionally add the 'star' icon to the left of an individual operation
+ * @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) {
diff --git a/src/web/components/c-ingredient-li.mjs b/src/web/components/c-ingredient-li.mjs
index 99e1c1b7..1d0aaa17 100644
--- a/src/web/components/c-ingredient-li.mjs
+++ b/src/web/components/c-ingredient-li.mjs
@@ -1,5 +1,16 @@
import HTMLIngredient from "../HTMLIngredient.mjs";
+/**
+ * c(ustom element)-ingredient-li ( list item ).
+ *
+ * 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 = []) {
super();
@@ -18,6 +29,28 @@ export class CIngredientLi extends HTMLElement {
this.addEventListener("dblclick", this.handleDoubleClick.bind(this));
}
+ /**
+ * Remove listeners on disconnectedCallback
+ */
+ disconnectedCallback() {
+ this.removeEventListener("dblclick", this.handleDoubleClick.bind(this));
+ }
+
+ /**
+ * 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") ) {
+ this.remove();
+ }
+ }
+
+ /**
+ * Build the ingredient list item
+ */
build() {
const li = document.createElement("li");
li.classList.add("operation");
@@ -37,8 +70,22 @@ export class CIngredientLi extends HTMLElement {
ingredientDiv.innerHTML += (this.args[i].toHtml());
}
- const iconsDiv = document.createElement("div");
- iconsDiv.classList.add("recipe-icons");
+ const icons = this.buildIcons();
+
+ const clearfixDiv = document.createElement("div");
+
+ li.appendChild(icons);
+ li.appendChild(clearfixDiv);
+
+ this.appendChild(li);
+ }
+
+ /**
+ * Build the icons ( disable and breakpoint / pause )
+ */
+ buildIcons() {
+ const div = document.createElement("div");
+ div.classList.add("recipe-icons");
const breakPointIcon = document.createElement("i");
breakPointIcon.classList.add("material-icons");
@@ -58,29 +105,10 @@ export class CIngredientLi extends HTMLElement {
disableIcon.setAttribute("data-help", "Disabling an operation will prevent it from being executed when the Recipe is baked. Execution will skip over the disabled operation and continue with subsequent operations.");
disableIcon.innerText = "not_interested";
- iconsDiv.appendChild(breakPointIcon);
- iconsDiv.appendChild(disableIcon);
+ div.appendChild(breakPointIcon);
+ div.appendChild(disableIcon);
- const clearfixDiv = document.createElement("div");
-
- li.appendChild(iconsDiv);
- li.appendChild(clearfixDiv);
-
- this.appendChild(li);
- }
-
- /**
- * Remove listeners on disconnectedCallback
- */
- disconnectedCallback() {
- this.removeEventListener("dblclick", this.handleDoubleClick.bind(this));
- }
-
- /**
- * Handle double click
- */
- handleDoubleClick() {
- this.remove();
+ return div;
}
}
diff --git a/src/web/components/c-operation-li.mjs b/src/web/components/c-operation-li.mjs
index f0acceb5..da77a926 100644
--- a/src/web/components/c-operation-li.mjs
+++ b/src/web/components/c-operation-li.mjs
@@ -5,9 +5,11 @@ import url from "url";
*
* @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 easily
- * @param {[number[]]} charIndicesToHighlight - optional array of indices that indicate characters to highlight (bold) in operation name
+ * @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 {
constructor(
@@ -46,6 +48,7 @@ export class COperationLi extends HTMLElement {
disconnectedCallback() {
this.removeEventListener("click", this.handleClick.bind(this));
this.removeEventListener("dblclick", this.handleDoubleClick.bind(this));
+
if (this.includeStarIcon) {
this.observer.disconnect();
}
@@ -53,10 +56,11 @@ export class COperationLi extends HTMLElement {
/**
* Handle double click
+ *
* @param {Event} e
*/
handleDoubleClick(e) {
- // Span contains operation title (highlighted or not)
+ // this span is element holding the operation title
if (e.target === this.querySelector("li") || e.target === this.querySelector("span")) {
this.app.manager.recipe.addOperation(this.name);
}
@@ -64,12 +68,15 @@ export class COperationLi extends HTMLElement {
/**
* Handle click
+ *
* @param {Event} e
*/
handleClick(e) {
if (e.target === this.querySelector("i.star-icon")) {
this.app.addFavourite(this.name);
}
+ // current use case: in the 'Edit favourites' modal, the c-operation-li components have a trashcan icon to the
+ // right
if (e.target === this.querySelector("i.remove-icon")) {
this.remove();
}
@@ -81,6 +88,7 @@ export class COperationLi extends HTMLElement {
* @param {HTMLElement} el
*/
handlePopover(el){
+ // never display popovers on mobile on this component
if (this.app.isMobileView()){
$(el).popover("disable");
} else {
@@ -112,7 +120,7 @@ export class COperationLi extends HTMLElement {
* Set the target operation popover itself to gain focus which
* enables scrolling and other interactions.
*
- * @param {Element} el - The element to start selecting from
+ * @param {HTMLElement} el - The element to start selecting from
*/
setPopover(el) {
$(el)
@@ -248,7 +256,8 @@ export class COperationLi extends HTMLElement {
/**
* Override native cloneNode method so we can clone c-operation-li properly
- * with constructor arguments for sortable and cloneable lists
+ * with constructor arguments for sortable and cloneable lists. This function
+ * is needed for the drag and drop functionality of the Sortable lists
*/
cloneNode() {
const { app, name, icon, includeStarIcon, charIndicesToHighlight } = this;
@@ -257,7 +266,8 @@ export class COperationLi extends HTMLElement {
/**
- * Highlights searched strings in the name and description of the operation.
+ * Highlights searched strings ( if applicable ) in the name and description of the operation
+ * or simply sets the name in the span element
*/
buildOperationName() {
const span = document.createElement('span');
@@ -280,33 +290,6 @@ export class COperationLi extends HTMLElement {
}
return span;
-
- // if (this.description && descIdxs.length && descIdxs[0][0] >= 0) {
- // // Find HTML tag offsets
- // const re = /<[^>]+>/g;
- // let match;
- // while ((match = re.exec(this.description))) {
- // // If the search string occurs within an HTML tag, return without highlighting it.
- // const inHTMLTag = descIdxs.reduce((acc, idxs) => {
- // const start = idxs[0];
- // return start >= match.index && start <= (match.index + match[0].length);
- // }, false);
- //
- // if (inHTMLTag) return;
- // }
- //
- // let desc = "",
- // pos = 0;
- //
- // descIdxs.forEach(idxs => {
- // const [start, length] = idxs;
- // desc += this.description.slice(pos, start) + "" +
- // this.description.slice(start, start + length) + "";
- // pos = start + length;
- // });
- // desc += this.description.slice(pos, this.description.length);
- // this.description = desc;
- // }
}
}
diff --git a/src/web/components/c-operation-list.mjs b/src/web/components/c-operation-list.mjs
index 9bfb586a..62fcdcd9 100644
--- a/src/web/components/c-operation-list.mjs
+++ b/src/web/components/c-operation-list.mjs
@@ -6,7 +6,9 @@ import Sortable from "sortablejs";
*
* @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 - optionally add the 'star' icon to the left of the operation
+ * @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 {
diff --git a/src/web/html/index.html b/src/web/html/index.html
index ddd47add..cdda4af9 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -578,9 +578,9 @@
- - To add: drag the operation over the favourites category and drop it
+ - To add: from the Operations list, click the star icon of the operation or, on desktop devices, drag and drop the operation over to the favourites category
- To reorder: drag up and down in the list below
- - To remove: hit the delete button or drag out of the list below
+ - To remove: click the trashcan icon for the operation to remove below