kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

refactor(plugins): query elements without jquery

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 let parent = false
if (selector) { if (selector) {
parent = $(selector)[0] parent = document.querySelector(selector)
} }
if (!parent) { if (!parent) {

10
js/src/button.js
View File

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

18
js/src/carousel.js
View File

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

14
js/src/collapse.js
View File

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

13
js/src/dropdown.js
View File

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

35
js/src/modal.js
View File

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

9
js/src/scrollspy.js
View File

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

5
js/src/tab.js
View File

@ -106,7 +106,7 @@ const Tab = (($) => {
} }
if (selector) { if (selector) {
target = $(selector)[0] target = document.querySelector(selector)
} }
this._activate( this._activate(
@ -199,7 +199,8 @@ const Tab = (($) => {
$(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) { $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
const dropdownElement = $(element).closest(Selector.DROPDOWN)[0] const dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
if (dropdownElement) { 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) element.setAttribute('aria-expanded', true)

8
js/src/tooltip.js
View File

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