drab 6.4.1 → 6.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dialog/index.d.ts +5 -1
- package/dist/dialog/index.js +13 -2
- package/package.json +10 -1
package/dist/dialog/index.d.ts
CHANGED
|
@@ -6,12 +6,16 @@ export type DialogAttributes = BaseAttributes & {
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides triggers for the `HTMLDialogElement`.
|
|
8
8
|
*
|
|
9
|
+
* ### Attributes
|
|
10
|
+
*
|
|
9
11
|
* `click-outside-close`
|
|
10
12
|
*
|
|
11
13
|
* By default, the `HTMLDialogElement` doesn't close if the user clicks outside of it.
|
|
12
14
|
* Add a `click-outside-close` attribute to close when the user clicks outside.
|
|
13
15
|
*
|
|
14
|
-
*
|
|
16
|
+
* If the dialog covers the full viewport and this attribute is present, the first child
|
|
17
|
+
* of the dialog will be assumed to be the content of the dialog and the dialog will close
|
|
18
|
+
* if there is a click outside of the first child element.
|
|
15
19
|
*
|
|
16
20
|
* `remove-body-scroll`
|
|
17
21
|
*
|
package/dist/dialog/index.js
CHANGED
|
@@ -2,12 +2,16 @@ import { Base } from "../base/index.js";
|
|
|
2
2
|
/**
|
|
3
3
|
* Provides triggers for the `HTMLDialogElement`.
|
|
4
4
|
*
|
|
5
|
+
* ### Attributes
|
|
6
|
+
*
|
|
5
7
|
* `click-outside-close`
|
|
6
8
|
*
|
|
7
9
|
* By default, the `HTMLDialogElement` doesn't close if the user clicks outside of it.
|
|
8
10
|
* Add a `click-outside-close` attribute to close when the user clicks outside.
|
|
9
11
|
*
|
|
10
|
-
*
|
|
12
|
+
* If the dialog covers the full viewport and this attribute is present, the first child
|
|
13
|
+
* of the dialog will be assumed to be the content of the dialog and the dialog will close
|
|
14
|
+
* if there is a click outside of the first child element.
|
|
11
15
|
*
|
|
12
16
|
* `remove-body-scroll`
|
|
13
17
|
*
|
|
@@ -63,7 +67,14 @@ export class Dialog extends Base {
|
|
|
63
67
|
if (this.hasAttribute("click-outside-close")) {
|
|
64
68
|
// https://blog.webdevsimplified.com/2023-04/html-dialog/#close-on-outside-click
|
|
65
69
|
this.dialog.addEventListener("click", (e) => {
|
|
66
|
-
|
|
70
|
+
let rect = this.dialog.getBoundingClientRect();
|
|
71
|
+
// If dialog covers full viewport (with a small tolerance), use first child element for hit testing
|
|
72
|
+
// Example: https://picocss.com/docs/modal
|
|
73
|
+
if (rect.width - window.innerWidth <= 5 && // 5px tolerance for rounding issues
|
|
74
|
+
rect.height - window.innerHeight <= 5 &&
|
|
75
|
+
this.dialog.firstElementChild) {
|
|
76
|
+
rect = this.dialog.firstElementChild.getBoundingClientRect();
|
|
77
|
+
}
|
|
67
78
|
if (e.clientX < rect.left ||
|
|
68
79
|
e.clientX > rect.right ||
|
|
69
80
|
e.clientY < rect.top ||
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "drab",
|
|
3
3
|
"description": "Interactivity for You",
|
|
4
|
-
"version": "6.
|
|
4
|
+
"version": "6.5.1",
|
|
5
5
|
"homepage": "https://drab.robino.dev",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"author": {
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"prefetch",
|
|
21
21
|
"share",
|
|
22
22
|
"tablesort",
|
|
23
|
+
"tabs",
|
|
23
24
|
"wakelock",
|
|
24
25
|
"youtube"
|
|
25
26
|
],
|
|
@@ -138,6 +139,14 @@
|
|
|
138
139
|
"types": "./dist/tablesort/define.d.ts",
|
|
139
140
|
"default": "./dist/tablesort/define.js"
|
|
140
141
|
},
|
|
142
|
+
"./tabs": {
|
|
143
|
+
"types": "./dist/tabs/index.d.ts",
|
|
144
|
+
"default": "./dist/tabs/index.js"
|
|
145
|
+
},
|
|
146
|
+
"./tabs/define": {
|
|
147
|
+
"types": "./dist/tabs/define.d.ts",
|
|
148
|
+
"default": "./dist/tabs/define.js"
|
|
149
|
+
},
|
|
141
150
|
"./wakelock": {
|
|
142
151
|
"types": "./dist/wakelock/index.d.ts",
|
|
143
152
|
"default": "./dist/wakelock/index.js"
|