From 38ce7a752078588aca394ef91f8c80502e68731a Mon Sep 17 00:00:00 2001 From: Ulrich-Matthias Schäfer Date: Wed, 7 Nov 2018 17:09:52 +0100 Subject: fix the export/import function and enhance it --- dist/svg.js | 86 +++++++++++++++++++++++++++++++++++-------------- src/elements/Dom.js | 92 ++++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 133 insertions(+), 45 deletions(-) diff --git a/dist/svg.js b/dist/svg.js index e1dfbef..5e1d68d 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -6,7 +6,7 @@ * @copyright Wout Fierens * @license MIT * -* BUILT: Wed Nov 07 2018 15:06:40 GMT+0100 (GMT+01:00) +* BUILT: Wed Nov 07 2018 16:59:53 GMT+0100 (GMT+01:00) */; var SVG = (function () { 'use strict'; @@ -1433,14 +1433,14 @@ var SVG = (function () { _inherits(Dom, _EventTarget); function Dom(node) { - var _this; + var _this2; _classCallCheck(this, Dom); - _this = _possibleConstructorReturn(this, _getPrototypeOf(Dom).call(this, node)); - _this.node = node; - _this.type = node.nodeName; - return _this; + _this2 = _possibleConstructorReturn(this, _getPrototypeOf(Dom).call(this, node)); + _this2.node = node; + _this2.type = node.nodeName; + return _this2; } // Add given element at a position @@ -1624,13 +1624,13 @@ var SVG = (function () { value: function removeElement(element) { this.node.removeChild(element.node); return this; - } // Replace element + } // Replace this with element }, { key: "replace", value: function replace(element) { - // FIXME: after() might not be available here - this.after(element).remove(); + element = makeInstance(element); + this.node.parentNode.replaceChild(element.node, this.node); return element; } // Return id on string conversion @@ -1642,26 +1642,66 @@ var SVG = (function () { }, { key: "svg", - value: function svg(_svg) { - var well, len; // act as a setter if svg is given + value: function svg(svgOrFn, outerHTML) { + var well, len, fragment; - if (_svg) { - // create temporary holder - well = document.createElementNS(ns, 'svg'); // dump raw svg + if (svgOrFn === false) { + outerHTML = false; + svgOrFn = null; + } // act as getter if no svg string is given - well.innerHTML = _svg; // transplant nodes - for (len = well.children.length; len--;) { - this.node.appendChild(well.firstElementChild); - } // otherwise act as a getter + if (svgOrFn == null || typeof svgOrFn === 'function') { + // The default for exports is, that the outerNode is included + outerHTML = outerHTML == null ? true : outerHTML; // write svgjs data to the dom - } else { - // write svgjs data to the dom this.writeDataToDom(); - return this.node.outerHTML; - } + var current = this; // An export modifier was passed - return this; + if (svgOrFn != null) { + current = adopt(current.node.cloneNode(true)); // If the user wants outerHTML we need to process this node, too + + if (outerHTML) { + var result = svgOrFn(current); + current = result || current; // The user does not want this node? Well, then he gets nothing + + if (result === false) return ''; + } // Deep loop through all children and apply modifier + + + current.each(function () { + var result = svgOrFn(this); + + var _this = result || this; // If modifier returns false, discard node + + + if (result === false) { + this.remove(); // If modifier returns new node, use it + } else if (result && this !== _this) { + this.replace(_this); + } + }, true); + } // Return outer or inner content + + + return outerHTML ? current.node.outerHTML : current.node.innerHTML; + } // Act as setter if we got a string + // The default for import is, that the current node is not replaced + + + outerHTML = outerHTML == null ? false : outerHTML; // Create temporary holder + + well = document.createElementNS(ns, 'svg'); + fragment = document.createDocumentFragment(); // Dump raw svg + + well.innerHTML = svgOrFn; // Transplant nodes into the fragment + + for (len = well.children.length; len--;) { + fragment.appendChild(well.firstElementChild); + } // Add the whole fragment at once + + + return outerHTML ? this.replace(fragment) : this.add(fragment); } // write svgjs data to the dom }, { diff --git a/src/elements/Dom.js b/src/elements/Dom.js index eab3f0d..16aefd8 100644 --- a/src/elements/Dom.js +++ b/src/elements/Dom.js @@ -188,11 +188,10 @@ export default class Dom extends EventTarget { return this } - // Replace element + // Replace this with element replace (element) { - // FIXME: after() might not be available here - this.after(element).remove() - + element = makeInstance(element) + this.node.parentNode.replaceChild(element.node, this.node) return element } @@ -202,30 +201,79 @@ export default class Dom extends EventTarget { } // Import raw svg - svg (svg) { - var well, len - - // act as a setter if svg is given - if (svg) { - // create temporary holder - well = document.createElementNS(ns, 'svg') - // dump raw svg - well.innerHTML = svg - - // transplant nodes - for (len = well.children.length; len--;) { - this.node.appendChild(well.firstElementChild) - } + svg (svgOrFn, outerHTML) { + var well, len, fragment + + if (svgOrFn === false) { + outerHTML = false + svgOrFn = null + } + + // act as getter if no svg string is given + if (svgOrFn == null || typeof svgOrFn === 'function') { + // The default for exports is, that the outerNode is included + outerHTML = outerHTML == null ? true : outerHTML - // otherwise act as a getter - } else { // write svgjs data to the dom this.writeDataToDom() + let current = this + + // An export modifier was passed + if (svgOrFn != null) { + current = adopt(current.node.cloneNode(true)) + + // If the user wants outerHTML we need to process this node, too + if (outerHTML) { + let result = svgOrFn(current) + current = result || current + + // The user does not want this node? Well, then he gets nothing + if (result === false) return '' + } + + // Deep loop through all children and apply modifier + current.each(function () { + let result = svgOrFn(this) + let _this = result || this + + // If modifier returns false, discard node + if (result === false) { + this.remove() + + // If modifier returns new node, use it + } else if (result && this !== _this) { + this.replace(_this) + } + }, true) + } - return this.node.outerHTML + // Return outer or inner content + return outerHTML + ? current.node.outerHTML + : current.node.innerHTML } - return this + // Act as setter if we got a string + + // The default for import is, that the current node is not replaced + outerHTML = outerHTML == null ? false : outerHTML + + // Create temporary holder + well = document.createElementNS(ns, 'svg') + fragment = document.createDocumentFragment() + + // Dump raw svg + well.innerHTML = svgOrFn + + // Transplant nodes into the fragment + for (len = well.children.length; len--;) { + fragment.appendChild(well.firstElementChild) + } + + // Add the whole fragment at once + return outerHTML + ? this.replace(fragment) + : this.add(fragment) } // write svgjs data to the dom -- cgit v1.2.3