browser-symbol.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. (function (global, factory) {
  2. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3. typeof define === 'function' && define.amd ? define(factory) :
  4. (global.BrowserSpriteSymbol = factory());
  5. }(this, (function () { 'use strict';
  6. var SpriteSymbol = function SpriteSymbol(ref) {
  7. var id = ref.id;
  8. var viewBox = ref.viewBox;
  9. var content = ref.content;
  10. this.id = id;
  11. this.viewBox = viewBox;
  12. this.content = content;
  13. };
  14. /**
  15. * @return {string}
  16. */
  17. SpriteSymbol.prototype.stringify = function stringify () {
  18. return this.content;
  19. };
  20. /**
  21. * @return {string}
  22. */
  23. SpriteSymbol.prototype.toString = function toString () {
  24. return this.stringify();
  25. };
  26. SpriteSymbol.prototype.destroy = function destroy () {
  27. var this$1 = this;
  28. ['id', 'viewBox', 'content'].forEach(function (prop) { return delete this$1[prop]; });
  29. };
  30. /**
  31. * @param {string} content
  32. * @return {Element}
  33. */
  34. var parse = function (content) {
  35. var hasImportNode = !!document.importNode;
  36. var doc = new DOMParser().parseFromString(content, 'image/svg+xml').documentElement;
  37. /**
  38. * Fix for browser which are throwing WrongDocumentError
  39. * if you insert an element which is not part of the document
  40. * @see http://stackoverflow.com/a/7986519/4624403
  41. */
  42. if (hasImportNode) {
  43. return document.importNode(doc, true);
  44. }
  45. return doc;
  46. };
  47. var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
  48. function createCommonjsModule(fn, module) {
  49. return module = { exports: {} }, fn(module, module.exports), module.exports;
  50. }
  51. var deepmerge = createCommonjsModule(function (module, exports) {
  52. (function (root, factory) {
  53. if (typeof undefined === 'function' && undefined.amd) {
  54. undefined(factory);
  55. } else {
  56. module.exports = factory();
  57. }
  58. }(commonjsGlobal, function () {
  59. function isMergeableObject(val) {
  60. var nonNullObject = val && typeof val === 'object';
  61. return nonNullObject
  62. && Object.prototype.toString.call(val) !== '[object RegExp]'
  63. && Object.prototype.toString.call(val) !== '[object Date]'
  64. }
  65. function emptyTarget(val) {
  66. return Array.isArray(val) ? [] : {}
  67. }
  68. function cloneIfNecessary(value, optionsArgument) {
  69. var clone = optionsArgument && optionsArgument.clone === true;
  70. return (clone && isMergeableObject(value)) ? deepmerge(emptyTarget(value), value, optionsArgument) : value
  71. }
  72. function defaultArrayMerge(target, source, optionsArgument) {
  73. var destination = target.slice();
  74. source.forEach(function(e, i) {
  75. if (typeof destination[i] === 'undefined') {
  76. destination[i] = cloneIfNecessary(e, optionsArgument);
  77. } else if (isMergeableObject(e)) {
  78. destination[i] = deepmerge(target[i], e, optionsArgument);
  79. } else if (target.indexOf(e) === -1) {
  80. destination.push(cloneIfNecessary(e, optionsArgument));
  81. }
  82. });
  83. return destination
  84. }
  85. function mergeObject(target, source, optionsArgument) {
  86. var destination = {};
  87. if (isMergeableObject(target)) {
  88. Object.keys(target).forEach(function (key) {
  89. destination[key] = cloneIfNecessary(target[key], optionsArgument);
  90. });
  91. }
  92. Object.keys(source).forEach(function (key) {
  93. if (!isMergeableObject(source[key]) || !target[key]) {
  94. destination[key] = cloneIfNecessary(source[key], optionsArgument);
  95. } else {
  96. destination[key] = deepmerge(target[key], source[key], optionsArgument);
  97. }
  98. });
  99. return destination
  100. }
  101. function deepmerge(target, source, optionsArgument) {
  102. var array = Array.isArray(source);
  103. var options = optionsArgument || { arrayMerge: defaultArrayMerge };
  104. var arrayMerge = options.arrayMerge || defaultArrayMerge;
  105. if (array) {
  106. return Array.isArray(target) ? arrayMerge(target, source, optionsArgument) : cloneIfNecessary(source, optionsArgument)
  107. } else {
  108. return mergeObject(target, source, optionsArgument)
  109. }
  110. }
  111. deepmerge.all = function deepmergeAll(array, optionsArgument) {
  112. if (!Array.isArray(array) || array.length < 2) {
  113. throw new Error('first argument should be an array with at least two elements')
  114. }
  115. // we are sure there are at least 2 values, so it is safe to have no initial value
  116. return array.reduce(function(prev, next) {
  117. return deepmerge(prev, next, optionsArgument)
  118. })
  119. };
  120. return deepmerge
  121. }));
  122. });
  123. var namespaces_1 = createCommonjsModule(function (module, exports) {
  124. var namespaces = {
  125. svg: {
  126. name: 'xmlns',
  127. uri: 'http://www.w3.org/2000/svg'
  128. },
  129. xlink: {
  130. name: 'xmlns:xlink',
  131. uri: 'http://www.w3.org/1999/xlink'
  132. }
  133. };
  134. exports.default = namespaces;
  135. module.exports = exports.default;
  136. });
  137. /**
  138. * @param {Object} attrs
  139. * @return {string}
  140. */
  141. var objectToAttrsString = function (attrs) {
  142. return Object.keys(attrs).map(function (attr) {
  143. var value = attrs[attr].toString().replace(/"/g, '&quot;');
  144. return (attr + "=\"" + value + "\"");
  145. }).join(' ');
  146. };
  147. var svg = namespaces_1.svg;
  148. var xlink = namespaces_1.xlink;
  149. var defaultAttrs = {};
  150. defaultAttrs[svg.name] = svg.uri;
  151. defaultAttrs[xlink.name] = xlink.uri;
  152. /**
  153. * @param {string} [content]
  154. * @param {Object} [attributes]
  155. * @return {string}
  156. */
  157. var wrapInSvgString = function (content, attributes) {
  158. if ( content === void 0 ) content = '';
  159. var attrs = deepmerge(defaultAttrs, attributes || {});
  160. var attrsRendered = objectToAttrsString(attrs);
  161. return ("<svg " + attrsRendered + ">" + content + "</svg>");
  162. };
  163. var BrowserSpriteSymbol = (function (SpriteSymbol$$1) {
  164. function BrowserSpriteSymbol () {
  165. SpriteSymbol$$1.apply(this, arguments);
  166. }
  167. if ( SpriteSymbol$$1 ) BrowserSpriteSymbol.__proto__ = SpriteSymbol$$1;
  168. BrowserSpriteSymbol.prototype = Object.create( SpriteSymbol$$1 && SpriteSymbol$$1.prototype );
  169. BrowserSpriteSymbol.prototype.constructor = BrowserSpriteSymbol;
  170. var prototypeAccessors = { isMounted: {} };
  171. prototypeAccessors.isMounted.get = function () {
  172. return !!this.node;
  173. };
  174. /**
  175. * @param {Element} node
  176. * @return {BrowserSpriteSymbol}
  177. */
  178. BrowserSpriteSymbol.createFromExistingNode = function createFromExistingNode (node) {
  179. return new BrowserSpriteSymbol({
  180. id: node.getAttribute('id'),
  181. viewBox: node.getAttribute('viewBox'),
  182. content: node.outerHTML
  183. });
  184. };
  185. BrowserSpriteSymbol.prototype.destroy = function destroy () {
  186. if (this.isMounted) {
  187. this.unmount();
  188. }
  189. SpriteSymbol$$1.prototype.destroy.call(this);
  190. };
  191. /**
  192. * @param {Element|string} target
  193. * @return {Element}
  194. */
  195. BrowserSpriteSymbol.prototype.mount = function mount (target) {
  196. if (this.isMounted) {
  197. return this.node;
  198. }
  199. var mountTarget = typeof target === 'string' ? document.querySelector(target) : target;
  200. var node = this.render();
  201. this.node = node;
  202. mountTarget.appendChild(node);
  203. return node;
  204. };
  205. /**
  206. * @return {Element}
  207. */
  208. BrowserSpriteSymbol.prototype.render = function render () {
  209. var content = this.stringify();
  210. return parse(wrapInSvgString(content)).childNodes[0];
  211. };
  212. BrowserSpriteSymbol.prototype.unmount = function unmount () {
  213. this.node.parentNode.removeChild(this.node);
  214. };
  215. Object.defineProperties( BrowserSpriteSymbol.prototype, prototypeAccessors );
  216. return BrowserSpriteSymbol;
  217. }(SpriteSymbol));
  218. return BrowserSpriteSymbol;
  219. })));