aboutsummaryrefslogtreecommitdiff
path: root/js/src/scrollspy.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/src/scrollspy.js')
-rw-r--r--js/src/scrollspy.js82
1 files changed, 37 insertions, 45 deletions
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index c379c6223..dd68ed386 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -41,31 +41,23 @@ const DefaultType = {
target: '(string|element)'
}
-const Event = {
- ACTIVATE: `activate${EVENT_KEY}`,
- SCROLL: `scroll${EVENT_KEY}`,
- LOAD_DATA_API: `load${EVENT_KEY}${DATA_API_KEY}`
-}
+const EVENT_ACTIVATE = `activate${EVENT_KEY}`
+const EVENT_SCROLL = `scroll${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
-const ClassName = {
- DROPDOWN_ITEM: 'dropdown-item',
- ACTIVE: 'active'
-}
+const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
+const CLASS_NAME_ACTIVE = 'active'
-const Selector = {
- DATA_SPY: '[data-spy="scroll"]',
- NAV_LIST_GROUP: '.nav, .list-group',
- NAV_LINKS: '.nav-link',
- NAV_ITEMS: '.nav-item',
- LIST_ITEMS: '.list-group-item',
- DROPDOWN: '.dropdown',
- DROPDOWN_TOGGLE: '.dropdown-toggle'
-}
+const SELECTOR_DATA_SPY = '[data-spy="scroll"]'
+const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
+const SELECTOR_NAV_LINKS = '.nav-link'
+const SELECTOR_NAV_ITEMS = '.nav-item'
+const SELECTOR_LIST_ITEMS = '.list-group-item'
+const SELECTOR_DROPDOWN = '.dropdown'
+const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
-const OffsetMethod = {
- OFFSET: 'offset',
- POSITION: 'position'
-}
+const METHOD_OFFSET = 'offset'
+const METHOD_POSITION = 'position'
/**
* ------------------------------------------------------------------------
@@ -78,15 +70,15 @@ class ScrollSpy {
this._element = element
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} .${ClassName.DROPDOWN_ITEM}`
+ this._selector = `${this._config.target} ${SELECTOR_NAV_LINKS},` +
+ `${this._config.target} ${SELECTOR_LIST_ITEMS},` +
+ `${this._config.target} .${CLASS_NAME_DROPDOWN_ITEM}`
this._offsets = []
this._targets = []
this._activeTarget = null
this._scrollHeight = 0
- EventHandler.on(this._scrollElement, Event.SCROLL, event => this._process(event))
+ EventHandler.on(this._scrollElement, EVENT_SCROLL, event => this._process(event))
this.refresh()
this._process()
@@ -108,14 +100,14 @@ class ScrollSpy {
refresh() {
const autoMethod = this._scrollElement === this._scrollElement.window ?
- OffsetMethod.OFFSET :
- OffsetMethod.POSITION
+ METHOD_OFFSET :
+ METHOD_POSITION
const offsetMethod = this._config.method === 'auto' ?
autoMethod :
this._config.method
- const offsetBase = offsetMethod === OffsetMethod.POSITION ?
+ const offsetBase = offsetMethod === METHOD_POSITION ?
this._getScrollTop() :
0
@@ -261,42 +253,42 @@ class ScrollSpy {
const link = SelectorEngine.findOne(queries.join(','))
- if (link.classList.contains(ClassName.DROPDOWN_ITEM)) {
+ if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
SelectorEngine
- .findOne(Selector.DROPDOWN_TOGGLE, SelectorEngine.closest(link, Selector.DROPDOWN))
- .classList.add(ClassName.ACTIVE)
+ .findOne(SELECTOR_DROPDOWN_TOGGLE, SelectorEngine.closest(link, SELECTOR_DROPDOWN))
+ .classList.add(CLASS_NAME_ACTIVE)
- link.classList.add(ClassName.ACTIVE)
+ link.classList.add(CLASS_NAME_ACTIVE)
} else {
// Set triggered link as active
- link.classList.add(ClassName.ACTIVE)
+ link.classList.add(CLASS_NAME_ACTIVE)
SelectorEngine
- .parents(link, Selector.NAV_LIST_GROUP)
+ .parents(link, SELECTOR_NAV_LIST_GROUP)
.forEach(listGroup => {
// Set triggered links parents as active
// With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
- SelectorEngine.prev(listGroup, `${Selector.NAV_LINKS}, ${Selector.LIST_ITEMS}`)
- .forEach(item => item.classList.add(ClassName.ACTIVE))
+ SelectorEngine.prev(listGroup, `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`)
+ .forEach(item => item.classList.add(CLASS_NAME_ACTIVE))
// Handle special case when .nav-link is inside .nav-item
- SelectorEngine.prev(listGroup, Selector.NAV_ITEMS)
+ SelectorEngine.prev(listGroup, SELECTOR_NAV_ITEMS)
.forEach(navItem => {
- SelectorEngine.children(navItem, Selector.NAV_LINKS)
- .forEach(item => item.classList.add(ClassName.ACTIVE))
+ SelectorEngine.children(navItem, SELECTOR_NAV_LINKS)
+ .forEach(item => item.classList.add(CLASS_NAME_ACTIVE))
})
})
}
- EventHandler.trigger(this._scrollElement, Event.ACTIVATE, {
+ EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, {
relatedTarget: target
})
}
_clear() {
makeArray(SelectorEngine.find(this._selector))
- .filter(node => node.classList.contains(ClassName.ACTIVE))
- .forEach(node => node.classList.remove(ClassName.ACTIVE))
+ .filter(node => node.classList.contains(CLASS_NAME_ACTIVE))
+ .forEach(node => node.classList.remove(CLASS_NAME_ACTIVE))
}
// Static
@@ -331,8 +323,8 @@ class ScrollSpy {
* ------------------------------------------------------------------------
*/
-EventHandler.on(window, Event.LOAD_DATA_API, () => {
- makeArray(SelectorEngine.find(Selector.DATA_SPY))
+EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+ makeArray(SelectorEngine.find(SELECTOR_DATA_SPY))
.forEach(spy => new ScrollSpy(spy, Manipulator.getDataAttributes(spy)))
})