sprite-builder.js

(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