discourse/app/assets/javascripts/discourse-common/lib/icon-library.js.es6
2018-04-23 12:41:41 -04:00

114 lines
3.2 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)}'`; }
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);
}
}
});