ChatMessageInfo / 채팅 작성자 CSS를 커스터마이징하는 방법 (위젯이 없나요?)

개발
1

오늘早些时候, 저는 각 포럼 게시물의 작성자 줄을 특정 사이트 로직에 기반한 CSS로 커스터마이징할 수 있는 작은 플러그인을 만들었습니다. 예시:

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

	// 포럼 게시물에 CSS를 숨겨서 삽입하기 위해 게시물 아이콘을 가로채기
	api.addPosterIcons((cfs, attrs) => {
		// (icon 필드를 채워 넣으면 실제 아이콘을 지정할 수 있습니다.
		// 하지만 다소 복잡해져서 아이콘은 제거했습니다.
		// 현재로선 아이콘이 지정되지 않은 상태이므로 이름 하이라이팅용 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가 없습니다. api.decorateWidget을 사용할 수 있을지 모르겠지만, 채팅에 해당하는 컴포넌트는 위젯이 아닌 컴포넌트인 ChatMessageInfo입니다.

당연한 질문이라면 죄송합니다만, 플러그인에서 ChatMessageInfo를 커스터마이징하는 좋은 전략은 무엇일까요?

(사용자의 기본 그룹에 의존하지 않는 것은 의도적인 것입니다. 우선순위를 결정하는 특수 로직이 있기 때문에, 사용자가 관리자 설정을 수동으로 올바르게 설정하도록 의존하고 싶지 않습니다.)

감사합니다!

2

안녕하세요,

쉽지 않을 것 같습니다. 이 지역에는 사용 가능한 PluginOutlet이 없습니다 (요청을 망설이지 마세요!)

클래스명만 추가하려는 경우, 다음 방법으로 수행할 수 있습니다:

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

        // 추가 클래스
        classes += " developer";

        return classes;
      }
    }
)

이것은 다음 코드를 덮어씁니다:

3

답변 감사합니다! 실제로는 다른 방법으로 해결했지만, 제안해 주신 방법도 감사합니다. 제 방법보다 훨씬 깔끔해 보이거든요(제 코드에서는 클래스 이름을 직접 접근해야 하고, 제 메서드는 좀 해킹처럼 느껴집니다). 제가 사용한 전략은 다음과 같습니다:

// Also colorize names in the real-time chat
api.decorateChatMessage(function (messageContainer, chatChannel) 
{
	let colorized_groups = this.args?.message?.user?.colorized_groups;

	if (colorized_groups == null)
		return; // no groups, nothing to do

	const nameClass = "chat-message-info__username__name";						

	let elements = messageContainer.getElementsByClassName(nameClass);
	if (elements.length == 0) // normal: this might be a second message that does not have the username header
		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가 전달되는 걸로 이해하면 되나요?

4

방법을 찾아서 잘했어요. 그렇게 해킹적인 방법은 아니네요. :smile:
하지만 그렇습니다, getter를 오버라이드하는 방식이 더 직접적이고 깔끔하긴 하죠.

그렇습니다. :slight_smile: