From a9d7a62658c5d93dcba5ed5fc47d84f3ddd3e0a3 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Mon, 19 Apr 2021 08:20:25 +0300 Subject: Use the backdrop util in offcanvas, enforcing consistency (#33545) * respect /share modal's backdrop functionality, keeping consistency * listen click events over backdrop (only) and trigger `hide()` without add/remove event tricks * achieve to hide foreign open offcanvas instances without glitches `if (allReadyOpen && allReadyOpen !== target)`, in case another is going to be open, when user clicks on trigger button --- js/src/util/backdrop.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'js/src/util') diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js index ab14c23fe..a9d28bd10 100644 --- a/js/src/util/backdrop.js +++ b/js/src/util/backdrop.js @@ -11,19 +11,23 @@ import { emulateTransitionEnd, execute, getTransitionDurationFromElement, reflow const Default = { isVisible: true, // if false, we use the backdrop helper without adding any element to the dom isAnimated: false, - rootElement: document.body // give the choice to place backdrop under different elements + rootElement: document.body, // give the choice to place backdrop under different elements + clickCallback: null } const DefaultType = { isVisible: 'boolean', isAnimated: 'boolean', - rootElement: 'element' + rootElement: 'element', + clickCallback: '(function|null)' } const NAME = 'backdrop' const CLASS_NAME_BACKDROP = 'modal-backdrop' const CLASS_NAME_FADE = 'fade' const CLASS_NAME_SHOW = 'show' +const EVENT_MOUSEDOWN = `mousedown.bs.${NAME}` + class Backdrop { constructor(config) { this._config = this._getConfig(config) @@ -96,6 +100,10 @@ class Backdrop { this._config.rootElement.appendChild(this._getElement()) + EventHandler.on(this._getElement(), EVENT_MOUSEDOWN, () => { + execute(this._config.clickCallback) + }) + this._isAppended = true } @@ -104,6 +112,8 @@ class Backdrop { return } + EventHandler.off(this._element, EVENT_MOUSEDOWN) + this._getElement().parentNode.removeChild(this._element) this._isAppended = false } -- cgit v1.2.3