123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937 |
- (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')
- }
-
- return array.reduce(function(prev, next) {
- return deepmerge(prev, next, optionsArgument)
- })
- };
- return deepmerge
- }));
- });
-
-
-
-
-
- function mitt(all ) {
- all = all || Object.create(null);
- return {
-
- on: function on(type , handler ) {
- (all[type] || (all[type] = [])).push(handler);
- },
-
- off: function off(type , handler ) {
- if (all[type]) {
- all[type].splice(all[type].indexOf(handler) >>> 0, 1);
- }
- },
-
- 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;
- });
- 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;
- var wrapInSvgString = function (content, attributes) {
- if ( content === void 0 ) content = '';
- var attrs = deepmerge(defaultAttrs, attributes || {});
- var attrsRendered = objectToAttrsString(attrs);
- return ("<svg " + attrsRendered + ">" + content + "</svg>");
- };
- var svg$1 = namespaces_1.svg;
- var xlink$1 = namespaces_1.xlink;
- var defaultConfig = {
- attrs: ( obj = {
- style: ['position: absolute', 'width: 0', 'height: 0'].join('; '),
- 'aria-hidden': 'true'
- }, 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 = [];
- };
- 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;
- };
- 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;
- };
- Sprite.prototype.find = function find (id) {
- return this.symbols.filter(function (s) { return s.id === id; })[0] || null;
- };
- Sprite.prototype.has = function has (id) {
- return this.find(id) !== null;
- };
- 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);
- };
- 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;
- };
- SpriteSymbol.prototype.stringify = function stringify () {
- return this.content;
- };
- 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]; });
- };
- var parse = function (content) {
- var hasImportNode = !!document.importNode;
- var doc = new DOMParser().parseFromString(content, 'image/svg+xml').documentElement;
-
- 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;
- };
-
- 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);
- };
-
- 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;
- };
-
- 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 = {
-
- autoConfigure: true,
-
- mountTo: 'body',
-
- syncUrlsWithBaseTag: false,
-
- listenLocationChangeEvent: true,
-
- locationChangeEvent: 'locationChange',
-
- locationChangeAngularEmitter: false,
-
- usagesToUpdate: 'use[*|href]',
-
- moveGradientsOutsideSymbol: false
- };
- 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); },
-
- isIE: function () { return /msie/i.test(navigator.userAgent) || /trident/i.test(navigator.userAgent); },
- isEdge: function () { return /edge/i.test(navigator.userAgent); }
- };
- var dispatchEvent = function (name, data) {
- var event = document.createEvent('CustomEvent');
- event.initCustomEvent(name, false, false, data);
- window.dispatchEvent(event);
- };
- var evalStylesIEWorkaround = function (node) {
- var updatedNodes = [];
- arrayFrom(node.querySelectorAll('style'))
- .forEach(function (style) {
- style.textContent += '';
- updatedNodes.push(style);
- });
- return updatedNodes;
- };
- var getUrlWithoutFragment = function (url) {
- return (url || window.location.href).split('#')[0];
- };
- var locationChangeAngularEmitter = function (eventName) {
- angular.module('ng').run(['$rootScope', function ($rootScope) {
- $rootScope.$on('$locationChangeSuccess', function (e, newUrl, oldUrl) {
- dispatchEvent(eventName, { oldUrl: oldUrl, newUrl: newUrl });
- });
- }]);
- };
- var defaultSelector = 'linearGradient, radialGradient, pattern, mask, clipPath';
- var moveGradientsOutsideSymbol = function (svg, selector) {
- if ( selector === void 0 ) selector = defaultSelector;
- arrayFrom(svg.querySelectorAll('symbol')).forEach(function (symbol) {
- arrayFrom(symbol.querySelectorAll(selector)).forEach(function (node) {
- symbol.parentNode.insertBefore(node, symbol);
- });
- });
- return svg;
- };
- function selectAttributes(nodes, matcher) {
- var attrs = arrayFrom(nodes).reduce(function (acc, node) {
- if (!node.attributes) {
- return acc;
- }
- var arrayfied = arrayFrom(node.attributes);
- var matched = matcher ? arrayfied.filter(matcher) : arrayfied;
- return acc.concat(matched);
- }, []);
- return attrs;
- }
- var xLinkNS = namespaces_1.xlink.uri;
- var xLinkAttrName = 'xlink:href';
- var specialUrlCharsPattern = /[{}|\\\^\[\]`"<>]/g;
- function encoder(url) {
- return url.replace(specialUrlCharsPattern, function (match) {
- return ("%" + (match[0].charCodeAt(0).toString(16).toUpperCase()));
- });
- }
- function escapeRegExp(str) {
- return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
- }
- function updateReferences(nodes, startsWith, replaceWith) {
- arrayFrom(nodes).forEach(function (node) {
- var href = node.getAttribute(xLinkAttrName);
- if (href && href.indexOf(startsWith) === 0) {
- var newUrl = href.replace(startsWith, replaceWith);
- node.setAttributeNS(xLinkNS, xLinkAttrName, newUrl);
- }
- });
- return nodes;
- }
- var attList = [
- 'clipPath',
- 'colorProfile',
- 'src',
- 'cursor',
- 'fill',
- 'filter',
- 'marker',
- 'markerStart',
- 'markerMid',
- 'markerEnd',
- 'mask',
- 'stroke',
- 'style'
- ];
- var attSelector = attList.map(function (attr) { return ("[" + attr + "]"); }).join(',');
- var updateUrls = function (svg, references, startsWith, replaceWith) {
- var startsWithEncoded = encoder(startsWith);
- var replaceWithEncoded = encoder(replaceWith);
- var nodes = svg.querySelectorAll(attSelector);
- var attrs = selectAttributes(nodes, function (ref) {
- var localName = ref.localName;
- var value = ref.value;
- return attList.indexOf(localName) !== -1 && value.indexOf(("url(" + startsWithEncoded)) !== -1;
- });
- attrs.forEach(function (attr) { return attr.value = attr.value.replace(new RegExp(escapeRegExp(startsWithEncoded), 'g'), replaceWithEncoded); });
- updateReferences(references, startsWithEncoded, replaceWithEncoded);
- };
- var Events = {
- MOUNT: 'mount',
- SYMBOL_MOUNT: 'symbol_mount'
- };
- var BrowserSprite = (function (Sprite$$1) {
- function BrowserSprite(cfg) {
- var this$1 = this;
- if ( cfg === void 0 ) cfg = {};
- Sprite$$1.call(this, deepmerge(defaultConfig$1, cfg));
- var emitter = mitt();
- this._emitter = emitter;
- this.node = null;
- var ref = this;
- var config = ref.config;
- if (config.autoConfigure) {
- this._autoConfigure(cfg);
- }
- if (config.syncUrlsWithBaseTag) {
- var baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
- emitter.on(Events.MOUNT, function () { return this$1.updateUrls('#', baseUrl); });
- }
- var handleLocationChange = this._handleLocationChange.bind(this);
- this._handleLocationChange = handleLocationChange;
-
- if (config.listenLocationChangeEvent) {
- window.addEventListener(config.locationChangeEvent, handleLocationChange);
- }
-
- if (config.locationChangeAngularEmitter) {
- locationChangeAngularEmitter(config.locationChangeEvent);
- }
-
- emitter.on(Events.MOUNT, function (spriteNode) {
- if (config.moveGradientsOutsideSymbol) {
- moveGradientsOutsideSymbol(spriteNode);
- }
- });
-
- emitter.on(Events.SYMBOL_MOUNT, function (symbolNode) {
- if (config.moveGradientsOutsideSymbol) {
- moveGradientsOutsideSymbol(symbolNode.parentNode);
- }
- if (browser.isIE() || browser.isEdge()) {
- evalStylesIEWorkaround(symbolNode);
- }
- });
- }
- if ( Sprite$$1 ) BrowserSprite.__proto__ = Sprite$$1;
- BrowserSprite.prototype = Object.create( Sprite$$1 && Sprite$$1.prototype );
- BrowserSprite.prototype.constructor = BrowserSprite;
- var prototypeAccessors = { isMounted: {} };
-
- prototypeAccessors.isMounted.get = function () {
- return !!this.node;
- };
-
- BrowserSprite.prototype._autoConfigure = function _autoConfigure (cfg) {
- var ref = this;
- var config = ref.config;
- if (typeof cfg.syncUrlsWithBaseTag === 'undefined') {
- config.syncUrlsWithBaseTag = typeof document.getElementsByTagName('base')[0] !== 'undefined';
- }
- if (typeof cfg.locationChangeAngularEmitter === 'undefined') {
- config.locationChangeAngularEmitter = typeof window.angular !== 'undefined';
- }
- if (typeof cfg.moveGradientsOutsideSymbol === 'undefined') {
- config.moveGradientsOutsideSymbol = browser.isFirefox();
- }
- };
-
- BrowserSprite.prototype._handleLocationChange = function _handleLocationChange (event) {
- var ref = event.detail;
- var oldUrl = ref.oldUrl;
- var newUrl = ref.newUrl;
- this.updateUrls(oldUrl, newUrl);
- };
-
- BrowserSprite.prototype.add = function add (symbol) {
- var sprite = this;
- var isNewSymbol = Sprite$$1.prototype.add.call(this, symbol);
- if (this.isMounted && isNewSymbol) {
- symbol.mount(sprite.node);
- this._emitter.emit(Events.SYMBOL_MOUNT, symbol.node);
- }
- return isNewSymbol;
- };
-
- BrowserSprite.prototype.attach = function attach (target) {
- var this$1 = this;
- var sprite = this;
- if (sprite.isMounted) {
- return sprite.node;
- }
-
- var node = typeof target === 'string' ? document.querySelector(target) : target;
- sprite.node = node;
-
- this.symbols.forEach(function (symbol) {
- symbol.mount(sprite.node);
- this$1._emitter.emit(Events.SYMBOL_MOUNT, symbol.node);
- });
-
- arrayFrom(node.querySelectorAll('symbol'))
- .forEach(function (symbolNode) {
- var symbol = BrowserSpriteSymbol.createFromExistingNode(symbolNode);
- symbol.node = symbolNode;
- sprite.add(symbol);
- });
- this._emitter.emit(Events.MOUNT, node);
- return node;
- };
- BrowserSprite.prototype.destroy = function destroy () {
- var ref = this;
- var config = ref.config;
- var symbols = ref.symbols;
- var _emitter = ref._emitter;
- symbols.forEach(function (s) { return s.destroy(); });
- _emitter.off('*');
- window.removeEventListener(config.locationChangeEvent, this._handleLocationChange);
- if (this.isMounted) {
- this.unmount();
- }
- };
-
- BrowserSprite.prototype.mount = function mount (target, prepend) {
- if ( target === void 0 ) target = this.config.mountTo;
- if ( prepend === void 0 ) prepend = false;
- var sprite = this;
- if (sprite.isMounted) {
- return sprite.node;
- }
- var mountNode = typeof target === 'string' ? document.querySelector(target) : target;
- var node = sprite.render();
- this.node = node;
- if (prepend && mountNode.childNodes[0]) {
- mountNode.insertBefore(node, mountNode.childNodes[0]);
- } else {
- mountNode.appendChild(node);
- }
- this._emitter.emit(Events.MOUNT, node);
- return node;
- };
-
- BrowserSprite.prototype.render = function render () {
- return parse(this.stringify());
- };
-
- BrowserSprite.prototype.unmount = function unmount () {
- this.node.parentNode.removeChild(this.node);
- };
-
- BrowserSprite.prototype.updateUrls = function updateUrls$1 (oldUrl, newUrl) {
- if (!this.isMounted) {
- return false;
- }
- var usages = document.querySelectorAll(this.config.usagesToUpdate);
- updateUrls(
- this.node,
- usages,
- ((getUrlWithoutFragment(oldUrl)) + "#"),
- ((getUrlWithoutFragment(newUrl)) + "#")
- );
- return true;
- };
- Object.defineProperties( BrowserSprite.prototype, prototypeAccessors );
- return BrowserSprite;
- }(Sprite));
- return BrowserSprite;
- })));
|