rc3

- if title attribute is set an old title element gets replace by the new title element - improved code commenting - minor code optimizations
iconfu · Aug 6, 2018 · 053805c · 053805c
1 parent bbf9ce1
commit 053805c
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -140,7 +140,7 @@ SVGInject is intended to work in production environments however it has a few li
 All attributes are copied from the `<img>` element to the injected `<svg>` element before injection with the following exceptions:
 
 * The `src`, `title`, `alt`, `onerror` and `onload` attributes are not copied
-* The `title` attribute is transformed to a `<title>` element in the injected SVG
+* The `title` attribute is transformed to a `<title>` element and inserted as the first child element of the injeted SVG. If there is an existing `<title>` element as first child element it gets replaced.
 
 You can disable the previously described attribute handling by setting the `copyAttributes` option to `false`. You may also implement your own attribute handling in the `beforeInject` options hook.
 

diff --git a/dist/svg-inject.js b/dist/svg-inject.js
@@ -1,5 +1,5 @@
 /**
- * SVGInject - Version 1.0.0-rc1
+ * SVGInject - Version 1.0.0-rc.3
  * A tiny, intuitive, robust, caching solution for injecting SVG files inline into the DOM.
  *
  * https://github.com/iconfu/svg-inject
@@ -51,8 +51,6 @@
     return xmlSerializer;
   }
 
-  function NOOP() {}
-
   function getAbsoluteUrl(url) {
     A_ELEMENT.href = url;
     return A_ELEMENT.href;
@@ -99,14 +97,25 @@
           // if a title attribute exists insert it as the title tag in SVG
           var title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
           title.textContent = attributeValue;
-          svg.insertBefore(title, svg.firstChild);
+
+          var firstElementChild = svg.firstElementChild;
+          console.info(firstElementChild)
+
+          if (firstElementChild && firstElementChild.tagName.toLowerCase() == 'title') {
+            // replace an existing title attribute if there is already one as the first child of the SVG element
+            svg.replaceChild(title, firstElementChild); 
+          } else {
+            // insert as first child
+            svg.insertBefore(title, firstElementChild);
+          }
         } else {
           svg.setAttribute(attributeName, attributeValue);
         }
       }
     }
   }
 
+  // Makes ids unique for entries in the <defs> element's that are used within the svg
   function makeIdsUnique(svg) {
     // Collect ids from all elements directly below the <defs> element(s).
     var defElements = svg.querySelectorAll('defs>[id]');
@@ -181,6 +190,7 @@
     }
   }
 
+  // takes a
   function extendOptions() {
     var newOptions = {};
     var args = arguments;
@@ -196,6 +206,7 @@
     return newOptions;
   }
 
+  // Adds the specified CSS to the document's <head> element
   function addStyleToHead(css) {
     var head = document.getElementsByTagName('head')[0];
 
@@ -212,6 +223,7 @@
     }
   }
 
+  // Builds an SVG element from the specified SVG string
   function buildSvg(svgStr, absUrl) {
     try {
       DIV_ELEMENT.innerHTML = svgStr;
@@ -220,13 +232,10 @@
     }
     var svg = DIV_ELEMENT.removeChild(DIV_ELEMENT.firstChild);
 
-    if (!isSVGElem(svg)) {
-      return NULL;
+    if (isSVGElem(svg)) {
+      svg.setAttribute('data-inject-url', absUrl);
+      return svg;
     }
-
-    svg.setAttribute('data-inject-url', absUrl);
-
-    return svg;
   }
 
   function removeOnLoadAttribute(img) {
@@ -327,9 +336,7 @@
 
             if (svgLoad !== undefined) {
               if (Array.isArray(svgLoad)) {
-                svgLoad.push(function(loadValue) {
-                  handleLoadValue(loadValue);
-                });
+                svgLoad.push(handleLoadValue);
               } else {
                 handleLoadValue(svgLoad);
               }

diff --git a/dist/svg-inject.min.js b/dist/svg-inject.min.js
diff --git a/examples/svg-inject.js b/examples/svg-inject.js
@@ -1,5 +1,5 @@
 /**
- * SVGInject - Version 1.0.0-rc1
+ * SVGInject - Version 1.0.0-rc.3
  * A tiny, intuitive, robust, caching solution for injecting SVG files inline into the DOM.
  *
  * https://github.com/iconfu/svg-inject
@@ -51,8 +51,6 @@
     return xmlSerializer;
   }
 
-  function NOOP() {}
-
   function getAbsoluteUrl(url) {
     A_ELEMENT.href = url;
     return A_ELEMENT.href;
@@ -99,14 +97,25 @@
           // if a title attribute exists insert it as the title tag in SVG
           var title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
           title.textContent = attributeValue;
-          svg.insertBefore(title, svg.firstChild);
+
+          var firstElementChild = svg.firstElementChild;
+          console.info(firstElementChild)
+
+          if (firstElementChild && firstElementChild.tagName.toLowerCase() == 'title') {
+            // replace an existing title attribute if there is already one as the first child of the SVG element
+            svg.replaceChild(title, firstElementChild); 
+          } else {
+            // insert as first child
+            svg.insertBefore(title, firstElementChild);
+          }
         } else {
           svg.setAttribute(attributeName, attributeValue);
         }
       }
     }
   }
 
+  // Makes ids unique for entries in the <defs> element's that are used within the svg
   function makeIdsUnique(svg) {
     // Collect ids from all elements directly below the <defs> element(s).
     var defElements = svg.querySelectorAll('defs>[id]');
@@ -181,6 +190,7 @@
     }
   }
 
+  // takes a
   function extendOptions() {
     var newOptions = {};
     var args = arguments;
@@ -196,6 +206,7 @@
     return newOptions;
   }
 
+  // Adds the specified CSS to the document's <head> element
   function addStyleToHead(css) {
     var head = document.getElementsByTagName('head')[0];
 
@@ -212,6 +223,7 @@
     }
   }
 
+  // Builds an SVG element from the specified SVG string
   function buildSvg(svgStr, absUrl) {
     try {
       DIV_ELEMENT.innerHTML = svgStr;
@@ -220,13 +232,10 @@
     }
     var svg = DIV_ELEMENT.removeChild(DIV_ELEMENT.firstChild);
 
-    if (!isSVGElem(svg)) {
-      return NULL;
+    if (isSVGElem(svg)) {
+      svg.setAttribute('data-inject-url', absUrl);
+      return svg;
     }
-
-    svg.setAttribute('data-inject-url', absUrl);
-
-    return svg;
   }
 
   function removeOnLoadAttribute(img) {
@@ -327,9 +336,7 @@
 
             if (svgLoad !== undefined) {
               if (Array.isArray(svgLoad)) {
-                svgLoad.push(function(loadValue) {
-                  handleLoadValue(loadValue);
-                });
+                svgLoad.push(handleLoadValue);
               } else {
                 handleLoadValue(svgLoad);
               }

diff --git a/examples/svg-inject.min.js b/examples/svg-inject.min.js