|
| 1 | +/** |
| 2 | + * -------------------------------------------------------------------------- |
| 3 | + * Bootstrap (v5.0.0-beta2): offcanvas.js |
| 4 | + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) |
| 5 | + * -------------------------------------------------------------------------- |
| 6 | + */ |
| 7 | + |
| 8 | +import { |
| 9 | + defineJQueryPlugin, |
| 10 | + getElementFromSelector, |
| 11 | + getSelectorFromElement, |
| 12 | + getTransitionDurationFromElement, |
| 13 | + isVisible |
| 14 | +} from './util/index' |
| 15 | +import { hide as scrollBarHide, reset as scrollBarReset } from './util/scrollbar' |
| 16 | +import Data from './dom/data' |
| 17 | +import EventHandler from './dom/event-handler' |
| 18 | +import BaseComponent from './base-component' |
| 19 | +import SelectorEngine from './dom/selector-engine' |
| 20 | + |
| 21 | +/** |
| 22 | + * ------------------------------------------------------------------------ |
| 23 | + * Constants |
| 24 | + * ------------------------------------------------------------------------ |
| 25 | + */ |
| 26 | + |
| 27 | +const NAME = 'offcanvas' |
| 28 | +const DATA_KEY = 'bs.offcanvas' |
| 29 | +const EVENT_KEY = `.${DATA_KEY}` |
| 30 | +const DATA_API_KEY = '.data-api' |
| 31 | +const ESCAPE_KEY = 'Escape' |
| 32 | +const DATA_BODY_ACTIONS = 'data-bs-body' |
| 33 | + |
| 34 | +const CLASS_NAME_BACKDROP_BODY = 'offcanvas-backdrop' |
| 35 | +const CLASS_NAME_DISABLED = 'disabled' |
| 36 | +const CLASS_NAME_SHOW = 'show' |
| 37 | +const CLASS_NAME_TOGGLING = 'offcanvas-toggling' |
| 38 | +const ACTIVE_SELECTOR = `.offcanvas.show, .${CLASS_NAME_TOGGLING}` |
| 39 | + |
| 40 | +const EVENT_SHOW = `show${EVENT_KEY}` |
| 41 | +const EVENT_SHOWN = `shown${EVENT_KEY}` |
| 42 | +const EVENT_HIDE = `hide${EVENT_KEY}` |
| 43 | +const EVENT_HIDDEN = `hidden${EVENT_KEY}` |
| 44 | +const EVENT_FOCUSIN = `focusin${EVENT_KEY}` |
| 45 | +const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` |
| 46 | +const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}` |
| 47 | + |
| 48 | +const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="offcanvas"]' |
| 49 | +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]' |
| 50 | + |
| 51 | +/** |
| 52 | + * ------------------------------------------------------------------------ |
| 53 | + * Class Definition |
| 54 | + * ------------------------------------------------------------------------ |
| 55 | + */ |
| 56 | + |
| 57 | +class OffCanvas extends BaseComponent { |
| 58 | + constructor(element) { |
| 59 | + super(element) |
| 60 | + |
| 61 | + this._isShown = element.classList.contains(CLASS_NAME_SHOW) |
| 62 | + this._bodyOptions = element.getAttribute(DATA_BODY_ACTIONS) || '' |
| 63 | + this._addEventListeners() |
| 64 | + } |
| 65 | + |
| 66 | + // Public |
| 67 | + |
| 68 | + toggle(relatedTarget) { |
| 69 | + return this._isShown ? this.hide() : this.show(relatedTarget) |
| 70 | + } |
| 71 | + |
| 72 | + show(relatedTarget) { |
| 73 | + if (this._isShown) { |
| 74 | + return |
| 75 | + } |
| 76 | + |
| 77 | + const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, { relatedTarget }) |
| 78 | + |
| 79 | + if (showEvent.defaultPrevented) { |
| 80 | + return |
| 81 | + } |
| 82 | + |
| 83 | + this._isShown = true |
| 84 | + this._element.style.visibility = 'visible' |
| 85 | + |
| 86 | + if (this._bodyOptionsHas('backdrop') || !this._bodyOptions.length) { |
| 87 | + document.body.classList.add(CLASS_NAME_BACKDROP_BODY) |
| 88 | + } |
| 89 | + |
| 90 | + if (!this._bodyOptionsHas('scroll')) { |
| 91 | + scrollBarHide() |
| 92 | + } |
| 93 | + |
| 94 | + this._element.classList.add(CLASS_NAME_TOGGLING) |
| 95 | + this._element.removeAttribute('aria-hidden') |
| 96 | + this._element.setAttribute('aria-modal', true) |
| 97 | + this._element.setAttribute('role', 'dialog') |
| 98 | + this._element.classList.add(CLASS_NAME_SHOW) |
| 99 | + |
| 100 | + const completeCallBack = () => { |
| 101 | + this._element.classList.remove(CLASS_NAME_TOGGLING) |
| 102 | + EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget }) |
| 103 | + this._enforceFocusOnElement(this._element) |
| 104 | + } |
| 105 | + |
| 106 | + setTimeout(completeCallBack, getTransitionDurationFromElement(this._element)) |
| 107 | + } |
| 108 | + |
| 109 | + hide() { |
| 110 | + if (!this._isShown) { |
| 111 | + return |
| 112 | + } |
| 113 | + |
| 114 | + const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE) |
| 115 | + |
| 116 | + if (hideEvent.defaultPrevented) { |
| 117 | + return |
| 118 | + } |
| 119 | + |
| 120 | + this._element.classList.add(CLASS_NAME_TOGGLING) |
| 121 | + EventHandler.off(document, EVENT_FOCUSIN) |
| 122 | + this._element.blur() |
| 123 | + this._isShown = false |
| 124 | + this._element.classList.remove(CLASS_NAME_SHOW) |
| 125 | + |
| 126 | + const completeCallback = () => { |
| 127 | + this._element.setAttribute('aria-hidden', true) |
| 128 | + this._element.removeAttribute('aria-modal') |
| 129 | + this._element.removeAttribute('role') |
| 130 | + this._element.style.visibility = 'hidden' |
| 131 | + |
| 132 | + if (this._bodyOptionsHas('backdrop') || !this._bodyOptions.length) { |
| 133 | + document.body.classList.remove(CLASS_NAME_BACKDROP_BODY) |
| 134 | + } |
| 135 | + |
| 136 | + if (!this._bodyOptionsHas('scroll')) { |
| 137 | + scrollBarReset() |
| 138 | + } |
| 139 | + |
| 140 | + EventHandler.trigger(this._element, EVENT_HIDDEN) |
| 141 | + this._element.classList.remove(CLASS_NAME_TOGGLING) |
| 142 | + } |
| 143 | + |
| 144 | + setTimeout(completeCallback, getTransitionDurationFromElement(this._element)) |
| 145 | + } |
| 146 | + |
| 147 | + _enforceFocusOnElement(element) { |
| 148 | + EventHandler.off(document, EVENT_FOCUSIN) // guard against infinite focus loop |
| 149 | + EventHandler.on(document, EVENT_FOCUSIN, event => { |
| 150 | + if (document !== event.target && |
| 151 | + element !== event.target && |
| 152 | + !element.contains(event.target)) { |
| 153 | + element.focus() |
| 154 | + } |
| 155 | + }) |
| 156 | + element.focus() |
| 157 | + } |
| 158 | + |
| 159 | + _bodyOptionsHas(option) { |
| 160 | + return this._bodyOptions.split(',').includes(option) |
| 161 | + } |
| 162 | + |
| 163 | + _addEventListeners() { |
| 164 | + EventHandler.on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, () => this.hide()) |
| 165 | + |
| 166 | + EventHandler.on(document, 'keydown', event => { |
| 167 | + if (event.key === ESCAPE_KEY) { |
| 168 | + this.hide() |
| 169 | + } |
| 170 | + }) |
| 171 | + |
| 172 | + EventHandler.on(document, EVENT_CLICK_DATA_API, event => { |
| 173 | + const target = SelectorEngine.findOne(getSelectorFromElement(event.target)) |
| 174 | + if (!this._element.contains(event.target) && target !== this._element) { |
| 175 | + this.hide() |
| 176 | + } |
| 177 | + }) |
| 178 | + } |
| 179 | + |
| 180 | + // Static |
| 181 | + |
| 182 | + static jQueryInterface(config) { |
| 183 | + return this.each(function () { |
| 184 | + const data = Data.get(this, DATA_KEY) || new OffCanvas(this) |
| 185 | + |
| 186 | + if (typeof config === 'string') { |
| 187 | + if (typeof data[config] === 'undefined') { |
| 188 | + throw new TypeError(`No method named "${config}"`) |
| 189 | + } |
| 190 | + |
| 191 | + data[config](this) |
| 192 | + } |
| 193 | + }) |
| 194 | + } |
| 195 | +} |
| 196 | + |
| 197 | +/** |
| 198 | + * ------------------------------------------------------------------------ |
| 199 | + * Data Api implementation |
| 200 | + * ------------------------------------------------------------------------ |
| 201 | + */ |
| 202 | + |
| 203 | +EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { |
| 204 | + const target = getElementFromSelector(this) |
| 205 | + |
| 206 | + if (['A', 'AREA'].includes(this.tagName)) { |
| 207 | + event.preventDefault() |
| 208 | + } |
| 209 | + |
| 210 | + if (this.disabled || this.classList.contains(CLASS_NAME_DISABLED)) { |
| 211 | + return |
| 212 | + } |
| 213 | + |
| 214 | + EventHandler.one(target, EVENT_HIDDEN, () => { |
| 215 | + // focus on trigger when it is closed |
| 216 | + if (isVisible(this)) { |
| 217 | + this.focus() |
| 218 | + } |
| 219 | + }) |
| 220 | + |
| 221 | + // avoid conflict when clicking a toggler of an offcanvas, while another is open |
| 222 | + const allReadyOpen = SelectorEngine.findOne(ACTIVE_SELECTOR) |
| 223 | + if (allReadyOpen && allReadyOpen !== target) { |
| 224 | + return |
| 225 | + } |
| 226 | + |
| 227 | + const data = Data.get(target, DATA_KEY) || new OffCanvas(target) |
| 228 | + data.toggle(this) |
| 229 | +}) |
| 230 | + |
| 231 | +/** |
| 232 | + * ------------------------------------------------------------------------ |
| 233 | + * jQuery |
| 234 | + * ------------------------------------------------------------------------ |
| 235 | + */ |
| 236 | + |
| 237 | +defineJQueryPlugin(NAME, OffCanvas) |
| 238 | + |
| 239 | +export default OffCanvas |
0 commit comments