mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-29 06:49:06 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pierre Vanduynslager
2017-04-02 05:21:04 -04:00
committed by Johann-S
parent 5142de7e59
commit 91b62941af
11 changed files with 829 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
js/src/scrollspy.js
View File

@@ -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, {

21
js/src/tab.js
View File

@@ -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) {