テーマコンポーネントでJSが機能しなくなりました

開発
1

A little help with a CSS selector? のディスカッションを続けます。

こんにちは。

少し前にこのトピックを作成し、トラストレベルのCSSセレクターを作成するJavaScriptは機能していました。しかし、今は機能しなくなりました。これがそのJavaScriptです…


import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  const allowedGroups = ["trust_level_4"]; // 対象としたいグループを追加してください
  const includeUsersField = ["username"]; // "id" または "username" のいずれかを使用してください

  api.modifyClass("component:chat/message/info", (SuperClass) => {
    return class extends SuperClass {
      @service currentUser;

      get usernameClasses() {
        if (!this.currentUser) {
          return super.usernameClasses;
        }
        const allowedGroupClasses = this.currentUser.groups
          .filter((g) => allowedGroups.includes(g.name))
          .map((g) => `group--${g.name}`);

        const extraClasses = [
          ...allowedGroupClasses,
          ...includeUsersField.map((f) => `user--${this.currentUser[f]}`),
        ]
          .filter(Boolean)
          .join(" ");

        return super.usernameClasses + " " + extraClasses;
      }
    };
  });
});

そして、これ私が使用していたCSSです…

.chat-message-info__username.group--trust_level_4 {
.chat-message-info__username__name {
color: blue;
}
}

修正方法について何かアイデアはありますか？

具体的には、何か知っておくべきDiscourseのアップデートはありますか、それともtl4がプライマリグループではないことなどに関係があるのでしょうか？

ありがとうございます！

2

サービスデコレーターをインポートするだけで機能するはずです。

import { service } from "@ember/service";

それが追加されると、@service currentUser が再び正しく読み込まれます。

「いいね！」 3
3

編集：スクリプトに入れましたが、まだ動作しません。

4

ブラウザコンソールにエラーが表示されているか共有していただけますか？それが役立つかもしれません。

5

現在のCSSを削除した後、以下のCSSを追加してみてください。

.chat-message-info__username.group--trust_level_4 .chat-message-info__username__name {
  color: blue !important;
}