diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 52b8b6d20295587a177613566124c2513a104720..dd2dca8859e3fddaf3fec2aa62bb419fa5b5b08f 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -45,6 +45,7 @@ const ScrollSpy = (($) => { const ClassName = { DROPDOWN_ITEM : 'dropdown-item', DROPDOWN_MENU : 'dropdown-menu', + NAV_ITEM : 'nav-item', NAV_LINK : 'nav-link', NAV : 'nav', ACTIVE : 'active' @@ -57,6 +58,7 @@ const ScrollSpy = (($) => { LI : 'li', LI_DROPDOWN : 'li.dropdown', NAV_LINKS : '.nav-link', + NAV_ITEMS : '.nav-item', DROPDOWN : '.dropdown', DROPDOWN_ITEMS : '.dropdown-item', DROPDOWN_TOGGLE : '.dropdown-toggle' @@ -252,7 +254,7 @@ const ScrollSpy = (($) => { } 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) + $link.parents(Selector.LI).addClass(ClassName.ACTIVE) } $(this._scrollElement).trigger(Event.ACTIVATE, { @@ -261,7 +263,7 @@ const ScrollSpy = (($) => { } _clear() { - $(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE) + $(this._selector).parents(Selector.LI).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE) } @@ -324,3 +326,4 @@ const ScrollSpy = (($) => { })(jQuery) export default ScrollSpy +lSpy diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js index 97ddd16ece16fe5e33b64fe7e1df3a3b3867b9a8..5e4a69c2f329111c821159cdc1bfcbf6a8ef45f0 100644 --- a/js/tests/unit/scrollspy.js +++ b/js/tests/unit/scrollspy.js @@ -141,9 +141,9 @@ $(function () { var sectionHTML = '<div id="header" style="height: 500px;"></div>' + '<nav id="navigation" class="navbar">' + '<ul class="nav navbar-nav">' - + '<li class="active"><a class="nav-link" id="one-link" href="#one">One</a></li>' - + '<li><a class="nav-link" id="two-link" href="#two">Two</a></li>' - + '<li><a class="nav-link" id="three-link" href="#three">Three</a></li>' + + '<li class="nav-item active"><a class="nav-link" id="one-link" href="#one">One</a></li>' + + '<li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>' + + '<li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>' + '</ul>' + '</nav>' + '<div id="content" style="height: 200px; overflow-y: auto;">' @@ -159,9 +159,9 @@ $(function () { $scrollspy.bootstrapScrollspy({ target: '#navigation', offset: $scrollspy.position().top }) $scrollspy.one('scroll', function () { - assert.ok(!$section.find('#one-link').hasClass('active'), '"active" class removed from first section') - assert.ok($section.find('#two-link').hasClass('active'), '"active" class on middle section') - assert.ok(!$section.find('#three-link').hasClass('active'), '"active" class not on last section') + assert.ok(!$section.find('#one-link').parents().hasClass('active'), '"active" class removed from first section') + assert.ok($section.find('#two-link').parents().hasClass('active'), '"active" class on middle section') + assert.ok(!$section.find('#three-link').parents().hasClass('active'), '"active" class not on last section') done() }) @@ -173,8 +173,8 @@ $(function () { var navbarHtml = '<nav class="navbar">' + '<ul class="nav">' - + '<li><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>' - + '<li><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>' + + '<li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>' + + '<li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>' + '</ul>' + '</nav>' var contentHtml = @@ -193,7 +193,7 @@ $(function () { var deferred = $.Deferred() var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top) $content.one('scroll', function () { - assert.ok($(element).hasClass('active'), 'target:' + target + ', element' + element) + assert.ok($(element).parent().hasClass('active'), 'target:' + target + ', element' + element) deferred.resolve() }) $content.scrollTop(scrollHeight) @@ -211,9 +211,9 @@ $(function () { var done = assert.async() var navbarHtml = '<nav id="navigation" class="navbar">' + '<ul class="nav">' - + '<li><a id="a-1" class="nav-link" href="#div-1">div 1</a>' + + '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a>' + '<ul>' - + '<li><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' + + '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' + '</ul>' + '</li>' + '</ul>' @@ -235,8 +235,8 @@ $(function () { if (++times > 3) return done() $content.one('scroll', function () { - assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class') - assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class') + assert.ok($('#a-1').parents().hasClass('active'), 'nav item for outer element has "active" class') + assert.ok($('#a-2').parents().hasClass('active'), 'nav item for inner element has "active" class') testActiveElements() }) @@ -251,9 +251,9 @@ $(function () { var sectionHTML = '<div id="header" style="height: 500px;"></div>' + '<nav id="navigation" class="navbar">' + '<ul class="nav navbar-nav">' - + '<li><a id="one-link" class="nav-link active" href="#one">One</a></li>' - + '<li><a id="two-link" class="nav-link" href="#two">Two</a></li>' - + '<li><a id="three-link" class="nav-link" href="#three">Three</a></li>' + + '<li class="nav-item active" id="one-link"><a class="nav-link" href="#one">One</a></li>' + + '<li class="nav-item" id="two-link"><a class="nav-link" href="#two">Two</a></li>' + + '<li class="nav-item" id="three-link"><a class="nav-link" href="#three">Three</a></li>' + '</ul>' + '</nav>' $(sectionHTML).appendTo('#qunit-fixture') @@ -290,11 +290,11 @@ $(function () { var navbarHtml = '<nav class="navbar">' + '<ul class="nav">' - + '<li><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>' - + '<li><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>' - + '<li><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>' - + '<li><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>' - + '<li><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>' + + '<li class="nav-item"><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>' + + '<li class="nav-item"><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>' + + '<li class="nav-item"><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>' + + '<li class="nav-item"><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>' + + '<li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>' + '</ul>' + '</nav>' var contentHtml = @@ -315,7 +315,7 @@ $(function () { var deferred = $.Deferred() var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top) $content.one('scroll', function () { - assert.ok($(element).hasClass('active'), 'target:' + target + ', element: ' + element) + assert.ok($(element).parents().hasClass('active'), 'target:' + target + ', element: ' + element) deferred.resolve() }) $content.scrollTop(scrollHeight) diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html index efe6f593bb4432d4c9a728b99b3cfff87c8f80bd..00160aa6a4a71cbbe27245a287186b413e88b39b 100644 --- a/js/tests/visual/scrollspy.html +++ b/js/tests/visual/scrollspy.html @@ -17,7 +17,7 @@ <nav class="navbar navbar-dark navbar-fixed-top bg-inverse"> <div class="js-navbar-scrollspy"> <ul class="nav navbar-nav"> - <li class="nav-item"><a class="nav-link active" href="#fat">@fat</a></li> + <li class="nav-item active"><a class="nav-link" href="#fat">@fat</a></li> <li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li> <li class="dropdown nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown</a>