diff --git a/src/web/App.mjs b/src/web/App.mjs index 7e2970a2..2b96904f 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -881,7 +881,6 @@ class App { true ); - categoryList.build(); document.querySelector("#categories").appendChild(categoryList); } } diff --git a/src/web/components/c-category-li.mjs b/src/web/components/c-category-li.mjs index da8330f3..232e1f38 100644 --- a/src/web/components/c-category-li.mjs +++ b/src/web/components/c-category-li.mjs @@ -7,7 +7,7 @@ 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.} operations - The list of operation configuration objects. + * @param {OpConfig[]} 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 @@ -54,6 +54,8 @@ export class CCategoryLi extends HTMLElement { /** * Build c-category-li containing a nested c-operation-list ( op-list ) + * + * @returns {HTMLElement} */ build() { const li = this.buildListItem(); @@ -72,13 +74,13 @@ export class CCategoryLi extends HTMLElement { true ); - opList.build(); - div.appendChild(opList); } /** * Build the li element + * + * @returns {HTMLElement} */ buildListItem() { const li = document.createElement("li"); @@ -90,6 +92,8 @@ export class CCategoryLi extends HTMLElement { /** * Build the anchor element + * + * @returns {HTMLElement} */ buildAnchor() { const a = document.createElement("a"); @@ -123,6 +127,8 @@ export class CCategoryLi extends HTMLElement { /** * Build the collapsable panel that contains the op-list for this category + * + * @returns {HTMLElement} */ buildCollapsablePanel() { const div = document.createElement("div"); @@ -142,6 +148,8 @@ export class CCategoryLi extends HTMLElement { /** * If this category is Favourites, build and return the star icon button + * + * @returns {HTMLElement} */ 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 cdc2759a..9db6e7f0 100644 --- a/src/web/components/c-category-list.mjs +++ b/src/web/components/c-category-list.mjs @@ -7,7 +7,7 @@ export class CCategoryList extends HTMLElement { /** * @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 {OpConfig[]} 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 */ @@ -23,10 +23,14 @@ export class CCategoryList extends HTMLElement { this.categories = categories; this.operations = operations; this.includeOpLiStarIcon = includeOpLiStarIcon; + + this.build(); } /** * Build c-category-list + * + * @returns {HTMLElement} */ build() { const ul = document.createElement("ul"); diff --git a/src/web/components/c-operation-li.mjs b/src/web/components/c-operation-li.mjs index 73a90b38..a95f3c3e 100644 --- a/src/web/components/c-operation-li.mjs +++ b/src/web/components/c-operation-li.mjs @@ -104,6 +104,8 @@ export class COperationLi extends HTMLElement { /** * Build c-operation-li + * + * @returns {HTMLElement} */ build() { const li = this.buildListItem(); @@ -178,6 +180,8 @@ export class COperationLi extends HTMLElement { /** * Build the li element + * + * @returns {HTMLElement} */ buildListItem() { const li = document.createElement("li"); @@ -209,6 +213,8 @@ export class COperationLi extends HTMLElement { /** * Build the operation list item right side icon + * + * @returns {HTMLElement} */ buildIcon() { const icon = document.createElement("i"); @@ -224,6 +230,8 @@ export class COperationLi extends HTMLElement { /** * Build the ( optional ) star icon + * + * @returns {HTMLElement} */ buildStarIcon() { const icon = document.createElement("i"); @@ -267,6 +275,8 @@ export class COperationLi extends HTMLElement { /** * Highlights searched strings ( if applicable ) in the name and description of the operation * or simply sets the name in the span element + * + * @returns {HTMLElement} */ buildOperationName() { const span = document.createElement("span"); @@ -283,7 +293,7 @@ export class COperationLi extends HTMLElement { pos = start + length; }); opName += this.name.slice(pos, this.name.length); - span.innerHTML = `${opName}`; + span.innerHTML = opName; } else { span.innerText = this.name; } diff --git a/src/web/components/c-operation-list.mjs b/src/web/components/c-operation-list.mjs index 1a9a6a44..839e5e1b 100644 --- a/src/web/components/c-operation-list.mjs +++ b/src/web/components/c-operation-list.mjs @@ -31,6 +31,8 @@ export class COperationList extends HTMLElement { this.isCloneable = isCloneable; this.icon = icon; + this.build(); + window.addEventListener("operationadd", this.handleChange.bind(this)); window.addEventListener("operationremove", this.handleChange.bind(this)); window.addEventListener("favouritesupdate", this.handleChange.bind(this)); @@ -56,6 +58,8 @@ export class COperationList extends HTMLElement { /** * Build c-operation-list + * + * @returns {HTMLElement} */ build() { const ul = document.createElement("ul"); diff --git a/src/web/components/c-recipe-li.mjs b/src/web/components/c-recipe-li.mjs index 8b232695..2e81f6c7 100644 --- a/src/web/components/c-recipe-li.mjs +++ b/src/web/components/c-recipe-li.mjs @@ -113,6 +113,8 @@ export class CRecipeLi extends HTMLElement { /** * Build the ingredient list item + * + * @returns {HTMLElement} */ build() { const li = document.createElement("li"); @@ -154,6 +156,8 @@ export class CRecipeLi extends HTMLElement { /** * Build the icons ( disable and breakpoint / pause ) + * + * @returns {HTMLElement} */ buildIcons() { const div = document.createElement("div"); diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index c8fe113a..16208c7a 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -204,7 +204,6 @@ class OperationsWaiter { }, ); - opList.build(); div.appendChild(opList); }