diff options
| author | Mark Otto <[email protected]> | 2017-05-27 15:26:48 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-27 15:26:48 -0700 |
| commit | 8f67ac19a761b8d3ecc80485c3f54aa6ba4fa910 (patch) | |
| tree | d5a2aba4e2e762b283e7cfe60f00e1f239105bbe /js/src/scrollspy.js | |
| parent | 6c3f833076a9fa68601741e3e21bd07ad79b7d8a (diff) | |
| parent | db44e4b311317ef760f8412cc33c84146959b248 (diff) | |
| download | bootstrap-8f67ac19a761b8d3ecc80485c3f54aa6ba4fa910.tar.xz bootstrap-8f67ac19a761b8d3ecc80485c3f54aa6ba4fa910.zip | |
Merge branch 'v4-dev' into v4-docs-streamlined
Diffstat (limited to 'js/src/scrollspy.js')
| -rw-r--r-- | js/src/scrollspy.js | 39 |
1 files changed, 21 insertions, 18 deletions
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 0a4708bf9..7ea9f2483 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -3,7 +3,7 @@ import Util from './util' /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.5): scrollspy.js + * Bootstrap (v4.0.0-alpha.6): scrollspy.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ @@ -18,7 +18,7 @@ const ScrollSpy = (($) => { */ const NAME = 'scrollspy' - const VERSION = '4.0.0-alpha.5' + const VERSION = '4.0.0-alpha.6' const DATA_KEY = 'bs.scrollspy' const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' @@ -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 = [] @@ -133,12 +131,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 }) @@ -186,7 +187,7 @@ const ScrollSpy = (($) => { _getScrollTop() { return this._scrollElement === window ? - this._scrollElement.scrollY : this._scrollElement.scrollTop + this._scrollElement.pageYOffset : this._scrollElement.scrollTop } _getScrollHeight() { @@ -198,7 +199,7 @@ const ScrollSpy = (($) => { _getOffsetHeight() { return this._scrollElement === window ? - window.innerHeight : this._scrollElement.offsetHeight + window.innerHeight : this._scrollElement.getBoundingClientRect().height } _process() { @@ -256,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, { |
