diff options
author | Mark Otto <markdotto@gmail.com> | 2021-06-25 23:41:15 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2021-06-25 23:41:15 +0300 |
commit | 45d26de72817b295c5f94c8426354fd5b7d0a1f9 (patch) | |
tree | 78ef421227b893a2f8c7ea0b45693ccae58e68e4 /js | |
parent | 088ef6298203255d28c3eb058709cbb501d07c2c (diff) |
Variablize backdrop for modal and offcanvas
Diffstat (limited to 'js')
-rw-r--r-- | js/src/offcanvas.js | 2 | ||||
-rw-r--r-- | js/src/util/backdrop.js | 5 | ||||
-rw-r--r-- | js/tests/unit/util/backdrop.spec.js | 84 |
3 files changed, 55 insertions, 36 deletions
diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js index 88eb8c997a..016260437c 100644 --- a/js/src/offcanvas.js +++ b/js/src/offcanvas.js @@ -45,6 +45,7 @@ const DefaultType = { } const CLASS_NAME_SHOW = 'show' +const CLASS_NAME_BACKDROP = 'offcanvas-backdrop' const OPEN_SELECTOR = '.offcanvas.show' const EVENT_SHOW = `show${EVENT_KEY}` @@ -177,6 +178,7 @@ class Offcanvas extends BaseComponent { _initializeBackDrop() { return new Backdrop({ + className: CLASS_NAME_BACKDROP, isVisible: this._config.backdrop, isAnimated: true, rootElement: this._element.parentNode, diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js index 7ba7b4c43e..fbe32445ea 100644 --- a/js/src/util/backdrop.js +++ b/js/src/util/backdrop.js @@ -9,6 +9,7 @@ import EventHandler from '../dom/event-handler' import { execute, executeAfterTransition, getElement, reflow, typeCheckConfig } from './index' const Default = { + className: 'modal-backdrop', isVisible: true, // if false, we use the backdrop helper without adding any element to the dom isAnimated: false, rootElement: 'body', // give the choice to place backdrop under different elements @@ -16,13 +17,13 @@ const Default = { } const DefaultType = { + className: 'string', isVisible: 'boolean', isAnimated: 'boolean', rootElement: '(element|string)', clickCallback: '(function|null)' } const NAME = 'backdrop' -const CLASS_NAME_BACKDROP = 'modal-backdrop' const CLASS_NAME_FADE = 'fade' const CLASS_NAME_SHOW = 'show' @@ -73,7 +74,7 @@ class Backdrop { _getElement() { if (!this._element) { const backdrop = document.createElement('div') - backdrop.className = CLASS_NAME_BACKDROP + backdrop.className = this._config.className 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 3150ba14db..59b7890717 100644 --- a/js/tests/unit/util/backdrop.spec.js +++ b/js/tests/unit/util/backdrop.spec.js @@ -230,46 +230,62 @@ describe('Backdrop', () => { }) }) }) - - describe('rootElement initialization', () => { - it('Should be appended on "document.body" by default', done => { - const instance = new Backdrop({ - isVisible: true - }) - const getElement = () => document.querySelector(CLASS_BACKDROP) - instance.show(() => { - expect(getElement().parentElement).toEqual(document.body) - done() + describe('Config', () => { + describe('rootElement initialization', () => { + it('Should be appended on "document.body" by default', done => { + const instance = new Backdrop({ + isVisible: true + }) + const getElement = () => document.querySelector(CLASS_BACKDROP) + instance.show(() => { + expect(getElement().parentElement).toEqual(document.body) + done() + }) }) - }) - it('Should find the rootElement if passed as a string', done => { - const instance = new Backdrop({ - isVisible: true, - rootElement: 'body' - }) - const getElement = () => document.querySelector(CLASS_BACKDROP) - instance.show(() => { - expect(getElement().parentElement).toEqual(document.body) - done() + it('Should find the rootElement if passed as a string', done => { + const instance = new Backdrop({ + isVisible: true, + rootElement: 'body' + }) + const getElement = () => document.querySelector(CLASS_BACKDROP) + instance.show(() => { + expect(getElement().parentElement).toEqual(document.body) + done() + }) }) - }) - it('Should appended on any element given by the proper config', done => { - fixtureEl.innerHTML = [ - '<div id="wrapper">', - '</div>' - ].join('') + it('Should appended on any element given by the proper config', done => { + fixtureEl.innerHTML = [ + '<div id="wrapper">', + '</div>' + ].join('') - const wrapper = fixtureEl.querySelector('#wrapper') - const instance = new Backdrop({ - isVisible: true, - rootElement: wrapper + const wrapper = fixtureEl.querySelector('#wrapper') + const instance = new Backdrop({ + isVisible: true, + rootElement: wrapper + }) + const getElement = () => document.querySelector(CLASS_BACKDROP) + instance.show(() => { + expect(getElement().parentElement).toEqual(wrapper) + done() + }) }) - const getElement = () => document.querySelector(CLASS_BACKDROP) - instance.show(() => { - expect(getElement().parentElement).toEqual(wrapper) - done() + }) + + describe('ClassName', () => { + it('Should be able to have different classNames than default', done => { + const instance = new Backdrop({ + isVisible: true, + className: 'foo' + }) + const getElement = () => document.querySelector('.foo') + instance.show(() => { + expect(getElement()).toEqual(instance._getElement()) + instance.dispose() + done() + }) }) }) }) |