ChatMessageInfo / chat author CSS のカスタマイズ方法 (widget はない？)

開発
1

今日、フォーラム投稿ごとの著者行を、サイト固有の特別なロジックに基づいてCSSでカスタマイズできる小さなプラグインを作成しました。例：

function initColorize(api)
{
	api.includePostAttributes('colorized_groups');

	// フォーラム投稿のCSSをこっそり追加するために投稿アイコンを乗っ取る
	api.addPosterIcons((cfs, attrs) => {
		// (アイコンフィールドに入力することで、実際のアイコンを指定できます。
		// アイコンは少し散らかりすぎていたので削除しました。
		// 現時点では、アイコンが指定されていないため、名前のCSSハイライトにのみ使用されます。)	
		if (attrs.colorized_groups.indexOf("developer") > -1)
			return { icon: '', className: 'developer', title: 'Developer' };
		else if (attrs.colorized_groups.indexOf("wip_researcher") > -1)
			return { icon: '', className: 'wip_researcher', title: 'WIP Researcher' };
		else if (attrs.colorized_groups.indexOf("researcher") > -1)
			return { icon: '', className: 'researcher', title: 'Researcher' };
	});
}

次に、リアルタイムチャットでも同様のカスタマイズを行いたいのですが、リアルタイムチャットメッセージ用の api.addPosterIcons に相当するものはありません。 api.decorateWidget を使用できるかもしれませんが、チャットに対応するコンポーネントはウィジェットではなくコンポーネントである ChatMessageInfo です。

明白なことかもしれませんが、プラグインから ChatMessageInfo をカスタマイズするための良い戦略は何でしょうか？

（ユーザーのプライマリグループに依存しないのは意図的です。どのグループが優先されるべきかについての特別なロジックがあり、ユーザー/管理者が手動で正しく設定することに依存したくないからです。）

ありがとうございます！

2

こんにちは。

このエリアには利用可能なPluginOutletがありません（リクエストしてください！）ので、簡単ではないと思います。

classnamesのみを追加したい場合は、次のようにすることができます。

api.modifyClass(
  "component:chat/message/info",
  (Superclass) =>
    class extends Superclass {
      get usernameClasses() {
        let classes = super.usernameClasses;

        // 追加のクラスを追加
        classes += " developer";

        return classes;
      }
    }
);

これは、このコードを上書きします。

「いいね！」 1
3

返信ありがとうございます！別の解決策を見つけましたが、あなたの提案もよりクリーンに見えるので感謝しています（私の方法ではクラス名にアクセスする必要があり、少しハッキーに感じます）。私が使用した戦略は次のとおりです。

// リアルタイムチャットの名前も色付けする
api.decorateChatMessage(function (messageContainer, chatChannel) 
{
	let colorized_groups = this.args?.message?.user?.colorized_groups;

	if (colorized_groups == null)
		return; // グループがない場合は何もしない

	const nameClass = "chat-message-info__username__name";						
	
	let elements = messageContainer.getElementsByClassName(nameClass);
	if (elements.length == 0) // 通常：これはユーザー名ヘッダーがない2番目のメッセージである可能性があります
		return; 

	let nameDiv = elements[0];

	if (colorized_groups.indexOf("developer") > -1)
		nameDiv.classList.add("developer");
	else if (colorized_groups.indexOf("wip_researcher") > -1)
		nameDiv.classList.add("wip_researcher");
	else if (colorized_groups.indexOf("researcher") > -1)
		nameDiv.classList.add("researcher");
});

あなたの方法でも、this.args.message.user は渡されると想定していますか？

「いいね！」 1
4

見つけられてよかったですね！そんなにハッキーではありませんよ。:smile:
はい、getter を上書きする方が直接的でクリーンです。

その通りです。:slight_smile:

「いいね！」 1
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.