diff options
author | XhmikosR <xhmikosr@gmail.com> | 2021-10-13 15:19:28 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-13 15:19:28 +0300 |
commit | e8f702666f285a3e69866ed1f8d29fa6eaaaeabb (patch) | |
tree | 944b2dc894f49f8278d41d096e4388e9ac83157b /js/src/util | |
parent | db44392bda22f3d5319d2880c992f76d27d2a60c (diff) |
JS: minor refactoring (#35183)
* add missing comments
* shorten block comments
* reorder constants
* reorder public/private methods
* sort exports alphabetically in util/index.js
* fix a couple of typos
Diffstat (limited to 'js/src/util')
-rw-r--r-- | js/src/util/backdrop.js | 40 | ||||
-rw-r--r-- | js/src/util/focustrap.js | 28 | ||||
-rw-r--r-- | js/src/util/index.js | 36 | ||||
-rw-r--r-- | js/src/util/scrollbar.js | 32 | ||||
-rw-r--r-- | js/src/util/swipe.js | 18 |
5 files changed, 98 insertions, 56 deletions
diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js index 04c763518b..fb1b2776bc 100644 --- a/js/src/util/backdrop.js +++ b/js/src/util/backdrop.js @@ -8,6 +8,15 @@ import EventHandler from '../dom/event-handler' import { execute, executeAfterTransition, getElement, reflow, typeCheckConfig } from './index' +/** + * Constants + */ + +const NAME = 'backdrop' +const CLASS_NAME_FADE = 'fade' +const CLASS_NAME_SHOW = 'show' +const EVENT_MOUSEDOWN = `mousedown.bs.${NAME}` + const Default = { className: 'modal-backdrop', isVisible: true, // if false, we use the backdrop helper without adding any element to the dom @@ -23,11 +32,10 @@ const DefaultType = { rootElement: '(element|string)', clickCallback: '(function|null)' } -const NAME = 'backdrop' -const CLASS_NAME_FADE = 'fade' -const CLASS_NAME_SHOW = 'show' -const EVENT_MOUSEDOWN = `mousedown.bs.${NAME}` +/** + * Class definition + */ class Backdrop { constructor(config) { @@ -36,6 +44,7 @@ class Backdrop { this._element = null } + // Public show(callback) { if (!this._config.isVisible) { execute(callback) @@ -69,8 +78,18 @@ class Backdrop { }) } - // Private + dispose() { + if (!this._isAppended) { + return + } + EventHandler.off(this._element, EVENT_MOUSEDOWN) + + this._element.remove() + this._isAppended = false + } + + // Private _getElement() { if (!this._element) { const backdrop = document.createElement('div') @@ -111,17 +130,6 @@ class Backdrop { this._isAppended = true } - dispose() { - if (!this._isAppended) { - return - } - - EventHandler.off(this._element, EVENT_MOUSEDOWN) - - this._element.remove() - this._isAppended = false - } - _emulateAnimation(callback) { executeAfterTransition(callback, this._getElement(), this._config.isAnimated) } diff --git a/js/src/util/focustrap.js b/js/src/util/focustrap.js index 44d5f47ebf..a1975f4899 100644 --- a/js/src/util/focustrap.js +++ b/js/src/util/focustrap.js @@ -9,15 +9,9 @@ import EventHandler from '../dom/event-handler' import SelectorEngine from '../dom/selector-engine' import { typeCheckConfig } from './index' -const Default = { - trapElement: null, // The element to trap focus inside of - autofocus: true -} - -const DefaultType = { - trapElement: 'element', - autofocus: 'boolean' -} +/** + * Constants + */ const NAME = 'focustrap' const DATA_KEY = 'bs.focustrap' @@ -29,6 +23,20 @@ const TAB_KEY = 'Tab' const TAB_NAV_FORWARD = 'forward' const TAB_NAV_BACKWARD = 'backward' +const Default = { + trapElement: null, // The element to trap focus inside of + autofocus: true +} + +const DefaultType = { + trapElement: 'element', + autofocus: 'boolean' +} + +/** + * Class definition + */ + class FocusTrap { constructor(config) { this._config = this._getConfig(config) @@ -36,6 +44,7 @@ class FocusTrap { this._lastTabNavDirection = null } + // Public activate() { const { trapElement, autofocus } = this._config @@ -64,7 +73,6 @@ class FocusTrap { } // Private - _handleFocusin(event) { const { target } = event const { trapElement } = this._config diff --git a/js/src/util/index.js b/js/src/util/index.js index 93f7223b12..0ba6ce6f8c 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -19,9 +19,7 @@ const toType = obj => { } /** - * -------------------------------------------------------------------------- - * Public Util Api - * -------------------------------------------------------------------------- + * Public Util API */ const getUID = prefix => { @@ -113,7 +111,8 @@ const isElement = obj => { } const getElement = obj => { - if (isElement(obj)) { // it's a jQuery object or a node element + // it's a jQuery object or a node element + if (isElement(obj)) { return obj.jquery ? obj[0] : obj } @@ -196,8 +195,7 @@ const noop = () => {} * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation */ const reflow = element => { - // eslint-disable-next-line no-unused-expressions - element.offsetHeight + element.offsetHeight // eslint-disable-line no-unused-expressions } const getjQuery = () => { @@ -312,24 +310,24 @@ const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed } export { + defineJQueryPlugin, + execute, + executeAfterTransition, + findShadowRoot, getElement, - getUID, - getSelectorFromElement, getElementFromSelector, + getjQuery, + getNextActiveElement, + getSelectorFromElement, getTransitionDurationFromElement, - triggerTransitionEnd, + getUID, + isDisabled, isElement, - typeCheckConfig, + isRTL, isVisible, - isDisabled, - findShadowRoot, noop, - getNextActiveElement, - reflow, - getjQuery, onDOMContentLoaded, - isRTL, - defineJQueryPlugin, - execute, - executeAfterTransition + reflow, + triggerTransitionEnd, + typeCheckConfig } diff --git a/js/src/util/scrollbar.js b/js/src/util/scrollbar.js index 16e14d1f3c..55b7244ab3 100644 --- a/js/src/util/scrollbar.js +++ b/js/src/util/scrollbar.js @@ -9,14 +9,23 @@ import SelectorEngine from '../dom/selector-engine' import Manipulator from '../dom/manipulator' import { isElement } from './index' +/** + * Constants + */ + const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top' const SELECTOR_STICKY_CONTENT = '.sticky-top' +/** + * Class definition + */ + class ScrollBarHelper { constructor() { this._element = document.body } + // Public getWidth() { // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes const documentWidth = document.documentElement.clientWidth @@ -33,6 +42,18 @@ class ScrollBarHelper { this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width) } + reset() { + this._resetElementAttributes(this._element, 'overflow') + this._resetElementAttributes(this._element, 'paddingRight') + this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight') + this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight') + } + + isOverflowing() { + return this.getWidth() > 0 + } + + // Private _disableOverFlow() { this._saveInitialAttribute(this._element, 'overflow') this._element.style.overflow = 'hidden' @@ -53,13 +74,6 @@ class ScrollBarHelper { this._applyManipulationCallback(selector, manipulationCallBack) } - reset() { - this._resetElementAttributes(this._element, 'overflow') - this._resetElementAttributes(this._element, 'paddingRight') - this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight') - this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight') - } - _saveInitialAttribute(element, styleProp) { const actualValue = element.style[styleProp] if (actualValue) { @@ -90,10 +104,6 @@ class ScrollBarHelper { } } } - - isOverflowing() { - return this.getWidth() > 0 - } } export default ScrollBarHelper diff --git a/js/src/util/swipe.js b/js/src/util/swipe.js index a78f598d9d..87a5f7f5ae 100644 --- a/js/src/util/swipe.js +++ b/js/src/util/swipe.js @@ -1,6 +1,17 @@ +/** + * -------------------------------------------------------------------------- + * Bootstrap (v5.1.3): util/swipe.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + * -------------------------------------------------------------------------- + */ + import EventHandler from '../dom/event-handler' import { execute, typeCheckConfig } from './index' +/** + * Constants + */ + const NAME = 'swipe' const EVENT_KEY = '.bs.swipe' const EVENT_TOUCHSTART = `touchstart${EVENT_KEY}` @@ -25,6 +36,10 @@ const DefaultType = { endCallback: '(function|null)' } +/** + * Class definition + */ + class Swipe { constructor(element, config) { this._element = element @@ -39,10 +54,12 @@ class Swipe { this._initEvents() } + // Public dispose() { EventHandler.off(this._element, EVENT_KEY) } + // Private _start(event) { if (!this._supportPointerEvents) { this._deltaX = event.touches[0].clientX @@ -114,6 +131,7 @@ class Swipe { return this._supportPointerEvents && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH) } + // Static static isSupported() { return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 } |