refactor(polyfill): a file for polyfills

js/src/dom/polyfill.js

@@ -1,8 +1,14 @@
-import EventHandler from './eventHandler'
+import Util from '../util'
+
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v4.1.1): dom/polyfill.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * --------------------------------------------------------------------------
+ */
 
 const Polyfill = (() => {
-  // defaultPrevented is broken in IE.
-  // https://connect.microsoft.com/IE/feedback/details/790389/event-defaultprevented-returns-false-after-preventdefault-was-called
+  // defaultPrevented is broken in IE
   const workingDefaultPrevented = (() => {
     const e = document.createEvent('CustomEvent')
     e.initEvent('Bootstrap', true, true)
@@ -10,7 +16,22 @@ const Polyfill = (() => {
     return e.defaultPrevented
   })()
 
-  let defaultPreventedPreservedOnDispatch = true
+  if (!workingDefaultPrevented) {
+    const origPreventDefault = Event.prototype.preventDefault
+    Event.prototype.preventDefault = function () {
+      if (!this.cancelable) {
+        return
+      }
+
+      origPreventDefault.call(this)
+      Object.defineProperty(this, 'defaultPrevented', {
+        get() {
+          return true
+        },
+        configurable: true
+      })
+    }
+  }
 
   // CustomEvent polyfill for IE (see: https://mzl.la/2v76Zvn)
   if (typeof window.CustomEvent !== 'function') {
@@ -22,42 +43,26 @@ const Polyfill = (() => {
       }
       const evt = document.createEvent('CustomEvent')
       evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
-      if (!workingDefaultPrevented) {
-        const origPreventDefault = Event.prototype.preventDefault
-        evt.preventDefault = () => {
-          if (!evt.cancelable) {
-            return
-          }
-
-          origPreventDefault.call(evt)
-          Object.defineProperty(evt, 'defaultPrevented', {
-            get() {
-              return true
-            },
-            configurable: true
-          })
-        }
-      }
       return evt
     }
 
     window.CustomEvent.prototype = window.Event.prototype
-  } else {
-    // MSEdge resets defaultPrevented flag upon dispatchEvent call if at least one listener is attached
-    defaultPreventedPreservedOnDispatch = (() => {
-      const e = new CustomEvent('Bootstrap', {
-        cancelable: true
-      })
-
-      const element = document.createElement('div')
-      element.addEventListener('Bootstrap', () => null)
-
-      e.preventDefault()
-      element.dispatchEvent(e)
-      return e.defaultPrevented
-    })()
   }
 
+  // MSEdge resets defaultPrevented flag upon dispatchEvent call if at least one listener is attached
+  const defaultPreventedPreservedOnDispatch = (() => {
+    const e = new CustomEvent('Bootstrap', {
+      cancelable: true
+    })
+
+    const element = document.createElement('div')
+    element.addEventListener('Bootstrap', () => null)
+
+    e.preventDefault()
+    element.dispatchEvent(e)
+    return e.defaultPrevented
+  })()
+
   // Event constructor shim
   if (!window.Event || typeof window.Event !== 'function') {
     const origEvent = window.Event
@@ -70,24 +75,91 @@ const Polyfill = (() => {
     window.Event.prototype = origEvent.prototype
   }
 
-  // focusin and focusout polyfill
-  if (typeof window.onfocusin === 'undefined') {
-    (() => {
-      function listenerFocus(event) {
-        EventHandler.trigger(event.target, 'focusin')
+  // matches polyfill (see: https://mzl.la/2ikXneG)
+  if (!Element.prototype.matches) {
+    Element.prototype.matches =
+      Element.prototype.msMatchesSelector ||
+      Element.prototype.webkitMatchesSelector
+  }
+
+  // closest polyfill (see: https://mzl.la/2vXggaI)
+  let closest
+  if (!Element.prototype.closest) {
+    closest = (element, selector) => {
+      let ancestor = element
+      do {
+        if (ancestor.matches(selector)) {
+          return ancestor
+        }
+
+        ancestor = ancestor.parentElement
+      } while (ancestor !== null && ancestor.nodeType === Node.ELEMENT_NODE)
+
+      return null
+    }
+  } else {
+    closest = (element, selector) => element.closest(selector)
+  }
+
+  const supportScopeQuery = (() => {
+    const element = document.createElement('div')
+    try {
+      element.querySelectorAll(':scope *')
+    } catch (e) {
+      return false
+    }
+
+    return true
+  })()
+
+  const scopeSelectorRegex = /:scope\b/
+  let find = Element.prototype.querySelectorAll
+  let findOne = Element.prototype.querySelector
+
+  if (!supportScopeQuery) {
+    find = function (selector) {
+      if (!scopeSelectorRegex.test(selector)) {
+        return this.querySelectorAll(selector)
       }
-      function listenerBlur(event) {
-        EventHandler.trigger(event.target, 'focusout')
+
+      const hasId = Boolean(this.id)
+      if (!hasId) {
+        this.id = Util.getUID('scope')
       }
-      EventHandler.on(document, 'focus', 'input', listenerFocus)
-      EventHandler.on(document, 'blur', 'input', listenerBlur)
-    })()
+
+      let nodeList = null
+      try {
+        selector = selector.replace(scopeSelectorRegex, `#${this.id}`)
+        nodeList = this.querySelectorAll(selector)
+      } finally {
+        if (!hasId) {
+          this.removeAttribute('id')
+        }
+      }
+
+      return nodeList
+    }
+
+    findOne = function (selector) {
+      if (!scopeSelectorRegex.test(selector)) {
+        return this.querySelector(selector)
+      }
+
+      const matches = find.call(this, selector)
+      if (typeof matches[0] !== 'undefined') {
+        return matches[0]
+      }
+
+      return null
+    }
   }
 
   return {
-    get defaultPreventedPreservedOnDispatch() {
-      return defaultPreventedPreservedOnDispatch
-    }
+    defaultPreventedPreservedOnDispatch,
+    focusIn: typeof window.onfocusin === 'undefined',
+    closest,
+    find,
+    findOne
   }
 })()