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"