mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 15:26:36 +00:00
Use top.history in dialogs and navigate (#8995)
This commit is contained in:
parent
b8d6b1ebdd
commit
4d287a1f83
@ -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,
|
||||||
|
@ -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,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -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> => {
|
||||||
|
@ -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,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user