DEV: add plugin hook to add topic participant classes (#13125)

Allow plugins to add custom css classes to topic participants
This commit is contained in:
Jeff Wong 2021-05-24 09:33:21 -10:00 committed by GitHub
parent ca809d2c40
commit b66802ccf1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 2 deletions

View File

@ -52,6 +52,7 @@ import { addPostSmallActionIcon } from "discourse/widgets/post-small-action";
import { addQuickAccessProfileItem } from "discourse/widgets/quick-access-profile"; import { addQuickAccessProfileItem } from "discourse/widgets/quick-access-profile";
import { addTagsHtmlCallback } from "discourse/lib/render-tags"; import { addTagsHtmlCallback } from "discourse/lib/render-tags";
import { addToolbarCallback } from "discourse/components/d-editor"; import { addToolbarCallback } from "discourse/components/d-editor";
import { addTopicParticipantClassesCallback } from "discourse/widgets/topic-map";
import { addTopicTitleDecorator } from "discourse/components/topic-title"; import { addTopicTitleDecorator } from "discourse/components/topic-title";
import { addUserMenuGlyph } from "discourse/widgets/user-menu"; import { addUserMenuGlyph } from "discourse/widgets/user-menu";
import { addUsernameSelectorDecorator } from "discourse/helpers/decorate-username-selector"; import { addUsernameSelectorDecorator } from "discourse/helpers/decorate-username-selector";
@ -73,7 +74,7 @@ import { replaceTagRenderer } from "discourse/lib/render-tag";
import { setNewCategoryDefaultColors } from "discourse/routes/new-category"; import { setNewCategoryDefaultColors } from "discourse/routes/new-category";
// If you add any methods to the API ensure you bump up this number // If you add any methods to the API ensure you bump up this number
const PLUGIN_API_VERSION = "0.11.3"; const PLUGIN_API_VERSION = "0.11.4";
class PluginApi { class PluginApi {
constructor(version, container) { constructor(version, container) {
@ -763,6 +764,18 @@ class PluginApi {
addPostClassesCallback(callback); addPostClassesCallback(callback);
} }
/**
* Adds a callback to be called before rendering a topic participant that
* that returns custom classes to add to the participant element
*
* Example:
*
* addTopicParticipantClassesCallback((attrs) => {if (attrs.primary_group_name == "moderator") return ["important-participant"];})
**/
addTopicParticipantClassesCallback(callback) {
addTopicParticipantClassesCallback(callback);
}
/** /**
* *
* Adds a callback to be executed on the "transformed" post that is passed to the post * Adds a callback to be executed on the "transformed" post that is passed to the post

View File

@ -40,11 +40,30 @@ createWidget("topic-map-show-links", {
}, },
}); });
let addTopicParticipantClassesCallbacks = null;
export function addTopicParticipantClassesCallback(callback) {
addTopicParticipantClassesCallbacks =
addTopicParticipantClassesCallbacks || [];
addTopicParticipantClassesCallbacks.push(callback);
}
createWidget("topic-participant", { createWidget("topic-participant", {
buildClasses(attrs) { buildClasses(attrs) {
const classNames = [];
if (attrs.primary_group_name) { if (attrs.primary_group_name) {
return `group-${attrs.primary_group_name}`; classNames.push(`group-${attrs.primary_group_name}`);
} }
if (addTopicParticipantClassesCallbacks) {
for (let i = 0; i < addTopicParticipantClassesCallbacks.length; i++) {
let pluginClasses = addTopicParticipantClassesCallbacks[i].call(
this,
attrs
);
if (pluginClasses) {
classNames.push.apply(classNames, pluginClasses);
}
}
}
return classNames;
}, },
html(attrs, state) { html(attrs, state) {