Inject icon font SVG via Ajax

johndjameson · johndjameson · commit 7176d461b280 · 2015-06-12T10:05:26.000-04:00
diff --git a/client/javascripts/application.js b/client/javascripts/application.js
@@ -52,6 +52,10 @@ jQuery(function($) {
     ]
   });
 
+  // ----- Global ----- //
+
+  JS.injectSvg({ assetPath : '/images/icons/icons.svg' });
+
 });
 
 // -------------------------------------
diff --git a/client/javascripts/components/services/injectSvg.js b/client/javascripts/components/services/injectSvg.js
@@ -0,0 +1,29 @@
+// *************************************
+//
+//   Inject SVG
+//   -> Asynchronously append an SVG
+//
+// *************************************
+//
+// @param assetPath { string }
+//
+// *************************************
+
+JS.injectSvg = function (options) {
+  var settings = $.extend({
+    assetPath : null
+  }, options);
+
+  $.get(settings.assetPath, function (data) {
+    var $element = $(new XMLSerializer().serializeToString(data.documentElement));
+
+    $element.css({ display : 'none' }).appendTo('body');
+  });
+}
+
+// -------------------------------------
+//   Usage
+// -------------------------------------
+//
+// JS.injectSvg({ assetPath : '/path/to/file.svg' });
+//
diff --git a/views/layouts/layout-bleed.jade b/views/layouts/layout-bleed.jade
@@ -6,8 +6,6 @@ html(lang='en')
 
   - dispatcher = dispatcher ? dispatcher : ''
   body.js-dispatcher(data-dispatcher-page=dispatcher)
-    .dn
-      include /public/images/icons/icons.svg
 
     - headerPartial = { bleed: true }
     include /views/partials/_header
diff --git a/views/layouts/layout-course.jade b/views/layouts/layout-course.jade
@@ -6,8 +6,6 @@ html.courseLayout.js-courseLayout(lang='en')
 
   - dispatcher = dispatcher ? dispatcher : ''
   body.mbf.js-dispatcher(data-dispatcher-page=dispatcher)
-    .dn
-      include /public/images/icons/icons.svg
 
     header.header.courseLayout-header(role='banner')
       .row
diff --git a/views/layouts/layout.jade b/views/layouts/layout.jade
@@ -6,8 +6,6 @@ html(lang='en')
 
   - dispatcher = dispatcher ? dispatcher : ''
   body.js-dispatcher(data-dispatcher-page=dispatcher)
-    .dn
-      include /public/images/icons/icons.svg
 
     include /views/partials/_header
 

Original file line number	Diff line number	Diff line change
`@@ -52,6 +52,10 @@ jQuery(function($) {`
`52`	`52`	`]`
`53`	`53`	`});`
`54`	`54`
	`55`	`+ // ----- Global ----- //`
	`56`	`+`
	`57`	`+ JS.injectSvg({ assetPath : '/images/icons/icons.svg' });`
	`58`	`+`
`55`	`59`	`});`
`56`	`60`
`57`	`61`	`// -------------------------------------`