Updating to use Mutation Observer to watch for elements that are load…

…ed dynamically to the page.

bower.json

@@ -1,7 +1,6 @@
 {
   "name": "inline-svg",
   "main": "inline-svg.js",
-  "version": "0.1.3",
   "homepage": "https://github.com/zaneray/inline-svg",
   "authors": [
     "Jeremiah Martin <[email protected]>"

index.html

@@ -135,7 +135,6 @@
       margin: 0 auto;
       max-width: 600px;
       line-height: 1.6em;
-      text-align: left;
 
     }
 
@@ -156,7 +155,9 @@ <h1>Inline SVG</h1>
 
   <section class="content">
     <p>Inline SVG is a simple jQuery plugin that embeds an svg in an image src into the page so you can use CSS animations. </p> 
-    <p>Mouseover the start to see the inline SVG animate.</p>
+    <p>Mouseover the star to see the inline SVG animate.</p>
+
+
 
 </section>
 
@@ -167,6 +168,12 @@ <h1>Inline SVG</h1>
 <script src="js/inline-svg.js"></script>
 <script> 
   $('.inline-svg').inlineSVG();
+  $(window).load(function(){
+    setTimeout(function(){
+      $('.content').append('<h4>Dynamically Added Elements!</h4><p>This element was added to the DOM dynamically and it still inlines the SVG element.</p><div><img src="svg/star.svg"  class="inline-svg more-element svg"></div>');
+    },2000);
+  });
+
 </script>
 
 

js/inline-svg.js

@@ -1,43 +1,64 @@
-/*
-$.inlineSVG();
-Currently just using this to inject them into the style guide. Pretty experimental at this point. JJM 
-*/
-//temp one that inlines img srcs
 (function ($) {
   $.fn.inlineSVG = function (args) {
     var options = {
 
     };
 
     $.extend( options, args );
-    this.not('.loaded').each(function(){
-      var $this = $(this);
-          
-      if($this) {
-        var svgUrl = $this.attr('src'),
-            $parent = $this.parent(),
-            classNames = $this.attr('class');
-            
-        var ajax = new XMLHttpRequest();
-            ajax.open("GET", svgUrl, true);
-            ajax.send();
-            ajax.onload = function(e) {
-
-            //if the status is not 404 do the replacement otherwise do nothing.
+
+    //function to inline SVGs as part of the jquery plugin or part of the MutationObserver event.
+    var makeSVGInline = function($el){
+      var svgUrl      = $el.attr('src'),
+          $parent     = $el.parent(),
+          classNames  = $el.attr('class');
+
+      //this works better than $.ajax();
+      var ajax = new XMLHttpRequest();
+          ajax.open("GET", svgUrl, true);
+          ajax.send();
+
+          ajax.onload = function(e) {
+             //if the status is not 404 do the replacement otherwise do nothing.
             if(ajax.status !== 404) {
 
               var $svg = $(ajax.responseText);
 
               $svg.attr('class', classNames + ' loaded');
-              $this.replaceWith($svg);
+              $el.replaceWith($svg);
 
             } 
             else {
-              $this.addClass('not-loaded');
+              $el.addClass('not-loaded');
             }
-
           }
-      }
+    };
+
+    //loop on inline SVGs loaded with the plugin
+    this.each(function(){
+      //if($this) {
+        makeSVGInline($(this));
+      //}
+    });
+
+    //observe the DOM for mutations, if anything changes on the page scan it for new img.inline-svg
+    var observer = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+
+        if (mutation.type === 'childList' && mutation.addedNodes.length) {
+          var $inlineSVGs = $("img.inline-svg").not('.loaded');
+
+          $inlineSVGs.each(function(){
+            makeSVGInline($(this));
+          });
+        }
+      });    
+    });
+
+    observer.observe(document.body, {
+      attributes: true, 
+      childList: true,
+      subtree: true
     });
   };
 }( jQuery ));
+