diff options
author | Johann-S <johann.servoire@gmail.com> | 2019-10-28 17:28:11 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-11-02 11:02:07 +0300 |
commit | dd96b832f787e91db03ebc687a934deea335bed5 (patch) | |
tree | d559dd6c2bee13b13db7efbcea9692d7f1c1ad3f /js/src | |
parent | 29f585365fe71a74958d56beac98ab4b7e27a6b1 (diff) |
backport #29516: added animation when modal backdrop is static
Diffstat (limited to 'js/src')
-rw-r--r-- | js/src/modal.js | 37 |
1 files changed, 29 insertions, 8 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index d6abfdec87..24b0425713 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -38,6 +38,7 @@ const DefaultType = { const Event = { HIDE : `hide${EVENT_KEY}`, + HIDE_PREVENTED : `hidePrevented${EVENT_KEY}`, HIDDEN : `hidden${EVENT_KEY}`, SHOW : `show${EVENT_KEY}`, SHOWN : `shown${EVENT_KEY}`, @@ -56,7 +57,8 @@ const ClassName = { BACKDROP : 'modal-backdrop', OPEN : 'modal-open', FADE : 'fade', - SHOW : 'show' + SHOW : 'show', + STATIC : 'modal-static' } const Selector = { @@ -234,6 +236,29 @@ class Modal { return config } + _triggerBackdropTransition() { + if (this._config.backdrop === 'static') { + const hideEventPrevented = $.Event(Event.HIDE_PREVENTED) + + $(this._element).trigger(hideEventPrevented) + if (hideEventPrevented.defaultPrevented) { + return + } + + this._element.classList.add(ClassName.STATIC) + + const modalTransitionDuration = Util.getTransitionDurationFromElement(this._element) + + $(this._element).one(Util.TRANSITION_END, () => { + this._element.classList.remove(ClassName.STATIC) + }) + .emulateTransitionEnd(modalTransitionDuration) + this._element.focus() + } else { + this.hide() + } + } + _showElement(relatedTarget) { const transition = $(this._element).hasClass(ClassName.FADE) const modalBody = this._dialog ? this._dialog.querySelector(Selector.MODAL_BODY) : null @@ -303,8 +328,7 @@ class Modal { if (this._isShown && this._config.keyboard) { $(this._element).on(Event.KEYDOWN_DISMISS, (event) => { if (event.which === ESCAPE_KEYCODE) { - event.preventDefault() - this.hide() + this._triggerBackdropTransition() } }) } else if (!this._isShown) { @@ -362,11 +386,8 @@ class Modal { if (event.target !== event.currentTarget) { return } - if (this._config.backdrop === 'static') { - this._element.focus() - } else { - this.hide() - } + + this._triggerBackdropTransition() }) if (animate) { |