Merge branch 'fix/ie11-js-errors' into 'master'

Add ie11 js polyfills

See merge request tech/django-pattern-library!48

Author: Helen Chapman

package-lock.json

@@ -17,6 +17,7 @@
         "webpack-cli": "^2.0.14"
     },
     "dependencies": {
+        "babel-polyfill": "^6.26.0",
         "babel-preset-env": "^1.6.1",
         "highlight.js": "^9.12.0"
     }

package.json

@@ -1,3 +1,5 @@
+import 'babel-polyfill';
+
 import '../scss/main.scss';
 import persistMenu from './components/persist-menu';
 import patternSearch from './components/pattern-search';
@@ -6,6 +8,11 @@ import syntaxHighlighting from './components/syntax-highlighting';
 import hideMenuMobile from './components/hide-menu-mobile';
 import {setIframeSize, resizeIframe} from './components/iframe';
 import {toggleNav, toggleNavItems} from './components/navigation';
+import foreachPolyfill from './polyfills/foreach-polyfill';
+import closestPolyfill from './polyfills/closest-polyfill';
+
+foreachPolyfill();
+closestPolyfill();
 
 document.addEventListener('DOMContentLoaded', () => {
     syntaxHighlighting();

pattern_library/static/pattern_library/src/js/app.js

@@ -0,0 +1,18 @@
+export default function closestPolyfill() {
+    // Closest polyfill see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
+    if (!Element.prototype.matches) {
+        Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+    }
+
+    if (!Element.prototype.closest) {
+        Element.prototype.closest = function(s) {
+            var el = this;
+
+            do {
+                if (el.matches(s)) return el;
+                el = el.parentElement || el.parentNode;
+            } while (el !== null && el.nodeType === 1);
+            return null;
+        };
+    }
+}

pattern_library/static/pattern_library/src/js/polyfills/closest-polyfill.js

@@ -0,0 +1,11 @@
+export default function foreachPolyfill() {
+    // forEach polyfill see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill
+    if (window.NodeList && !NodeList.prototype.forEach) {
+        NodeList.prototype.forEach = function (callback, thisArg) {
+            thisArg = thisArg || window;
+            for (var i = 0; i < this.length; i++) {
+                callback.call(thisArg, this[i], i, this);
+            }
+        };
+    }
+}