(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.BrowserSprite = factory()); }(this, (function () { 'use strict'; var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; function createCommonjsModule(fn, module) { return module = { exports: {} }, fn(module, module.exports), module.exports; } var deepmerge = createCommonjsModule(function (module, exports) { (function (root, factory) { if (typeof undefined === 'function' && undefined.amd) { undefined(factory); } else { module.exports = factory(); } }(commonjsGlobal, function () { function isMergeableObject(val) { var nonNullObject = val && typeof val === 'object'; return nonNullObject && Object.prototype.toString.call(val) !== '[object RegExp]' && Object.prototype.toString.call(val) !== '[object Date]' } function emptyTarget(val) { return Array.isArray(val) ? [] : {} } function cloneIfNecessary(value, optionsArgument) { var clone = optionsArgument && optionsArgument.clone === true; return (clone && isMergeableObject(value)) ? deepmerge(emptyTarget(value), value, optionsArgument) : value } function defaultArrayMerge(target, source, optionsArgument) { var destination = target.slice(); source.forEach(function(e, i) { if (typeof destination[i] === 'undefined') { destination[i] = cloneIfNecessary(e, optionsArgument); } else if (isMergeableObject(e)) { destination[i] = deepmerge(target[i], e, optionsArgument); } else if (target.indexOf(e) === -1) { destination.push(cloneIfNecessary(e, optionsArgument)); } }); return destination } function mergeObject(target, source, optionsArgument) { var destination = {}; if (isMergeableObject(target)) { Object.keys(target).forEach(function (key) { destination[key] = cloneIfNecessary(target[key], optionsArgument); }); } Object.keys(source).forEach(function (key) { if (!isMergeableObject(source[key]) || !target[key]) { destination[key] = cloneIfNecessary(source[key], optionsArgument); } else { destination[key] = deepmerge(target[key], source[key], optionsArgument); } }); return destination } function deepmerge(target, source, optionsArgument) { var array = Array.isArray(source); var options = optionsArgument || { arrayMerge: defaultArrayMerge }; var arrayMerge = options.arrayMerge || defaultArrayMerge; if (array) { return Array.isArray(target) ? arrayMerge(target, source, optionsArgument) : cloneIfNecessary(source, optionsArgument) } else { return mergeObject(target, source, optionsArgument) } } deepmerge.all = function deepmergeAll(array, optionsArgument) { if (!Array.isArray(array) || array.length < 2) { throw new Error('first argument should be an array with at least two elements') } // we are sure there are at least 2 values, so it is safe to have no initial value return array.reduce(function(prev, next) { return deepmerge(prev, next, optionsArgument) }) }; return deepmerge })); }); // // An event handler can take an optional event argument // and should not return a value // An array of all currently registered event handlers for a type // A map of event types and their corresponding event handlers. /** Mitt: Tiny (~200b) functional event emitter / pubsub. * @name mitt * @returns {Mitt} */ function mitt(all ) { all = all || Object.create(null); return { /** * Register an event handler for the given type. * * @param {String} type Type of event to listen for, or `"*"` for all events * @param {Function} handler Function to call in response to given event * @memberOf mitt */ on: function on(type , handler ) { (all[type] || (all[type] = [])).push(handler); }, /** * Remove an event handler for the given type. * * @param {String} type Type of event to unregister `handler` from, or `"*"` * @param {Function} handler Handler function to remove * @memberOf mitt */ off: function off(type , handler ) { if (all[type]) { all[type].splice(all[type].indexOf(handler) >>> 0, 1); } }, /** * Invoke all handlers for the given type. * If present, `"*"` handlers are invoked after type-matched handlers. * * @param {String} type The event type to invoke * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler * @memberof mitt */ emit: function emit(type , evt ) { (all[type] || []).map(function (handler) { handler(evt); }); (all['*'] || []).map(function (handler) { handler(type, evt); }); } }; } var namespaces_1 = createCommonjsModule(function (module, exports) { var namespaces = { svg: { name: 'xmlns', uri: 'http://www.w3.org/2000/svg' }, xlink: { name: 'xmlns:xlink', uri: 'http://www.w3.org/1999/xlink' } }; exports.default = namespaces; module.exports = exports.default; }); /** * @param {Object} attrs * @return {string} */ var objectToAttrsString = function (attrs) { return Object.keys(attrs).map(function (attr) { var value = attrs[attr].toString().replace(/"/g, '"'); return (attr + "=\"" + value + "\""); }).join(' '); }; var svg = namespaces_1.svg; var xlink = namespaces_1.xlink; var defaultAttrs = {}; defaultAttrs[svg.name] = svg.uri; defaultAttrs[xlink.name] = xlink.uri; /** * @param {string} [content] * @param {Object} [attributes] * @return {string} */ var wrapInSvgString = function (content, attributes) { if ( content === void 0 ) content = ''; var attrs = deepmerge(defaultAttrs, attributes || {}); var attrsRendered = objectToAttrsString(attrs); return ("" + content + ""); }; var svg$1 = namespaces_1.svg; var xlink$1 = namespaces_1.xlink; var defaultConfig = { attrs: ( obj = { style: ['position: absolute', 'width: 0', 'height: 0'].join('; ') }, obj[svg$1.name] = svg$1.uri, obj[xlink$1.name] = xlink$1.uri, obj ) }; var obj; var Sprite = function Sprite(config) { this.config = deepmerge(defaultConfig, config || {}); this.symbols = []; }; /** * Add new symbol. If symbol with the same id exists it will be replaced. * @param {SpriteSymbol} symbol * @return {boolean} `true` - symbol was added, `false` - replaced */ Sprite.prototype.add = function add (symbol) { var ref = this; var symbols = ref.symbols; var existing = this.find(symbol.id); if (existing) { symbols[symbols.indexOf(existing)] = symbol; return false; } symbols.push(symbol); return true; }; /** * Remove symbol & destroy it * @param {string} id * @return {boolean} `true` - symbol was found & successfully destroyed, `false` - otherwise */ Sprite.prototype.remove = function remove (id) { var ref = this; var symbols = ref.symbols; var symbol = this.find(id); if (symbol) { symbols.splice(symbols.indexOf(symbol), 1); symbol.destroy(); return true; } return false; }; /** * @param {string} id * @return {SpriteSymbol|null} */ Sprite.prototype.find = function find (id) { return this.symbols.filter(function (s) { return s.id === id; })[0] || null; }; /** * @param {string} id * @return {boolean} */ Sprite.prototype.has = function has (id) { return this.find(id) !== null; }; /** * @return {string} */ Sprite.prototype.stringify = function stringify () { var ref = this.config; var attrs = ref.attrs; var stringifiedSymbols = this.symbols.map(function (s) { return s.stringify(); }).join(''); return wrapInSvgString(stringifiedSymbols, attrs); }; /** * @return {string} */ Sprite.prototype.toString = function toString () { return this.stringify(); }; Sprite.prototype.destroy = function destroy () { this.symbols.forEach(function (s) { return s.destroy(); }); }; var SpriteSymbol = function SpriteSymbol(ref) { var id = ref.id; var viewBox = ref.viewBox; var content = ref.content; this.id = id; this.viewBox = viewBox; this.content = content; }; /** * @return {string} */ SpriteSymbol.prototype.stringify = function stringify () { return this.content; }; /** * @return {string} */ SpriteSymbol.prototype.toString = function toString () { return this.stringify(); }; SpriteSymbol.prototype.destroy = function destroy () { var this$1 = this; ['id', 'viewBox', 'content'].forEach(function (prop) { return delete this$1[prop]; }); }; /** * @param {string} content * @return {Element} */ var parse = function (content) { var hasImportNode = !!document.importNode; var doc = new DOMParser().parseFromString(content, 'image/svg+xml').documentElement; /** * Fix for browser which are throwing WrongDocumentError * if you insert an element which is not part of the document * @see http://stackoverflow.com/a/7986519/4624403 */ if (hasImportNode) { return document.importNode(doc, true); } return doc; }; var BrowserSpriteSymbol = (function (SpriteSymbol$$1) { function BrowserSpriteSymbol () { SpriteSymbol$$1.apply(this, arguments); } if ( SpriteSymbol$$1 ) BrowserSpriteSymbol.__proto__ = SpriteSymbol$$1; BrowserSpriteSymbol.prototype = Object.create( SpriteSymbol$$1 && SpriteSymbol$$1.prototype ); BrowserSpriteSymbol.prototype.constructor = BrowserSpriteSymbol; var prototypeAccessors = { isMounted: {} }; prototypeAccessors.isMounted.get = function () { return !!this.node; }; /** * @param {Element} node * @return {BrowserSpriteSymbol} */ BrowserSpriteSymbol.createFromExistingNode = function createFromExistingNode (node) { return new BrowserSpriteSymbol({ id: node.getAttribute('id'), viewBox: node.getAttribute('viewBox'), content: node.outerHTML }); }; BrowserSpriteSymbol.prototype.destroy = function destroy () { if (this.isMounted) { this.unmount(); } SpriteSymbol$$1.prototype.destroy.call(this); }; /** * @param {Element|string} target * @return {Element} */ BrowserSpriteSymbol.prototype.mount = function mount (target) { if (this.isMounted) { return this.node; } var mountTarget = typeof target === 'string' ? document.querySelector(target) : target; var node = this.render(); this.node = node; mountTarget.appendChild(node); return node; }; /** * @return {Element} */ BrowserSpriteSymbol.prototype.render = function render () { var content = this.stringify(); return parse(wrapInSvgString(content)).childNodes[0]; }; BrowserSpriteSymbol.prototype.unmount = function unmount () { this.node.parentNode.removeChild(this.node); }; Object.defineProperties( BrowserSpriteSymbol.prototype, prototypeAccessors ); return BrowserSpriteSymbol; }(SpriteSymbol)); var defaultConfig$1 = { /** * Should following options be automatically configured: * - `syncUrlsWithBaseTag` * - `locationChangeAngularEmitter` * - `moveGradientsOutsideSymbol` * @type {boolean} */ autoConfigure: true, /** * Default mounting selector * @type {string} */ mountTo: 'body', /** * Fix disappearing SVG elements when exists. * Executes when sprite mounted. * @see http://stackoverflow.com/a/18265336/796152 * @see https://github.com/everdimension/angular-svg-base-fix * @see https://github.com/angular/angular.js/issues/8934#issuecomment-56568466 * @type {boolean} */ syncUrlsWithBaseTag: false, /** * Should sprite listen custom location change event * @type {boolean} */ listenLocationChangeEvent: true, /** * Custom window event name which should be emitted to update sprite urls * @type {string} */ locationChangeEvent: 'locationChange', /** * Emit location change event in Angular automatically * @type {boolean} */ locationChangeAngularEmitter: false, /** * Selector to find symbols usages when updating sprite urls * @type {string} */ usagesToUpdate: 'use[*|href]', /** * Fix Firefox bug when gradients and patterns don't work if they are within a symbol. * Executes when sprite is rendered, but not mounted. * @see https://bugzilla.mozilla.org/show_bug.cgi?id=306674 * @see https://bugzilla.mozilla.org/show_bug.cgi?id=353575 * @see https://bugzilla.mozilla.org/show_bug.cgi?id=1235364 * @type {boolean} */ moveGradientsOutsideSymbol: false }; /** * @param {*} arrayLike * @return {Array} */ var arrayFrom = function (arrayLike) { return Array.prototype.slice.call(arrayLike, 0); }; var browser = { isChrome: function () { return /chrome/i.test(navigator.userAgent); }, isFirefox: function () { return /firefox/i.test(navigator.userAgent); }, // https://msdn.microsoft.com/en-us/library/ms537503(v=vs.85).aspx isIE: function () { return /msie/i.test(navigator.userAgent) || /trident/i.test(navigator.userAgent); }, isEdge: function () { return /edge/i.test(navigator.userAgent); } }; /** * @param {string} name * @param {*} data */ var dispatchEvent = function (name, data) { var event = document.createEvent('CustomEvent'); event.initCustomEvent(name, false, false, data); window.dispatchEvent(event); }; /** * IE doesn't evaluate