Añadiendo menú desplegable al widget "hamburger-category"

Desarrollador
1

Quiero modificar el widget “hamburger-category” para poder mostrar todas las categorías principales en el menú hamburguesa con un botón de alternancia para expandir y mostrar las subcategorías de cada categoría principal.

Por ejemplo:

  • Categoría 1
    • Subcategoría 1
    • Subcategoría 2
  • Categoría 2
    • Subcategoría 1
    • Subcategoría 2

Actualmente, Discourse está configurado de manera que la clase .subcategory se asigna al elemento de la subcategoría. Sin embargo, me gustaría modificarlo o agregar una clase para mostrar cuál es la categoría padre. Por ejemplo: .subcategory .parent-exampleCategory.

He intentado usar la API de plugins y estoy utilizando reopenWidget() para dirigirme a las categorías del menú hamburguesa. He copiado el código original y solo estoy tratando de modificarlo para ver qué puedo hacer. Sin embargo, al hacer esto, la clase .subcategory ya no se agrega al elemento de la lista en absoluto:

Antes:

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

Después:

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

No estoy seguro de por qué, ya que cuando hago console.log(), la condición aún se cumple, pero por alguna razón no se está agregando al array de resultados.

¿Alguien sabe si me estoy perdiendo algo o si estoy tomando el enfoque incorrecto?

Aún soy bastante nuevo en el desarrollo de plugins para Discourse, ¡así que su ayuda sería muy apreciada! Gracias.

No es muy diferente ahora de la función `createWidget` de Discourse, pero aquí está mi 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 se ha alcanzado");
          if (c.parent_category_id) {
            console.log("CID: " + c.parent_category_id);
            // Cambiar .subcategory -> .testChild para ver si solo cambiar esto 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 Me gusta