From 93f1107ef5434467caaf267ff7a293e6a840dfff Mon Sep 17 00:00:00 2001 From: Romain Date: Mon, 31 May 2021 19:14:54 +0200 Subject: [PATCH] Variabilize backdrop class name (#34094) --- js/src/modal.js | 4 ++- js/src/offcanvas.js | 3 +++ js/src/util/backdrop.js | 3 +-- js/tests/unit/util/backdrop.spec.js | 41 ++++++++++++++++++++--------- scss/_modal.scss | 4 +++ 5 files changed, 39 insertions(+), 16 deletions(-) diff --git a/js/src/modal.js b/js/src/modal.js index 8dac75265..ba7454640 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -61,6 +61,7 @@ const CLASS_NAME_OPEN = 'modal-open' const CLASS_NAME_FADE = 'fade' const CLASS_NAME_SHOW = 'show' const CLASS_NAME_STATIC = 'modal-static' +const CLASS_NAME_BACKDROP = 'modal-backdrop' const SELECTOR_DIALOG = '.modal-dialog' const SELECTOR_MODAL_BODY = '.modal-body' @@ -202,7 +203,8 @@ class Modal extends BaseComponent { _initializeBackDrop() { return new Backdrop({ isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value - isAnimated: this._isAnimated() + isAnimated: this._isAnimated(), + backdropClassName: CLASS_NAME_BACKDROP }) } diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js index 88eb8c997..bac355249 100644 --- a/js/src/offcanvas.js +++ b/js/src/offcanvas.js @@ -45,6 +45,8 @@ const DefaultType = { } const CLASS_NAME_SHOW = 'show' +const CLASS_NAME_BACKDROP = 'offcanvas-backdrop' + const OPEN_SELECTOR = '.offcanvas.show' const EVENT_SHOW = `show${EVENT_KEY}` @@ -180,6 +182,7 @@ class Offcanvas extends BaseComponent { isVisible: this._config.backdrop, isAnimated: true, rootElement: this._element.parentNode, + backdropClassName: CLASS_NAME_BACKDROP, clickCallback: () => this.hide() }) } diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js index 7ba7b4c43..63c539f5a 100644 --- a/js/src/util/backdrop.js +++ b/js/src/util/backdrop.js @@ -22,7 +22,6 @@ const DefaultType = { clickCallback: '(function|null)' } const NAME = 'backdrop' -const CLASS_NAME_BACKDROP = 'modal-backdrop' const CLASS_NAME_FADE = 'fade' const CLASS_NAME_SHOW = 'show' @@ -73,7 +72,7 @@ class Backdrop { _getElement() { if (!this._element) { const backdrop = document.createElement('div') - backdrop.className = CLASS_NAME_BACKDROP + backdrop.className = this._config.backdropClassName if (this._config.isAnimated) { backdrop.classList.add(CLASS_NAME_FADE) } diff --git a/js/tests/unit/util/backdrop.spec.js b/js/tests/unit/util/backdrop.spec.js index 3150ba14d..e11dad42d 100644 --- a/js/tests/unit/util/backdrop.spec.js +++ b/js/tests/unit/util/backdrop.spec.js @@ -3,6 +3,7 @@ import { getTransitionDurationFromElement } from '../../../src/util/index' import { clearFixture, getFixture } from '../../helpers/fixture' const CLASS_BACKDROP = '.modal-backdrop' +const CLASS_NAME_BACKDROP = 'modal-backdrop' const CLASS_NAME_FADE = 'fade' const CLASS_NAME_SHOW = 'show' @@ -26,7 +27,8 @@ describe('Backdrop', () => { it('if it is "shown", should append the backdrop html once, on show, and contain "show" class', done => { const instance = new Backdrop({ isVisible: true, - isAnimated: false + isAnimated: false, + backdropClassName: CLASS_NAME_BACKDROP }) const getElements = () => document.querySelectorAll(CLASS_BACKDROP) @@ -45,7 +47,8 @@ describe('Backdrop', () => { it('if it is not "shown", should not append the backdrop html', done => { const instance = new Backdrop({ isVisible: false, - isAnimated: true + isAnimated: true, + backdropClassName: CLASS_NAME_BACKDROP }) const getElements = () => document.querySelectorAll(CLASS_BACKDROP) @@ -59,7 +62,8 @@ describe('Backdrop', () => { it('if it is "shown" and "animated", should append the backdrop html once, and contain "fade" class', done => { const instance = new Backdrop({ isVisible: true, - isAnimated: true + isAnimated: true, + backdropClassName: CLASS_NAME_BACKDROP }) const getElements = () => document.querySelectorAll(CLASS_BACKDROP) @@ -79,7 +83,8 @@ describe('Backdrop', () => { it('should remove the backdrop html', done => { const instance = new Backdrop({ isVisible: true, - isAnimated: true + isAnimated: true, + backdropClassName: CLASS_NAME_BACKDROP }) const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP) @@ -97,7 +102,8 @@ describe('Backdrop', () => { it('should remove "show" class', done => { const instance = new Backdrop({ isVisible: true, - isAnimated: true + isAnimated: true, + backdropClassName: CLASS_NAME_BACKDROP }) const elem = instance._getElement() @@ -111,7 +117,8 @@ describe('Backdrop', () => { it('if it is not "shown", should not try to remove Node on remove method', done => { const instance = new Backdrop({ isVisible: false, - isAnimated: true + isAnimated: true, + backdropClassName: CLASS_NAME_BACKDROP }) const getElements = () => document.querySelectorAll(CLASS_BACKDROP) const spy = spyOn(instance, 'dispose').and.callThrough() @@ -135,7 +142,8 @@ describe('Backdrop', () => { const instance = new Backdrop({ isVisible: true, isAnimated: true, - rootElement: wrapper + rootElement: wrapper, + backdropClassName: CLASS_NAME_BACKDROP }) const getElements = () => document.querySelectorAll(CLASS_BACKDROP) @@ -157,6 +165,7 @@ describe('Backdrop', () => { const instance = new Backdrop({ isVisible: true, isAnimated: false, + backdropClassName: CLASS_NAME_BACKDROP, clickCallback: () => spy() }) const endTest = () => { @@ -179,7 +188,8 @@ describe('Backdrop', () => { it('if it is animated, should show and hide backdrop after counting transition duration', done => { const instance = new Backdrop({ isVisible: true, - isAnimated: true + isAnimated: true, + backdropClassName: CLASS_NAME_BACKDROP }) const spy2 = jasmine.createSpy('spy2') @@ -202,7 +212,8 @@ describe('Backdrop', () => { const spy = jasmine.createSpy('spy', getTransitionDurationFromElement) const instance = new Backdrop({ isVisible: true, - isAnimated: false + isAnimated: false, + backdropClassName: CLASS_NAME_BACKDROP }) const spy2 = jasmine.createSpy('spy2') @@ -219,7 +230,8 @@ describe('Backdrop', () => { it('if it is not "shown", should not call delay callbacks', done => { const instance = new Backdrop({ isVisible: false, - isAnimated: true + isAnimated: true, + backdropClassName: CLASS_NAME_BACKDROP }) const spy = jasmine.createSpy('spy', getTransitionDurationFromElement) @@ -234,7 +246,8 @@ describe('Backdrop', () => { describe('rootElement initialization', () => { it('Should be appended on "document.body" by default', done => { const instance = new Backdrop({ - isVisible: true + isVisible: true, + backdropClassName: CLASS_NAME_BACKDROP }) const getElement = () => document.querySelector(CLASS_BACKDROP) instance.show(() => { @@ -246,7 +259,8 @@ describe('Backdrop', () => { it('Should find the rootElement if passed as a string', done => { const instance = new Backdrop({ isVisible: true, - rootElement: 'body' + rootElement: 'body', + backdropClassName: CLASS_NAME_BACKDROP }) const getElement = () => document.querySelector(CLASS_BACKDROP) instance.show(() => { @@ -264,7 +278,8 @@ describe('Backdrop', () => { const wrapper = fixtureEl.querySelector('#wrapper') const instance = new Backdrop({ isVisible: true, - rootElement: wrapper + rootElement: wrapper, + backdropClassName: CLASS_NAME_BACKDROP }) const getElement = () => document.querySelector(CLASS_BACKDROP) instance.show(() => { diff --git a/scss/_modal.scss b/scss/_modal.scss index 77473085c..c47258cfc 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -98,6 +98,10 @@ &.show { opacity: $modal-backdrop-opacity; } } +.offcanvas-backdrop { + @extend .modal-backdrop; +} + // Modal header // Top section of the modal w/ title and dismiss .modal-header {