Ajout d'un menu déroulant au widget "hamburger-category"

Dev
1

Je souhaite modifier le widget « hamburger-category » afin d’afficher toutes les catégories principales dans le menu hamburger, avec un bouton bascule pour développer et afficher les sous-catégories de chaque catégorie principale.

Par exemple :

  • Catégorie 1
    • Sous-catégorie 1
    • Sous-catégorie 2
  • Catégorie 2
    • Sous-catégorie 1
    • Sous-catégorie 2

Actuellement, Discourse est configuré de manière à ce que la classe .subcategory soit attachée à l’élément de sous-catégorie. Cependant, je souhaiterais le modifier ou ajouter une classe pour indiquer quelle est la catégorie parente. Par exemple : .subcategory .parent-exempleDeCatégorie.

J’ai essayé d’utiliser l’API des plugins en employant reopenWidget() pour cibler les catégories du menu hamburger. J’ai copié le code original et je tente simplement de le modifier pour voir ce que je peux faire. Cependant, lorsque je fais cela, la classe .subcategory n’est plus ajoutée à l’élément de liste du tout :

Avant :

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

Aprè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

Je ne sais pas pourquoi, car lorsque j’exécute console.log(), la condition est toujours atteinte, mais pour une raison quelconque, elle n’ajoute pas l’élément au tableau des résultats.

Est-ce que quelqu’un sait si je passe à côté de quelque chose, ou si j’adopte la mauvaise approche ?

Je suis encore assez nouveau dans le développement de plugins pour Discourse, donc votre aide serait très appréciée ! Merci.

Ce n'est pas très différent pour l'instant de la fonction `createWidget` de Discourse, mais voici mon code : 
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("Cette méthode a été atteinte");
          if (c.parent_category_id) {
            console.log("CID : " + c.parent_category_id);
            // Modification de .subcategory -> .testChild pour voir si changer uniquement cela fonctionne...
            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("RÉSULTATS" + 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 « J'aime »