Добавление выпадающего списка в виджет «hamburger-category»

Разработка
1

Я хочу модифицировать виджет «hamburger-category», чтобы отображать все основные категории в гамбургер-меню с возможностью раскрытия и показа подкатегорий для каждой основной категории.

Например:

  • Категория 1
    • Подкатегория 1
    • Подкатегория 2
  • Категория 2
    • Подкатегория 1
    • Подкатегория 2

В настоящее время в Discourse к элементу подкатегории присваивается класс .subcategory. Однако я хотел бы изменить его или добавить класс, указывающий на родительскую категорию. Например: .subcategory .parent-exampleCategory.

Я пробовал использовать API плагинов и метод reopenWidget() для работы с категориями в гамбургер-меню. Я скопировал исходный код и пытаюсь его модифицировать, чтобы посмотреть, что можно сделать. Однако при этом класс .subcategory больше не добавляется к элементу списка:

До:

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

После:

li.category-link

Screen Shot 2021-02-23 at 9.39.09 AM
Screen Shot 2021-02-23 at 9.39.09 AM514×128 14 KB

Непонятно почему, потому что при вызове console.log() условие всё ещё выполняется, но по какой-то причине оно не добавляется в массив результатов.

Знает ли кто-нибудь, чего мне не хватает или неправильно ли я подхожу к решению задачи?

Я всё ещё довольно новичок в разработке плагинов для Discourse, поэтому ваша помощь будет очень ценной! Спасибо.

На данный момент это не сильно отличается от создания виджета в Discourse, но вот мой код: 
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;
        },
      });
    });
  },
};
2 лайка