dialogs support 'back' to close
Massimo Melina committed
Mar 7, 2024 at 19:19 UTC
a060c657eedd7ebff2dafc91ecb08a6f9a9f0210
2 files changed
+7
-5
frontend/src/Breadcrumbs.ts
+1
@@ -41,6 +41,7 @@ function Breadcrumb({ path, label, current, title }:{ current?: boolean, path: s
41
title,
42
async onClick(ev) {
43
if (!current) return
44
+ ev.preventDefault()
45
if (typeof label !== 'string')
46
return reload()
47
openFileMenu(new DirEntry(decodeURIComponent(path), { p }), ev, [
shared/dialogs.ts
+6
-5
@@ -64,11 +64,12 @@ function back() {
64
}
65
66
export function Dialogs(props: HTMLAttributes<HTMLDivElement>) {
67
- useEffect(() => domOn('popstate', ev => {
67
+ useEffect(() => domOn('popstate', () => {
68
if (ignorePopState)
69
return ignorePopState = false
70
- if (ev.state.ts > dialogs[dialogs.length - 1]?.ts!) // forward
71
- return back() // cancel
70
+ const { $dialog } = window.history.state
71
+ if ($dialog && !dialogs.find(x => x.$id === $dialog)) // it happens if the user, after closing a dialog, goes forward in the history
72
+ return back()
73
closeDialog(undefined, true)
74
}), [])
75
const snap = useSnapshot(dialogs)
@@ -162,7 +163,7 @@ export function newDialog(options: DialogOptions) {
163
options = objSameKeys(options, x => isValidElement(x) ? ref(x) : x) as typeof options // encapsulate elements as react will try to write, but valtio makes them readonly
164
dialogs.push(options)
165
if (options.closable !== false)
165
- window.history.pushState({ $id, ts }, '')
166
+ window.history.pushState({ $dialog: $id, ts }, '')
167
return { close }
168
169
function close(v?:any) {
@@ -180,7 +181,7 @@ export function closeDialog(v?:any, skipHistory=false) {
181
if (d.reserveClosing)
182
continue
183
if (!skipHistory) {
183
- if (window.history.state.$id !== d.$id) return
184
+ if (window.history.state.$dialog !== d.$id) return
185
back()
186
}
187
closeDialogAt(i, v)