diff --git a/package.json b/package.json
index 671905fdcc..ecbb9f2e26 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,6 @@
"@mdi/js": "5.9.55",
"@mdi/svg": "5.9.55",
"@polymer/app-layout": "^3.0.2",
- "@polymer/app-route": "^3.0.2",
"@polymer/app-storage": "^3.0.2",
"@polymer/iron-autogrow-textarea": "^3.0.1",
"@polymer/iron-flex-layout": "^3.0.1",
diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts
index 675781d5a5..bbe799862c 100644
--- a/src/layouts/home-assistant.ts
+++ b/src/layouts/home-assistant.ts
@@ -1,5 +1,5 @@
-import "@polymer/app-route/app-location";
import { customElement, html, state, PropertyValues } from "lit-element";
+import { isNavigationClick } from "../common/dom/is-navigation-click";
import { navigate } from "../common/navigate";
import { getStorageDefaultPanelUrlPath } from "../data/panel";
import "../resources/custom-card-support";
@@ -31,22 +31,16 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
protected render() {
const hass = this.hass;
- return html`
-
- ${this._panelUrl === undefined || this._route === undefined
- ? ""
- : hass && hass.states && hass.config && hass.services
- ? html`
-
- `
- : html` `}
- `;
+ return this._panelUrl === undefined || this._route === undefined
+ ? html``
+ : hass && hass.states && hass.config && hass.services
+ ? html`
+
+ `
+ : html``;
}
protected firstUpdated(changedProps) {
@@ -59,6 +53,49 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
this._updateHass({ suspendWhenHidden: ev.detail.suspend });
storeState(this.hass!);
});
+
+ // Navigation
+ const useHash = __DEMO__;
+ const curPath = () =>
+ window.decodeURIComponent(
+ useHash ? location.hash.substr(1) : location.pathname
+ );
+ const updateRoute = (path = curPath()) => {
+ if (this._route && path === this._route.path) {
+ return;
+ }
+ this._route = {
+ prefix: "",
+ path: path,
+ };
+ const dividerPos = path.indexOf("/", 1);
+ this._panelUrl =
+ dividerPos === -1 ? path.substr(1) : path.substr(1, dividerPos - 1);
+ };
+
+ window.addEventListener("location-changed", () => updateRoute());
+
+ // Handle history changes
+ if (useHash) {
+ window.addEventListener("hashchange", () => updateRoute());
+ } else {
+ window.addEventListener("popstate", () => updateRoute());
+ }
+
+ // Handle clicking on links
+ window.addEventListener("click", (ev) => {
+ const href = isNavigationClick(ev);
+ if (href) {
+ navigate(this, href);
+ }
+ });
+
+ // Handle first navigation
+ if (["", "/"].includes(curPath())) {
+ navigate(this, `/${getStorageDefaultPanelUrlPath()}`, true);
+ } else {
+ updateRoute();
+ }
}
protected updated(changedProps: PropertyValues): void {
@@ -129,31 +166,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
}
}
- private async _routeChanged(ev) {
- // routeChangged event listener is called while we're doing the fist render,
- // causing the update to be ignored. So delay it to next task (Lit render is sync).
- await new Promise((resolve) => setTimeout(resolve, 0));
-
- const route = ev.detail.value as Route;
- // If it's the first route that we process,
- // check if we should navigate away from /
- if (
- this._route === undefined &&
- (route.path === "" || route.path === "/")
- ) {
- navigate(window, `/${getStorageDefaultPanelUrlPath()}`, true);
- return;
- }
-
- this._route = route;
-
- const dividerPos = route.path.indexOf("/", 1);
- this._panelUrl =
- dividerPos === -1
- ? route.path.substr(1)
- : route.path.substr(1, dividerPos - 1);
- }
-
protected _checkVisibility() {
if (document.hidden) {
// If the document is hidden, we will prevent reconnects until we are visible again
diff --git a/yarn.lock b/yarn.lock
index 63437a8239..9dfc4c1569 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1961,14 +1961,6 @@
"@polymer/iron-scroll-target-behavior" "^3.0.0-pre.26"
"@polymer/polymer" "^3.0.0"
-"@polymer/app-route@^3.0.2":
- version "3.0.2"
- resolved "https://registry.yarnpkg.com/@polymer/app-route/-/app-route-3.0.2.tgz#749096fb610fb15d27c7b68446406f30786cf93d"
- integrity sha512-8Y34evmsaYh7ONr+zLwLzXaU0iOZZQj1E2uB3iaToQHbOP1POhKlnmAycBQ/eFB8BwrdSUBaDQk+rZhio78FQw==
- dependencies:
- "@polymer/iron-location" "^3.0.0-pre.26"
- "@polymer/polymer" "^3.0.0"
-
"@polymer/app-storage@^3.0.2":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@polymer/app-storage/-/app-storage-3.0.2.tgz#9303d9cf246f4882b223cca7c36901ecc6fa003c"
@@ -2103,13 +2095,6 @@
"@polymer/iron-scroll-target-behavior" "^3.0.0-pre.26"
"@polymer/polymer" "^3.0.0"
-"@polymer/iron-location@^3.0.0-pre.26":
- version "3.0.1"
- resolved "https://registry.yarnpkg.com/@polymer/iron-location/-/iron-location-3.0.1.tgz#43a59fced248ea71db5833116fcdefa186b79527"
- integrity sha512-almb+p/fdSi4bxG+vyXjY51fDZxHMxwiug51Lfvr86wZRXN/u21Y6BapxG5n9f0hPSy9fimjIAvaYmozi7VjyQ==
- dependencies:
- "@polymer/polymer" "^3.0.0"
-
"@polymer/iron-media-query@^3.0.0", "@polymer/iron-media-query@^3.0.0-pre.26":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@polymer/iron-media-query/-/iron-media-query-3.0.1.tgz#5cd8a1c1e8c9b8bafd3dd5da14e0f8d2cfa76d83"