Adding dropdown to "hamburger-category" widget

dev
1

I want to modify the “hamburger-category” widget so that I can display all main categories in the hamburger menu with a toggle to expand and show the subcategories for each main category.

For example:

  • Category 1
    • Sub Category 1
    • Sub Category 2
  • Category 2
    • Sub Category 1
    • Sub Category 2

Currently, discourse has it setup so that the class .subcategory is attached to the subcategory item. However, I’d like to modify it or add a class to show what the parent category is. Ex. .subcategory .parent-exampleCategory

I’ve tried using the plugin api and am using reopenWidget() to target the hamburger categories. I’ve copied over the original code and am just trying to modify it to see what I can do. However, when I do this, the .subcategory is not being added to the list item at all anymore:

Before:

li.category-link.subcategory.category-mentor-corner-technical-libary

After:

li.category-link

Screen Shot 2021-02-23 at 9.39.09 AM

I’m not sure why because when I console.log() the condition is still being reached, but its not adding it to the results array for some reason.

Does anybody know if I’m missing something, or if I’m taking the wrong approach?

I’m still fairly new to discourse plugin development so your help would be much appreciated! Thanks.

Not too different right now from discourse's createWidget but here's my code: 
import getURL from "discourse-common/lib/get-url";
import { number } from "discourse/lib/formatter";
import { withPluginApi } from "discourse/lib/plugin-api";
import Category from "discourse/models/category";
import I18n from "I18n";
import { h } from "virtual-dom";

export default {
  name: "custom-menu-category",
  initialize() {
    withPluginApi("0.10.1", (api) => {
      api.reopenWidget("hamburger-category", {
        html(c) {
          console.log("This method reached");
          if (c.parent_category_id) {
            console.log("CID: " + c.parent_category_id);
            // Changing .subcategory -> .testChild to see if just changing this works...
            this.tagName += ".testChild";
            console.log("TN: " + this.tagName);
          }

          this.tagName += ".category-" + Category.slugFor(c, "-");

          const results = [
            this.attach("category-link", {
              category: c,
              allowUncategorized: true, 
            }),
          ];
          console.log("RESULTS" + results);

          const unreadTotal =
            parseInt(c.get("unreadTopics"), 10) +
            parseInt(c.get("newTopics"), 10);
          if (unreadTotal) {
            results.push(
              h(
                "a.badge.badge-notification",
                {
                  attributes: { href: c.get("url") },
                },
                number(unreadTotal)
              )
            );
          }

          if (!this.currentUser) {
            let count;

            if (c.get("show_subcategory_list")) {
              count = c.get("totalTopicCount");
            } else {
              count = c.get("topic_count");
            }

            results.push(h("b.topics-count", number(count)));
          }

          return results;
        },
      });

      api.reopenWidget("hamburger-categories", {
        html(attrs) {
          const href = getURL("/categories");
          let title = I18n.t("filters.categories.title");
          if (attrs.moreCount > 0) {
            title = I18n.t("categories.n_more", { count: attrs.moreCount });
          }

          let result = [
            h(
              "li.heading",
              h("a.d-link.categories-link", { attributes: { href } }, title)
            ),
          ];

          const categories = attrs.categories;
          if (categories.length === 0) {
            return;
          }
          result = result.concat(
            categories.map((c) => this.attach("hamburger-category", c))
          );

          return result;
        },
      });
    });
  },
};
1 Like