diff options
Diffstat (limited to 'js/src')
| -rw-r--r-- | js/src/scrollspy.js | 57 | ||||
| -rw-r--r-- | js/src/tab.js | 38 |
2 files changed, 41 insertions, 54 deletions
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index df33f48de..27a91958e 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -43,16 +43,23 @@ const ScrollSpy = (($) => { } const ClassName = { + DROPDOWN_ITEM : 'dropdown-item', DROPDOWN_MENU : 'dropdown-menu', + NAV_LINK : 'nav-link', + NAV : 'nav', ACTIVE : 'active' } const Selector = { - DATA_SPY : '[data-spy="scroll"]', - ACTIVE : '.active', - LI : 'li', - LI_DROPDOWN : 'li.dropdown', - NAV_ANCHORS : '.nav li > a' + DATA_SPY : '[data-spy="scroll"]', + ACTIVE : '.active', + LIST_ITEM : '.list-item', + LI : 'li', + LI_DROPDOWN : 'li.dropdown', + NAV_LINKS : '.nav-link', + DROPDOWN : '.dropdown', + DROPDOWN_ITEMS : '.dropdown-item', + DROPDOWN_TOGGLE : '.dropdown-toggle' } const OffsetMethod = { @@ -73,7 +80,8 @@ const ScrollSpy = (($) => { this._element = element this._scrollElement = element.tagName === 'BODY' ? window : element this._config = this._getConfig(config) - this._selector = `${this._config.target} ${Selector.NAV_ANCHORS}` + this._selector = `${this._config.target} ${Selector.NAV_LINKS},` + + `${this._config.target} ${Selector.DROPDOWN_ITEMS}` this._offsets = [] this._targets = [] this._activeTarget = null @@ -229,23 +237,21 @@ const ScrollSpy = (($) => { this._clear() - let selector = - `${this._selector}[data-target="${target}"],` + - `${this._selector}[href="${target}"]` - - // todo (fat): getting all the raw li's up the tree is not great. - let parentListItems = $(selector).parents(Selector.LI) - - for (let i = parentListItems.length; i--;) { - $(parentListItems[i]).addClass(ClassName.ACTIVE) + let queries = this._selector.split(',') + queries = queries.map((selector) => { + return `${selector}[data-target="${target}"],` + + `${selector}[href="${target}"]` + }) - let itemParent = parentListItems[i].parentNode + let $link = $(queries.join(',')) - if (itemParent && $(itemParent).hasClass(ClassName.DROPDOWN_MENU)) { - let closestDropdown = $(itemParent) - .closest(Selector.LI_DROPDOWN)[0] - $(closestDropdown).addClass(ClassName.ACTIVE) - } + if ($link.hasClass(ClassName.DROPDOWN_ITEM)) { + $link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE) + $link.addClass(ClassName.ACTIVE) + } else { + // todo (fat) this is kinda sus… + // recursively add actives to tested nav-links + $link.parents(Selector.LI).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE) } $(this._scrollElement).trigger(Event.ACTIVATE, { @@ -254,14 +260,7 @@ const ScrollSpy = (($) => { } _clear() { - let activeParents = $(this._selector).parentsUntil( - this._config.target, - Selector.ACTIVE - ) - - for (let i = activeParents.length; i--;) { - $(activeParents[i]).removeClass(ClassName.ACTIVE) - } + $(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE) } diff --git a/js/src/tab.js b/js/src/tab.js index 9d793417a..4b311c24e 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -43,13 +43,14 @@ const Tab = (($) => { const Selector = { A : 'a', LI : 'li', - LI_DROPDOWN : 'li.dropdown', + DROPDOWN : '.dropdown', UL : 'ul:not(.dropdown-menu)', - FADE_CHILD : '> .fade', + FADE_CHILD : '> .nav-item .fade, > .fade', ACTIVE : '.active', - ACTIVE_CHILD : '> .active', + ACTIVE_CHILD : '> .nav-item > .active, > .active', DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"]', - DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu > .active' + DROPDOWN_TOGGLE : '.dropdown-toggle', + DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active' } @@ -78,7 +79,7 @@ const Tab = (($) => { show() { if (this._element.parentNode && (this._element.parentNode.nodeType === Node.ELEMENT_NODE) && - ($(this._element).parent().hasClass(ClassName.ACTIVE))) { + ($(this._element).hasClass(ClassName.ACTIVE))) { return } @@ -90,10 +91,6 @@ const Tab = (($) => { if (ulElement) { previous = $.makeArray($(ulElement).find(Selector.ACTIVE)) previous = previous[previous.length - 1] - - if (previous) { - previous = $(previous).find(Selector.A)[0] - } } let hideEvent = $.Event(Event.HIDE, { @@ -120,7 +117,7 @@ const Tab = (($) => { } this._activate( - $(this._element).closest(Selector.LI)[0], + this._element, ulElement ) @@ -189,22 +186,16 @@ const Tab = (($) => { let dropdownChild = $(active).find( Selector.DROPDOWN_ACTIVE_CHILD )[0] + if (dropdownChild) { $(dropdownChild).removeClass(ClassName.ACTIVE) } - let activeToggle = $(active).find(Selector.DATA_TOGGLE)[0] - if (activeToggle) { - activeToggle.setAttribute('aria-expanded', false) - } + active.setAttribute('aria-expanded', false) } $(element).addClass(ClassName.ACTIVE) - - let elementToggle = $(element).find(Selector.DATA_TOGGLE)[0] - if (elementToggle) { - elementToggle.setAttribute('aria-expanded', true) - } + element.setAttribute('aria-expanded', true) if (isTransitioning) { Util.reflow(element) @@ -216,15 +207,12 @@ const Tab = (($) => { if (element.parentNode && ($(element.parentNode).hasClass(ClassName.DROPDOWN_MENU))) { - let dropdownElement = $(element).closest(Selector.LI_DROPDOWN)[0] + let dropdownElement = $(element).closest(Selector.DROPDOWN)[0] if (dropdownElement) { - $(dropdownElement).addClass(ClassName.ACTIVE) + $(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE) } - elementToggle = $(element).find(Selector.DATA_TOGGLE)[0] - if (elementToggle) { - elementToggle.setAttribute('aria-expanded', true) - } + element.setAttribute('aria-expanded', true) } if (callback) { |