Skip to content

Commit

Permalink
Use backdrop.js to offcanvas
Browse files Browse the repository at this point in the history
  • Loading branch information
@GeoSot
GeoSot committed Apr 14, 2021
1 parent f61a021 commit 0849ccc
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 46 deletions.
60 changes: 33 additions & 27 deletions js/src/offcanvas.js
View file
Expand Up @@ -7,8 +7,8 @@

import {
defineJQueryPlugin,
emulateTransitionEnd,
getElementFromSelector,
getSelectorFromElement,
getTransitionDurationFromElement,
isDisabled,
isVisible,
Expand All @@ -20,6 +20,7 @@ import EventHandler from './dom/event-handler'
import BaseComponent from './base-component'
import SelectorEngine from './dom/selector-engine'
import Manipulator from './dom/manipulator'
import Backdrop from './util/backdrop'

/**
* ------------------------------------------------------------------------
Expand All @@ -46,11 +47,8 @@ const DefaultType = {
scroll: 'boolean'
}

const CLASS_NAME_BACKDROP_BODY = 'offcanvas-backdrop'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_TOGGLING = 'offcanvas-toggling'
const OPEN_SELECTOR = '.offcanvas.show'
const ACTIVE_SELECTOR = `${OPEN_SELECTOR}, .${CLASS_NAME_TOGGLING}`

const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
Expand All @@ -59,6 +57,7 @@ const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`

const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="offcanvas"]'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]'
Expand All @@ -75,6 +74,7 @@ class Offcanvas extends BaseComponent {

this._config = this._getConfig(config)
this._isShown = false
this._backdrop = this._initializeBackDrop()
this._addEventListeners()
}

Expand Down Expand Up @@ -108,27 +108,25 @@ class Offcanvas extends BaseComponent {
this._isShown = true
this._element.style.visibility = 'visible'

if (this._config.backdrop) {
document.body.classList.add(CLASS_NAME_BACKDROP_BODY)
}
this._backdrop.show()

if (!this._config.scroll) {
scrollBarHide()
}

this._element.classList.add(CLASS_NAME_TOGGLING)
this._element.removeAttribute('aria-hidden')
this._element.setAttribute('aria-modal', true)
this._element.setAttribute('role', 'dialog')
this._element.classList.add(CLASS_NAME_SHOW)

const completeCallBack = () => {
this._element.classList.remove(CLASS_NAME_TOGGLING)
EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget })
this._enforceFocusOnElement(this._element)
}

setTimeout(completeCallBack, getTransitionDurationFromElement(this._element))
const transitionDuration = getTransitionDurationFromElement(this._element)
EventHandler.one(this._element, 'transitionend', completeCallBack)
emulateTransitionEnd(this._element, transitionDuration)
}

hide() {
Expand All @@ -142,31 +140,37 @@ class Offcanvas extends BaseComponent {
return
}

this._element.classList.add(CLASS_NAME_TOGGLING)
EventHandler.off(document, EVENT_FOCUSIN)
this._element.blur()
this._isShown = false
this._element.classList.remove(CLASS_NAME_SHOW)
this._backdrop.hide()

const completeCallback = () => {
this._element.setAttribute('aria-hidden', true)
this._element.removeAttribute('aria-modal')
this._element.removeAttribute('role')
this._element.style.visibility = 'hidden'

if (this._config.backdrop) {
document.body.classList.remove(CLASS_NAME_BACKDROP_BODY)
}

if (!this._config.scroll) {
scrollBarReset()
}

EventHandler.trigger(this._element, EVENT_HIDDEN)
this._element.classList.remove(CLASS_NAME_TOGGLING)
}

setTimeout(completeCallback, getTransitionDurationFromElement(this._element))
const transitionDuration = getTransitionDurationFromElement(this._element)
EventHandler.one(this._element, 'transitionend', completeCallback)
emulateTransitionEnd(this._element, transitionDuration)
}

dispose() {
this._backdrop.dispose()
super.dispose()
EventHandler.off(document, EVENT_FOCUSIN)

this._config = null
this._backdrop = null
}

// Private
Expand All @@ -181,6 +185,15 @@ class Offcanvas extends BaseComponent {
return config
}

_initializeBackDrop() {
return new Backdrop({
isVisible: this._config.backdrop,
isAnimated: true,
rootElement: this._element.parentNode,
clickCallback: () => this.hide()
})
}

_enforceFocusOnElement(element) {
EventHandler.off(document, EVENT_FOCUSIN) // guard against infinite focus loop
EventHandler.on(document, EVENT_FOCUSIN, event => {
Expand All @@ -196,18 +209,11 @@ class Offcanvas extends BaseComponent {
_addEventListeners() {
EventHandler.on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, () => this.hide())

EventHandler.on(document, 'keydown', event => {
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
if (this._config.keyboard && event.key === ESCAPE_KEY) {
this.hide()
}
})

EventHandler.on(document, EVENT_CLICK_DATA_API, event => {
const target = SelectorEngine.findOne(getSelectorFromElement(event.target))
if (!this._element.contains(event.target) && target !== this._element) {
this.hide()
}
})
}

// Static
Expand Down Expand Up @@ -254,9 +260,9 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
})

// avoid conflict when clicking a toggler of an offcanvas, while another is open
const allReadyOpen = SelectorEngine.findOne(ACTIVE_SELECTOR)
const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
if (allReadyOpen && allReadyOpen !== target) {
return
Offcanvas.getInstance(allReadyOpen).hide()
}

const data = Data.get(target, DATA_KEY) || new Offcanvas(target)
Expand Down
14 changes: 12 additions & 2 deletions js/src/util/backdrop.js
View file
Expand Up @@ -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)
Expand Down Expand Up @@ -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
}

Expand All @@ -104,6 +112,8 @@ class Backdrop {
return
}

EventHandler.off(this._element, EVENT_MOUSEDOWN)

this._getElement().parentNode.removeChild(this._element)
this._isAppended = false
}
Expand Down
6 changes: 3 additions & 3 deletions js/tests/unit/offcanvas.spec.js
View file
Expand Up @@ -72,7 +72,7 @@ describe('Offcanvas', () => {

spyOn(offCanvas, 'hide')

document.dispatchEvent(keyDownEsc)
offCanvasEl.dispatchEvent(keyDownEsc)

expect(offCanvas.hide).toHaveBeenCalled()
})
Expand Down Expand Up @@ -386,7 +386,7 @@ describe('Offcanvas', () => {
expect(Offcanvas.prototype.toggle).not.toHaveBeenCalled()
})

it('should not call toggle if another offcanvas is open', done => {
it('should call hide first, if another offcanvas is open', done => {
fixtureEl.innerHTML = [
'<button id="btn2" data-bs-toggle="offcanvas" data-bs-target="#offcanvas2" ></button>',
'<div id="offcanvas1" class="offcanvas"></div>',
Expand All @@ -402,7 +402,7 @@ describe('Offcanvas', () => {
trigger2.click()
})
offcanvasEl1.addEventListener('hidden.bs.offcanvas', () => {
expect(Offcanvas.getInstance(offcanvasEl2)).toEqual(null)
expect(Offcanvas.getInstance(offcanvasEl2)).not.toBeNull()
done()
})
offcanvas1.show()
Expand Down
25 changes: 25 additions & 0 deletions js/tests/unit/util/backdrop.spec.js
View file
Expand Up @@ -158,6 +158,31 @@ describe('Backdrop', () => {
})
})

describe('click callback', () => {
it('it should execute callback on click', done => {
const spy = jasmine.createSpy('spy')

const instance = new Backdrop({
isVisible: true,
isAnimated: false,
clickCallback: () => spy()
})
const endTest = () => {
setTimeout(() => {
expect(spy).toHaveBeenCalled()
done()
}, 10)
}

instance.show(() => {
const clickEvent = document.createEvent('MouseEvents')
clickEvent.initEvent('mousedown', true, true)
document.querySelector(CLASS_BACKDROP).dispatchEvent(clickEvent)
endTest()
})
})
})

describe('animation callbacks', () => {
it('if it is animated, should show and hide backdrop after counting transition duration', done => {
const instance = new Backdrop({
Expand Down
11 changes: 0 additions & 11 deletions scss/_offcanvas.scss
View file
Expand Up @@ -75,14 +75,3 @@
.offcanvas.show {
transform: none;
}

.offcanvas-backdrop::before {
position: fixed;
top: 0;
left: 0;
z-index: $zindex-offcanvas - 1;
width: 100vw;
height: 100vh;
content: "";
background-color: $offcanvas-body-backdrop-color;
}
5 changes: 2 additions & 3 deletions scss/_variables.scss
View file
Expand Up @@ -902,8 +902,8 @@ $form-validation-states: (
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-offcanvas: 1040 !default;
$zindex-modal-backdrop: 1050 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-offcanvas: 1050 !default;
$zindex-modal: 1060 !default;
$zindex-popover: 1070 !default;
$zindex-tooltip: 1080 !default;
Expand Down Expand Up @@ -1447,7 +1447,6 @@ $offcanvas-border-width: $modal-content-border-width !default;
$offcanvas-title-line-height: $modal-title-line-height !default;
$offcanvas-bg-color: $modal-content-bg !default;
$offcanvas-color: $modal-content-color !default;
$offcanvas-body-backdrop-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
// scss-docs-end offcanvas-variables

Expand Down

0 comments on commit 0849ccc

Please sign in to comment.