From 46c037410b8c7eaab3cf50a5cf44093aa2fd41f4 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 26 Feb 2019 13:20:34 +0200 Subject: Comply to the new rules. --- build/build-plugins.js | 26 +-- build/change-version.js | 31 +-- build/generate-sri.js | 2 +- build/postcss.config.js | 14 +- build/rollup.config.js | 16 +- js/src/alert.js | 34 ++-- js/src/button.js | 47 ++--- js/src/carousel.js | 217 ++++++++++---------- js/src/collapse.js | 104 +++++----- js/src/dom/data.js | 1 + js/src/dom/eventHandler.js | 89 +++++--- js/src/dom/manipulator.js | 4 +- js/src/dom/polyfill.js | 2 +- js/src/dom/selectorEngine.js | 5 +- js/src/dropdown.js | 147 +++++++------- js/src/modal.js | 162 +++++++-------- js/src/popover.js | 64 +++--- js/src/scrollspy.js | 149 +++++++------- js/src/tab.js | 61 +++--- js/src/toast.js | 52 ++--- js/src/tooltip.js | 223 +++++++++++---------- js/src/util/index.js | 34 ++-- js/src/util/sanitizer.js | 4 +- js/tests/browsers.js | 4 +- js/tests/integration/bundle.js | 4 +- js/tests/karma.conf.js | 4 +- js/tests/unit/alert.js | 2 +- js/tests/unit/button.js | 2 +- js/tests/unit/carousel.js | 18 +- js/tests/unit/collapse.js | 18 +- js/tests/unit/dropdown.js | 6 +- js/tests/unit/modal.js | 13 +- js/tests/unit/popover.js | 10 +- js/tests/unit/scrollspy.js | 6 +- js/tests/unit/tab.js | 8 +- js/tests/unit/toast.js | 5 +- js/tests/unit/tooltip.js | 14 +- js/tests/unit/util/index.js | 10 +- site/docs/4.3/assets/js/src/application.js | 2 +- site/docs/4.3/assets/js/src/search.js | 2 +- site/docs/4.3/examples/checkout/form-validation.js | 3 +- site/docs/4.3/examples/dashboard/dashboard.js | 2 +- site/docs/4.3/examples/offcanvas/offcanvas.js | 2 +- site/sw.js | 4 +- 44 files changed, 855 insertions(+), 772 deletions(-) diff --git a/build/build-plugins.js b/build/build-plugins.js index 1339684963..8569e979f1 100644 --- a/build/build-plugins.js +++ b/build/build-plugins.js @@ -7,16 +7,18 @@ 'use strict' -const path = require('path') -const rollup = require('rollup') -const babel = require('rollup-plugin-babel') -const banner = require('./banner.js') +const path = require('path') +const rollup = require('rollup') +const babel = require('rollup-plugin-babel') +const banner = require('./banner.js') -const TEST = process.env.NODE_ENV === 'test' +const TEST = process.env.NODE_ENV === 'test' const plugins = [ babel({ - exclude: 'node_modules/**', // Only transpile our source code - externalHelpersWhitelist: [ // Include only required helpers + // Only transpile our source code + exclude: 'node_modules/**', + // Include only required helpers + externalHelpersWhitelist: [ 'defineProperties', 'createClass', 'inheritsLoose', @@ -147,9 +149,7 @@ function getConfigByPluginKey(pluginKey) { function build(plugin) { console.log(`Building ${plugin} plugin...`) - const config = getConfigByPluginKey(plugin) - const external = config.external - const globals = config.globals + const { external, globals } = getConfigByPluginKey(plugin) let pluginPath = rootPath const utilObjects = [ @@ -179,7 +179,7 @@ function build(plugin) { input: bsPlugins[plugin], plugins, external - }).then((bundle) => { + }).then(bundle => { bundle.write({ banner: banner(pluginFilename), format: 'umd', @@ -189,8 +189,8 @@ function build(plugin) { file: path.resolve(__dirname, `${pluginPath}${pluginFilename}`) }) .then(() => console.log(`Building ${plugin} plugin... Done!`)) - .catch((err) => console.error(`${plugin}: ${err}`)) + .catch(error => console.error(`${plugin}: ${error}`)) }) } -Object.keys(bsPlugins).forEach((plugin) => build(plugin)) +Object.keys(bsPlugins).forEach(plugin => build(plugin)) diff --git a/build/change-version.js b/build/change-version.js index f1b4f747a7..971f447fb6 100755 --- a/build/change-version.js +++ b/build/change-version.js @@ -30,18 +30,21 @@ function walkAsync(directory, excludedDirectories, fileCallback, errback) { if (excludedDirectories.has(path.parse(directory).base)) { return } + fs.readdir(directory, (err, names) => { if (err) { errback(err) return } - names.forEach((name) => { + + names.forEach(name => { const filepath = path.join(directory, name) fs.lstat(filepath, (err, stats) => { if (err) { process.nextTick(errback, err) return } + if (stats.isDirectory()) { process.nextTick(walkAsync, filepath, excludedDirectories, fileCallback, errback) } else if (stats.isFile()) { @@ -55,18 +58,21 @@ function walkAsync(directory, excludedDirectories, fileCallback, errback) { function replaceRecursively(directory, excludedDirectories, allowedExtensions, original, replacement) { original = new RegExp(regExpQuote(original), 'g') replacement = regExpQuoteReplacement(replacement) - const updateFile = DRY_RUN ? (filepath) => { - if (allowedExtensions.has(path.parse(filepath).ext)) { - console.log(`FILE: ${filepath}`) - } else { - console.log(`EXCLUDED:${filepath}`) - } - } : (filepath) => { - if (allowedExtensions.has(path.parse(filepath).ext)) { - sh.sed('-i', original, replacement, filepath) + const updateFile = DRY_RUN ? + filepath => { + if (allowedExtensions.has(path.parse(filepath).ext)) { + console.log(`FILE: ${filepath}`) + } else { + console.log(`EXCLUDED:${filepath}`) + } + } : + filepath => { + if (allowedExtensions.has(path.parse(filepath).ext)) { + sh.sed('-i', original, replacement, filepath) + } } - } - walkAsync(directory, excludedDirectories, updateFile, (err) => { + + walkAsync(directory, excludedDirectories, updateFile, err => { console.error('ERROR while traversing directory!:') console.error(err) process.exit(1) @@ -79,6 +85,7 @@ function main(args) { console.error('Got arguments:', args) process.exit(1) } + const oldVersion = args[0] const newVersion = args[1] const EXCLUDED_DIRS = new Set([ diff --git a/build/generate-sri.js b/build/generate-sri.js index cd4eded566..4a04a1d301 100644 --- a/build/generate-sri.js +++ b/build/generate-sri.js @@ -43,7 +43,7 @@ const files = [ } ] -files.forEach((file) => { +files.forEach(file => { fs.readFile(file.file, 'utf8', (err, data) => { if (err) { throw err diff --git a/build/postcss.config.js b/build/postcss.config.js index 157291ffd2..56b7d94cc1 100644 --- a/build/postcss.config.js +++ b/build/postcss.config.js @@ -1,11 +1,13 @@ 'use strict' -module.exports = (ctx) => ({ - map: ctx.file.dirname.includes('examples') ? false : { - inline: false, - annotation: true, - sourcesContent: true - }, +module.exports = ctx => ({ + map: ctx.file.dirname.includes('examples') ? + false : + { + inline: false, + annotation: true, + sourcesContent: true + }, plugins: { autoprefixer: { cascade: false diff --git a/build/rollup.config.js b/build/rollup.config.js index e2819f8c04..d02acb5366 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -1,18 +1,20 @@ 'use strict' -const path = require('path') -const babel = require('rollup-plugin-babel') +const path = require('path') +const babel = require('rollup-plugin-babel') const resolve = require('rollup-plugin-node-resolve') -const banner = require('./banner.js') +const banner = require('./banner.js') -const BUNDLE = process.env.BUNDLE === 'true' +const BUNDLE = process.env.BUNDLE === 'true' -let fileDest = 'bootstrap.js' +let fileDest = 'bootstrap.js' const external = ['popper.js'] const plugins = [ babel({ - exclude: 'node_modules/**', // Only transpile our source code - externalHelpersWhitelist: [ // Include only required helpers + // Only transpile our source code + exclude: 'node_modules/**', + // Include only required helpers + externalHelpersWhitelist: [ 'defineProperties', 'createClass', 'inheritsLoose', diff --git a/js/src/alert.js b/js/src/alert.js index 9d8f69c465..f60ccfc911 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -22,26 +22,26 @@ import SelectorEngine from './dom/selectorEngine' * ------------------------------------------------------------------------ */ -const NAME = 'alert' -const VERSION = '4.3.1' -const DATA_KEY = 'bs.alert' -const EVENT_KEY = `.${DATA_KEY}` -const DATA_API_KEY = '.data-api' +const NAME = 'alert' +const VERSION = '4.3.1' +const DATA_KEY = 'bs.alert' +const EVENT_KEY = `.${DATA_KEY}` +const DATA_API_KEY = '.data-api' const Selector = { - DISMISS : '[data-dismiss="alert"]' + DISMISS: '[data-dismiss="alert"]' } const Event = { - CLOSE : `close${EVENT_KEY}`, - CLOSED : `closed${EVENT_KEY}`, - CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}` + CLOSE: `close${EVENT_KEY}`, + CLOSED: `closed${EVENT_KEY}`, + CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}` } const ClassName = { - ALERT : 'alert', - FADE : 'fade', - SHOW : 'show' + ALERT: 'alert', + FADE: 'fade', + SHOW: 'show' } /** @@ -90,7 +90,7 @@ class Alert { _getRootElement(element) { const selector = getSelectorFromElement(element) - let parent = false + let parent = false if (selector) { parent = SelectorEngine.findOne(selector) @@ -118,7 +118,7 @@ class Alert { const transitionDuration = getTransitionDurationFromElement(element) EventHandler - .one(element, TRANSITION_END, (event) => this._destroyElement(element, event)) + .one(element, TRANSITION_END, event => this._destroyElement(element, event)) emulateTransitionEnd(element, transitionDuration) } @@ -178,9 +178,9 @@ EventHandler if (typeof $ !== 'undefined') { const JQUERY_NO_CONFLICT = $.fn[NAME] - $.fn[NAME] = Alert._jQueryInterface - $.fn[NAME].Constructor = Alert - $.fn[NAME].noConflict = () => { + $.fn[NAME] = Alert._jQueryInterface + $.fn[NAME].Constructor = Alert + $.fn[NAME].noConflict = () => { $.fn[NAME] = JQUERY_NO_CONFLICT return Alert._jQueryInterface } diff --git a/js/src/button.js b/js/src/button.js index 489fe9de35..08d0f20308 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -18,30 +18,30 @@ import SelectorEngine from './dom/selectorEngine' * ------------------------------------------------------------------------ */ -const NAME = 'button' -const VERSION = '4.3.1' -const DATA_KEY = 'bs.button' -const EVENT_KEY = `.${DATA_KEY}` -const DATA_API_KEY = '.data-api' +const NAME = 'button' +const VERSION = '4.3.1' +const DATA_KEY = 'bs.button' +const EVENT_KEY = `.${DATA_KEY}` +const DATA_API_KEY = '.data-api' const ClassName = { - ACTIVE : 'active', - BUTTON : 'btn', - FOCUS : 'focus' + ACTIVE: 'active', + BUTTON: 'btn', + FOCUS: 'focus' } const Selector = { - DATA_TOGGLE_CARROT : '[data-toggle^="button"]', - DATA_TOGGLE : '[data-toggle="buttons"]', - INPUT : 'input:not([type="hidden"])', - ACTIVE : '.active', - BUTTON : '.btn' + DATA_TOGGLE_CARROT: '[data-toggle^="button"]', + DATA_TOGGLE: '[data-toggle="buttons"]', + INPUT: 'input:not([type="hidden"])', + ACTIVE: '.active', + BUTTON: '.btn' } const Event = { - CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`, - FOCUS_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY}`, - BLUR_DATA_API : `blur${EVENT_KEY}${DATA_API_KEY}` + CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`, + FOCUS_DATA_API: `focus${EVENT_KEY}${DATA_API_KEY}`, + BLUR_DATA_API: `blur${EVENT_KEY}${DATA_API_KEY}` } /** @@ -149,7 +149,7 @@ class Button { * ------------------------------------------------------------------------ */ -EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => { +EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, event => { event.preventDefault() let button = event.target @@ -162,15 +162,16 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (ev data = new Button(button) Data.setData(button, DATA_KEY, data) } + data.toggle() }) -EventHandler.on(document, Event.FOCUS_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => { +EventHandler.on(document, Event.FOCUS_DATA_API, Selector.DATA_TOGGLE_CARROT, event => { const button = SelectorEngine.closest(event.target, Selector.BUTTON) button.classList.add(ClassName.FOCUS) }) -EventHandler.on(document, Event.BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => { +EventHandler.on(document, Event.BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, event => { const button = SelectorEngine.closest(event.target, Selector.BUTTON) button.classList.remove(ClassName.FOCUS) }) @@ -183,11 +184,11 @@ EventHandler.on(document, Event.BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (eve */ if (typeof $ !== 'undefined') { - const JQUERY_NO_CONFLICT = $.fn[NAME] - $.fn[NAME] = Button._jQueryInterface - $.fn[NAME].Constructor = Button + const JQUERY_NO_CONFLICT = $.fn[NAME] + $.fn[NAME] = Button._jQueryInterface + $.fn[NAME].Constructor = Button - $.fn[NAME].noConflict = () => { + $.fn[NAME].noConflict = () => { $.fn[NAME] = JQUERY_NO_CONFLICT return Button._jQueryInterface } diff --git a/js/src/carousel.js b/js/src/carousel.js index d253d51dfd..3a9c4a47cb 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -28,83 +28,83 @@ import SelectorEngine from './dom/selectorEngine' * ------------------------------------------------------------------------ */ -const NAME = 'carousel' -const VERSION = '4.3.1' -const DATA_KEY = 'bs.carousel' -const EVENT_KEY = `.${DATA_KEY}` -const DATA_API_KEY = '.data-api' -const ARROW_LEFT_KEYCODE = 37 // KeyboardEvent.which value for left arrow key -const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key +const NAME = 'carousel' +const VERSION = '4.3.1' +const DATA_KEY = 'bs.carousel' +const EVENT_KEY = `.${DATA_KEY}` +const DATA_API_KEY = '.data-api' +const ARROW_LEFT_KEYCODE = 37 // KeyboardEvent.which value for left arrow key +const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch -const SWIPE_THRESHOLD = 40 +const SWIPE_THRESHOLD = 40 const Default = { - interval : 5000, - keyboard : true, - slide : false, - pause : 'hover', - wrap : true, - touch : true + interval: 5000, + keyboard: true, + slide: false, + pause: 'hover', + wrap: true, + touch: true } const DefaultType = { - interval : '(number|boolean)', - keyboard : 'boolean', - slide : '(boolean|string)', - pause : '(string|boolean)', - wrap : 'boolean', - touch : 'boolean' + interval: '(number|boolean)', + keyboard: 'boolean', + slide: '(boolean|string)', + pause: '(string|boolean)', + wrap: 'boolean', + touch: 'boolean' } const Direction = { - NEXT : 'next', - PREV : 'prev', - LEFT : 'left', - RIGHT : 'right' + NEXT: 'next', + PREV: 'prev', + LEFT: 'left', + RIGHT: 'right' } const Event = { - SLIDE : `slide${EVENT_KEY}`, - SLID : `slid${EVENT_KEY}`, - KEYDOWN : `keydown${EVENT_KEY}`, - MOUSEENTER : `mouseenter${EVENT_KEY}`, - MOUSELEAVE : `mouseleave${EVENT_KEY}`, - TOUCHSTART : `touchstart${EVENT_KEY}`, - TOUCHMOVE : `touchmove${EVENT_KEY}`, - TOUCHEND : `touchend${EVENT_KEY}`, - POINTERDOWN : `pointerdown${EVENT_KEY}`, - POINTERUP : `pointerup${EVENT_KEY}`, - DRAG_START : `dragstart${EVENT_KEY}`, - LOAD_DATA_API : `load${EVENT_KEY}${DATA_API_KEY}`, - CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}` + SLIDE: `slide${EVENT_KEY}`, + SLID: `slid${EVENT_KEY}`, + KEYDOWN: `keydown${EVENT_KEY}`, + MOUSEENTER: `mouseenter${EVENT_KEY}`, + MOUSELEAVE: `mouseleave${EVENT_KEY}`, + TOUCHSTART: `touchstart${EVENT_KEY}`, + TOUCHMOVE: `touchmove${EVENT_KEY}`, + TOUCHEND: `touchend${EVENT_KEY}`, + POINTERDOWN: `pointerdown${EVENT_KEY}`, + POINTERUP: `pointerup${EVENT_KEY}`, + DRAG_START: `dragstart${EVENT_KEY}`, + LOAD_DATA_API: `load${EVENT_KEY}${DATA_API_KEY}`, + CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}` } const ClassName = { - CAROUSEL : 'carousel', - ACTIVE : 'active', - SLIDE : 'slide', - RIGHT : 'carousel-item-right', - LEFT : 'carousel-item-left', - NEXT : 'carousel-item-next', - PREV : 'carousel-item-prev', - ITEM : 'carousel-item', - POINTER_EVENT : 'pointer-event' + CAROUSEL: 'carousel', + ACTIVE: 'active', + SLIDE: 'slide', + RIGHT: 'carousel-item-right', + LEFT: 'carousel-item-left', + NEXT: 'carousel-item-next', + PREV: 'carousel-item-prev', + ITEM: 'carousel-item', + POINTER_EVENT: 'pointer-event' } const Selector = { - ACTIVE : '.active', - ACTIVE_ITEM : '.active.carousel-item', - ITEM : '.carousel-item', - ITEM_IMG : '.carousel-item img', - NEXT_PREV : '.carousel-item-next, .carousel-item-prev', - INDICATORS : '.carousel-indicators', - DATA_SLIDE : '[data-slide], [data-slide-to]', - DATA_RIDE : '[data-ride="carousel"]' + ACTIVE: '.active', + ACTIVE_ITEM: '.active.carousel-item', + ITEM: '.carousel-item', + ITEM_IMG: '.carousel-item img', + NEXT_PREV: '.carousel-item-next, .carousel-item-prev', + INDICATORS: '.carousel-indicators', + DATA_SLIDE: '[data-slide], [data-slide-to]', + DATA_RIDE: '[data-ride="carousel"]' } const PointerType = { - TOUCH : 'touch', - PEN : 'pen' + TOUCH: 'touch', + PEN: 'pen' } /** @@ -114,20 +114,20 @@ const PointerType = { */ class Carousel { constructor(element, config) { - this._items = null - this._interval = null + this._items = null + this._interval = null this._activeElement = null - this._isPaused = false - this._isSliding = false - this.touchTimeout = null - this.touchStartX = 0 - this.touchDeltaX = 0 - - this._config = this._getConfig(config) - this._element = element + this._isPaused = false + this._isSliding = false + this.touchTimeout = null + this.touchStartX = 0 + this.touchDeltaX = 0 + + this._config = this._getConfig(config) + this._element = element this._indicatorsElement = SelectorEngine.findOne(Selector.INDICATORS, this._element) - this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 - this._pointerEvent = Boolean(window.PointerEvent || window.MSPointerEvent) + this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 + this._pointerEvent = Boolean(window.PointerEvent || window.MSPointerEvent) this._addEventListeners() Data.setData(element, DATA_KEY, this) @@ -216,9 +216,9 @@ class Carousel { return } - const direction = index > activeIndex - ? Direction.NEXT - : Direction.PREV + const direction = index > activeIndex ? + Direction.NEXT : + Direction.PREV this._slide(direction, this._items[index]) } @@ -227,13 +227,13 @@ class Carousel { EventHandler.off(this._element, EVENT_KEY) Data.removeData(this._element, DATA_KEY) - this._items = null - this._config = null - this._element = null - this._interval = null - this._isPaused = null - this._isSliding = null - this._activeElement = null + this._items = null + this._config = null + this._element = null + this._interval = null + this._isPaused = null + this._isSliding = null + this._activeElement = null this._indicatorsElement = null } @@ -271,14 +271,14 @@ class Carousel { _addEventListeners() { if (this._config.keyboard) { EventHandler - .on(this._element, Event.KEYDOWN, (event) => this._keydown(event)) + .on(this._element, Event.KEYDOWN, event => this._keydown(event)) } if (this._config.pause === 'hover') { EventHandler - .on(this._element, Event.MOUSEENTER, (event) => this.pause(event)) + .on(this._element, Event.MOUSEENTER, event => this.pause(event)) EventHandler - .on(this._element, Event.MOUSELEAVE, (event) => this.cycle(event)) + .on(this._element, Event.MOUSELEAVE, event => this.cycle(event)) } if (this._config.touch) { @@ -291,7 +291,7 @@ class Carousel { return } - const start = (event) => { + const start = event => { if (this._pointerEvent && PointerType[event.pointerType.toUpperCase()]) { this.touchStartX = event.clientX } else if (!this._pointerEvent) { @@ -299,7 +299,7 @@ class Carousel { } } - const move = (event) => { + const move = event => { // ensure swiping with one touch and not pinching if (event.touches && event.touches.length > 1) { this.touchDeltaX = 0 @@ -308,7 +308,7 @@ class Carousel { } } - const end = (event) => { + const end = event => { if (this._pointerEvent && PointerType[event.pointerType.toUpperCase()]) { this.touchDeltaX = event.clientX - this.touchStartX } @@ -327,23 +327,24 @@ class Carousel { if (this.touchTimeout) { clearTimeout(this.touchTimeout) } - this.touchTimeout = setTimeout((event) => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval) + + this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval) } } - makeArray(SelectorEngine.find(Selector.ITEM_IMG, this._element)).forEach((itemImg) => { - EventHandler.on(itemImg, Event.DRAG_START, (e) => e.preventDefault()) + makeArray(SelectorEngine.find(Selector.ITEM_IMG, this._element)).forEach(itemImg => { + EventHandler.on(itemImg, Event.DRAG_START, e => e.preventDefault()) }) if (this._pointerEvent) { - EventHandler.on(this._element, Event.POINTERDOWN, (event) => start(event)) - EventHandler.on(this._element, Event.POINTERUP, (event) => end(event)) + EventHandler.on(this._element, Event.POINTERDOWN, event => start(event)) + EventHandler.on(this._element, Event.POINTERUP, event => end(event)) this._element.classList.add(ClassName.POINTER_EVENT) } else { - EventHandler.on(this._element, Event.TOUCHSTART, (event) => start(event)) - EventHandler.on(this._element, Event.TOUCHMOVE, (event) => move(event)) - EventHandler.on(this._element, Event.TOUCHEND, (event) => end(event)) + EventHandler.on(this._element, Event.TOUCHSTART, event => start(event)) + EventHandler.on(this._element, Event.TOUCHMOVE, event => move(event)) + EventHandler.on(this._element, Event.TOUCHEND, event => end(event)) } } @@ -366,9 +367,9 @@ class Carousel { } _getItemIndex(element) { - this._items = element && element.parentNode - ? makeArray(SelectorEngine.find(Selector.ITEM, element.parentNode)) - : [] + this._items = element && element.parentNode ? + makeArray(SelectorEngine.find(Selector.ITEM, element.parentNode)) : + [] return this._items.indexOf(element) } @@ -376,20 +377,21 @@ class Carousel { _getItemByDirection(direction, activeElement) { const isNextDirection = direction === Direction.NEXT const isPrevDirection = direction === Direction.PREV - const activeIndex = this._getItemIndex(activeElement) - const lastItemIndex = this._items.length - 1 - const isGoingToWrap = isPrevDirection && activeIndex === 0 || + const activeIndex = this._getItemIndex(activeElement) + const lastItemIndex = this._items.length - 1 + const isGoingToWrap = isPrevDirection && activeIndex === 0 || isNextDirection && activeIndex === lastItemIndex if (isGoingToWrap && !this._config.wrap) { return activeElement } - const delta = direction === Direction.PREV ? -1 : 1 + const delta = direction === Direction.PREV ? -1 : 1 const itemIndex = (activeIndex + delta) % this._items.length - return itemIndex === -1 - ? this._items[this._items.length - 1] : this._items[itemIndex] + return itemIndex === -1 ? + this._items[this._items.length - 1] : + this._items[itemIndex] } _triggerSlideEvent(relatedTarget, eventDirectionName) { @@ -424,7 +426,7 @@ class Carousel { _slide(direction, element) { const activeElement = SelectorEngine.findOne(Selector.ACTIVE_ITEM, this._element) const activeElementIndex = this._getItemIndex(activeElement) - const nextElement = element || activeElement && + const nextElement = element || activeElement && this._getItemByDirection(direction, activeElement) const nextElementIndex = this._getItemIndex(nextElement) @@ -529,7 +531,7 @@ class Carousel { // Static static _carouselInterface(element, config) { - let data = Data.getData(element, DATA_KEY) + let data = Data.getData(element, DATA_KEY) let _config = { ...Default, ...Manipulator.getDataAttributes(element) @@ -552,8 +554,9 @@ class Carousel { data.to(config) } else if (typeof action === 'string') { if (typeof data[action] === 'undefined') { - throw new Error(`No method named "${action}"`) + throw new TypeError(`No method named "${action}"`) } + data[action]() } else if (_config.interval && _config.ride) { data.pause() @@ -629,9 +632,9 @@ EventHandler.on(window, Event.LOAD_DATA_API, () => { if (typeof $ !== 'undefined') { const JQUERY_NO_CONFLICT = $.fn[NAME] - $.fn[NAME] = Carousel._jQueryInterface - $.fn[NAME].Constructor = Carousel - $.fn[NAME].noConflict = () => { + $.fn[NAME] = Carousel._jQueryInterface + $.fn[NAME].Constructor = Carousel + $.fn[NAME].noConflict = () => { $.fn[NAME] = JQUERY_NO_CONFLICT return Carousel._jQueryInterface } diff --git a/js/src/collapse.js b/js/src/collapse.js index 847062d8d1..10f1ec9bab 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -27,45 +27,45 @@ import SelectorEngine from './dom/selectorEngine' * ------------------------------------------------------------------------ */ -const NAME = 'collapse' -const VERSION = '4.3.1' -const DATA_KEY = 'bs.collapse' -const EVENT_KEY = `.${DATA_KEY}` -const DATA_API_KEY = '.data-api' +const NAME = 'collapse' +const VERSION = '4.3.1' +const DATA_KEY = 'bs.collapse' +const EVENT_KEY = `.${DATA_KEY}` +const DATA_API_KEY = '.data-api' const Default = { - toggle : true, - parent : '' + toggle: true, + parent: '' } const DefaultType = { - toggle : 'boolean', - parent : '(string|element)' + toggle: 'boolean', + parent: '(string|element)' } const Event = { - SHOW : `show${EVENT_KEY}`, - SHOWN : `shown${EVENT_KEY}`, - HIDE : `hide${EVENT_KEY}`, - HIDDEN : `hidden${EVENT_KEY}`, - CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}` + SHOW: `show${EVENT_KEY}`, + SHOWN: `shown${EVENT_KEY}`, + HIDE: `hide${EVENT_KEY}`, + HIDDEN: `hidden${EVENT_KEY}`, + CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}` } const ClassName = { - SHOW : 'show', - COLLAPSE : 'collapse', - COLLAPSING : 'collapsing', - COLLAPSED : 'collapsed' + SHOW: 'show', + COLLAPSE: 'collapse', + COLLAPSING: 'collapsing', + COLLAPSED: 'collapsed' } const Dimension = { - WIDTH : 'width', - HEIGHT : 'height' + WIDTH: 'width', + HEIGHT: 'height' } const Selector = { - ACTIVES : '.show, .collapsing', - DATA_TOGGLE : '[data-toggle="collapse"]' + ACTIVES: '.show, .collapsing', + DATA_TOGGLE: '[data-toggle="collapse"]' } /** @@ -77,9 +77,9 @@ const Selector = { class Collapse { constructor(element, config) { this._isTransitioning = false - this._element = element - this._config = this._getConfig(config) - this._triggerArray = makeArray(SelectorEngine.find( + this._element = element + this._config = this._getConfig(config) + this._triggerArray = makeArray(SelectorEngine.find( `[data-toggle="collapse"][href="#${element.id}"],` + `[data-toggle="collapse"][data-target="#${element.id}"]` )) @@ -89,7 +89,7 @@ class Collapse { const elem = toggleList[i] const selector = getSelectorFromElement(elem) const filterElement = makeArray(SelectorEngine.find(selector)) - .filter((foundElem) => foundElem === element) + .filter(foundElem => foundElem === element) if (selector !== null && filterElement.length) { this._selector = selector @@ -141,7 +141,7 @@ class Collapse { if (this._parent) { actives = makeArray(SelectorEngine.find(Selector.ACTIVES, this._parent)) - .filter((elem) => { + .filter(elem => { if (typeof this._config.parent === 'string') { return elem.getAttribute('data-parent') === this._config.parent } @@ -156,7 +156,7 @@ class Collapse { const container = SelectorEngine.findOne(this._selector) if (actives) { - const tempActiveData = actives.filter((elem) => container !== elem) + const tempActiveData = actives.filter(elem => container !== elem) activesData = tempActiveData[0] ? Data.getData(tempActiveData[0], DATA_KEY) : null if (activesData && activesData._isTransitioning) { @@ -170,7 +170,7 @@ class Collapse { } if (actives) { - actives.forEach((elemActive) => { + actives.forEach(elemActive => { if (container !== elemActive) { Collapse._collapseInterface(elemActive, 'hide') } @@ -189,7 +189,7 @@ class Collapse { this._element.style[dimension] = 0 if (this._triggerArray.length) { - this._triggerArray.forEach((element) => { + this._triggerArray.forEach(element => { element.classList.remove(ClassName.COLLAPSED) element.setAttribute('aria-expanded', true) }) @@ -280,10 +280,10 @@ class Collapse { dispose() { Data.removeData(this._element, DATA_KEY) - this._config = null - this._parent = null - this._element = null - this._triggerArray = null + this._config = null + this._parent = null + this._element = null + this._triggerArray = null this._isTransitioning = null } @@ -308,7 +308,7 @@ class Collapse { let parent if (isElement(this._config.parent)) { - parent = this._config.parent + { parent } = this._config // it's a jQuery object if (typeof this._config.parent.jquery !== 'undefined' || typeof this._config.parent[0] !== 'undefined') { @@ -318,11 +318,10 @@ class Collapse { parent = SelectorEngine.findOne(this._config.parent) } - const selector = - `[data-toggle="collapse"][data-parent="${this._config.parent}"]` + const selector = `[data-toggle="collapse"][data-parent="${parent}"]` makeArray(SelectorEngine.find(selector, parent)) - .forEach((element) => { + .forEach(element => { this._addAriaAndCollapsedClass( Collapse._getTargetFromElement(element), [element] @@ -337,12 +336,13 @@ class Collapse { const isOpen = element.classList.contains(ClassName.SHOW) if (triggerArray.length) { - triggerArray.forEach((elem) => { - if (!isOpen) { - elem.classList.add(ClassName.COLLAPSED) - } else { + triggerArray.forEach(elem => { + if (isOpen) { elem.classList.remove(ClassName.COLLAPSED) + } else { + elem.classList.add(ClassName.COLLAPSED) } + elem.setAttribute('aria-expanded', isOpen) }) } @@ -357,7 +357,7 @@ class Collapse { } static _collapseInterface(element, config) { - let data = Data.getData(element, DATA_KEY) + let data = Data.getData(element, DATA_KEY) const _config = { ...Default, ...Manipulator.getDataAttributes(element), @@ -374,8 +374,9 @@ class Collapse { if (typeof config === 'string') { if (typeof data[config] === 'undefined') { - throw new Error(`No method named "${config}"`) + throw new TypeError(`No method named "${config}"`) } + data[config]() } } @@ -403,11 +404,11 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function ( event.preventDefault() } - const triggerData = Manipulator.getDataAttributes(this) - const selector = getSelectorFromElement(this) + const triggerData = Manipulator.getDataAttributes(this) + const selector = getSelectorFromElement(this) const selectorElements = makeArray(SelectorEngine.find(selector)) - selectorElements.forEach((element) => { + selectorElements.forEach(element => { const data = Data.getData(element, DATA_KEY) let config if (data) { @@ -416,6 +417,7 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function ( data._config.parent = triggerData.parent data._parent = data._getParent() } + config = 'toggle' } else { config = triggerData @@ -433,10 +435,10 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function ( */ if (typeof $ !== 'undefined') { - const JQUERY_NO_CONFLICT = $.fn[NAME] - $.fn[NAME] = Collapse._jQueryInterface - $.fn[NAME].Constructor = Collapse - $.fn[NAME].noConflict = () => { + const JQUERY_NO_CONFLICT = $.fn[NAME] + $.fn[NAME] = Collapse._jQueryInterface + $.fn[NAME].Constructor = Collapse + $.fn[NAME].noConflict = () => { $.fn[NAME] = JQUERY_NO_CONFLICT return Collapse._jQueryInterface } diff --git a/js/src/dom/data.js b/js/src/dom/data.js index 43a917b0e3..6dd5a5bb22 100644 --- a/js/src/dom/data.js +++ b/js/src/dom/data.js @@ -35,6 +35,7 @@ const mapData = (() => { if (keyProperties.key === key) { return storeData[keyProperties.id] } + return null }, delete(element, key) { diff --git a/js/src/dom/eventHandler.js b/js/src/dom/eventHandler.js index d92920cdaa..2a326a55bf 100644 --- a/js/src/dom/eventHandler.js +++ b/js/src/dom/eventHandler.js @@ -18,26 +18,61 @@ import Polyfill from './polyfill' const namespaceRegex = /[^.]*(?=\..*)\.|.*/ const stripNameRegex = /\..*/ -const keyEventRegex = /^key/ -const stripUidRegex = /::\d+$/ -const eventRegistry = {} // Events storage -let uidEvent = 1 -const customEvents = { +const keyEventRegex = /^key/ +const stripUidRegex = /::\d+$/ +const eventRegistry = {} // Events storage +let uidEvent = 1 +const customEvents = { mouseenter: 'mouseover', mouseleave: 'mouseout' } -const nativeEvents = [ - 'click', 'dblclick', 'mouseup', 'mousedown', 'contextmenu', - 'mousewheel', 'DOMMouseScroll', - 'mouseover', 'mouseout', 'mousemove', 'selectstart', 'selectend', - 'keydown', 'keypress', 'keyup', +const nativeEvents = [ + 'click', + 'dblclick', + 'mouseup', + 'mousedown', + 'contextmenu', + 'mousewheel', + 'DOMMouseScroll', + 'mouseover', + 'mouseout', + 'mousemove', + 'selectstart', + 'selectend', + 'keydown', + 'keypress', + 'keyup', 'orientationchange', - 'touchstart', 'touchmove', 'touchend', 'touchcancel', - 'pointerdown', 'pointermove', 'pointerup', 'pointerleave', 'pointercancel', - 'gesturestart', 'gesturechange', 'gestureend', - 'focus', 'blur', 'change', 'reset', 'select', 'submit', 'focusin', 'focusout', - 'load', 'unload', 'beforeunload', 'resize', 'move', 'DOMContentLoaded', 'readystatechange', - 'error', 'abort', 'scroll' + 'touchstart', + 'touchmove', + 'touchend', + 'touchcancel', + 'pointerdown', + 'pointermove', + 'pointerup', + 'pointerleave', + 'pointercancel', + 'gesturestart', + 'gesturechange', + 'gestureend', + 'focus', + 'blur', + 'change', + 'reset', + 'select', + 'submit', + 'focusin', + 'focusout', + 'load', + 'unload', + 'beforeunload', + 'resize', + 'move', + 'DOMContentLoaded', + 'readystatechange', + 'error', + 'abort', + 'scroll' ] /** @@ -60,7 +95,7 @@ function getEvent(element) { function fixEvent(event, element) { // Add which for key events if (event.which === null && keyEventRegex.test(event.type)) { - event.which = event.charCode !== null ? event.charCode : event.keyCode + event.which = event.charCode === null ? event.keyCode : event.charCode } event.delegateTarget = element @@ -81,7 +116,7 @@ function bootstrapDelegationHandler(element, selector, fn) { return function handler(event) { const domElements = element.querySelectorAll(selector) - for (let target = event.target; target && target !== this; target = target.parentNode) { + for (let { target } = event; target && target !== this; target = target.parentNode) { for (let i = domElements.length; i--;) { if (domElements[i] === target) { fixEvent(event, target) @@ -147,8 +182,8 @@ function addHandler(element, originalTypeEvent, handler, delegationFn, oneOff) { } const [delegation, originalHandler, typeEvent] = normalizeParams(originalTypeEvent, handler, delegationFn) - const events = getEvent(element) - const handlers = events[typeEvent] || (events[typeEvent] = {}) + const events = getEvent(element) + const handlers = events[typeEvent] || (events[typeEvent] = {}) const previousFn = findHandler(handlers, originalHandler, delegation ? handler : null) if (previousFn) { @@ -158,7 +193,7 @@ function addHandler(element, originalTypeEvent, handler, delegationFn, oneOff) { } const uid = getUidEvent(originalHandler, originalTypeEvent.replace(namespaceRegex, '')) - const fn = !delegation ? bootstrapHandler(element, handler) : bootstrapDelegationHandler(element, handler, delegationFn) + const fn = delegation ? bootstrapDelegationHandler(element, handler, delegationFn) : bootstrapHandler(element, handler) fn.delegationSelector = delegation ? handler : null fn.originalHandler = originalHandler @@ -184,7 +219,7 @@ function removeNamespacedHandlers(element, events, typeEvent, namespace) { const storeElementEvent = events[typeEvent] || {} Object.keys(storeElementEvent) - .forEach((handlerKey) => { + .forEach(handlerKey => { if (handlerKey.indexOf(namespace) > -1) { const event = storeElementEvent[handlerKey] @@ -224,14 +259,14 @@ const EventHandler = { if (isNamespace) { Object.keys(events) - .forEach((elementEvent) => { + .forEach(elementEvent => { removeNamespacedHandlers(element, events, elementEvent, originalTypeEvent.substr(1)) }) } const storeElementEvent = events[typeEvent] || {} Object.keys(storeElementEvent) - .forEach((keyHandlers) => { + .forEach(keyHandlers => { const handlerKey = keyHandlers.replace(stripUidRegex, '') if (!inNamespace || originalTypeEvent.indexOf(handlerKey) > -1) { @@ -247,9 +282,9 @@ const EventHandler = { return null } - const typeEvent = event.replace(stripNameRegex, '') + const typeEvent = event.replace(stripNameRegex, '') const inNamespace = event !== typeEvent - const isNative = nativeEvents.indexOf(typeEvent) > -1 + const isNative = nativeEvents.indexOf(typeEvent) > -1 let jQueryEvent let bubbles = true @@ -279,7 +314,7 @@ const EventHandler = { // merge custom informations in our event if (typeof args !== 'undefined') { Object.keys(args) - .forEach((key) => { + .forEach(key => { Object.defineProperty(evt, key, { get() { return args[key] diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js index 6c7df69425..9768473b59 100644 --- a/js/src/dom/manipulator.js +++ b/js/src/dom/manipulator.js @@ -26,7 +26,7 @@ function normalizeData(val) { } function normalizeDataKey(key) { - return key.replace(/[A-Z]/g, (chr) => chr.toLowerCase()) + return key.replace(/[A-Z]/g, chr => chr.toLowerCase()) } const Manipulator = { @@ -47,7 +47,7 @@ const Manipulator = { ...element.dataset } - Object.keys(attributes).forEach((key) => { + Object.keys(attributes).forEach(key => { attributes[key] = normalizeData(attributes[key]) }) diff --git a/js/src/dom/polyfill.js b/js/src/dom/polyfill.js index 579b7a10ed..eaf07552e8 100644 --- a/js/src/dom/polyfill.js +++ b/js/src/dom/polyfill.js @@ -34,7 +34,7 @@ const Polyfill = (() => { try { element.querySelectorAll(':scope *') - } catch (e) { + } catch (error) { return false } diff --git a/js/src/dom/selectorEngine.js b/js/src/dom/selectorEngine.js index 151bb54c75..f674319d1c 100644 --- a/js/src/dom/selectorEngine.js +++ b/js/src/dom/selectorEngine.js @@ -16,8 +16,7 @@ import { * ------------------------------------------------------------------------ */ -const findFn = Polyfill.find -const findOne = Polyfill.findOne +const { find: findFn, findOne } = Polyfill const NODE_TEXT = 3 const SelectorEngine = { @@ -48,7 +47,7 @@ const SelectorEngine = { const children = makeArray(element.children) - return children.filter((child) => this.matches(child, selector)) + return children.filter(child => this.matches(child, selector)) }, parents(element, selector) { diff --git a/js/src/dropdown.js b/js/src/dropdown.js index f5150a016f..1492f48275 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -25,74 +25,74 @@ import SelectorEngine from './dom/selectorEngine' * ------------------------------------------------------------------------ */ -const NAME = 'dropdown' -const VERSION = '4.3.1' -const DATA_KEY = 'bs.dropdown' -const EVENT_KEY = `.${DATA_KEY}` -const DATA_API_KEY = '.data-api' -const ESCAPE_KEYCODE = 27 // KeyboardEvent.which value for Escape (Esc) key -const SPACE_KEYCODE = 32 // KeyboardEvent.which value for space key -const TAB_KEYCODE = 9 // KeyboardEvent.which value for tab key -const ARROW_UP_KEYCODE = 38 // KeyboardEvent.which value for up arrow key -const ARROW_DOWN_KEYCODE = 40 // KeyboardEvent.which value for down arrow key +const NAME = 'dropdown' +const VERSION = '4.3.1' +const DATA_KEY = 'bs.dropdown' +const EVENT_KEY = `.${DATA_KEY}` +const DATA_API_KEY = '.data-api' +const ESCAPE_KEYCODE = 27 // KeyboardEvent.which value for Escape (Esc) key +const SPACE_KEYCODE = 32 // KeyboardEvent.which value for space key +const TAB_KEYCODE = 9 // KeyboardEvent.which value for tab key +const ARROW_UP_KEYCODE = 38 // KeyboardEvent.which value for up arrow key +const ARROW_DOWN_KEYCODE = 40 // KeyboardEvent.which value for down arrow key const RIGHT_MOUSE_BUTTON_WHICH = 3 // MouseEvent.which value for the right button (assuming a right-handed mouse) -const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEYCODE}|${ARROW_DOWN_KEYCODE}|${ESCAPE_KEYCODE}`) +const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEYCODE}|${ARROW_DOWN_KEYCODE}|${ESCAPE_KEYCODE}`) const Event = { - HIDE : `hide${EVENT_KEY}`, - HIDDEN : `hidden${EVENT_KEY}`, - SHOW : `show${EVENT_KEY}`, - SHOWN : `shown${EVENT_KEY}`, - CLICK : `click${EVENT_KEY}`, - CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`, - KEYDOWN_DATA_API : `keydown${EVENT_KEY}${DATA_API_KEY}`, - KEYUP_DATA_API : `keyup${EVENT_KEY}${DATA_API_KEY}` + HIDE: `hide${EVENT_KEY}`, + HIDDEN: `hidden${EVENT_KEY}`, + SHOW: `show${EVENT_KEY}`, + SHOWN: `shown${EVENT_KEY}`, + CLICK: `click${EVENT_KEY}`, + CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`, + KEYDOWN_DATA_API: `keydown${EVENT_KEY}${DATA_API_KEY}`, + KEYUP_DATA_API: `keyup${EVENT_KEY}${DATA_API_KEY}` } const ClassName = { - DISABLED : 'disabled', - SHOW : 'show', - DROPUP : 'dropup', - DROPRIGHT : 'dropright', - DROPLEFT : 'dropleft', - MENURIGHT : 'dropdown-menu-right', - MENULEFT : 'dropdown-menu-left', - POSITION_STATIC : 'position-static' + DISABLED: 'disabled', + SHOW: 'show', + DROPUP: 'dropup', + DROPRIGHT: 'dropright', + DROPLEFT: 'dropleft', + MENURIGHT: 'dropdown-menu-right', + MENULEFT: 'dropdown-menu-left', + POSITION_STATIC: 'position-static' } const Selector = { - DATA_TOGGLE : '[data-toggle="dropdown"]', - FORM_CHILD : '.dropdown form', - MENU : '.dropdown-menu', - NAVBAR_NAV : '.navbar-nav', - VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)' + DATA_TOGGLE: '[data-toggle="dropdown"]', + FORM_CHILD: '.dropdown form', + MENU: '.dropdown-menu', + NAVBAR_NAV: '.navbar-nav', + VISIBLE_ITEMS: '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)' } const AttachmentMap = { - TOP : 'top-start', - TOPEND : 'top-end', - BOTTOM : 'bottom-start', - BOTTOMEND : 'bottom-end', - RIGHT : 'right-start', - RIGHTEND : 'right-end', - LEFT : 'left-start', - LEFTEND : 'left-end' + TOP: 'top-start', + TOPEND: 'top-end', + BOTTOM: 'bottom-start', + BOTTOMEND: 'bottom-end', + RIGHT: 'right-start', + RIGHTEND: 'right-end', + LEFT: 'left-start', + LEFTEND: 'left-end' } const Default = { - offset : 0, - flip : true, - boundary : 'scrollParent', - reference : 'toggle', - display : 'dynamic' + offset: 0, + flip: true, + boundary: 'scrollParent', + reference: 'toggle', + display: 'dynamic' } const DefaultType = { - offset : '(number|string|function)', - flip : 'boolean', - boundary : '(string|element)', - reference : '(string|element)', - display : 'string' + offset: '(number|string|function)', + flip: 'boolean', + boundary: '(string|element)', + reference: '(string|element)', + display: 'string' } /** @@ -103,10 +103,10 @@ const DefaultType = { class Dropdown { constructor(element, config) { - this._element = element - this._popper = null - this._config = this._getConfig(config) - this._menu = this._getMenuElement() + this._element = element + this._popper = null + this._config = this._getConfig(config) + this._menu = this._getMenuElement() this._inNavbar = this._detectNavbar() this._addEventListeners() @@ -134,7 +134,7 @@ class Dropdown { return } - const parent = Dropdown._getParentFromElement(this._element) + const parent = Dropdown._getParentFromElement(this._element) const isActive = this._menu.classList.contains(ClassName.SHOW) Dropdown._clearMenus() @@ -181,6 +181,7 @@ class Dropdown { if (this._config.boundary !== 'scrollParent') { parent.classList.add(ClassName.POSITION_STATIC) } + this._popper = new Popper(referenceElement, this._menu, this._getPopperConfig()) } @@ -191,7 +192,7 @@ class Dropdown { if ('ontouchstart' in document.documentElement && !makeArray(SelectorEngine.closest(parent, Selector.NAVBAR_NAV)).length) { makeArray(document.body.children) - .forEach((elem) => EventHandler.on(elem, 'mouseover', null, noop())) + .forEach(elem => EventHandler.on(elem, 'mouseover', null, noop())) } this._element.focus() @@ -265,7 +266,7 @@ class Dropdown { // Private _addEventListeners() { - EventHandler.on(this._element, Event.CLICK, (event) => { + EventHandler.on(this._element, Event.CLICK, event => { event.preventDefault() event.stopPropagation() this.toggle() @@ -296,12 +297,13 @@ class Dropdown { this._menu = SelectorEngine.findOne(Selector.MENU, parent) } } + return this._menu } _getPlacement() { const parentDropdown = this._element.parentNode - let placement = AttachmentMap.BOTTOM + let placement = AttachmentMap.BOTTOM // Handle dropup if (parentDropdown.classList.contains(ClassName.DROPUP)) { @@ -316,6 +318,7 @@ class Dropdown { } else if (this._menu.classList.contains(ClassName.MENURIGHT)) { placement = AttachmentMap.BOTTOMEND } + return placement } @@ -327,7 +330,7 @@ class Dropdown { const offset = {} if (typeof this._config.offset === 'function') { - offset.fn = (data) => { + offset.fn = data => { data.offsets = { ...data.offsets, ...this._config.offset(data.offsets, this._element) || {} @@ -378,8 +381,9 @@ class Dropdown { if (typeof config === 'string') { if (typeof data[config] === 'undefined') { - throw new Error(`No method named "${config}"`) + throw new TypeError(`No method named "${config}"`) } + data[config]() } } @@ -398,8 +402,8 @@ class Dropdown { const toggles = makeArray(SelectorEngine.find(Selector.DATA_TOGGLE)) for (let i = 0, len = toggles.length; i < len; i++) { - const parent = Dropdown._getParentFromElement(toggles[i]) - const context = Data.getData(toggles[i], DATA_KEY) + const parent = Dropdown._getParentFromElement(toggles[i]) + const context = Data.getData(toggles[i], DATA_KEY) const relatedTarget = { relatedTarget: toggles[i] } @@ -433,7 +437,7 @@ class Dropdown { // empty mouseover listeners we added for iOS support if ('ontouchstart' in document.documentElement) { makeArray(document.body.children) - .forEach((elem) => EventHandler.off(elem, 'mouseover', null, noop())) + .forEach(elem => EventHandler.off(elem, 'mouseover', null, noop())) } toggles[i].setAttribute('aria-expanded', 'false') @@ -463,10 +467,11 @@ class Dropdown { // - If key is other than escape // - If key is not up or down => not a dropdown command // - If trigger inside the menu => not a dropdown command - if (/input|textarea/i.test(event.target.tagName) - ? event.which === SPACE_KEYCODE || event.which !== ESCAPE_KEYCODE && + if (/input|textarea/i.test(event.target.tagName) ? + event.which === SPACE_KEYCODE || event.which !== ESCAPE_KEYCODE && (event.which !== ARROW_DOWN_KEYCODE && event.which !== ARROW_UP_KEYCODE || - SelectorEngine.closest(event.target, Selector.MENU)) : !REGEXP_KEYDOWN.test(event.which)) { + SelectorEngine.closest(event.target, Selector.MENU)) : + !REGEXP_KEYDOWN.test(event.which)) { return } @@ -477,7 +482,7 @@ class Dropdown { return } - const parent = Dropdown._getParentFromElement(this) + const parent = Dropdown._getParentFromElement(this) const isActive = parent.classList.contains(ClassName.SHOW) if (!isActive || isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) { @@ -533,7 +538,7 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function ( Dropdown._dropdownInterface(this, 'toggle') }) EventHandler - .on(document, Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => e.stopPropagation()) + .on(document, Event.CLICK_DATA_API, Selector.FORM_CHILD, e => e.stopPropagation()) /** * ------------------------------------------------------------------------ @@ -544,9 +549,9 @@ EventHandler if (typeof $ !== 'undefined') { const JQUERY_NO_CONFLICT = $.fn[NAME] - $.fn[NAME] = Dropdown._jQueryInterface - $.fn[NAME].Constructor = Dropdown - $.fn[NAME].noConflict = () => { + $.fn[NAME] = Dropdown._jQueryInterface + $.fn[NAME].Constructor = Dropdown + $.fn[NAME].noConflict = () => { $.fn[NAME] = JQUERY_NO_CONFLICT return Dropdown._jQueryInterface } diff --git a/js/src/modal.js b/js/src/modal.js index 7efb24f842..ec85746ee7 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -27,57 +27,57 @@ import SelectorEngine from './dom/selectorEngine' * ------------------------------------------------------------------------ */ -const NAME = 'modal' -const VERSION = '4.3.1' -const DATA_KEY = 'bs.modal' -const EVENT_KEY = `.${DATA_KEY}` -const DATA_API_KEY = '.data-api' -const ESCAPE_KEYCODE = 27 // KeyboardEvent.which value for Escape (Esc) key +const NAME = 'modal' +const VERSION = '4.3.1' +const DATA_KEY = 'bs.modal' +const EVENT_KEY = `.${DATA_KEY}` +const DATA_API_KEY = '.data-api' +const ESCAPE_KEYCODE = 27 // KeyboardEvent.which value for Escape (Esc) key const Default = { - backdrop : true, - keyboard : true, - focus : true, - show : true + backdrop: true, + keyboard: true, + focus: true, + show: true } const DefaultType = { - backdrop : '(boolean|string)', - keyboard : 'boolean', - focus : 'boolean', - show : 'boolean' + backdrop: '(boolean|string)', + keyboard: 'boolean', + focus: 'boolean', + show: 'boolean' } const Event = { - HIDE : `hide${EVENT_KEY}`, - HIDDEN : `hidden${EVENT_KEY}`, - SHOW : `show${EVENT_KEY}`, - SHOWN : `shown${EVENT_KEY}`, - FOCUSIN : `focusin${EVENT_KEY}`, - RESIZE : `resize${EVENT_KEY}`, - CLICK_DISMISS : `click.dismiss${EVENT_KEY}`, - KEYDOWN_DISMISS : `keydown.dismiss${EVENT_KEY}`, - MOUSEUP_DISMISS : `mouseup.dismiss${EVENT_KEY}`, - MOUSEDOWN_DISMISS : `mousedown.dismiss${EVENT_KEY}`, - CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}` + HIDE: `hide${EVENT_KEY}`, + HIDDEN: `hidden${EVENT_KEY}`, + SHOW: `show${EVENT_KEY}`, + SHOWN: `shown${EVENT_KEY}`, + FOCUSIN: `focusin${EVENT_KEY}`, + RESIZE: `resize${EVENT_KEY}`, + CLICK_DISMISS: `click.dismiss${EVENT_KEY}`, + KEYDOWN_DISMISS: `keydown.dismiss${EVENT_KEY}`, + MOUSEUP_DISMISS: `mouseup.dismiss${EVENT_KEY}`, + MOUSEDOWN_DISMISS: `mousedown.dismiss${EVENT_KEY}`, + CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}` } const ClassName = { - SCROLLABLE : 'modal-dialog-scrollable', - SCROLLBAR_MEASURER : 'modal-scrollbar-measure', - BACKDROP : 'modal-backdrop', - OPEN : 'modal-open', - FADE : 'fade', - SHOW : 'show' + SCROLLABLE: 'modal-dialog-scrollable', + SCROLLBAR_MEASURER: 'modal-scrollbar-measure', + BACKDROP: 'modal-backdrop', + OPEN: 'modal-open', + FADE: 'fade', + SHOW: 'show' } const Selector = { - DIALOG : '.modal-dialog', - MODAL_BODY : '.modal-body', - DATA_TOGGLE : '[data-toggle="modal"]', - DATA_DISMISS : '[data-dismiss="modal"]', - FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', - STICKY_CONTENT : '.sticky-top' + DIALOG: '.modal-dialog', + MODAL_BODY: '.modal-body', + DATA_TOGGLE: '[data-toggle="modal"]', + DATA_DISMISS: '[data-dismiss="modal"]', + FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', + STICKY_CONTENT: '.sticky-top' } /** @@ -88,15 +88,15 @@ const Selector = { class Modal { constructor(element, config) { - this._config = this._getConfig(config) - this._element = element - this._dialog = SelectorEngine.findOne(Selector.DIALOG, element) - this._backdrop = null - this._isShown = false - this._isBodyOverflowing = false + this._config = this._getConfig(config) + this._element = element + this._dialog = SelectorEngine.findOne(Selector.DIALOG, element) + this._backdrop = null + this._isShown = false + this._isBodyOverflowing = false this._ignoreBackdropClick = false - this._isTransitioning = false - this._scrollbarWidth = 0 + this._isTransitioning = false + this._scrollbarWidth = 0 Data.setData(element, DATA_KEY, this) } @@ -146,11 +146,11 @@ class Modal { EventHandler.on(this._element, Event.CLICK_DISMISS, Selector.DATA_DISMISS, - (event) => this.hide(event) + event => this.hide(event) ) EventHandler.on(this._dialog, Event.MOUSEDOWN_DISMISS, () => { - EventHandler.one(this._element, Event.MOUSEUP_DISMISS, (event) => { + EventHandler.one(this._element, Event.MOUSEUP_DISMISS, event => { if (event.target === this._element) { this._ignoreBackdropClick = true } @@ -192,11 +192,10 @@ class Modal { EventHandler.off(this._element, Event.CLICK_DISMISS) EventHandler.off(this._dialog, Event.MOUSEDOWN_DISMISS) - if (transition) { const transitionDuration = getTransitionDurationFromElement(this._element) - EventHandler.one(this._element, TRANSITION_END, (event) => this._hideModal(event)) + EventHandler.one(this._element, TRANSITION_END, event => this._hideModal(event)) emulateTransitionEnd(this._element, transitionDuration) } else { this._hideModal() @@ -205,7 +204,7 @@ class Modal { dispose() { [window, this._element, this._dialog] - .forEach((htmlElement) => EventHandler.off(htmlElement, EVENT_KEY)) + .forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY)) /** * `document` has 2 events `Event.FOCUSIN` and `Event.CLICK_DATA_API` @@ -216,15 +215,15 @@ class Modal { Data.removeData(this._element, DATA_KEY) - this._config = null - this._element = null - this._dialog = null - this._backdrop = null - this._isShown = null - this._isBodyOverflowing = null + this._config = null + this._element = null + this._dialog = null + this._backdrop = null + this._isShown = null + this._isBodyOverflowing = null this._ignoreBackdropClick = null - this._isTransitioning = null - this._scrollbarWidth = null + this._isTransitioning = null + this._scrollbarWidth = null } handleUpdate() { @@ -275,6 +274,7 @@ class Modal { if (this._config.focus) { this._element.focus() } + this._isTransitioning = false EventHandler.trigger(this._element, Event.SHOWN, { relatedTarget @@ -282,7 +282,7 @@ class Modal { } if (transition) { - const transitionDuration = getTransitionDurationFromElement(this._dialog) + const transitionDuration = getTransitionDurationFromElement(this._dialog) EventHandler.one(this._dialog, TRANSITION_END, transitionComplete) emulateTransitionEnd(this._dialog, transitionDuration) @@ -293,7 +293,7 @@ class Modal { _enforceFocus() { EventHandler.off(document, Event.FOCUSIN) // guard against infinite focus loop - EventHandler.on(document, Event.FOCUSIN, (event) => { + EventHandler.on(document, Event.FOCUSIN, event => { if (document !== event.target && this._element !== event.target && !this._element.contains(event.target)) { @@ -304,7 +304,7 @@ class Modal { _setEscapeEvent() { if (this._isShown && this._config.keyboard) { - EventHandler.on(this._element, Event.KEYDOWN_DISMISS, (event) => { + EventHandler.on(this._element, Event.KEYDOWN_DISMISS, event => { if (event.which === ESCAPE_KEYCODE) { event.preventDefault() this.hide() @@ -317,7 +317,7 @@ class Modal { _setResizeEvent() { if (this._isShown) { - EventHandler.on(window, Event.RESIZE, (event) => this.handleUpdate(event)) + EventHandler.on(window, Event.RESIZE, event => this.handleUpdate(event)) } else { EventHandler.off(window, Event.RESIZE) } @@ -344,9 +344,9 @@ class Modal { } _showBackdrop(callback) { - const animate = this._element.classList.contains(ClassName.FADE) - ? ClassName.FADE - : '' + const animate = this._element.classList.contains(ClassName.FADE) ? + ClassName.FADE : + '' if (this._isShown && this._config.backdrop) { this._backdrop = document.createElement('div') @@ -358,14 +358,16 @@ class Modal { document.body.appendChild(this._backdrop) - EventHandler.on(this._element, Event.CLICK_DISMISS, (event) => { + EventHandler.on(this._element, Event.CLICK_DISMISS, event => { if (this._ignoreBackdropClick) { this._ignoreBackdropClick = false return } + if (event.target !== event.currentTarget) { return } + if (this._config.backdrop === 'static') { this._element.focus() } else { @@ -450,7 +452,7 @@ class Modal { // Adjust fixed content padding makeArray(SelectorEngine.find(Selector.FIXED_CONTENT)) - .forEach((element) => { + .forEach(element => { const actualPadding = element.style.paddingRight const calculatedPadding = window.getComputedStyle(element)['padding-right'] Manipulator.setDataAttribute(element, 'padding-right', actualPadding) @@ -459,7 +461,7 @@ class Modal { // Adjust sticky content margin makeArray(SelectorEngine.find(Selector.STICKY_CONTENT)) - .forEach((element) => { + .forEach(element => { const actualMargin = element.style.marginRight const calculatedMargin = window.getComputedStyle(element)['margin-right'] Manipulator.setDataAttribute(element, 'margin-right', actualMargin) @@ -480,7 +482,7 @@ class Modal { _resetScrollbar() { // Restore fixed content padding makeArray(SelectorEngine.find(Selector.FIXED_CONTENT)) - .forEach((element) => { + .forEach(element => { const padding = Manipulator.getDataAttribute(element, 'padding-right') if (typeof padding !== 'undefined') { Manipulator.removeDataAttribute(element, 'padding-right') @@ -490,7 +492,7 @@ class Modal { // Restore sticky content and navbar-toggler margin makeArray(SelectorEngine.find(`${Selector.STICKY_CONTENT}`)) - .forEach((element) => { + .forEach(element => { const margin = Manipulator.getDataAttribute(element, 'margin-right') if (typeof margin !== 'undefined') { Manipulator.removeDataAttribute(element, 'margin-right') @@ -500,11 +502,11 @@ class Modal { // Restore body padding const padding = Manipulator.getDataAttribute(document.body, 'padding-right') - if (typeof padding !== 'undefined') { + if (typeof padding === 'undefined') { + document.body.style.paddingRight = '' + } else { Manipulator.removeDataAttribute(document.body, 'padding-right') document.body.style.paddingRight = padding - } else { - document.body.style.paddingRight = '' } } @@ -536,6 +538,7 @@ class Modal { if (typeof data[config] === 'undefined') { throw new TypeError(`No method named "${config}"`) } + data[config](relatedTarget) } else if (_config.show) { data.show(relatedTarget) @@ -562,8 +565,9 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function ( target = SelectorEngine.findOne(selector) } - const config = Data.getData(target, DATA_KEY) - ? 'toggle' : { + const config = Data.getData(target, DATA_KEY) ? + 'toggle' : + { ...Manipulator.getDataAttributes(target), ...Manipulator.getDataAttributes(this) } @@ -572,7 +576,7 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function ( event.preventDefault() } - EventHandler.one(target, Event.SHOW, (showEvent) => { + EventHandler.one(target, Event.SHOW, showEvent => { if (showEvent.defaultPrevented) { // only register focus restorer if modal will actually get shown return @@ -601,9 +605,9 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function ( if (typeof $ !== 'undefined') { const JQUERY_NO_CONFLICT = $.fn[NAME] - $.fn[NAME] = Modal._jQueryInterface - $.fn[NAME].Constructor = Modal - $.fn[NAME].noConflict = () => { + $.fn[NAME] = Modal._jQueryInterface + $.fn[NAME].Constructor = Modal + $.fn[NAME].noConflict = () => { $.fn[NAME] = JQUERY_NO_CONFLICT return Modal._jQueryInterface } diff --git a/js/src/popover.js b/js/src/popover.js index 958beaa3d0..bee07d5e29 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -18,19 +18,19 @@ import Tooltip from './tooltip' * ------------------------------------------------------------------------ */ -const NAME = 'popover' -const VERSION = '4.3.1' -const DATA_KEY = 'bs.popover' -const EVENT_KEY = `.${DATA_KEY}` -const CLASS_PREFIX = 'bs-popover' -const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') +const NAME = 'popover' +const VERSION = '4.3.1' +const DATA_KEY = 'bs.popover' +const EVENT_KEY = `.${DATA_KEY}` +const CLASS_PREFIX = 'bs-popover' +const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') const Default = { ...Tooltip.Default, - placement : 'right', - trigger : 'click', - content : '', - template : '