From 3b3e216d83d4a15f5a33e42bc8ba783242d094ac Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Mon, 19 Oct 2015 17:15:06 +0200
Subject: [PATCH] direct link icons.svg spritemap

with fallback for legacy browsers
---
 .../javascripts/app/lib/app_post/utils.coffee |  3 +-
 app/views/init/index.html.erb                 | 35 ++++++++++++++++---
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/app/lib/app_post/utils.coffee b/app/assets/javascripts/app/lib/app_post/utils.coffee
index 882a8a988..d113687a8 100644
--- a/app/assets/javascripts/app/lib/app_post/utils.coffee
+++ b/app/assets/javascripts/app/lib/app_post/utils.coffee
@@ -594,7 +594,8 @@ class App.Utils
     num
 
   @icon: (name, className = '') ->
-    "<svg class=\"icon icon-#{name} #{className}\"><use xlink:href=\"#icon-#{name}\" /></svg>"
+    path = if svgPolyfill then '' else 'assets/images/icons.svg'
+    "<svg class=\"icon icon-#{name} #{className}\"><use xlink:href=\"#{path}#icon-#{name}\" /></svg>"
 
   @getScrollBarWidth: ->
     $outer = $('<div>').css(
diff --git a/app/views/init/index.html.erb b/app/views/init/index.html.erb
index 6a366bc64..69595b00a 100644
--- a/app/views/init/index.html.erb
+++ b/app/views/init/index.html.erb
@@ -1,8 +1,35 @@
-<div style="position: absolute; clip: rect(0, 0, 0, 0); z-index: -1;">
-  <%= inline_svg('icons.svg') %>
-</div>
+<!-- svgstore fallback -->
+<script>
+  /* 
+    detect if browser is 
+    - Chrome 14-20
+    - Android Browser 4.1+
+    - iOS 6-7
+    - Safari 6
+    - Edge 12
+    - IE 9-11
+  */
+  var svgPolyfill = /\bEdge\/12\b|\bTrident\/[567]\b|\bVersion\/7.0 Safari\b/.test(navigator.userAgent) || (navigator.userAgent.match(/AppleWebKit\/(\d+)/) || [])[1] < 537;
+
+  (function (doc) {
+    if(!svgPolyfill)
+      return
+
+    var scripts = doc.getElementsByTagName('script')
+    var script = scripts[scripts.length - 1]
+    var xhr = new XMLHttpRequest()
+    xhr.onload = function () {
+      var div = doc.createElement('div')
+      div.innerHTML = this.responseText
+      div.style.style.cssText = 'position: absolute; clip: rect(0, 0, 0, 0); z-index: -1;'
+      script.parentNode.insertBefore(div, script)
+    }
+    xhr.open('get', 'assets/images/icons.svg', true)
+    xhr.send()
+  })(document)
+</script>
 <div id="app"></div>
 <div class="splash">
-  <svg class="icon icon-logo"><use xlink:href="#icon-logo"/></svg>
+  <svg class="icon icon-logo"><use xlink:href="assets/images/icons.svg#icon-logo" /></svg>
   <div class="splash-title">Loading...</div>
 </div>
\ No newline at end of file