햄버거 카테고리 위젯에 드롭다운 추가

개발
1

“hamburger-category” 위젯을 수정하여 햄버거 메뉴에서 모든 상위 카테고리를 표시하고, 각 상위 카테고리에 대해 하위 카테고리를 확장하여 표시할 수 있는 토글을 추가하고 싶습니다.

예를 들어:

  • 카테고리 1
    • 하위 카테고리 1
    • 하위 카테고리 2
  • 카테고리 2
    • 하위 카테고리 1
    • 하위 카테고리 2

현재 Discourse는 하위 카테고리 항목에 .subcategory 클래스가 붙도록 설정되어 있습니다. 하지만 상위 카테고리가 무엇인지 표시하기 위해 이 클래스를 수정하거나 새로운 클래스를 추가하고 싶습니다. 예: .subcategory .parent-exampleCategory

플러그인 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의 createWidget과 크게 다르지 않지만 제 코드는 다음과 같습니다: 
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개의 좋아요