Move svg4everybody into polyfills and reorganize

3 files changed, 21 insertions, 9 deletions

diff --git a/app/assets/javascripts/commons/polyfills.js b/app/assets/javascripts/commons/polyfills.js
index 742cf490ad2..539d0d29e0d 100644
--- a/app/assets/javascripts/commons/polyfills.js
+++ b/app/assets/javascripts/commons/polyfills.js
@@ -14,10 +14,10 @@ import 'core-js/es6/map';
 import 'core-js/es6/weak-map';
 
 // Browser polyfills
-import 'classlist-polyfill';
 import 'formdata-polyfill';
 import './polyfills/custom_event';
 import './polyfills/element';
 import './polyfills/event';
 import './polyfills/nodelist';
 import './polyfills/request_idle_callback';
+import './polyfills/svg';
diff --git a/app/assets/javascripts/commons/polyfills/element.js b/app/assets/javascripts/commons/polyfills/element.js
index b593bde6aa2..dde5e8f54f9 100644
--- a/app/assets/javascripts/commons/polyfills/element.js
+++ b/app/assets/javascripts/commons/polyfills/element.js
@@ -1,12 +1,17 @@
-Element.prototype.closest = Element.prototype.closest ||
+// polyfill Element.classList and DOMTokenList with classList.js
+import 'classlist-polyfill';
+
+Element.prototype.closest =
+  Element.prototype.closest ||
   function closest(selector, selectedElement = this) {
     if (!selectedElement) return null;
-    return selectedElement.matches(selector) ?
-      selectedElement :
-      Element.prototype.closest(selector, selectedElement.parentElement);
+    return selectedElement.matches(selector)
+      ? selectedElement
+      : Element.prototype.closest(selector, selectedElement.parentElement);
   };
 
-Element.prototype.matches = Element.prototype.matches ||
+Element.prototype.matches =
+  Element.prototype.matches ||
   Element.prototype.matchesSelector ||
   Element.prototype.mozMatchesSelector ||
   Element.prototype.msMatchesSelector ||
@@ -15,13 +20,15 @@ Element.prototype.matches = Element.prototype.matches ||
   function matches(selector) {
     const elms = (this.document || this.ownerDocument).querySelectorAll(selector);
     let i = elms.length - 1;
-    while (i >= 0 && elms.item(i) !== this) { i -= 1; }
+    while (i >= 0 && elms.item(i) !== this) {
+      i -= 1;
+    }
     return i > -1;
   };
 
 // From the polyfill on MDN, https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove#Polyfill
-((arr) => {
-  arr.forEach((item) => {
+(arr => {
+  arr.forEach(item => {
     if (Object.prototype.hasOwnProperty.call(item, 'remove')) {
       return;
     }
diff --git a/app/assets/javascripts/commons/polyfills/svg.js b/app/assets/javascripts/commons/polyfills/svg.js
new file mode 100644
index 00000000000..8648a568f6f
--- /dev/null
+++ b/app/assets/javascripts/commons/polyfills/svg.js
@@ -0,0 +1,5 @@
+import svg4everybody from 'svg4everybody';
+
+// polyfill support for external SVG file references via <use xlink:href>
+// @see https://css-tricks.com/svg-use-external-source/
+svg4everybody();