Aggiunta di un menu a discesa al widget "hamburger-category"

Sviluppatore
1

Voglio modificare il widget “hamburger-category” in modo da poter visualizzare tutte le categorie principali nel menu a hamburger, con un toggle per espandere e mostrare le sottocategorie per ciascuna categoria principale.

Per esempio:

  • Categoria 1
    • Sottocategoria 1
    • Sottocategoria 2
  • Categoria 2
    • Sottocategoria 1
    • Sottocategoria 2

Attualmente, Discourse è configurato in modo che la classe .subcategory venga assegnata all’elemento della sottocategoria. Tuttavia, vorrei modificarlo o aggiungere una classe per indicare qual è la categoria genitore. Ad esempio: .subcategory .parent-exampleCategory.

Ho provato a utilizzare l’API dei plugin e sto usando reopenWidget() per selezionare le categorie del menu a hamburger. Ho copiato il codice originale e sto solo cercando di modificarlo per vedere cosa posso fare. Tuttavia, quando lo faccio, la classe .subcategory non viene più aggiunta all’elemento di lista:

Prima:

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

Dopo:

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

Non so perché, dato che quando eseguo console.log() la condizione viene comunque soddisfatta, ma per qualche motivo non viene aggiunta all’array dei risultati.

Qualcuno sa se sto trascurando qualcosa o se sto seguendo l’approccio sbagliato?

Sono ancora abbastanza nuovo nello sviluppo di plugin per Discourse, quindi qualsiasi aiuto sarebbe molto apprezzato! Grazie.

Al momento non è molto diverso da `createWidget` di Discourse, ma ecco il mio codice: 
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("Questo metodo è stato raggiunto");
          if (c.parent_category_id) {
            console.log("CID: " + c.parent_category_id);
            // Cambio .subcategory -> .testChild per vedere se basta modificare questo...
            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 Mi Piace