From 40c7ecc9d502bd73f51a0b944214ad0c8e56da1f Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Wed, 23 Oct 2019 12:20:37 +0300 Subject: Load icons from external SVG --- src/main/assets/icon.js | 38 ++++++++++++++++++++++++++++++++++++++ src/main/assets/scripts.js | 5 ++++- 2 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 src/main/assets/icon.js (limited to 'src/main') diff --git a/src/main/assets/icon.js b/src/main/assets/icon.js new file mode 100644 index 00000000..6ff95001 --- /dev/null +++ b/src/main/assets/icon.js @@ -0,0 +1,38 @@ +function icon(name, { size = '', className = '' }) { + const classes = `icon icon--${name} icon--${size} ${className}`.trim(); + + var icon = '' + + '' + + ''; + + var html = '
' + + wrapSpinner(icon, classes) + + '
'; + + return html; +} + +function wrapSpinner(html, klass) { + if (klass.indexOf('spinner') > -1) { + return '
' + html + '
'; + } else { + return html; + } +} + +export default function renderIcons() { + var render = true; + var icons = document.querySelectorAll('[data-icon]'); + + for (var i = 0; i < icons.length; i++) { + var currentIcon = icons[i]; + var name = currentIcon.getAttribute('data-icon'); + var options = { + className: currentIcon.className, + size: currentIcon.getAttribute('data-size') + }; + + currentIcon.insertAdjacentHTML('beforebegin', icon(name, options)); + currentIcon.parentNode.removeChild(currentIcon); + } + } diff --git a/src/main/assets/scripts.js b/src/main/assets/scripts.js index e7396c31..e181de7e 100644 --- a/src/main/assets/scripts.js +++ b/src/main/assets/scripts.js @@ -3,6 +3,8 @@ require('classlist.js'); require('url-polyfill'); require('formdata-polyfill'); import { embedLinksToX, embedAll, format } from './embed'; +import renderIcons from './icon'; +import svg4everybody from 'svg4everybody'; if (!('remove' in Element.prototype)) { // Firefox <23 Element.prototype.remove = function() { @@ -642,7 +644,8 @@ ready(function() { document.querySelectorAll('textarea').forEach((ta) => { autosize(ta); }); - + svg4everybody(); + renderIcons(); var insertPMButtons = function(e) { e.target.classList.add('narrowpm'); e.target.parentNode.insertAdjacentHTML('afterend', ''); -- cgit v1.2.3