diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/main/assets/icon.js | 38 | ||||
| -rw-r--r-- | src/main/assets/scripts.js | 5 | ||||
| -rw-r--r-- | webpack.config.js | 19 | ||||
| -rw-r--r-- | yarn.lock | 13 |
6 files changed, 73 insertions, 5 deletions
@@ -18,6 +18,7 @@ **/out/** src/main/resources/static/*.js src/main/resources/static/*.css +src/main/resources/static/*.svg src/main/resources/static/*.map src/main/resources/static/*.LICENSE juick.p12 diff --git a/package.json b/package.json index cbc043f5..39243305 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "eslint": "6.5.0", "eslint-loader": "3.0.2", "eslint-plugin-only-ascii": "0.0.0", + "file-loader": "^4.2.0", "mini-css-extract-plugin": "^0.8.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "postcss-loader": "^3.0.0", @@ -48,6 +49,7 @@ "element-closest": "3.0.1", "evil-icons": "^1.10.1", "formdata-polyfill": "^3.0.19", + "svg4everybody": "^2.1.9", "url-polyfill": "^1.1.7", "whatwg-fetch": "^3.0.0" } 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 = '<svg class="icon__cnt">' + + '<use xlink:href="/sprite.svg#' + name + '-icon" />' + + '</svg>'; + + var html = '<div class="' + classes + '">' + + wrapSpinner(icon, classes) + + '</div>'; + + return html; +} + +function wrapSpinner(html, klass) { + if (klass.indexOf('spinner') > -1) { + return '<div class="icon__spinner">' + html + '</div>'; + } 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', '<input type="submit" value="OK"/>'); diff --git a/webpack.config.js b/webpack.config.js index cbce03f3..5ecc5eb5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -25,8 +25,8 @@ module.exports = (env, argv) => { 'whatwg-fetch', __dirname + '/src/main/assets/scripts.js', __dirname + '/src/main/assets/style.css', - require.resolve('evil-icons/assets/evil-icons.css'), - require.resolve('evil-icons/assets/evil-icons.js') + require.resolve('evil-icons/assets/sprite.svg'), + require.resolve('evil-icons/assets/evil-icons.css') ] }, output: { @@ -54,8 +54,19 @@ module.exports = (env, argv) => { } ] }, - { test: /\.png$/, loader: 'url-loader' }, - { test: /\.svg$/, loader: 'url-loader' } + { + test: /\.(jpe?g|png|gif)$/i, + loaders: [ + 'url-loader' + ] + }, + { + test: /\.(svg)$/i, + loader: 'file-loader', + options: { + name: '[name].[ext]', + }, + } ] }, plugins: [ @@ -2461,6 +2461,14 @@ file-entry-cache@^5.0.1: dependencies: flat-cache "^2.0.1" +file-loader@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-4.2.0.tgz#5fb124d2369d7075d70a9a5abecd12e60a95215e" + integrity sha512-+xZnaK5R8kBJrHK0/6HRlrKNamvVS5rjyuju+rnyxRGuwUJwpAMsVzUl5dz6rK8brkzjV6JpcFNjp6NqV0g1OQ== + dependencies: + loader-utils "^1.2.3" + schema-utils "^2.0.0" + fill-range@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7" @@ -6160,6 +6168,11 @@ svg-tags@^1.0.0: resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q= +svg4everybody@^2.1.9: + version "2.1.9" + resolved "https://registry.yarnpkg.com/svg4everybody/-/svg4everybody-2.1.9.tgz#5bd9f6defc133859a044646d4743fabc28db7e2d" + integrity sha1-W9n23vwTOFmgRGRtR0P6vCjbfi0= + svgo@^1.0.0: version "1.3.0" resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.0.tgz#bae51ba95ded9a33a36b7c46ce9c359ae9154313" |