Update Util.js

djibe · Feb 8, 2021 · e716a55 · e716a55
1 parent 068d293
commit e716a55
Show file tree

Hide file tree

Showing 7 changed files with 322 additions and 201 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,4 @@
 **/*.min.js
 **/addons/*
 js/*
+assets/js/src/util.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - **New** Upgraded to Bootstrap 4.6.  
 https://blog.getbootstrap.com/2021/01/19/bootstrap-4.6.0/
 - **Updated** docs for BS 4.6.
+- **Updated** JS dependencies from BS 4.6.
 - **Fixed** Removed link:hover underline.
 - **Fixed** `card-actions` ripple on buttons.
 - **Fixed** `list-group` background-color.

diff --git a/assets/js/src/util.js b/assets/js/src/util.js
@@ -2,133 +2,195 @@ import $ from 'jquery'
 
 /*
  * Global util js
- * Based on Bootstrap's (v4.1.X) `util.js`
+ * Based on Bootstrap's (v4.6.0) `util.js`
  */
 
-const Util = (($) => {
-  const MAX_UID                 = 1000000
-  const MILLISECONDS_MULTIPLIER = 1000
-  const TRANSITION_END          = 'transitionend'
-
-  function getSpecialTransitionEndEvent() {
-    return {
-      bindType     : TRANSITION_END,
-      delegateType : TRANSITION_END,
-      handle(event) {
-        if ($(event.target).is(this)) {
-          return event.handleObj.handler.apply(this, arguments) // eslint-disable-line prefer-rest-params
-        }
-        return undefined // eslint-disable-line no-undefined
+/**
+ * ------------------------------------------------------------------------
+ * Private TransitionEnd Helpers
+ * ------------------------------------------------------------------------
+ */
+
+const TRANSITION_END = 'transitionend'
+const MAX_UID = 1000000
+const MILLISECONDS_MULTIPLIER = 1000
+
+// Shoutout AngusCroll (https://goo.gl/pxwQGp)
+function toType(obj) {
+  if (obj === null || typeof obj === 'undefined') {
+    return `${obj}`
+  }
+
+  return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase()
+}
+
+function getSpecialTransitionEndEvent() {
+  return {
+    bindType: TRANSITION_END,
+    delegateType: TRANSITION_END,
+    handle(event) {
+      if ($(event.target).is(this)) {
+        return event.handleObj.handler.apply(this, arguments) // eslint-disable-line prefer-rest-params
       }
+
+      return undefined
     }
   }
+}
 
-  function setTransitionEndSupport() {
-    $.fn.emulateTransitionEnd = transitionEndEmulator
-    $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent()
-  }
+function transitionEndEmulator(duration) {
+  let called = false
 
-  function toType(obj) {
-    return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase()
-  }
+  $(this).one(Util.TRANSITION_END, () => {
+    called = true
+  })
 
-  function transitionEndEmulator(duration) {
-    let called = false
+  setTimeout(() => {
+    if (!called) {
+      Util.triggerTransitionEnd(this)
+    }
+  }, duration)
 
-    $(this).one(Util.TRANSITION_END, () => {
-      called = true
-    })
+  return this
+}
 
-    setTimeout(() => {
-      if (!called) {
-        Util.triggerTransitionEnd(this)
-      }
-    }, duration)
+function setTransitionEndSupport() {
+  $.fn.emulateTransitionEnd = transitionEndEmulator
+  $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent()
+}
 
-    return this
-  }
+/**
+ * --------------------------------------------------------------------------
+ * Public Util Api
+ * --------------------------------------------------------------------------
+ */
 
-  const Util = {
+const Util = {
+  TRANSITION_END: 'bsTransitionEnd',
 
-    TRANSITION_END: 'mdTransitionEnd',
+  getUID(prefix) {
+    do {
+      prefix += ~~(Math.random() * MAX_UID) // "~~" acts like a faster Math.floor() here
+    } while (document.getElementById(prefix))
 
-    getSelectorFromElement(element) {
-      let selector = element.getAttribute('data-target')
+    return prefix
+  },
 
-      if (!selector || selector === '#') {
-        selector = element.getAttribute('href') || ''
-      }
+  getSelectorFromElement(element) {
+    let selector = element.getAttribute('data-target')
 
-      try {
-        const $selector = $(document).find(selector)
+    if (!selector || selector === '#') {
+      const hrefAttr = element.getAttribute('href')
+      selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : ''
+    }
 
-        return $selector.length > 0 ? selector : null
-      } catch (err) {
-        return null
-      }
-    },
+    try {
+      return document.querySelector(selector) ? selector : null
+    } catch (_) {
+      return null
+    }
+  },
 
-    getTransitionDurationFromElement(element) {
-      if (!element) {
-        return 0
-      }
+  getTransitionDurationFromElement(element) {
+    if (!element) {
+      return 0
+    }
 
-      let transitionDuration = $(element).css('transition-duration')
+    // Get transition-duration of the element
+    let transitionDuration = $(element).css('transition-duration')
+    let transitionDelay = $(element).css('transition-delay')
 
-      if (!transitionDuration) {
-        return 0
-      }
+    const floatTransitionDuration = parseFloat(transitionDuration)
+    const floatTransitionDelay = parseFloat(transitionDelay)
 
-      transitionDuration = transitionDuration.split(',')[0]
-
-      return parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER
-    },
-
-    getUID(prefix) {
-      do {
-        // eslint-disable-next-line no-bitwise
-        prefix += ~~(Math.random() * MAX_UID)
-      } while (document.getElementById(prefix))
-      return prefix
-    },
-
-    isElement(obj) {
-      return (obj[0] || obj).nodeType
-    },
-
-    reflow(element) {
-      return element.offsetHeight
-    },
-
-    supportsTransitionEnd() {
-      return Boolean(TRANSITION_END)
-    },
-
-    triggerTransitionEnd(element) {
-      $(element).trigger(TRANSITION_END)
-    },
-
-    typeCheckConfig(componentName, config, configTypes) {
-      for (const property in configTypes) {
-        if (Object.prototype.hasOwnProperty.call(configTypes, property)) {
-          const expectedTypes = configTypes[property]
-          const value         = config[property]
-          const valueType     = value && Util.isElement(value) ? 'element' : toType(value)
-
-          if (!new RegExp(expectedTypes).test(valueType)) {
-            throw new Error(
-              `${componentName.toUpperCase()}: ` +
-              `Option "${property}" provided type "${valueType}" ` +
-              `but expected type "${expectedTypes}".`)
-          }
+    // Return 0 if element or transition duration is not found
+    if (!floatTransitionDuration && !floatTransitionDelay) {
+      return 0
+    }
+
+    // If multiple durations are defined, take the first
+    transitionDuration = transitionDuration.split(',')[0]
+    transitionDelay = transitionDelay.split(',')[0]
+
+    return (parseFloat(transitionDuration) + parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER
+  },
+
+  reflow(element) {
+    return element.offsetHeight
+  },
+
+  triggerTransitionEnd(element) {
+    $(element).trigger(TRANSITION_END)
+  },
+
+  supportsTransitionEnd() {
+    return Boolean(TRANSITION_END)
+  },
+
+  isElement(obj) {
+    return (obj[0] || obj).nodeType
+  },
+
+  typeCheckConfig(componentName, config, configTypes) {
+    for (const property in configTypes) {
+      if (Object.prototype.hasOwnProperty.call(configTypes, property)) {
+        const expectedTypes = configTypes[property]
+        const value = config[property]
+        const valueType = value && Util.isElement(value) ?
+          'element' : toType(value)
+
+        if (!new RegExp(expectedTypes).test(valueType)) {
+          throw new Error(
+            `${componentName.toUpperCase()}: ` +
+            `Option "${property}" provided type "${valueType}" ` +
+            `but expected type "${expectedTypes}".`)
         }
       }
     }
-  }
+  },
 
-  setTransitionEndSupport()
+  findShadowRoot(element) {
+    if (!document.documentElement.attachShadow) {
+      return null
+    }
+
+    // Can find the shadow root otherwise it'll return the document
+    if (typeof element.getRootNode === 'function') {
+      const root = element.getRootNode()
+      return root instanceof ShadowRoot ? root : null
+    }
+
+    if (element instanceof ShadowRoot) {
+      return element
+    }
+
+    // when we don't find a shadow root
+    if (!element.parentNode) {
+      return null
+    }
+
+    return Util.findShadowRoot(element.parentNode)
+  },
+
+  jQueryDetection() {
+    if (typeof $ === 'undefined') {
+      throw new TypeError('Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.')
+    }
+
+    const version = $.fn.jquery.split(' ')[0].split('.')
+    const minMajor = 1
+    const ltMajor = 2
+    const minMinor = 9
+    const minPatch = 1
+    const maxMajor = 4
+
+    if (version[0] < ltMajor && version[1] < minMinor || version[0] === minMajor && version[1] === minMinor && version[2] < minPatch || version[0] >= maxMajor) {
+      throw new Error('Bootstrap\'s JavaScript requires at least jQuery v1.9.1 but less than v4.0.0')
+    }
+  }
+}
 
-  return Util
-})($)
+Util.jQueryDetection()
+setTransitionEndSupport()
 
 export default Util