From 275821bbb081890ffe232d50d4778eb15bdb1d7b Mon Sep 17 00:00:00 2001
From: Pierre Vanduynslager <pierre.denis.vanduynslager@gmail.com>
Date: Sat, 18 Mar 2017 21:24:54 -0400
Subject: HTMLElement.offset* by getBoundingClientRect() (#21788)

* Replace element.offet* by getBoundingClientRect()

* Use variable to store BoundingClientRect

* Fix cc issue...
---
 js/src/scrollspy.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

(limited to 'js/src/scrollspy.js')

diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 66b6080c8..15541b8ff 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -133,12 +133,15 @@ const ScrollSpy = (($) => {
             target = $(targetSelector)[0]
           }
 
-          if (target && (target.offsetWidth || target.offsetHeight)) {
-            // todo (fat): remove sketch reliance on jQuery position/offset
-            return [
-              $(target)[offsetMethod]().top + offsetBase,
-              targetSelector
-            ]
+          if (target) {
+            const targetBCR = target.getBoundingClientRect()
+            if (targetBCR.width || targetBCR.height) {
+              // todo (fat): remove sketch reliance on jQuery position/offset
+              return [
+                $(target)[offsetMethod]().top + offsetBase,
+                targetSelector
+              ]
+            }
           }
           return null
         })
@@ -198,7 +201,7 @@ const ScrollSpy = (($) => {
 
     _getOffsetHeight() {
       return this._scrollElement === window ?
-          window.innerHeight : this._scrollElement.offsetHeight
+          window.innerHeight : this._scrollElement.getBoundingClientRect().height
     }
 
     _process() {
-- 
cgit v1.2.3


From 91b62941afb7115807fc2925398ebccfc68f5377 Mon Sep 17 00:00:00 2001
From: Pierre Vanduynslager <pierre.denis.vanduynslager@gmail.com>
Date: Sun, 2 Apr 2017 05:21:04 -0400
Subject: Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>,
 .nav-item, <li> etc...)

---
 js/src/scrollspy.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'js/src/scrollspy.js')

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, {
-- 
cgit v1.2.3