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 @@ Options
Show the number of operations in each category
+
+
+
+