diff options
author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2021-08-12 15:58:01 +0300 |
---|---|---|
committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2021-08-12 15:58:25 +0300 |
commit | 7b25c697d8e2dcf983c3a71c18faeee78e5b3db5 (patch) | |
tree | a1aec9322f4ad6a1e31ce452faecac2badefc161 /assets/javascripts/bootstrap/offcanvas.js | |
parent | c702c4dc732f44116e36837baffdf2efef4330f4 (diff) |
Update to v5.0.2v5.0.2
bundle exec rake 'update[v5.0.2]'
Diffstat (limited to 'assets/javascripts/bootstrap/offcanvas.js')
-rw-r--r-- | assets/javascripts/bootstrap/offcanvas.js | 239 |
1 files changed, 144 insertions, 95 deletions
diff --git a/assets/javascripts/bootstrap/offcanvas.js b/assets/javascripts/bootstrap/offcanvas.js index 929cb17..e132db4 100644 --- a/assets/javascripts/bootstrap/offcanvas.js +++ b/assets/javascripts/bootstrap/offcanvas.js @@ -1,19 +1,18 @@ /*! - * Bootstrap offcanvas.js v5.0.1 (https://getbootstrap.com/) + * Bootstrap offcanvas.js v5.0.2 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/manipulator.js'), require('./dom/data.js'), require('./dom/event-handler.js'), require('./base-component.js')) : - typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/manipulator', './dom/data', './dom/event-handler', './base-component'], factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Offcanvas = factory(global.SelectorEngine, global.Manipulator, global.Data, global.EventHandler, global.Base)); -}(this, (function (SelectorEngine, Manipulator, Data, EventHandler, BaseComponent) { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/manipulator.js'), require('./dom/event-handler.js'), require('./base-component.js')) : + typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/manipulator', './dom/event-handler', './base-component'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Offcanvas = factory(global.SelectorEngine, global.Manipulator, global.EventHandler, global.Base)); +}(this, (function (SelectorEngine, Manipulator, EventHandler, BaseComponent) { 'use strict'; function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine); var Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator); - var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data); var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler); var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent); @@ -96,22 +95,17 @@ return typeof obj.nodeType !== 'undefined'; }; - const emulateTransitionEnd = (element, duration) => { - let called = false; - const durationPadding = 5; - const emulatedDuration = duration + durationPadding; + const getElement = obj => { + if (isElement(obj)) { + // it's a jQuery object or a node element + return obj.jquery ? obj[0] : obj; + } - function listener() { - called = true; - element.removeEventListener(TRANSITION_END, listener); + if (typeof obj === 'string' && obj.length > 0) { + return SelectorEngine__default['default'].findOne(obj); } - element.addEventListener(TRANSITION_END, listener); - setTimeout(() => { - if (!called) { - triggerTransitionEnd(element); - } - }, emulatedDuration); + return null; }; const typeCheckConfig = (componentName, config, configTypes) => { @@ -127,17 +121,11 @@ }; const isVisible = element => { - if (!element) { + if (!isElement(element) || element.getClientRects().length === 0) { return false; } - if (element.style && element.parentNode && element.parentNode.style) { - const elementStyle = getComputedStyle(element); - const parentNodeStyle = getComputedStyle(element.parentNode); - return elementStyle.display !== 'none' && parentNodeStyle.display !== 'none' && elementStyle.visibility !== 'hidden'; - } - - return false; + return getComputedStyle(element).getPropertyValue('visibility') === 'visible'; }; const isDisabled = element => { @@ -170,9 +158,18 @@ return null; }; + const DOMContentLoadedCallbacks = []; + const onDOMContentLoaded = callback => { if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', callback); + // add listener on the first call when the document is in loading state + if (!DOMContentLoadedCallbacks.length) { + document.addEventListener('DOMContentLoaded', () => { + DOMContentLoadedCallbacks.forEach(callback => callback()); + }); + } + + DOMContentLoadedCallbacks.push(callback); } else { callback(); } @@ -203,83 +200,143 @@ } }; + const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => { + if (!waitForTransition) { + execute(callback); + return; + } + + const durationPadding = 5; + const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding; + let called = false; + + const handler = ({ + target + }) => { + if (target !== transitionElement) { + return; + } + + called = true; + transitionElement.removeEventListener(TRANSITION_END, handler); + execute(callback); + }; + + transitionElement.addEventListener(TRANSITION_END, handler); + setTimeout(() => { + if (!called) { + triggerTransitionEnd(transitionElement); + } + }, emulatedDuration); + }; + /** * -------------------------------------------------------------------------- - * Bootstrap (v5.0.1): util/scrollBar.js + * Bootstrap (v5.0.2): util/scrollBar.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'; const SELECTOR_STICKY_CONTENT = '.sticky-top'; - const getWidth = () => { - // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes - const documentWidth = document.documentElement.clientWidth; - return Math.abs(window.innerWidth - documentWidth); - }; + class ScrollBarHelper { + constructor() { + this._element = document.body; + } - const hide = (width = getWidth()) => { - _disableOverFlow(); // give padding to element to balances the hidden scrollbar width + getWidth() { + // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes + const documentWidth = document.documentElement.clientWidth; + return Math.abs(window.innerWidth - documentWidth); + } + hide() { + const width = this.getWidth(); - _setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements, to keep shown fullwidth + this._disableOverFlow(); // give padding to element to balance the hidden scrollbar width - _setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width); + this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth - _setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width); - }; - const _disableOverFlow = () => { - const actualValue = document.body.style.overflow; + this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width); - if (actualValue) { - Manipulator__default['default'].setDataAttribute(document.body, 'overflow', actualValue); + this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width); } - document.body.style.overflow = 'hidden'; - }; + _disableOverFlow() { + this._saveInitialAttribute(this._element, 'overflow'); - const _setElementAttributes = (selector, styleProp, callback) => { - const scrollbarWidth = getWidth(); - SelectorEngine__default['default'].find(selector).forEach(element => { - if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) { - return; - } + this._element.style.overflow = 'hidden'; + } - const actualValue = element.style[styleProp]; - const calculatedValue = window.getComputedStyle(element)[styleProp]; - Manipulator__default['default'].setDataAttribute(element, styleProp, actualValue); - element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`; - }); - }; + _setElementAttributes(selector, styleProp, callback) { + const scrollbarWidth = this.getWidth(); - const reset = () => { - _resetElementAttributes('body', 'overflow'); + const manipulationCallBack = element => { + if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) { + return; + } - _resetElementAttributes('body', 'paddingRight'); + this._saveInitialAttribute(element, styleProp); - _resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight'); + const calculatedValue = window.getComputedStyle(element)[styleProp]; + element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`; + }; - _resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight'); - }; + 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) { + Manipulator__default['default'].setDataAttribute(element, styleProp, actualValue); + } + } - const _resetElementAttributes = (selector, styleProp) => { - SelectorEngine__default['default'].find(selector).forEach(element => { - const value = Manipulator__default['default'].getDataAttribute(element, styleProp); + _resetElementAttributes(selector, styleProp) { + const manipulationCallBack = element => { + const value = Manipulator__default['default'].getDataAttribute(element, styleProp); - if (typeof value === 'undefined') { - element.style.removeProperty(styleProp); + if (typeof value === 'undefined') { + element.style.removeProperty(styleProp); + } else { + Manipulator__default['default'].removeDataAttribute(element, styleProp); + element.style[styleProp] = value; + } + }; + + this._applyManipulationCallback(selector, manipulationCallBack); + } + + _applyManipulationCallback(selector, callBack) { + if (isElement(selector)) { + callBack(selector); } else { - Manipulator__default['default'].removeDataAttribute(element, styleProp); - element.style[styleProp] = value; + SelectorEngine__default['default'].find(selector, this._element).forEach(callBack); } - }); - }; + } + + isOverflowing() { + return this.getWidth() > 0; + } + + } /** * -------------------------------------------------------------------------- - * Bootstrap (v5.0.1): util/backdrop.js + * Bootstrap (v5.0.2): util/backdrop.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ @@ -287,14 +344,14 @@ isVisible: true, // if false, we use the backdrop helper without adding any element to the dom isAnimated: false, - rootElement: document.body, + rootElement: 'body', // give the choice to place backdrop under different elements clickCallback: null }; const DefaultType$1 = { isVisible: 'boolean', isAnimated: 'boolean', - rootElement: 'element', + rootElement: '(element|string)', clickCallback: '(function|null)' }; const NAME$1 = 'backdrop'; @@ -362,8 +419,9 @@ _getConfig(config) { config = { ...Default$1, ...(typeof config === 'object' ? config : {}) - }; - config.rootElement = config.rootElement || document.body; + }; // use getElement() with the default "body" to get a fresh Element on each instantiation + + config.rootElement = getElement(config.rootElement); typeCheckConfig(NAME$1, config, DefaultType$1); return config; } @@ -388,27 +446,20 @@ EventHandler__default['default'].off(this._element, EVENT_MOUSEDOWN); - this._getElement().parentNode.removeChild(this._element); + this._element.remove(); this._isAppended = false; } _emulateAnimation(callback) { - if (!this._config.isAnimated) { - execute(callback); - return; - } - - const backdropTransitionDuration = getTransitionDurationFromElement(this._getElement()); - EventHandler__default['default'].one(this._getElement(), 'transitionend', () => execute(callback)); - emulateTransitionEnd(this._getElement(), backdropTransitionDuration); + executeAfterTransition(callback, this._getElement(), this._config.isAnimated); } } /** * -------------------------------------------------------------------------- - * Bootstrap (v5.0.1): offcanvas.js + * Bootstrap (v5.0.2): offcanvas.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ @@ -495,7 +546,7 @@ this._backdrop.show(); if (!this._config.scroll) { - hide(); + new ScrollBarHelper().hide(); this._enforceFocusOnElement(this._element); } @@ -548,7 +599,7 @@ this._element.style.visibility = 'hidden'; if (!this._config.scroll) { - reset(); + new ScrollBarHelper().reset(); } EventHandler__default['default'].trigger(this._element, EVENT_HIDDEN); @@ -606,7 +657,7 @@ static jQueryInterface(config) { return this.each(function () { - const data = Data__default['default'].get(this, DATA_KEY) || new Offcanvas(this, typeof config === 'object' ? config : {}); + const data = Offcanvas.getOrCreateInstance(this, config); if (typeof config !== 'string') { return; @@ -652,12 +703,10 @@ Offcanvas.getInstance(allReadyOpen).hide(); } - const data = Data__default['default'].get(target, DATA_KEY) || new Offcanvas(target); + const data = Offcanvas.getOrCreateInstance(target); data.toggle(this); }); - EventHandler__default['default'].on(window, EVENT_LOAD_DATA_API, () => { - SelectorEngine__default['default'].find(OPEN_SELECTOR).forEach(el => (Data__default['default'].get(el, DATA_KEY) || new Offcanvas(el)).show()); - }); + EventHandler__default['default'].on(window, EVENT_LOAD_DATA_API, () => SelectorEngine__default['default'].find(OPEN_SELECTOR).forEach(el => Offcanvas.getOrCreateInstance(el).show())); /** * ------------------------------------------------------------------------ * jQuery |