Adicionando dropdown ao widget "hamburger-category"

Dev
1

Quero modificar o widget “hamburger-category” para que eu possa exibir todas as categorias principais no menu hambúrguer com um toggle para expandir e mostrar as subcategorias de cada categoria principal.

Por exemplo:

  • Categoria 1
    • Subcategoria 1
    • Subcategoria 2
  • Categoria 2
    • Subcategoria 1
    • Subcategoria 2

Atualmente, o Discourse está configurado de forma que a classe .subcategory é anexada ao item da subcategoria. No entanto, gostaria de modificá-la ou adicionar uma classe para mostrar qual é a categoria pai. Ex. .subcategory .parent-exampleCategory

Tentei usar a API de plugins e estou usando reopenWidget() para direcionar as categorias do menu hambúrguer. Copiei o código original e estou apenas tentando modificá-lo para ver o que consigo fazer. No entanto, ao fazer isso, a classe .subcategory não está mais sendo adicionada ao elemento de lista:

Antes:

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

Depois:

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

Não tenho certeza do motivo, pois quando faço console.log(), a condição ainda é atingida, mas por algum motivo ela não está sendo adicionada ao array de resultados.

Alguém sabe se estou esquecendo algo ou se estou seguindo a abordagem errada?

Ainda sou bastante novo no desenvolvimento de plugins do Discourse, então sua ajuda seria muito apreciada! Obrigado.

Ainda não é muito diferente do `createWidget` do Discourse, mas aqui está meu código: 
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("Este método foi atingido");
          if (c.parent_category_id) {
            console.log("CID: " + c.parent_category_id);
            // Alterando .subcategory -> .testChild para ver se apenas mudar isso funciona...
            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("RESULTADOS" + 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 curtidas