From 36224388fb84bc83b64f3379d023398b75d6d9c1 Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Mon, 14 Aug 2023 22:00:15 +1200 Subject: [PATCH] rename c-ingredient-li to c-recipe-li, update TODOs --- src/web/HTMLIngredient.mjs | 4 ++-- src/web/Manager.mjs | 4 ++-- src/web/TODO.md | 3 ++- .../{c-ingredient-li.mjs => c-recipe-li.mjs} | 10 +++++----- src/web/waiters/ControlsWaiter.mjs | 2 +- src/web/waiters/RecipeWaiter.mjs | 6 +++--- 6 files changed, 15 insertions(+), 14 deletions(-) rename src/web/components/{c-ingredient-li.mjs => c-recipe-li.mjs} (92%) diff --git a/src/web/HTMLIngredient.mjs b/src/web/HTMLIngredient.mjs index adb89811..9926458a 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. * - * 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. + * Note: Not to be confused with the native web component c-recipe-li, which is the component that is the (parent) + * list item in recipe-list. */ class HTMLIngredient { diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 64884156..13fd4de6 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -155,8 +155,8 @@ class Manager { this.addDynamicListener(".arg[type=checkbox], .arg[type=radio], select.arg", "change", this.recipe.ingChange, this.recipe); this.addDynamicListener(".disable-icon", "click", this.recipe.disableClick, this.recipe); this.addDynamicListener(".breakpoint", "click", this.recipe.breakpointClick, this.recipe); - this.addDynamicListener("c-ingredient-li li.operation", "dblclick", this.recipe.operationDblclick, this.recipe); - this.addDynamicListener("c-ingredient-li li.operation > div", "dblclick", this.recipe.operationChildDblclick, this.recipe); + this.addDynamicListener("c-recipe-li li.operation", "dblclick", this.recipe.operationDblclick, this.recipe); + this.addDynamicListener("c-recipe-li li.operation > div", "dblclick", this.recipe.operationChildDblclick, this.recipe); this.addDynamicListener("#rec-list .dropdown-menu.toggle-dropdown a", "click", this.recipe.dropdownToggleClick, this.recipe); this.addDynamicListener("#rec-list", "operationremove", this.recipe.opRemove.bind(this.recipe)); this.addDynamicListener("textarea.arg", "dragover", this.recipe.textArgDragover, this.recipe); diff --git a/src/web/TODO.md b/src/web/TODO.md index 02abf36f..fcccb93b 100644 --- a/src/web/TODO.md +++ b/src/web/TODO.md @@ -5,4 +5,5 @@ manual testing issues mobile: - double tap on mobile recipe list sometimes really annoying -- same for grabbing items in rec-list. Especially 'magic' for whatever reason? +- same for grabbing items in rec-list. Especially 'magic' for whatever reason? And 'to Hexdump' + ( so looks like recipe list items with 3 'rows', title + 2 rows or args ) diff --git a/src/web/components/c-ingredient-li.mjs b/src/web/components/c-recipe-li.mjs similarity index 92% rename from src/web/components/c-ingredient-li.mjs rename to src/web/components/c-recipe-li.mjs index 705b8a47..0370bdf3 100644 --- a/src/web/components/c-ingredient-li.mjs +++ b/src/web/components/c-recipe-li.mjs @@ -1,16 +1,16 @@ import HTMLIngredient from "../HTMLIngredient.mjs"; /** - * c(ustom element)-ingredient-li ( list item ). + * c(ustom element)-recipe-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 . */ -export class CIngredientLi extends HTMLElement { +export class CRecipeLi extends HTMLElement { /** * @param {App} app - The main view object for CyberChef - * @param {string} name - The operation ( or aka ingredient- in this context ) name + * @param {string} name - The operation name * @param {object[]} args - The args properties of the operation ( see operation config file ) */ constructor( @@ -36,7 +36,7 @@ export class CIngredientLi extends HTMLElement { cloneNode() { const { app, name, args } = this; - return new CIngredientLi( app, name, args ); + return new CRecipeLi( app, name, args ); } /** @@ -121,4 +121,4 @@ export class CIngredientLi extends HTMLElement { } } -customElements.define("c-ingredient-li", CIngredientLi); +customElements.define("c-recipe-li", CRecipeLi); diff --git a/src/web/waiters/ControlsWaiter.mjs b/src/web/waiters/ControlsWaiter.mjs index 229a774a..a1564807 100755 --- a/src/web/waiters/ControlsWaiter.mjs +++ b/src/web/waiters/ControlsWaiter.mjs @@ -497,7 +497,7 @@ ${navigator.userAgent} */ onMaximisedRecipeClick() { // if #recipe is maximised & rec-list is empty on mobile UI - if (this.app.isMobileView() && document.querySelector("#recipe.maximised-pane") && document.querySelectorAll("#rec-list > c-ingredient-li").length === 0) { + if (this.app.isMobileView() && document.querySelector("#recipe.maximised-pane") && document.querySelectorAll("#rec-list > c-recipe-li").length === 0) { // close max pane and display the expanded #operations-dropdown this.setPaneMaximised("recipe", false); this.manager.ops.openOpsDropdown(); diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs index a1622e6c..4ce90c9d 100755 --- a/src/web/waiters/RecipeWaiter.mjs +++ b/src/web/waiters/RecipeWaiter.mjs @@ -7,7 +7,7 @@ import Sortable from "sortablejs"; import Utils from "../../core/Utils.mjs"; import {escapeControlChars} from "../utils/editorUtils.mjs"; -import {CIngredientLi} from "../components/c-ingredient-li.mjs"; +import {CRecipeLi} from "../components/c-recipe-li.mjs"; /** @@ -51,7 +51,7 @@ class RecipeWaiter { Sortable.create(recList, { group: "recipe", sort: true, - draggable: "c-ingredient-li", + draggable: "c-recipe-li", swapThreshold: swapThreshold, animation: animation, delay: delay, @@ -314,7 +314,7 @@ class RecipeWaiter { * @param {string} name - The operation stub element from the operations pane */ buildRecipeOperation(name) { - const op = new CIngredientLi(this.app, name, this.app.operations[name].args); + const op = new CRecipeLi(this.app, name, this.app.operations[name].args); if (this.app.operations[name].flowControl) { op.classList.add("flow-control-op");