Created
July 2, 2020 21:18
-
-
Save fmal/a14473fa18b0649ec3d1fbb0ece788a3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(window, document, powelUI, ARRAY) { | |
| 'use strict'; | |
| var reFileTrim = /^.+\/|\.[^\.]+$/g; // eslint-disable-line | |
| var defaultViewBox = [0, 0, 560, 560]; | |
| var defaultElement = document.createElement('x'); | |
| var xmlns = 'http://www.w3.org/2000/svg'; | |
| function process(file) { | |
| return new Promise(function(resolve) { | |
| if (file.type === 'image/svg+xml') { | |
| var rootId = file.name.replace(reFileTrim, ''); | |
| var reader = new FileReader(); | |
| reader.readAsText(file); | |
| reader.onload = function() { | |
| var element = defaultElement.cloneNode(); | |
| element.innerHTML = reader.result; | |
| var svg = element.querySelector('svg'); | |
| if (svg) { | |
| resolve([ | |
| { | |
| id: rootId, | |
| elements: ARRAY.slice.call(svg.querySelectorAll('*')), | |
| viewBox: svg.getAttribute('viewBox') || defaultViewBox.join(' ') | |
| } | |
| ]); | |
| } | |
| }; | |
| } | |
| }); | |
| } | |
| function processAll(files) { | |
| return new Promise(function(resolve) { | |
| var count = files.length; | |
| var collection = []; | |
| ARRAY.forEach.call(files, function(file) { | |
| process(file).then(function(subcolletion) { | |
| ARRAY.push.apply(collection, subcolletion); | |
| if (!--count) { | |
| resolve(collection); | |
| } | |
| }); | |
| }); | |
| }); | |
| } | |
| function buildSVGSprite(collection) { | |
| return new Promise(function(resolve) { | |
| var svg = document.createElement('svg'); | |
| collection.forEach(function(symbol) { | |
| var s = document.createElement('symbol'); | |
| s.setAttribute('id', 'svg--' + symbol.id); | |
| s.setAttribute('viewBox', symbol.viewBox); | |
| symbol.elements.forEach(function(el) { | |
| s.appendChild(el); | |
| }); | |
| svg.appendChild(s); | |
| }); | |
| svg.setAttribute('xmlns', xmlns); | |
| svg.setAttribute('height', 0); | |
| svg.setAttribute('width', 0); | |
| resolve(svg); | |
| }); | |
| } | |
| function createDownloadLink(svg) { | |
| var symbolsContainer = document.querySelector('.js-spriteSymbols'); | |
| var anchor = document.createElement('a'); | |
| var anchorIcon = document.createElement('i'); | |
| var anchorContainer = document.createElement('div'); | |
| var html = svg.outerHTML.replace(/(<path[^>]+)><\/path>/g, '$1/>'); | |
| var type = 'data:image/svg+xml;base64,'; | |
| var href = type + btoa(html); | |
| var symbols; | |
| anchor.setAttribute('download', 'sprite.svg'); | |
| anchor.setAttribute('href', href); | |
| anchorIcon.className = 'pf pf-save-1 mRs'; | |
| anchor.appendChild(anchorIcon); | |
| anchor.appendChild(document.createTextNode('Download your SVG spritemap!')); | |
| anchor.className = 'btn fill-navy100'; | |
| anchorContainer.className = 'mTl'; | |
| anchorContainer.appendChild(anchor); | |
| symbolsContainer.appendChild(anchorContainer); | |
| symbols = svg.querySelectorAll('symbol[id]'); | |
| ARRAY.forEach.call(symbols, function(symbol) { | |
| var svgIconObject = document.createElement('div'); | |
| var lvg = document.createElementNS(xmlns, 'svg'); | |
| svgIconObject.className = 'svgIcon svgIcon--medium mAs'; | |
| lvg.setAttribute('viewBox', symbol.getAttribute('viewBox')); | |
| ARRAY.forEach.call(symbol.childNodes, function(childNode) { | |
| childNode = childNode.cloneNode(true); | |
| lvg.appendChild(childNode); | |
| }); | |
| svgIconObject.appendChild(lvg); | |
| symbolsContainer.insertBefore(svgIconObject, symbolsContainer.firstChild); | |
| }); | |
| } | |
| if (window.File && window.FileReader && window.FileList && window.Blob) { | |
| document.addEventListener('DOMContentLoaded', function() { | |
| function handleFileSelect(fileInput, fileList) { | |
| powelUI.utils.empty(document.querySelector('.js-spriteSymbols')); | |
| processAll(fileList) | |
| .then(buildSVGSprite) | |
| .then(createDownloadLink); | |
| } | |
| powelUI.FileInput(document.querySelector('.js-svgFiles'), { | |
| onChange: handleFileSelect | |
| }); | |
| }); | |
| } | |
| })(this, document, PowelUI, Array.prototype); // eslint-disable-line no-undef |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment