|
| 1 | +// Offcanvas element |
| 2 | + |
| 3 | +import { Offcanvas as OffcanvasBS } from 'bootstrap'; |
| 4 | +import View from '../view'; |
| 5 | + |
| 6 | +// //////////////////////////////////////////////////////////////////////////// |
| 7 | +// CONSTANTS |
| 8 | + |
| 9 | +const EVENT_ROOT = 'offcanvas'; |
| 10 | + |
| 11 | +/** |
| 12 | + * Offcanvas show event, which is emitted when a element is about to be made visible. |
| 13 | + * |
| 14 | + * @event Offcanvas#offcanvas:show |
| 15 | + * @arg {Offcanvas} sender - The view that emitted the event. |
| 16 | + */ |
| 17 | +const EVENT_SHOW = `${EVENT_ROOT}:show`; |
| 18 | + |
| 19 | +/** |
| 20 | + * Offcanvas hide event, which is emitted when a element has been hidden. |
| 21 | + * |
| 22 | + * @event Offcanvas#offcanvas:hide |
| 23 | + * @arg {Offcanvas} sender - The view that emitted the event. |
| 24 | + */ |
| 25 | +const EVENT_HIDE = `${EVENT_ROOT}:hide`; |
| 26 | + |
| 27 | +// //////////////////////////////////////////////////////////////////////////// |
| 28 | + |
| 29 | +/** |
| 30 | + * @class Offcanvas |
| 31 | + * @implements {View} |
| 32 | + * @classdesc This class is constructed with a DOM element and |
| 33 | + * controls an existing |
| 34 | + * [Bootstrap Offcanvas]{@link https://getbootstrap.com/docs/5.0/components/offcanvas/} |
| 35 | + * and is generally used for showing additional information on a modal canvas which is shown |
| 36 | + * and hidden from one side of the window. |
| 37 | + * |
| 38 | + * @arg {Node} node - The node to attach the view to. Throws an error if the node |
| 39 | + * is not provided. |
| 40 | + */ |
| 41 | +export default class Offcanvas extends View { |
| 42 | + constructor(node) { |
| 43 | + super(node); |
| 44 | + this.$offcanvas = new OffcanvasBS(node, {}); |
| 45 | + node.addEventListener('show.bs.offcanvas', () => { |
| 46 | + this.dispatchEvent(EVENT_SHOW, this); |
| 47 | + }); |
| 48 | + node.addEventListener('hidden.bs.offcanvas', () => { |
| 49 | + this.dispatchEvent(EVENT_HIDE, this); |
| 50 | + }); |
| 51 | + } |
| 52 | + |
| 53 | + /** |
| 54 | + * Make the offcanvas view visible |
| 55 | + * @fires Offcanvas#offcanvas:show |
| 56 | + * @throws Error |
| 57 | + */ |
| 58 | + show() { |
| 59 | + this.$offcanvas.show(); |
| 60 | + } |
| 61 | + |
| 62 | + /** |
| 63 | + * Make the offcanvas view hidden. |
| 64 | + * @fires Offcanvas#offcanvas:hide |
| 65 | + */ |
| 66 | + hide() { |
| 67 | + this.$offcanvas.hide(); |
| 68 | + } |
| 69 | +} |
0 commit comments