Skip to content

Commit

Permalink
Merge branch 'main' into rohit/noop-handling
Browse files Browse the repository at this point in the history
  • Loading branch information
@XhmikosR
XhmikosR committed Apr 7, 2021
2 parents 8f9862e + 0795a77 commit 7da4c18
Show file tree
Hide file tree
Showing 26 changed files with 544 additions and 379 deletions.
4 changes: 2 additions & 2 deletions config.yml
View file
Expand Up @@ -75,5 +75,5 @@ params:
js_hash: "sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
js_bundle_hash: "sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"
popper_hash: "sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"
popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
popper_hash: "sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
12 changes: 6 additions & 6 deletions js/src/carousel.js
View file
Expand Up @@ -336,10 +336,10 @@ class Carousel extends BaseComponent {

if (event.key === ARROW_LEFT_KEY) {
event.preventDefault()
this._slide(DIRECTION_LEFT)
this._slide(DIRECTION_RIGHT)
} else if (event.key === ARROW_RIGHT_KEY) {
event.preventDefault()
this._slide(DIRECTION_RIGHT)
this._slide(DIRECTION_LEFT)
}
}

Expand Down Expand Up @@ -509,10 +509,10 @@ class Carousel extends BaseComponent {
}

if (isRTL()) {
return direction === DIRECTION_RIGHT ? ORDER_PREV : ORDER_NEXT
return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT
}

return direction === DIRECTION_RIGHT ? ORDER_NEXT : ORDER_PREV
return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV
}

_orderToDirection(order) {
Expand All @@ -521,10 +521,10 @@ class Carousel extends BaseComponent {
}

if (isRTL()) {
return order === ORDER_NEXT ? DIRECTION_LEFT : DIRECTION_RIGHT
return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT
}

return order === ORDER_NEXT ? DIRECTION_RIGHT : DIRECTION_LEFT
return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT
}

// Static
Expand Down
84 changes: 49 additions & 35 deletions js/src/dropdown.js
View file
Expand Up @@ -10,6 +10,7 @@ import * as Popper from '@popperjs/core'
import {
defineJQueryPlugin,
getElementFromSelector,
isDisabled,
isElement,
isVisible,
isRTL,
Expand Down Expand Up @@ -51,7 +52,6 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`

const CLASS_NAME_DISABLED = 'disabled'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_DROPUP = 'dropup'
const CLASS_NAME_DROPEND = 'dropend'
Expand Down Expand Up @@ -121,7 +121,7 @@ class Dropdown extends BaseComponent {
// Public

toggle() {
if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED)) {
if (isDisabled(this._element)) {
return
}

Expand All @@ -137,7 +137,7 @@ class Dropdown extends BaseComponent {
}

show() {
if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED) || this._menu.classList.contains(CLASS_NAME_SHOW)) {
if (isDisabled(this._element) || this._menu.classList.contains(CLASS_NAME_SHOW)) {
return
}

Expand Down Expand Up @@ -204,7 +204,7 @@ class Dropdown extends BaseComponent {
}

hide() {
if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED) || !this._menu.classList.contains(CLASS_NAME_SHOW)) {
if (isDisabled(this._element) || !this._menu.classList.contains(CLASS_NAME_SHOW)) {
return
}

Expand All @@ -218,12 +218,20 @@ class Dropdown extends BaseComponent {
return
}

// If this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support
if ('ontouchstart' in document.documentElement) {
[].concat(...document.body.children)
.forEach(elem => EventHandler.off(elem, 'mouseover', null, noop()))
}

if (this._popper) {
this._popper.destroy()
}

this._menu.classList.toggle(CLASS_NAME_SHOW)
this._element.classList.toggle(CLASS_NAME_SHOW)
this._element.setAttribute('aria-expanded', 'false')
Manipulator.removeDataAttribute(this._menu, 'popper')
EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
}
Expand Down Expand Up @@ -430,19 +438,43 @@ class Dropdown extends BaseComponent {
.forEach(elem => EventHandler.off(elem, 'mouseover', noop))
}

toggles[i].setAttribute('aria-expanded', 'false')

if (context._popper) {
context._popper.destroy()
}

dropdownMenu.classList.remove(CLASS_NAME_SHOW)
toggles[i].classList.remove(CLASS_NAME_SHOW)
toggles[i].setAttribute('aria-expanded', 'false')
Manipulator.removeDataAttribute(dropdownMenu, 'popper')
EventHandler.trigger(toggles[i], EVENT_HIDDEN, relatedTarget)
}
}

static selectMenuItem(parent, event) {
const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, parent).filter(isVisible)

if (!items.length) {
return
}

let index = items.indexOf(event.target)

// Up
if (event.key === ARROW_UP_KEY && index > 0) {
index--
}

// Down
if (event.key === ARROW_DOWN_KEY && index < items.length - 1) {
index++
}

// index is -1 if the first keydown is an ArrowUp
index = index === -1 ? 0 : index

items[index].focus()
}

static getParentFromElement(element) {
return getElementFromSelector(element) || element.parentNode
}
Expand All @@ -463,26 +495,29 @@ class Dropdown extends BaseComponent {
return
}

const isActive = this.classList.contains(CLASS_NAME_SHOW)

if (!isActive && event.key === ESCAPE_KEY) {
return
}

event.preventDefault()
event.stopPropagation()

if (this.disabled || this.classList.contains(CLASS_NAME_DISABLED)) {
if (isDisabled(this)) {
return
}

const parent = Dropdown.getParentFromElement(this)
const isActive = this.classList.contains(CLASS_NAME_SHOW)
const getToggleButton = () => this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]

if (event.key === ESCAPE_KEY) {
const button = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
button.focus()
getToggleButton().focus()
Dropdown.clearMenus()
return
}

if (!isActive && (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY)) {
const button = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
button.click()
getToggleButton().click()
return
}

Expand All @@ -491,28 +526,7 @@ class Dropdown extends BaseComponent {
return
}

const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, parent).filter(isVisible)

if (!items.length) {
return
}

let index = items.indexOf(event.target)

// Up
if (event.key === ARROW_UP_KEY && index > 0) {
index--
}

// Down
if (event.key === ARROW_DOWN_KEY && index < items.length - 1) {
index++
}

// index is -1 if the first keydown is an ArrowUp
index = index === -1 ? 0 : index

items[index].focus()
Dropdown.selectMenuItem(Dropdown.getParentFromElement(this), event)
}
}

Expand Down
39 changes: 12 additions & 27 deletions js/src/modal.js
View file
Expand Up @@ -10,12 +10,11 @@ import {
emulateTransitionEnd,
getElementFromSelector,
getTransitionDurationFromElement,
isVisible,
isRTL,
isVisible,
reflow,
typeCheckConfig
} from './util/index'
import Data from './dom/data'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
Expand Down Expand Up @@ -222,6 +221,7 @@ class Modal extends BaseComponent {
_getConfig(config) {
config = {
...Default,
...Manipulator.getDataAttributes(this._element),
...config
}
typeCheckConfig(NAME, config, DefaultType)
Expand Down Expand Up @@ -474,7 +474,7 @@ class Modal extends BaseComponent {
const actualValue = element.style[styleProp]
const calculatedValue = window.getComputedStyle(element)[styleProp]
Manipulator.setDataAttribute(element, styleProp, actualValue)
element.style[styleProp] = callback(Number.parseFloat(calculatedValue)) + 'px'
element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`
})
}

Expand Down Expand Up @@ -509,24 +509,17 @@ class Modal extends BaseComponent {

static jQueryInterface(config, relatedTarget) {
return this.each(function () {
let data = Data.get(this, DATA_KEY)
const _config = {
...Default,
...Manipulator.getDataAttributes(this),
...(typeof config === 'object' && config ? config : {})
}
const data = Modal.getInstance(this) || new Modal(this, typeof config === 'object' ? config : {})

if (!data) {
data = new Modal(this, _config)
if (typeof config !== 'string') {
return
}

if (typeof config === 'string') {
if (typeof data[config] === 'undefined') {
throw new TypeError(`No method named "${config}"`)
}

data[config](relatedTarget)
if (typeof data[config] === 'undefined') {
throw new TypeError(`No method named "${config}"`)
}

data[config](relatedTarget)
})
}
}
Expand All @@ -540,7 +533,7 @@ class Modal extends BaseComponent {
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
const target = getElementFromSelector(this)

if (this.tagName === 'A' || this.tagName === 'AREA') {
if (['A', 'AREA'].includes(this.tagName)) {
event.preventDefault()
}

Expand All @@ -557,15 +550,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
})
})

let data = Data.get(target, DATA_KEY)
if (!data) {
const config = {
...Manipulator.getDataAttributes(target),
...Manipulator.getDataAttributes(this)
}

data = new Modal(target, config)
}
const data = Modal.getInstance(target) || new Modal(target)

data.toggle(this)
})
Expand Down
21 changes: 9 additions & 12 deletions js/src/scrollspy.js
View file
Expand Up @@ -12,7 +12,6 @@ import {
isElement,
typeCheckConfig
} from './util/index'
import Data from './dom/data'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
Expand Down Expand Up @@ -155,6 +154,7 @@ class ScrollSpy extends BaseComponent {
_getConfig(config) {
config = {
...Default,
...Manipulator.getDataAttributes(this._element),
...(typeof config === 'object' && config ? config : {})
}

Expand Down Expand Up @@ -278,20 +278,17 @@ class ScrollSpy extends BaseComponent {

static jQueryInterface(config) {
return this.each(function () {
let data = Data.get(this, DATA_KEY)
const _config = typeof config === 'object' && config
const data = ScrollSpy.getInstance(this) || new ScrollSpy(this, typeof config === 'object' ? config : {})

if (!data) {
data = new ScrollSpy(this, _config)
if (typeof config !== 'string') {
return
}

if (typeof config === 'string') {
if (typeof data[config] === 'undefined') {
throw new TypeError(`No method named "${config}"`)
}

data[config]()
if (typeof data[config] === 'undefined') {
throw new TypeError(`No method named "${config}"`)
}

data[config]()
})
}
}
Expand All @@ -304,7 +301,7 @@ class ScrollSpy extends BaseComponent {

EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
SelectorEngine.find(SELECTOR_DATA_SPY)
.forEach(spy => new ScrollSpy(spy, Manipulator.getDataAttributes(spy)))
.forEach(spy => new ScrollSpy(spy))
})

/**
Expand Down
6 changes: 2 additions & 4 deletions js/src/util/index.js
View file
Expand Up @@ -48,7 +48,7 @@ const getSelector = element => {

// Just in case some CMS puts out a full URL with the anchor appended
if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) {
hrefAttr = '#' + hrefAttr.split('#')[1]
hrefAttr = `#${hrefAttr.split('#')[1]}`
}

selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null
Expand Down Expand Up @@ -128,9 +128,7 @@ const typeCheckConfig = (componentName, config, configTypes) => {

if (!new RegExp(expectedTypes).test(valueType)) {
throw new TypeError(
`${componentName.toUpperCase()}: ` +
`Option "${property}" provided type "${valueType}" ` +
`but expected type "${expectedTypes}".`
`${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`
)
}
})
Expand Down
2 changes: 1 addition & 1 deletion js/src/util/scrollbar.js
View file
Expand Up @@ -35,7 +35,7 @@ const _setElementAttributes = (selector, styleProp, callback) => {
const actualValue = element.style[styleProp]
const calculatedValue = window.getComputedStyle(element)[styleProp]
Manipulator.setDataAttribute(element, styleProp, actualValue)
element.style[styleProp] = callback(Number.parseFloat(calculatedValue)) + 'px'
element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`
})
}

Expand Down

0 comments on commit 7da4c18

Please sign in to comment.