UNPKG

2.13 kBJavaScriptView Raw
1/*!
2 * Xtend UI (https://xtendui.com/)
3 * @copyright (c) 2017 - 2021 Riccardo Caroli
4 * @license MIT (https://github.com/xtendui/xtendui/blob/master/LICENSE.txt)
5 */
6
7import { Xt } from './xt.mjs'
8import './toggle.mjs'
9import JSON5 from 'json5'
10Xt.JSON5 = JSON5
11
12/**
13 * Overlay
14 */
15class Overlay extends Xt.Toggle {
16 /**
17 * constructor
18 * @param {Node|HTMLElement|EventTarget|Window} object Base node
19 * @param {Object} optionsCustom User options
20 * @constructor
21 */
22 constructor(object, optionsCustom = {}) {
23 super(object, optionsCustom)
24 }
25}
26
27//
28// options
29//
30
31Overlay.componentName = 'xt-overlay'
32Overlay.optionsDefault = {
33 // element
34 elements: '[data-xt-overlay-element]',
35 targets: '[data-xt-overlay-target]',
36 // quantity
37 min: 0,
38 max: 1,
39 // event
40 on: 'click',
41 off: 'click',
42 mouseParent: false,
43 eventLimit: '.xt-event-limit, .xt-overlay',
44 closeauto: true,
45 openauto: true,
46 closeDeep: '.xt-dismiss',
47 closeInside: '.xt-backdrop, .xt-overlay-container',
48 closeOutside: false,
49 // timing
50 queue: {
51 elements: false,
52 targets: true,
53 elementsInner: false,
54 targetsInner: true,
55 },
56 // other
57 disableDeactivate: true,
58 appendTo: 'body',
59 classBody: 'xt-scrollbar-overlay',
60 focusLimit: true,
61 zIndex: {
62 targets: {
63 start: 5000, // same as options.zIndex.targets.start
64 factor: 0,
65 },
66 },
67 a11y: {
68 role: 'dialog',
69 labelElements: false,
70 labelTargets: false,
71 controls: true,
72 selected: false,
73 expanded: true,
74 live: true,
75 disabled: true,
76 keyboard: true,
77 vertical: false,
78 items: false,
79 },
80}
81
82//
83// export
84//
85
86Xt.Overlay = Overlay
87
88//
89// observe
90//
91
92if (typeof window !== 'undefined') {
93 Xt.mount({
94 matches: `[data-${Xt.Overlay.componentName}]`,
95 mount: ({ ref }) => {
96 // vars
97
98 const optionsMarkup = ref.getAttribute(`data-${Xt.Overlay.componentName}`)
99 const options = optionsMarkup ? JSON5.parse(optionsMarkup) : {}
100
101 // init
102
103 let self = new Xt.Overlay(ref, options)
104
105 // unmount
106
107 return () => {
108 self.destroy()
109 self = null
110 }
111 },
112 })
113}