72 lines
1.8 KiB
JavaScript
72 lines
1.8 KiB
JavaScript
import { h } from 'virtual-dom';
|
|
let _renderers = [];
|
|
|
|
export function renderIcon(renderType, id, params) {
|
|
for (let i=0; i<_renderers.length; i++) {
|
|
let renderer = _renderers[i];
|
|
let rendererForType = renderer[renderType];
|
|
|
|
if (rendererForType) {
|
|
let result = rendererForType(id, 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);
|
|
}
|
|
|
|
export function registerIconRenderer(renderer) {
|
|
_renderers.unshift(renderer);
|
|
}
|
|
|
|
// Support for font awesome icons
|
|
function faClasses(id, params) {
|
|
let classNames = `fa fa-${id} d-icon d-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(id, params) {
|
|
let tagName = params.tagName || 'i';
|
|
let html = `<${tagName} class='${faClasses(id, 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'>" + I18n.t(params.label) + "</span>";
|
|
}
|
|
return html;
|
|
},
|
|
|
|
node(id, params) {
|
|
let tagName = params.tagName || 'i';
|
|
|
|
const properties = {
|
|
className: faClasses(id, 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);
|
|
}
|
|
}
|
|
});
|