discourse/app/assets/javascripts/discourse-common/lib/icon-library.js.es6

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, "&#39;")}'`;
}
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);
}
}
});