إضافة قائمة منسدلة إلى عنصر واجهة المستخدم "hamburger-category"

مطور
1

أرغب في تعديل ويدجت “hamburger-category” لعرض جميع الفئات الرئيسية في قائمة الهامبرغر مع زر تبديل لفتح وإظهار الفئات الفرعية لكل فئة رئيسية.

على سبيل المثال:

  • الفئة 1
    • الفئة الفرعية 1
    • الفئة الفرعية 2
  • الفئة 2
    • الفئة الفرعية 1
    • الفئة الفرعية 2

حاليًا، تم إعداد Discourse بحيث يتم ربط الكلاس .subcategory بعنصر الفئة الفرعية. ومع ذلك، أود تعديل ذلك أو إضافة كلاس يوضح الفئة الأصلية. مثال: .subcategory .parent-exampleCategory.

لقد حاولت استخدام واجهة برمجة التطبيقات (Plugin 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، ولكن إليك كودي: 
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)