diff options
author | XhmikosR <xhmikosr@gmail.com> | 2020-03-07 12:31:42 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2020-03-18 13:58:54 +0300 |
commit | 38333feda548fa973e034de03d34429a1f214089 (patch) | |
tree | 5626c4eb68f38bc03a4b26498d110ac150a24d2d /js/src/scrollspy.js | |
parent | cece839fc98caa12e73715a2351845580f74c51b (diff) |
Switch to strings constants.
This allows the minifier to mangle the constants. It also allows the linter to find unused strings properly.
While at it, remove a few unused properties.
File Before After Diff
--------------------------------------------------------
bootstrap.bundle.min.js 23.61 kB 22.61 kB -1.00 kB (-4.23 %)
bootstrap.min.js 17.04 kB 16.08 kB -0.96 kB (-5.63 %)
Diffstat (limited to 'js/src/scrollspy.js')
-rw-r--r-- | js/src/scrollspy.js | 82 |
1 files changed, 37 insertions, 45 deletions
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index c379c62235..dd68ed386e 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))) }) |