126 lines
3.3 KiB
JavaScript
126 lines
3.3 KiB
JavaScript
import { h } from "virtual-dom";
|
|
let _renderers = [];
|
|
|
|
const REPLACEMENTS = {
|
|
"d-tracking": "circle",
|
|
"d-muted": "times-circle",
|
|
"d-regular": "circle-o",
|
|
"d-watching": "exclamation-circle",
|
|
"d-watching-first": "dot-circle-o",
|
|
"d-drop-expanded": "caret-down",
|
|
"d-drop-collapsed": "caret-right",
|
|
"d-unliked": "heart-o",
|
|
"d-liked": "heart",
|
|
"notification.mentioned": "at",
|
|
"notification.group_mentioned": "at",
|
|
"notification.quoted": "quote-right",
|
|
"notification.replied": "reply",
|
|
"notification.posted": "reply",
|
|
"notification.edited": "pencil",
|
|
"notification.liked": "heart",
|
|
"notification.liked_2": "heart",
|
|
"notification.liked_many": "heart",
|
|
"notification.private_message": "envelope-o",
|
|
"notification.invited_to_private_message": "envelope-o",
|
|
"notification.invited_to_topic": "hand-o-right",
|
|
"notification.invitee_accepted": "user",
|
|
"notification.moved_post": "sign-out",
|
|
"notification.linked": "link",
|
|
"notification.granted_badge": "certificate",
|
|
"notification.topic_reminder": "hand-o-right",
|
|
"notification.watching_first_post": "dot-circle-o",
|
|
"notification.group_message_summary": "group"
|
|
};
|
|
|
|
export function replaceIcon(source, destination) {
|
|
REPLACEMENTS[source] = destination;
|
|
}
|
|
|
|
export function renderIcon(renderType, id, params) {
|
|
for (let i = 0; i < _renderers.length; i++) {
|
|
let renderer = _renderers[i];
|
|
let rendererForType = renderer[renderType];
|
|
|
|
if (rendererForType) {
|
|
const icon = { id, replacementId: REPLACEMENTS[id] };
|
|
let result = rendererForType(icon, params || {});
|
|
if (result) {
|
|
return result;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export function iconHTML(id, params) {
|
|
return renderIcon("string", id, params);
|
|
}
|
|
|
|
export function iconNode(id, params) {
|
|
return renderIcon("node", id, params);
|
|
}
|
|
|
|
// TODO: Improve how helpers are registered for vdom compliation
|
|
if (typeof Discourse !== "undefined") {
|
|
Discourse.__widget_helpers.iconNode = iconNode;
|
|
}
|
|
|
|
export function registerIconRenderer(renderer) {
|
|
_renderers.unshift(renderer);
|
|
}
|
|
|
|
// Support for font awesome icons
|
|
function faClasses(icon, params) {
|
|
let classNames = `fa fa-${icon.replacementId || icon.id} d-icon d-icon-${
|
|
icon.id
|
|
}`;
|
|
|
|
if (params) {
|
|
if (params.modifier) {
|
|
classNames += " fa-" + params.modifier;
|
|
}
|
|
if (params["class"]) {
|
|
classNames += " " + params["class"];
|
|
}
|
|
}
|
|
return classNames;
|
|
}
|
|
|
|
// default resolver is font awesome
|
|
registerIconRenderer({
|
|
name: "font-awesome",
|
|
|
|
string(icon, params) {
|
|
let tagName = params.tagName || "i";
|
|
let html = `<${tagName} class='${faClasses(icon, params)}'`;
|
|
if (params.title) {
|
|
html += ` title='${I18n.t(params.title).replace(/'/g, "'")}'`;
|
|
}
|
|
if (params.label) {
|
|
html += " aria-hidden='true'";
|
|
}
|
|
html += `></${tagName}>`;
|
|
if (params.label) {
|
|
html += `<span class='sr-only'>${params.label}</span>`;
|
|
}
|
|
return html;
|
|
},
|
|
|
|
node(icon, params) {
|
|
let tagName = params.tagName || "i";
|
|
|
|
const properties = {
|
|
className: faClasses(icon, params),
|
|
attributes: { "aria-hidden": true }
|
|
};
|
|
|
|
if (params.title) {
|
|
properties.attributes.title = params.title;
|
|
}
|
|
if (params.label) {
|
|
return h(tagName, properties, h("span.sr-only", I18n.t(params.label)));
|
|
} else {
|
|
return h(tagName, properties);
|
|
}
|
|
}
|
|
});
|