90 lines
2.8 KiB
JavaScript
90 lines
2.8 KiB
JavaScript
/**
|
|
* AKSRT SVG Icon Helper
|
|
*
|
|
* Provides utilities for injecting SVG icons from the zib_svgs data array.
|
|
* Depends on svg-icon.js being loaded first (which defines zib_svgs).
|
|
*
|
|
* Usage:
|
|
* aksrtSvgIcon('like') → returns SVG HTML string
|
|
* aksrtInjectIcons() → replaces all <i data-svg="name"> in DOM
|
|
* aksrtInjectIcons(container) → replaces within a specific container
|
|
*
|
|
* @package AKSRT
|
|
*/
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
/**
|
|
* Get SVG HTML string by icon name.
|
|
* @param {string} name Icon key (e.g. 'like', 'view', 'comment')
|
|
* @param {string} [extraClass] Optional CSS class to add to the SVG element
|
|
* @returns {string} SVG HTML or empty string
|
|
*/
|
|
function aksrtSvgIcon(name, extraClass) {
|
|
if (!window.zib_svgs || !window.zib_svgs[name]) return '';
|
|
var cls = 'aksrt-svg-icon' + (extraClass ? ' ' + extraClass : '');
|
|
return '<svg class="' + cls + '" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true">' +
|
|
window.zib_svgs[name] +
|
|
'</svg>';
|
|
}
|
|
|
|
/**
|
|
* Inject SVG icons into the DOM by replacing <i data-svg="name"> elements.
|
|
* @param {Element} [container=document.body] Container to search within
|
|
*/
|
|
function aksrtInjectIcons(container) {
|
|
container = container || document.body;
|
|
var elements = container.querySelectorAll('i[data-svg]');
|
|
elements.forEach(function (el) {
|
|
var name = el.getAttribute('data-svg');
|
|
if (!name || !window.zib_svgs || !window.zib_svgs[name]) return;
|
|
|
|
var wrapper = document.createElement('span');
|
|
wrapper.className = el.className.replace(/fa[sbrl]?\s*/g, '').trim();
|
|
wrapper.setAttribute('data-svg', name);
|
|
wrapper.innerHTML = aksrtSvgIcon(name);
|
|
|
|
// Copy inline styles
|
|
if (el.style.cssText) {
|
|
wrapper.style.cssText = el.style.cssText;
|
|
}
|
|
|
|
el.parentNode.replaceChild(wrapper, el);
|
|
});
|
|
}
|
|
|
|
// ── Default icon styles ──
|
|
|
|
var STYLE_ID = 'aksrt-svg-icon-style';
|
|
|
|
function injectStyle() {
|
|
if (document.getElementById(STYLE_ID)) return;
|
|
var style = document.createElement('style');
|
|
style.id = STYLE_ID;
|
|
style.textContent =
|
|
'.aksrt-svg-icon{display:inline-block;vertical-align:-0.125em;width:1em;height:1em;flex-shrink:0;}' +
|
|
'[data-svg]{display:inline-flex;align-items:center;justify-content:center;}';
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
// ── Public API ──
|
|
|
|
window.aksrtSvgIcon = aksrtSvgIcon;
|
|
window.aksrtInjectIcons = aksrtInjectIcons;
|
|
|
|
// ── Auto-init ──
|
|
|
|
function init() {
|
|
injectStyle();
|
|
// Auto-inject icons on page load
|
|
aksrtInjectIcons();
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|