diff --git a/src/web/HTMLOperation.mjs b/src/web/HTMLOperation.mjs index 0ba0ffc88b..aa160ebcf0 100755 --- a/src/web/HTMLOperation.mjs +++ b/src/web/HTMLOperation.mjs @@ -27,6 +27,7 @@ class HTMLOperation { this.manager = manager; this.name = name; + this.originalName = name; this.description = config.description; this.infoURL = config.infoURL; this.manualBake = config.manualBake || false; @@ -56,7 +57,8 @@ class HTMLOperation { if (this.description) { const infoLink = this.infoURL ? `
${titleFromWikiLink(this.infoURL)}` : ""; - const content = Utils.escapeHtml(this.description + infoLink); + const categoryInfo = this.getCategoryInfo(); + const content = Utils.escapeHtml(this.description + infoLink + categoryInfo); html += ` data-container='body' data-toggle='popover' data-placement='right' data-content="${content}" data-html='true' data-trigger='hover' @@ -75,6 +77,40 @@ class HTMLOperation { } + /** + * Gets the category information for this operation as an HTML string. + * + * @returns {string} + */ + getCategoryInfo() { + if (!this.app.options.showOpCategories) { + return ""; + } + + // Use originalName because this.name may have been modified by highlightSearchStrings + const categories = []; + for (let i = 0; i < this.app.categories.length; i++) { + const cat = this.app.categories[i]; + if (cat.name !== "Favourites" && cat.ops.includes(this.originalName)) { + categories.push(cat.name); + } + } + + if (categories.length === 0) { + return ""; + } + + // Build the category links. Note that Bootstrap's popover sanitizer strips + // custom data-* attributes, so the category name is carried in the link text + // and resolved to a category ID by OperationsWaiter.categoryLinkClick. + const categoryLinks = categories.map(catName => + `${Utils.escapeHtml(catName)}` + ).join(", "); + + return `
Category: ${categoryLinks}`; + } + + /** * Renders the operation in HTML as a full operation with ingredients. * diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 7cde638db2..f2140335b3 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -232,6 +232,8 @@ class Manager { this.addDynamicListener(".option-item input[type=checkbox]#wordWrap", "change", this.options.setWordWrap, this.options); this.addDynamicListener(".option-item input[type=checkbox]#useMetaKey", "change", this.bindings.updateKeybList, this.bindings); this.addDynamicListener(".option-item input[type=checkbox]#showCatCount", "change", this.ops.setCatCount, this.ops); + this.addDynamicListener(".option-item input[type=checkbox]#showOpCategories", "change", this.ops.toggleOpCategories, this.ops); + this.addDynamicListener(".op-category-link", "click", this.ops.categoryLinkClick, this.ops); this.addDynamicListener(".option-item input[type=number]", "keyup", this.options.numberChange, this.options); this.addDynamicListener(".option-item input[type=number]", "change", this.options.numberChange, this.options); this.addDynamicListener(".option-item select", "change", this.options.selectChange, this.options); diff --git a/src/web/html/index.html b/src/web/html/index.html index 6ce8dd9a92..f3670fbbbd 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -529,6 +529,13 @@ Show the number of operations in each category + +
+ +