Web compat: polyfill MediaQueryList.addEventListener() for Safari < 14 (#36274) (#36321)

(cherry picked from commit b8010ba9f5)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

public/app/app.ts

@@ -4,6 +4,7 @@ import 'regenerator-runtime/runtime';
 
 import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'; // fetch polyfill needed for PhantomJs rendering
+import './polyfills/old-mediaquerylist'; // Safari < 14 does not have mql.addEventListener()
 import 'file-saver';
 import 'jquery';
 

public/app/polyfills/old-mediaquerylist.ts

@@ -0,0 +1,20 @@
+// Safari < 14 does not have mql.addEventListener(), but uses the old spec mql.addListener()
+
+let oMatchMedia = window.matchMedia;
+
+type MqlListener = (this: MediaQueryList, ev: MediaQueryListEvent) => any;
+
+window.matchMedia = (mediaQueryString) => {
+  let mql = oMatchMedia(mediaQueryString);
+
+  if (!mql.addEventListener) {
+    mql.addEventListener = (type: string, listener: MqlListener) => {
+      mql.addListener(listener);
+    };
+    mql.removeEventListener = (type: string, listener: MqlListener) => {
+      mql.removeListener(listener);
+    };
+  }
+
+  return mql;
+};