「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 の `createWidget` とはあまり変わりませんが、私のコードは以下の通りです： 
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);
            // .subcategory を .testChild に変更して、これだけで動作するか確認...
            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