rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

refactor(plugins): query elements without jquery

Browse Source
This commit is contained in:
Johann-S 2018-06-01 14:44:21 +02:00
parent ffd31f9b8c
commit a79b8aa16a
9 changed files with 67 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/alert.js
View File

@ -84,7 +84,7 @@ const Alert = (($) => {
let parent = false
if (selector) {
parent = $(selector)[0]
parent = document.querySelector(selector)
}
if (!parent) {

10
js/src/button.js
View File

@ -68,15 +68,15 @@ const Button = (($) => {
)[0]
if (rootElement) {
const input = $(this._element).find(Selector.INPUT)[0]
const input = this._element.querySelector(Selector.INPUT)
if (input) {
if (input.type === 'radio') {
if (input.checked &&
$(this._element).hasClass(ClassName.ACTIVE)) {
this._element.classList.contains(ClassName.ACTIVE)) {
triggerChangeEvent = false
} else {
const activeElement = $(rootElement).find(Selector.ACTIVE)[0]
const activeElement = rootElement.querySelector(Selector.ACTIVE)
if (activeElement) {
$(activeElement).removeClass(ClassName.ACTIVE)
@ -91,7 +91,7 @@ const Button = (($) => {
rootElement.classList.contains('disabled')) {
return
}
input.checked = !$(this._element).hasClass(ClassName.ACTIVE)
input.checked = !this._element.classList.contains(ClassName.ACTIVE)
$(input).trigger('change')
}
@ -102,7 +102,7 @@ const Button = (($) => {
if (addAriaPressed) {
this._element.setAttribute('aria-pressed',
!$(this._element).hasClass(ClassName.ACTIVE))
!this._element.classList.contains(ClassName.ACTIVE))
}
if (triggerChangeEvent) {

18
js/src/carousel.js
View File

@ -99,7 +99,7 @@ const Carousel = (($) => {
this._config = this._getConfig(config)
this._element = $(element)[0]
this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0]
this._indicatorsElement = this._element.querySelector(Selector.INDICATORS)
this._addEventListeners()
}
@ -142,7 +142,7 @@ const Carousel = (($) => {
this._isPaused = true
}
if ($(this._element).find(Selector.NEXT_PREV)[0]) {
if (this._element.querySelector(Selector.NEXT_PREV)) {
Util.triggerTransitionEnd(this._element)
this.cycle(true)
}
@ -170,7 +170,7 @@ const Carousel = (($) => {
}
to(index) {
this._activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0]
this._activeElement = this._element.querySelector(Selector.ACTIVE_ITEM)
const activeIndex = this._getItemIndex(this._activeElement)
@ -269,7 +269,9 @@ const Carousel = (($) => {
}
_getItemIndex(element) {
this._items = $.makeArray($(element).parent().find(Selector.ITEM))
this._items = element && element.parentNode
? [].slice.call(element.parentNode.querySelectorAll(Selector.ITEM))
: []
return this._items.indexOf(element)
}
@ -294,7 +296,7 @@ const Carousel = (($) => {
_triggerSlideEvent(relatedTarget, eventDirectionName) {
const targetIndex = this._getItemIndex(relatedTarget)
const fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0])
const fromIndex = this._getItemIndex(this._element.querySelector(Selector.ACTIVE_ITEM))
const slideEvent = $.Event(Event.SLIDE, {
relatedTarget,
direction: eventDirectionName,
@ -309,8 +311,8 @@ const Carousel = (($) => {
_setActiveIndicatorElement(element) {
if (this._indicatorsElement) {
$(this._indicatorsElement)
.find(Selector.ACTIVE)
const indicators = [].slice.call(this._indicatorsElement.querySelectorAll(Selector.ACTIVE))
$(indicators)
.removeClass(ClassName.ACTIVE)
const nextIndicator = this._indicatorsElement.children[
@ -324,7 +326,7 @@ const Carousel = (($) => {
}
_slide(direction, element) {
const activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0]
const activeElement = this._element.querySelector(Selector.ACTIVE_ITEM)
const activeElementIndex = this._getItemIndex(activeElement)
const nextElement = element || activeElement &&
this._getItemByDirection(direction, activeElement)

14
js/src/collapse.js
View File

@ -68,7 +68,7 @@ const Collapse = (($) => {
this._isTransitioning = false
this._element = element
this._config = this._getConfig(config)
this._triggerArray = $.makeArray($(
this._triggerArray = $.makeArray(document.querySelectorAll(
`[data-toggle="collapse"][href="#${element.id}"],` +
`[data-toggle="collapse"][data-target="#${element.id}"]`
))
@ -162,7 +162,7 @@ const Collapse = (($) => {
this._element.style[dimension] = 0
if (this._triggerArray.length > 0) {
if (this._triggerArray.length) {
$(this._triggerArray)
.removeClass(ClassName.COLLAPSED)
.attr('aria-expanded', true)
@ -297,7 +297,8 @@ const Collapse = (($) => {
const selector =
`[data-toggle="collapse"][data-parent="${this._config.parent}"]`
$(parent).find(selector).each((i, element) => {
const children = [].slice.call(parent.querySelectorAll(selector))
$(children).each((i, element) => {
this._addAriaAndCollapsedClass(
Collapse._getTargetFromElement(element),
[element]
@ -311,7 +312,7 @@ const Collapse = (($) => {
if (element) {
const isOpen = $(element).hasClass(ClassName.SHOW)
if (triggerArray.length > 0) {
if (triggerArray.length) {
$(triggerArray)
.toggleClass(ClassName.COLLAPSED, !isOpen)
.attr('aria-expanded', isOpen)
@ -323,7 +324,7 @@ const Collapse = (($) => {
static _getTargetFromElement(element) {
const selector = Util.getSelectorFromElement(element)
return selector ? $(selector)[0] : null
return selector ? document.querySelector(selector) : null
}
static _jQueryInterface(config) {
@ -369,7 +370,8 @@ const Collapse = (($) => {
const $trigger = $(this)
const selector = Util.getSelectorFromElement(this)
$(selector).each(function () {
const selectors = [].slice.call(document.querySelectorAll(selector))
$(selectors).each(function () {
const $target = $(this)
const data = $target.data(DATA_KEY)
const config = data ? 'toggle' : $trigger.data()

13
js/src/dropdown.js
View File

@ -242,13 +242,15 @@ const Dropdown = (($) => {
_getMenuElement() {
if (!this._menu) {
const parent = Dropdown._getParentFromElement(this._element)
this._menu = $(parent).find(Selector.MENU)[0]
if (parent) {
this._menu = parent.querySelector(Selector.MENU)
}
}
return this._menu
}
_getPlacement() {
const $parentDropdown = $(this._element).parent()
const $parentDropdown = $(this._element.parentNode)
let placement = AttachmentMap.BOTTOM
// Handle dropup
@ -284,6 +286,7 @@ const Dropdown = (($) => {
} else {
offsetConf.offset = this._config.offset
}
const popperConfig = {
placement: this._getPlacement(),
modifiers: {
@ -382,7 +385,7 @@ const Dropdown = (($) => {
const selector = Util.getSelectorFromElement(element)
if (selector) {
parent = $(selector)[0]
parent = document.querySelector(selector)
}
return parent || element.parentNode
@ -417,7 +420,7 @@ const Dropdown = (($) => {
if (!isActive && (event.which !== ESCAPE_KEYCODE || event.which !== SPACE_KEYCODE) ||
isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) {
if (event.which === ESCAPE_KEYCODE) {
const toggle = $(parent).find(Selector.DATA_TOGGLE)[0]
const toggle = parent.querySelector(Selector.DATA_TOGGLE)
$(toggle).trigger('focus')
}
@ -425,7 +428,7 @@ const Dropdown = (($) => {
return
}
const items = $(parent).find(Selector.VISIBLE_ITEMS).get()
const items = [].slice.call(parent.querySelectorAll(Selector.VISIBLE_ITEMS))
if (items.length === 0) {
return

35
js/src/modal.js
View File

@ -78,7 +78,7 @@ const Modal = (($) => {
constructor(element, config) {
this._config = this._getConfig(config)
this._element = element
this._dialog = $(element).find(Selector.DIALOG)[0]
this._dialog = element.querySelector(Selector.DIALOG)
this._backdrop = null
this._isShown = false
this._isBodyOverflowing = false
@ -333,7 +333,7 @@ const Modal = (($) => {
this._backdrop.className = ClassName.BACKDROP
if (animate) {
$(this._backdrop).addClass(animate)
this._backdrop.classList.add(animate)
}
$(this._backdrop).appendTo(document.body)
@ -436,29 +436,37 @@ const Modal = (($) => {
// Adjust fixed content padding
$(fixedContent).each((index, element) => {
const actualPadding = $(element)[0].style.paddingRight
const actualPadding = element.style.paddingRight
const calculatedPadding = $(element).css('padding-right')
$(element).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
$(element)
.data('padding-right', actualPadding)
.css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
})
// Adjust sticky content margin
$(stickyContent).each((index, element) => {
const actualMargin = $(element)[0].style.marginRight
const actualMargin = element.style.marginRight
const calculatedMargin = $(element).css('margin-right')
$(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`)
$(element)
.data('margin-right', actualMargin)
.css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`)
})
// Adjust navbar-toggler margin
$(navbarToggler).each((index, element) => {
const actualMargin = $(element)[0].style.marginRight
const actualMargin = element.style.marginRight
const calculatedMargin = $(element).css('margin-right')
$(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) + this._scrollbarWidth}px`)
$(element)
.data('margin-right', actualMargin)
.css('margin-right', `${parseFloat(calculatedMargin) + this._scrollbarWidth}px`)
})
// Adjust body padding
const actualPadding = document.body.style.paddingRight
const calculatedPadding = $(document.body).css('padding-right')
$(document.body).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
$(document.body)
.data('padding-right', actualPadding)
.css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
}
}
@ -468,12 +476,15 @@ const Modal = (($) => {
$(fixedContent).each((index, element) => {
const padding = $(element).data('padding-right')
if (typeof padding !== 'undefined') {
$(element).css('padding-right', padding).removeData('padding-right')
$(element)
.css('padding-right', padding)
.removeData('padding-right')
}
})
// Restore sticky content and navbar-toggler margin
$(`${Selector.STICKY_CONTENT}, ${Selector.NAVBAR_TOGGLER}`).each((index, element) => {
const elements = [].slice.call(document.querySelectorAll(`${Selector.STICKY_CONTENT}, ${Selector.NAVBAR_TOGGLER}`))
$(elements).each((index, element) => {
const margin = $(element).data('margin-right')
if (typeof margin !== 'undefined') {
$(element).css('margin-right', margin).removeData('margin-right')
@ -535,7 +546,7 @@ const Modal = (($) => {
const selector = Util.getSelectorFromElement(this)
if (selector) {
target = $(selector)[0]
target = document.querySelector(selector)
}
const config = $(target).data(DATA_KEY)

9
js/src/scrollspy.js
View File

@ -115,7 +115,7 @@ const ScrollSpy = (($) => {
this._scrollHeight = this._getScrollHeight()
const targets = $.makeArray(document.querySelectorAll(this._selector))
const targets = [].slice.call(document.querySelectorAll(this._selector))
targets
.map((element) => {
@ -123,7 +123,7 @@ const ScrollSpy = (($) => {
const targetSelector = Util.getSelectorFromElement(element)
if (targetSelector) {
target = $(targetSelector)[0]
target = document.querySelector(targetSelector)
}
if (target) {
@ -250,7 +250,7 @@ const ScrollSpy = (($) => {
`${selector}[href="${target}"]`
})
const $link = $(queries.join(','))
const $link = $([].slice.call(document.querySelectorAll(queries.join(','))))
if ($link.hasClass(ClassName.DROPDOWN_ITEM)) {
$link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
@ -271,7 +271,8 @@ const ScrollSpy = (($) => {
}
_clear() {
$(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE)
const nodes = [].slice.call(document.querySelectorAll(this._selector))
$(nodes).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE)
}
// Static

5
js/src/tab.js
View File

@ -106,7 +106,7 @@ const Tab = (($) => {
}
if (selector) {
target = $(selector)[0]
target = document.querySelector(selector)
}
this._activate(
@ -199,7 +199,8 @@ const Tab = (($) => {
$(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
const dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
if (dropdownElement) {
$(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
const dropdownToggleList = [].slice.call(dropdownElement.querySelectorAll(Selector.DROPDOWN_TOGGLE))
$(dropdownToggleList).addClass(ClassName.ACTIVE)
}
element.setAttribute('aria-expanded', true)

8
js/src/tooltip.js
View File

@ -418,9 +418,9 @@ const Tooltip = (($) => {
}
setContent() {
const $tip = $(this.getTipElement())
this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle())
$tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
const tip = this.getTipElement()
this.setElementContent($(tip.querySelectorAll(Selector.TOOLTIP_INNER)), this.getTitle())
$(tip).removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
}
setElementContent($element, content) {
@ -655,7 +655,7 @@ const Tooltip = (($) => {
_cleanTipClass() {
const $tip = $(this.getTipElement())
const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX)
if (tabClass !== null && tabClass.length > 0) {
if (tabClass !== null && tabClass.length) {
$tip.removeClass(tabClass.join(''))
}
}