Merge branch 'v4' of https://github.com/twbs/derpstrap into v4

1 files changed, 28 insertions, 29 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)
     }