Use top.history in dialogs and navigate (#8995)

This commit is contained in:
Joakim Sørensen 2021-04-26 16:41:30 +02:00 committed by GitHub
parent b8d6b1ebdd
commit 4d287a1f83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 23 deletions

View File

@ -44,7 +44,10 @@ export class HassioMain extends SupervisorBaseElement {
// We changed the navigate event to fire directly on the window, as that's // We changed the navigate event to fire directly on the window, as that's
// where we are listening for it. However, the older panel_custom will // where we are listening for it. However, the older panel_custom will
// listen on this element for navigation events, so we need to forward them. // listen on this element for navigation events, so we need to forward them.
window.addEventListener("location-changed", (ev) =>
// Joakim - April 26, 2021
// Due to changes in behavior in Google Chrome, we changed navigate to fire on the top element
top.addEventListener("location-changed", (ev) =>
// @ts-ignore // @ts-ignore
fireEvent(this, ev.type, ev.detail, { fireEvent(this, ev.type, ev.detail, {
bubbles: false, bubbles: false,

View File

@ -12,20 +12,24 @@ declare global {
export const navigate = (_node: any, path: string, replace = false) => { export const navigate = (_node: any, path: string, replace = false) => {
if (__DEMO__) { if (__DEMO__) {
if (replace) { if (replace) {
history.replaceState( top.history.replaceState(
history.state?.root ? { root: true } : null, top.history.state?.root ? { root: true } : null,
"", "",
`${location.pathname}#${path}` `${top.location.pathname}#${path}`
); );
} else { } else {
window.location.hash = path; top.location.hash = path;
} }
} else if (replace) { } else if (replace) {
history.replaceState(history.state?.root ? { root: true } : null, "", path); top.history.replaceState(
top.history.state?.root ? { root: true } : null,
"",
path
);
} else { } else {
history.pushState(null, "", path); top.history.pushState(null, "", path);
} }
fireEvent(window, "location-changed", { fireEvent(top, "location-changed", {
replace, replace,
}); });
}; };

View File

@ -61,25 +61,25 @@ export const showDialog = async (
} }
if (addHistory) { if (addHistory) {
history.replaceState( top.history.replaceState(
{ {
dialog: dialogTag, dialog: dialogTag,
open: false, open: false,
oldState: oldState:
history.state?.open && history.state?.dialog !== dialogTag top.history.state?.open && top.history.state?.dialog !== dialogTag
? history.state ? top.history.state
: null, : null,
}, },
"" ""
); );
try { try {
history.pushState( top.history.pushState(
{ dialog: dialogTag, dialogParams: dialogParams, open: true }, { dialog: dialogTag, dialogParams: dialogParams, open: true },
"" ""
); );
} catch (err) { } catch (err) {
// dialogParams could not be cloned, probably contains callback // dialogParams could not be cloned, probably contains callback
history.pushState( top.history.pushState(
{ dialog: dialogTag, dialogParams: null, open: true }, { dialog: dialogTag, dialogParams: null, open: true },
"" ""
); );
@ -90,7 +90,7 @@ export const showDialog = async (
}; };
export const replaceDialog = () => { export const replaceDialog = () => {
history.replaceState({ ...history.state, replaced: true }, ""); top.history.replaceState({ ...top.history.state, replaced: true }, "");
}; };
export const closeDialog = async (dialogTag: string): Promise<boolean> => { export const closeDialog = async (dialogTag: string): Promise<boolean> => {

View File

@ -28,13 +28,13 @@ export const urlSyncMixin = <
if (history.length === 1) { if (history.length === 1) {
history.replaceState({ ...history.state, root: true }, ""); history.replaceState({ ...history.state, root: true }, "");
} }
window.addEventListener("popstate", this._popstateChangeListener); top.addEventListener("popstate", this._popstateChangeListener);
this.addEventListener("dialog-closed", this._dialogClosedListener); this.addEventListener("dialog-closed", this._dialogClosedListener);
} }
public disconnectedCallback(): void { public disconnectedCallback(): void {
super.disconnectedCallback(); super.disconnectedCallback();
window.removeEventListener("popstate", this._popstateChangeListener); top.removeEventListener("popstate", this._popstateChangeListener);
this.removeEventListener("dialog-closed", this._dialogClosedListener); this.removeEventListener("dialog-closed", this._dialogClosedListener);
} }
@ -45,21 +45,21 @@ export const urlSyncMixin = <
console.log("dialog closed", ev.detail.dialog); console.log("dialog closed", ev.detail.dialog);
console.log( console.log(
"open", "open",
history.state?.open, top.history.state?.open,
"dialog", "dialog",
history.state?.dialog top.history.state?.dialog
); );
} }
// If not closed by navigating back, and not a new dialog is open, remove the open state from history // If not closed by navigating back, and not a new dialog is open, remove the open state from history
if ( if (
history.state?.open && top.history.state?.open &&
history.state?.dialog === ev.detail.dialog top.history.state?.dialog === ev.detail.dialog
) { ) {
if (DEBUG) { if (DEBUG) {
console.log("remove state", ev.detail.dialog); console.log("remove state", ev.detail.dialog);
} }
this._ignoreNextPopState = true; this._ignoreNextPopState = true;
history.back(); top.history.back();
} }
}; };
@ -73,7 +73,7 @@ export const urlSyncMixin = <
if (DEBUG) { if (DEBUG) {
console.log("remove old state", ev.state.oldState); console.log("remove old state", ev.state.oldState);
} }
history.back(); top.history.back();
return; return;
} }
this._ignoreNextPopState = false; this._ignoreNextPopState = false;
@ -98,7 +98,7 @@ export const urlSyncMixin = <
console.log("dialog could not be closed"); console.log("dialog could not be closed");
} }
// dialog could not be closed, push state again // dialog could not be closed, push state again
history.pushState( top.history.pushState(
{ {
dialog: state.dialog, dialog: state.dialog,
open: true, open: true,