Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)

2 files changed, 13 insertions, 24 deletions

diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 15541b8ff..7ea9f2483 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -45,18 +45,15 @@ 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',
-    LIST_ITEM       : '.list-item',
-    LI              : 'li',
-    LI_DROPDOWN     : 'li.dropdown',
+    NAV_LIST_GROUP  : '.nav, .list-group',
     NAV_LINKS       : '.nav-link',
+    LIST_ITEMS      : '.list-group-item',
     DROPDOWN        : '.dropdown',
     DROPDOWN_ITEMS  : '.dropdown-item',
     DROPDOWN_TOGGLE : '.dropdown-toggle'
@@ -81,6 +78,7 @@ const ScrollSpy = (($) => {
       this._scrollElement = element.tagName === 'BODY' ? window : element
       this._config        = this._getConfig(config)
       this._selector      = `${this._config.target} ${Selector.NAV_LINKS},`
+                          + `${this._config.target} ${Selector.LIST_ITEMS},`
                           + `${this._config.target} ${Selector.DROPDOWN_ITEMS}`
       this._offsets       = []
       this._targets       = []
@@ -259,9 +257,11 @@ const ScrollSpy = (($) => {
         $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)
+        // Set triggered link as active
+        $link.addClass(ClassName.ACTIVE)
+        // Set triggered links parents as active
+        // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
+        $link.parents(Selector.NAV_LIST_GROUP).prev(`${Selector.NAV_LINKS}, ${Selector.LIST_ITEMS}`).addClass(ClassName.ACTIVE)
       }
 
       $(this._scrollElement).trigger(Event.ACTIVATE, {
diff --git a/js/src/tab.js b/js/src/tab.js
index d5669b7ad..6f8187d17 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -42,14 +42,10 @@ const Tab = (($) => {
   }
 
   const Selector = {
-    A                     : 'a',
-    LI                    : 'li',
     DROPDOWN              : '.dropdown',
-    LIST                  : 'ul:not(.dropdown-menu), ol:not(.dropdown-menu), nav:not(.dropdown-menu), .list-group:not(.dropdown-menu)',
-    FADE_CHILD            : '> .nav-item .fade, > .list-group-item .fade, > .fade',
+    NAV_LIST_GROUP        : '.nav, .list-group',
     ACTIVE                : '.active',
-    ACTIVE_CHILD          : '> .nav-item > .active, > .list-group-item > .active, > .active',
-    DATA_TOGGLE           : '[data-toggle="tab"], [data-toggle="pill"]',
+    DATA_TOGGLE           : '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
     DROPDOWN_TOGGLE       : '.dropdown-toggle',
     DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active'
   }
@@ -87,7 +83,7 @@ const Tab = (($) => {
 
       let target
       let previous
-      const listElement = $(this._element).closest(Selector.LIST)[0]
+      const listElement = $(this._element).closest(Selector.NAV_LIST_GROUP)[0]
       const selector    = Util.getSelectorFromElement(this._element)
 
       if (listElement) {
@@ -152,11 +148,10 @@ const Tab = (($) => {
     // private
 
     _activate(element, container, callback) {
-      const active          = $(container).find(Selector.ACTIVE_CHILD)[0]
+      const active          = $(container).find(Selector.ACTIVE)[0]
       const isTransitioning = callback
         && Util.supportsTransitionEnd()
-        && (active && $(active).hasClass(ClassName.FADE)
-           || Boolean($(container).find(Selector.FADE_CHILD)[0]))
+        && (active && $(active).hasClass(ClassName.FADE))
 
       const complete = () => this._transitionComplete(
         element,
@@ -182,9 +177,6 @@ const Tab = (($) => {
     _transitionComplete(element, active, isTransitioning, callback) {
       if (active) {
         $(active).removeClass(ClassName.ACTIVE)
-        if ($(active).hasClass('list-group-item')) {
-          $(active).find('a.nav-link').removeClass(ClassName.ACTIVE)
-        }
 
         const dropdownChild = $(active.parentNode).find(
           Selector.DROPDOWN_ACTIVE_CHILD
@@ -198,9 +190,6 @@ const Tab = (($) => {
       }
 
       $(element).addClass(ClassName.ACTIVE)
-      if ($(element.parentNode).hasClass('list-group-item')) {
-        $(element.parentNode).addClass(ClassName.ACTIVE)
-      }
       element.setAttribute('aria-expanded', true)
 
       if (isTransitioning) {