From b1eb3fccfa722afc4f7ca0d00eb848353ce8aed8 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Mon, 30 Apr 2018 16:37:45 +0200 Subject: [PATCH] refactor(plugins): improve how we query elements --- js/src/carousel.js | 7 ++++--- js/src/collapse.js | 26 ++++++++++++++------------ js/src/dropdown.js | 4 ++-- js/src/modal.js | 12 ++++++++---- js/src/scrollspy.js | 8 +++++--- js/src/util.js | 3 +-- 6 files changed, 34 insertions(+), 26 deletions(-) diff --git a/js/src/carousel.js b/js/src/carousel.js index d15b5e8988..7616e53bb4 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -492,10 +492,11 @@ const Carousel = (($) => { .on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler) $(window).on(Event.LOAD_DATA_API, () => { - $(Selector.DATA_RIDE).each(function () { - const $carousel = $(this) + const carousels = [].slice.call(document.querySelectorAll(Selector.DATA_RIDE)) + for (let i = 0, len = carousels.length; i < len; i++) { + const $carousel = $(carousels[i]) Carousel._jQueryInterface.call($carousel, $carousel.data()) - }) + } }) /** diff --git a/js/src/collapse.js b/js/src/collapse.js index 2c48cf5452..e788abbe7b 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -72,11 +72,14 @@ const Collapse = (($) => { `[data-toggle="collapse"][href="#${element.id}"],` + `[data-toggle="collapse"][data-target="#${element.id}"]` )) - const tabToggles = $(Selector.DATA_TOGGLE) - for (let i = 0; i < tabToggles.length; i++) { - const elem = tabToggles[i] + const toggleList = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE)) + for (let i = 0, len = toggleList.length; i < len; i++) { + const elem = toggleList[i] const selector = Util.getSelectorFromElement(elem) - if (selector !== null && $(selector).filter(element).length > 0) { + const filterElement = [].slice.call(document.querySelectorAll(selector)) + .filter((foundElem) => foundElem === element) + + if (selector !== null && filterElement.length > 0) { this._selector = selector this._triggerArray.push(elem) } @@ -123,11 +126,9 @@ const Collapse = (($) => { let activesData if (this._parent) { - actives = $.makeArray( - $(this._parent) - .find(Selector.ACTIVES) - .filter(`[data-parent="${this._config.parent}"]`) - ) + actives = [].slice.call(this._parent.querySelectorAll(Selector.ACTIVES)) + .filter((elem) => elem.getAttribute('data-parent') === this._config.parent) + if (actives.length === 0) { actives = null } @@ -216,12 +217,13 @@ const Collapse = (($) => { .removeClass(ClassName.COLLAPSE) .removeClass(ClassName.SHOW) - if (this._triggerArray.length > 0) { - for (let i = 0; i < this._triggerArray.length; i++) { + const triggerArrayLength = this._triggerArray.length + if (triggerArrayLength > 0) { + for (let i = 0; i < triggerArrayLength; i++) { const trigger = this._triggerArray[i] const selector = Util.getSelectorFromElement(trigger) if (selector !== null) { - const $elem = $(selector) + const $elem = $([].slice.call(document.querySelectorAll(selector))) if (!$elem.hasClass(ClassName.SHOW)) { $(trigger).addClass(ClassName.COLLAPSED) .attr('aria-expanded', false) diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 7e7dff0755..bef8da1a0c 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -333,8 +333,8 @@ const Dropdown = (($) => { return } - const toggles = $.makeArray($(Selector.DATA_TOGGLE)) - for (let i = 0; i < toggles.length; i++) { + const toggles = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE)) + for (let i = 0, len = toggles.length; i < len; i++) { const parent = Dropdown._getParentFromElement(toggles[i]) const context = $(toggles[i]).data(DATA_KEY) const relatedTarget = { diff --git a/js/src/modal.js b/js/src/modal.js index e8580eb0d2..b091a79b5e 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -430,23 +430,26 @@ const Modal = (($) => { if (this._isBodyOverflowing) { // Note: DOMNode.style.paddingRight returns the actual value or '' if not set // while $(DOMNode).css('padding-right') returns the calculated value or 0 if not set + const fixedContent = [].slice.call(document.querySelectorAll(Selector.FIXED_CONTENT)) + const stickyContent = [].slice.call(document.querySelectorAll(Selector.STICKY_CONTENT)) + const navbarToggler = [].slice.call(document.querySelectorAll(Selector.NAVBAR_TOGGLER)) // Adjust fixed content padding - $(Selector.FIXED_CONTENT).each((index, element) => { + $(fixedContent).each((index, element) => { const actualPadding = $(element)[0].style.paddingRight const calculatedPadding = $(element).css('padding-right') $(element).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`) }) // Adjust sticky content margin - $(Selector.STICKY_CONTENT).each((index, element) => { + $(stickyContent).each((index, element) => { const actualMargin = $(element)[0].style.marginRight const calculatedMargin = $(element).css('margin-right') $(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`) }) // Adjust navbar-toggler margin - $(Selector.NAVBAR_TOGGLER).each((index, element) => { + $(navbarToggler).each((index, element) => { const actualMargin = $(element)[0].style.marginRight const calculatedMargin = $(element).css('margin-right') $(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) + this._scrollbarWidth}px`) @@ -461,7 +464,8 @@ const Modal = (($) => { _resetScrollbar() { // Restore fixed content padding - $(Selector.FIXED_CONTENT).each((index, element) => { + const fixedContent = [].slice.call(document.querySelectorAll(Selector.FIXED_CONTENT)) + $(fixedContent).each((index, element) => { const padding = $(element).data('padding-right') if (typeof padding !== 'undefined') { $(element).css('padding-right', padding).removeData('padding-right') diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 90905b05dd..02cab5372d 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -225,7 +225,8 @@ const ScrollSpy = (($) => { return } - for (let i = this._offsets.length; i--;) { + const offsetLength = this._offsets.length + for (let i = offsetLength; i--;) { const isActiveTarget = this._activeTarget !== this._targets[i] && scrollTop >= this._offsets[i] && (typeof this._offsets[i + 1] === 'undefined' || @@ -302,9 +303,10 @@ const ScrollSpy = (($) => { */ $(window).on(Event.LOAD_DATA_API, () => { - const scrollSpys = $.makeArray($(Selector.DATA_SPY)) + const scrollSpys = [].slice.call(document.querySelectorAll(Selector.DATA_SPY)) - for (let i = scrollSpys.length; i--;) { + const scrollSpysLength = scrollSpys.length + for (let i = scrollSpysLength; i--;) { const $spy = $(scrollSpys[i]) ScrollSpy._jQueryInterface.call($spy, $spy.data()) } diff --git a/js/src/util.js b/js/src/util.js index c20678fe0f..e5521438e2 100644 --- a/js/src/util.js +++ b/js/src/util.js @@ -82,8 +82,7 @@ const Util = (($) => { } try { - const $selector = $(document).find(selector) - return $selector.length > 0 ? selector : null + return document.querySelector(selector) ? selector : null } catch (err) { return null }