Added localstorage support

jonnyhaynes · Jul 31, 2015 · 95de7c3 · 95de7c3
1 parent 84ff390
commit 95de7c3
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 67 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Jonny Haynes
+Copyright (c) 2015 Jonny Haynes & Oliver Farrell
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -41,14 +41,15 @@ For a live demo check out this [example on CodePen](http://codepen.io/jonnyhayne
 
 ## Bower
 
-If you're using [Bower](bower.io) to manage your front-end dependencies you can include this plugin as a component. Include `"inline-svg": "2.0.1"` in your `bower.json` file and run `bower install`.
+If you're using [Bower](bower.io) to manage your front-end dependencies you can include this plugin as a component. Include `"inline-svg": "2.1.0"` in your `bower.json` file and run `bower install`.
 
 ## NPM
 If you're using NPM to manage your dependencies you can include this plugin as a module. Just run `npm install inline-svg`.
 
 ## Changelog
 
-- **21/07/15:** 2.0.1 - Major upgrade. Added AMD support and fixed a long standing issue that would result in a warning in Google Chrome as we weren't handling the GET requests asynchronously. 
+- **31/07/15:** 2.1.0 – Added localStorage support to avoid making fresh HTTP request on every page load. When the contents of the SVG is loaded it is added to localStorage and then on repeat page loads the source is grabbed from localStorage.
+- **31/07/15:** 2.0.1 - Major upgrade. Added AMD support and fixed a long standing issue that would result in a warning in Google Chrome as we weren't handling the GET requests asynchronously. 
 - **18/06/15:** 1.2.0 – Converted to a Node.js module
 - **19/03/15:** 1.0.5 – Cleaning code to comply with Code Climate
 - **16/12/14:** 1.0.4 – Updated README with new CodePen demo and added an extra line regarding browser support. Changed `aria-label` to `aria-labelledby` and also added `role="img"` for better accessibility.

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "inline-svg",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "homepage": "https://github.com/jonnyhaynes/inline-svg",
   "authors": [
     "Jonny Haynes <[email protected]>",

diff --git a/demo/index.html b/demo/index.html
@@ -14,7 +14,7 @@
   <img src="twitter.svg" width="20" height="20" alt="Twitter Icon" class="svg another-class">
   <img src="facebook.svg" width="20" class="svg a-class" alt="Facebook Icon" longdesc="A longer description of the image.">
 
-  <script src="../dist/inlineSVG.min.js"></script>
+  <script src="../src/inlineSVG.js"></script>
   <script>
     inlineSVG.init();
   </script>

diff --git a/dist/inlineSVG.min.js b/dist/inlineSVG.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "inline-svg",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "devDependencies": {
     "grunt": "0.4.5",
     "grunt-cli": "0.1.13",

diff --git a/src/inlineSVG.js b/src/inlineSVG.js
@@ -23,6 +23,12 @@
     svgSelector: 'img.svg'
   };
 
+
+  /**
+   * Merge two objects together
+   * @private
+   * @param {Function} fn
+   */
   var extend = function (fn) {
 
     // Variables
@@ -88,82 +94,99 @@
       var src = svg.src,
           attributes = svg.attributes;
 
-      // Get the contents of the SVG
-      var request = new XMLHttpRequest();
-      request.open('GET', src, true);
+      if(!localStorage.getItem(src)) {
+
+        // Get the contents of the SVG
+        var request = new XMLHttpRequest();
+        request.open('GET', src, true);
 
-      request.onload = function () {
-
-        if(request.status >= 200 && request.status < 400) {
+        request.onload = function () {
 
-          // Setup a parser to convert the response to text/xml in order for it
-          // to be manipulated and changed
-          var parser = new DOMParser(),
-              result = parser.parseFromString(request.responseText, "text/xml"),
-              inlinedSVG = result.getElementsByTagName('svg')[0];
-
-          // Remove some of the attributes that aren't needed
-          inlinedSVG.removeAttribute('xmlns:a');
-          inlinedSVG.removeAttribute('width');
-          inlinedSVG.removeAttribute('height');
-          inlinedSVG.removeAttribute('x');
-          inlinedSVG.removeAttribute('y');
-          inlinedSVG.removeAttribute('enable-background');
-          inlinedSVG.removeAttribute('xmlns:xlink');
-          inlinedSVG.removeAttribute('xml:space');
-          inlinedSVG.removeAttribute('version');
-
-          // Add in the attributes from the original <img> except 'src' or
-          // 'alt', we don't need either
-          Array.prototype.slice.call(attributes).forEach(function(attribute) {
-            if(attribute.name !== 'src' && attribute.name !== 'alt') {
-              inlinedSVG.setAttribute(attribute.name, attribute.value);
+          if(request.status >= 200 && request.status < 400) {
+
+            // Setup a parser to convert the response to text/xml in order for it
+            // to be manipulated and changed
+            var parser = new DOMParser(),
+                result = parser.parseFromString(request.responseText, 'text/xml'),
+                inlinedSVG = result.getElementsByTagName('svg')[0];
+
+            // Remove some of the attributes that aren't needed
+            inlinedSVG.removeAttribute('xmlns:a');
+            inlinedSVG.removeAttribute('width');
+            inlinedSVG.removeAttribute('height');
+            inlinedSVG.removeAttribute('x');
+            inlinedSVG.removeAttribute('y');
+            inlinedSVG.removeAttribute('enable-background');
+            inlinedSVG.removeAttribute('xmlns:xlink');
+            inlinedSVG.removeAttribute('xml:space');
+            inlinedSVG.removeAttribute('version');
+
+            // Add in the attributes from the original <img> except 'src' or
+            // 'alt', we don't need either
+            Array.prototype.slice.call(attributes).forEach(function(attribute) {
+              if(attribute.name !== 'src' && attribute.name !== 'alt') {
+                inlinedSVG.setAttribute(attribute.name, attribute.value);
+              }
+            });
+
+            // Add an additional class the the inlined SVG to imply it was
+            // infact inlined, might be useful to know
+            if (inlinedSVG.classList) {
+              inlinedSVG.classList.add('inlined-svg');
+            } else {
+              inlinedSVG.className += ' ' + 'inlined-svg';
             }
-          });
 
-          // Add an additional class the the inlined SVG to imply it was
-          // infact inlined, might be useful to know
-          if (inlinedSVG.classList) {
-            inlinedSVG.classList.add('inlined-svg');
-          } else {
-            inlinedSVG.className += ' ' + 'inlined-svg';
-          }
+            // Add in some accessibility quick wins
+            inlinedSVG.setAttribute('role', 'img');
 
-          // Add in some accessibility quick wins
-          inlinedSVG.setAttribute('role', 'img');
+            if(attributes.longdesc) {
+              var description = document.createElementNS('http://www.w3.org/2000/svg', 'desc'),
+                  descriptionText = document.createTextNode(attributes.longdesc.value);
 
-          if(attributes.longdesc) {
-            var description = document.createElementNS('http://www.w3.org/2000/svg', 'desc'),
-                descriptionText = document.createTextNode(attributes.longdesc.value);
+              description.appendChild(descriptionText);
+              inlinedSVG.insertBefore(description, inlinedSVG.firstChild);
+            }
 
-            description.appendChild(descriptionText);
-            inlinedSVG.insertBefore(description, inlinedSVG.firstChild);
-          }
+            if(attributes.alt) {
+              inlinedSVG.setAttribute('aria-labelledby', 'title');
 
-          if(attributes.alt) {
-            inlinedSVG.setAttribute('aria-labelledby', 'title');
+              var title = document.createElementNS('http://www.w3.org/2000/svg', 'title'),
+                  titleText = document.createTextNode(attributes.alt.value);
 
-            var title = document.createElementNS('http://www.w3.org/2000/svg', 'title'),
-                titleText = document.createTextNode(attributes.alt.value);
+              title.appendChild(titleText);
+              inlinedSVG.insertBefore(title, inlinedSVG.firstChild);
+            }
+
+            // Store the source in localStorage to avoid making requests every time
+            var tempContainer = document.createElement('div');
+            tempContainer.appendChild(inlinedSVG);
+
+            localStorage.setItem(src, tempContainer.innerHTML);
+
+            // Replace the image with the SVG
+            svg.parentNode.replaceChild(inlinedSVG, svg);
 
-            title.appendChild(titleText);
-            inlinedSVG.insertBefore(title, inlinedSVG.firstChild);
+          } else {
+            console.error('There was an error retrieving the source of the SVG.');
           }
 
-          svg.parentNode.replaceChild(inlinedSVG, svg);
+        };
 
-        } else {
-          console.error('There was an error retrieving the source of the SVG.');
-        }
+        request.onerror = function () {
+          console.error('There was an error connecting to the origin server.');
+        };
 
-      };
+        request.send();
+
+      } else {
+        var parse = new DOMParser(),
+            result = parse.parseFromString(localStorage.getItem(src), 'text/xml'),
+            inlinedSVG = result.getElementsByTagName('svg')[0];
 
-      request.onerror = function () {
-        console.error('There was an error connecting to the origin server.');
-      };
+        svg.parentNode.replaceChild(inlinedSVG, svg);
+      }
 
-      request.send();
-
     });
 
   };