Merge branch 'main' into navbar-scroll

twbs · Nov 21, 2020 · 26ba74f · 26ba74f
2 parents 4e2a023 + 21737ed
commit 26ba74f
Show file tree

Hide file tree

Showing 127 changed files with 1,287 additions and 1,288 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -49,15 +49,11 @@
     "unicorn/no-null": "off",
     "unicorn/no-unused-properties": "error",
     "unicorn/no-useless-undefined": "off",
-    "unicorn/prefer-array-find": "off",
     "unicorn/prefer-dataset": "off",
-    "unicorn/prefer-includes": "off",
     "unicorn/prefer-node-append": "off",
     "unicorn/prefer-node-remove": "off",
-    "unicorn/prefer-number-properties": "off",
     "unicorn/prefer-optional-catch-binding": "off",
     "unicorn/prefer-query-selector": "off",
-    "unicorn/prefer-set-has": "off",
     "unicorn/prevent-abbreviations": "off"
   }
 }
diff --git a/build/build-plugins.js b/build/build-plugins.js
@@ -125,17 +125,17 @@ const getConfigByPluginKey = pluginKey => {
   }
 }
 
-const utilObjects = [
+const utilObjects = new Set([
   'Util',
   'Sanitizer'
-]
+])
 
-const domObjects = [
+const domObjects = new Set([
   'Data',
   'EventHandler',
   'Manipulator',
   'SelectorEngine'
-]
+])
 
 const build = async plugin => {
   console.log(`Building ${plugin} plugin...`)
@@ -144,11 +144,11 @@ const build = async plugin => {
   const pluginFilename = path.basename(bsPlugins[plugin])
   let pluginPath = rootPath
 
-  if (utilObjects.includes(plugin)) {
+  if (utilObjects.has(plugin)) {
     pluginPath = `${rootPath}/util/`
   }
 
-  if (domObjects.includes(plugin)) {
+  if (domObjects.has(plugin)) {
     pluginPath = `${rootPath}/dom/`
   }
 

diff --git a/build/generate-sri.js b/build/generate-sri.js
@@ -55,6 +55,6 @@ files.forEach(file => {
 
     console.log(`${file.configPropertyName}: ${integrity}`)
 
-    sh.sed('-i', new RegExp(`(\\s${file.configPropertyName}:\\s+"|')(\\S+)("|')`), `$1${integrity}$3`, configFile)
+    sh.sed('-i', new RegExp(`^(\\s+${file.configPropertyName}:\\s+["'])\\S*(["'])`), `$1${integrity}$2`, configFile)
   })
 })
diff --git a/js/src/alert.js b/js/src/alert.js
@@ -28,7 +28,7 @@ const DATA_KEY = 'bs.alert'
 const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
-const SELECTOR_DISMISS = '[data-dismiss="alert"]'
+const SELECTOR_DISMISS = '[data-bs-dismiss="alert"]'
 
 const EVENT_CLOSE = `close${EVENT_KEY}`
 const EVENT_CLOSED = `closed${EVENT_KEY}`

diff --git a/js/src/button.js b/js/src/button.js
@@ -23,7 +23,7 @@ const DATA_API_KEY = '.data-api'
 
 const CLASS_NAME_ACTIVE = 'active'
 
-const SELECTOR_DATA_TOGGLE = '[data-toggle="button"]'
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="button"]'
 
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 

diff --git a/js/src/carousel.js b/js/src/carousel.js
@@ -91,8 +91,8 @@ const SELECTOR_ITEM = '.carousel-item'
 const SELECTOR_ITEM_IMG = '.carousel-item img'
 const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev'
 const SELECTOR_INDICATORS = '.carousel-indicators'
-const SELECTOR_DATA_SLIDE = '[data-slide], [data-slide-to]'
-const SELECTOR_DATA_RIDE = '[data-ride="carousel"]'
+const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]'
+const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]'
 
 const PointerType = {
   TOUCH: 'touch',
@@ -419,7 +419,7 @@ class Carousel {
       return
     }
 
-    const elementInterval = parseInt(element.getAttribute('data-interval'), 10)
+    const elementInterval = Number.parseInt(element.getAttribute('data-bs-interval'), 10)
 
     if (elementInterval) {
       this._config.defaultInterval = this._config.defaultInterval || this._config.interval
@@ -576,7 +576,7 @@ class Carousel {
       ...Manipulator.getDataAttributes(target),
       ...Manipulator.getDataAttributes(this)
     }
-    const slideIndex = this.getAttribute('data-slide-to')
+    const slideIndex = this.getAttribute('data-bs-slide-to')
 
     if (slideIndex) {
       config.interval = false

diff --git a/js/src/collapse.js b/js/src/collapse.js
@@ -59,7 +59,7 @@ const WIDTH = 'width'
 const HEIGHT = 'height'
 
 const SELECTOR_ACTIVES = '.show, .collapsing'
-const SELECTOR_DATA_TOGGLE = '[data-toggle="collapse"]'
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'
 
 /**
  * ------------------------------------------------------------------------
@@ -74,7 +74,7 @@ class Collapse {
     this._config = this._getConfig(config)
     this._triggerArray = SelectorEngine.find(
       `${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` +
-      `${SELECTOR_DATA_TOGGLE}[data-target="#${element.id}"]`
+      `${SELECTOR_DATA_TOGGLE}[data-bs-target="#${element.id}"]`
     )
 
     const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
@@ -137,7 +137,7 @@ class Collapse {
       actives = SelectorEngine.find(SELECTOR_ACTIVES, this._parent)
         .filter(elem => {
           if (typeof this._config.parent === 'string') {
-            return elem.getAttribute('data-parent') === this._config.parent
+            return elem.getAttribute('data-bs-parent') === this._config.parent
           }
 
           return elem.classList.contains(CLASS_NAME_COLLAPSE)
@@ -150,8 +150,8 @@ class Collapse {
 
     const container = SelectorEngine.findOne(this._selector)
     if (actives) {
-      const tempActiveData = actives.filter(elem => container !== elem)
-      activesData = tempActiveData[0] ? Data.getData(tempActiveData[0], DATA_KEY) : null
+      const tempActiveData = actives.find(elem => container !== elem)
+      activesData = tempActiveData ? Data.getData(tempActiveData, DATA_KEY) : null
 
       if (activesData && activesData._isTransitioning) {
         return
@@ -303,7 +303,7 @@ class Collapse {
       parent = SelectorEngine.findOne(parent)
     }
 
-    const selector = `${SELECTOR_DATA_TOGGLE}[data-parent="${parent}"]`
+    const selector = `${SELECTOR_DATA_TOGGLE}[data-bs-parent="${parent}"]`
 
     SelectorEngine.find(selector, parent)
       .forEach(element => {

diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js
@@ -22,7 +22,7 @@ const customEvents = {
   mouseenter: 'mouseover',
   mouseleave: 'mouseout'
 }
-const nativeEvents = [
+const nativeEvents = new Set([
   'click',
   'dblclick',
   'mouseup',
@@ -69,7 +69,7 @@ const nativeEvents = [
   'error',
   'abort',
   'scroll'
-]
+])
 
 /**
  * ------------------------------------------------------------------------
@@ -151,7 +151,7 @@ function normalizeParams(originalTypeEvent, handler, delegationFn) {
     typeEvent = custom
   }
 
-  const isNative = nativeEvents.indexOf(typeEvent) > -1
+  const isNative = nativeEvents.has(typeEvent)
 
   if (!isNative) {
     typeEvent = originalTypeEvent
@@ -210,7 +210,7 @@ function removeNamespacedHandlers(element, events, typeEvent, namespace) {
   const storeElementEvent = events[typeEvent] || {}
 
   Object.keys(storeElementEvent).forEach(handlerKey => {
-    if (handlerKey.indexOf(namespace) > -1) {
+    if (handlerKey.includes(namespace)) {
       const event = storeElementEvent[handlerKey]
 
       removeHandler(element, events, typeEvent, event.originalHandler, event.delegationSelector)
@@ -235,7 +235,7 @@ const EventHandler = {
     const [delegation, originalHandler, typeEvent] = normalizeParams(originalTypeEvent, handler, delegationFn)
     const inNamespace = typeEvent !== originalTypeEvent
     const events = getEvent(element)
-    const isNamespace = originalTypeEvent.charAt(0) === '.'
+    const isNamespace = originalTypeEvent.startsWith('.')
 
     if (typeof originalHandler !== 'undefined') {
       // Simplest case: handler is passed, remove that listener ONLY.
@@ -257,7 +257,7 @@ const EventHandler = {
     Object.keys(storeElementEvent).forEach(keyHandlers => {
       const handlerKey = keyHandlers.replace(stripUidRegex, '')
 
-      if (!inNamespace || originalTypeEvent.indexOf(handlerKey) > -1) {
+      if (!inNamespace || originalTypeEvent.includes(handlerKey)) {
         const event = storeElementEvent[keyHandlers]
 
         removeHandler(element, events, typeEvent, event.originalHandler, event.delegationSelector)
@@ -273,7 +273,7 @@ const EventHandler = {
     const $ = getjQuery()
     const typeEvent = event.replace(stripNameRegex, '')
     const inNamespace = event !== typeEvent
-    const isNative = nativeEvents.indexOf(typeEvent) > -1
+    const isNative = nativeEvents.has(typeEvent)
 
     let jQueryEvent
     let bubbles = true

diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js
@@ -31,31 +31,33 @@ function normalizeDataKey(key) {
 
 const Manipulator = {
   setDataAttribute(element, key, value) {
-    element.setAttribute(`data-${normalizeDataKey(key)}`, value)
+    element.setAttribute(`data-bs-${normalizeDataKey(key)}`, value)
   },
 
   removeDataAttribute(element, key) {
-    element.removeAttribute(`data-${normalizeDataKey(key)}`)
+    element.removeAttribute(`data-bs-${normalizeDataKey(key)}`)
   },
 
   getDataAttributes(element) {
     if (!element) {
       return {}
     }
 
-    const attributes = {
-      ...element.dataset
-    }
+    const attributes = {}
 
-    Object.keys(attributes).forEach(key => {
-      attributes[key] = normalizeData(attributes[key])
-    })
+    Object.keys(element.dataset)
+      .filter(key => key.startsWith('bs'))
+      .forEach(key => {
+        let pureKey = key.replace(/^bs/, '')
+        pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length)
+        attributes[pureKey] = normalizeData(element.dataset[key])
+      })
 
     return attributes
   },
 
   getDataAttribute(element, key) {
-    return normalizeData(element.getAttribute(`data-${normalizeDataKey(key)}`))
+    return normalizeData(element.getAttribute(`data-bs-${normalizeDataKey(key)}`))
   },
 
   offset(element) {

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -59,7 +59,7 @@ const CLASS_NAME_MENURIGHT = 'dropdown-menu-right'
 const CLASS_NAME_NAVBAR = 'navbar'
 const CLASS_NAME_POSITION_STATIC = 'position-static'
 
-const SELECTOR_DATA_TOGGLE = '[data-toggle="dropdown"]'
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]'
 const SELECTOR_FORM_CHILD = '.dropdown form'
 const SELECTOR_MENU = '.dropdown-menu'
 const SELECTOR_NAVBAR_NAV = '.navbar-nav'
@@ -156,10 +156,10 @@ class Dropdown {
       return
     }
 
-    // Disable totally Popper.js for Dropdown in Navbar
+    // Totally disable Popper for Dropdowns in Navbar
     if (!this._inNavbar) {
       if (typeof Popper === 'undefined') {
-        throw new TypeError('Bootstrap\'s dropdowns require Popper.js (https://popper.js.org)')
+        throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
       }
 
       let referenceElement = this._element
@@ -329,7 +329,7 @@ class Dropdown {
       }
     }
 
-    // Disable Popper.js if we have a static display
+    // Disable Popper if we have a static display
     if (this._config.display === 'static') {
       popperConfig.modifiers.applyStyle = {
         enabled: false

diff --git a/js/src/modal.js b/js/src/modal.js
@@ -70,8 +70,8 @@ const CLASS_NAME_STATIC = 'modal-static'
 
 const SELECTOR_DIALOG = '.modal-dialog'
 const SELECTOR_MODAL_BODY = '.modal-body'
-const SELECTOR_DATA_TOGGLE = '[data-toggle="modal"]'
-const SELECTOR_DATA_DISMISS = '[data-dismiss="modal"]'
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]'
+const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]'
 const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
 const SELECTOR_STICKY_CONTENT = '.sticky-top'
 
@@ -365,7 +365,11 @@ class Modal {
           return
         }
 
-        this._triggerBackdropTransition()
+        if (this._config.backdrop === 'static') {
+          this._triggerBackdropTransition()
+        } else {
+          this.hide()
+        }
       })
 
       if (animate) {
@@ -404,35 +408,31 @@ class Modal {
   }
 
   _triggerBackdropTransition() {
-    if (this._config.backdrop === 'static') {
-      const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
-      if (hideEvent.defaultPrevented) {
-        return
-      }
+    const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
+    if (hideEvent.defaultPrevented) {
+      return
+    }
 
-      const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
+    const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
 
+    if (!isModalOverflowing) {
+      this._element.style.overflowY = 'hidden'
+    }
+
+    this._element.classList.add(CLASS_NAME_STATIC)
+    const modalTransitionDuration = getTransitionDurationFromElement(this._dialog)
+    EventHandler.off(this._element, TRANSITION_END)
+    EventHandler.one(this._element, TRANSITION_END, () => {
+      this._element.classList.remove(CLASS_NAME_STATIC)
       if (!isModalOverflowing) {
-        this._element.style.overflowY = 'hidden'
+        EventHandler.one(this._element, TRANSITION_END, () => {
+          this._element.style.overflowY = ''
+        })
+        emulateTransitionEnd(this._element, modalTransitionDuration)
       }
-
-      this._element.classList.add(CLASS_NAME_STATIC)
-      const modalTransitionDuration = getTransitionDurationFromElement(this._dialog)
-      EventHandler.off(this._element, TRANSITION_END)
-      EventHandler.one(this._element, TRANSITION_END, () => {
-        this._element.classList.remove(CLASS_NAME_STATIC)
-        if (!isModalOverflowing) {
-          EventHandler.one(this._element, TRANSITION_END, () => {
-            this._element.style.overflowY = ''
-          })
-          emulateTransitionEnd(this._element, modalTransitionDuration)
-        }
-      })
-      emulateTransitionEnd(this._element, modalTransitionDuration)
-      this._element.focus()
-    } else {
-      this.hide()
-    }
+    })
+    emulateTransitionEnd(this._element, modalTransitionDuration)
+    this._element.focus()
   }
 
   // ----------------------------------------------------------------------
@@ -474,7 +474,7 @@ class Modal {
           const actualPadding = element.style.paddingRight
           const calculatedPadding = window.getComputedStyle(element)['padding-right']
           Manipulator.setDataAttribute(element, 'padding-right', actualPadding)
-          element.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`
+          element.style.paddingRight = `${Number.parseFloat(calculatedPadding) + this._scrollbarWidth}px`
         })
 
       // Adjust sticky content margin
@@ -483,15 +483,15 @@ class Modal {
           const actualMargin = element.style.marginRight
           const calculatedMargin = window.getComputedStyle(element)['margin-right']
           Manipulator.setDataAttribute(element, 'margin-right', actualMargin)
-          element.style.marginRight = `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`
+          element.style.marginRight = `${Number.parseFloat(calculatedMargin) - this._scrollbarWidth}px`
         })
 
       // Adjust body padding
       const actualPadding = document.body.style.paddingRight
       const calculatedPadding = window.getComputedStyle(document.body)['padding-right']
 
       Manipulator.setDataAttribute(document.body, 'padding-right', actualPadding)
-      document.body.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`
+      document.body.style.paddingRight = `${Number.parseFloat(calculatedPadding) + this._scrollbarWidth}px`
     }
 
     document.body.classList.add(CLASS_NAME_OPEN)