forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: prevent modal closing on inner clicks (#685)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Chase Naples
Daniel Roe
and committed by
GitHub
17c4a750
779b239a
+19
-2
+19
-2
app/app.vue
+19
-2
app/app.vue
···
79
79
showKbdHints.value = false
80
80
}
81
81
82
-
/* A hack to get light dismiss to work in safari because it does not support closedby="any" yet */
82
+
// Light dismiss fallback for browsers that don't support closedby="any" (Safari + old Chrome/Firefox)
83
83
// https://codepen.io/paramagicdev/pen/gbYompq
84
84
// see: https://github.com/npmx-dev/npmx.dev/pull/522#discussion_r2749978022
85
85
function handleModalLightDismiss(e: MouseEvent) {
86
86
const target = e.target as HTMLElement
87
87
if (target.tagName === 'DIALOG' && target.hasAttribute('open')) {
88
+
const rect = target.getBoundingClientRect()
89
+
const isOutside =
90
+
e.clientX < rect.left ||
91
+
e.clientX > rect.right ||
92
+
e.clientY < rect.top ||
93
+
e.clientY > rect.bottom
94
+
95
+
if (!isOutside) return
88
96
;(target as HTMLDialogElement).close()
89
97
}
90
98
}
···
92
100
if (import.meta.client) {
93
101
useEventListener(document, 'keydown', handleGlobalKeydown)
94
102
useEventListener(document, 'keyup', handleGlobalKeyup)
95
-
useEventListener(document, 'click', handleModalLightDismiss)
103
+
104
+
// Feature check for native light dismiss support via closedby="any"
105
+
// https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
106
+
const supportsClosedBy =
107
+
typeof HTMLDialogElement !== 'undefined' &&
108
+
typeof HTMLDialogElement.prototype === 'object' &&
109
+
'closedBy' in HTMLDialogElement.prototype
110
+
if (!supportsClosedBy) {
111
+
useEventListener(document, 'click', handleModalLightDismiss)
112
+
}
96
113
}
97
114
</script>
98
115