Convert ha-url-sync to TS (#2824)

* Convert ha-url-sync

* Change url-sync to be a mixin

src/layouts/app/home-assistant.ts

@@ -17,6 +17,8 @@ import { dialogManagerMixin } from "./dialog-manager-mixin";
 import ConnectionMixin from "./connection-mixin";
 import NotificationMixin from "./notification-mixin";
 import DisconnectToastMixin from "./disconnect-toast-mixin";
+import { urlSyncMixin } from "./url-sync-mixin";
+
 import { Route, HomeAssistant } from "../../types";
 import { navigate } from "../../common/navigate";
 
@@ -36,6 +38,7 @@ export class HomeAssistantAppEl extends ext(HassBaseMixin(LitElement), [
   ConnectionMixin,
   NotificationMixin,
   dialogManagerMixin,
+  urlSyncMixin,
 ]) {
   @property() private _route?: Route;
   @property() private _error?: boolean;

src/layouts/app/more-info-mixin.ts

@@ -6,7 +6,7 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "hass-more-info": {
-      entityId: string;
+      entityId: string | null;
     };
   }
 }

src/layouts/app/url-sync-mixin.ts

@@ -0,0 +1,90 @@
+import { Constructor, LitElement } from "lit-element";
+import { HassBaseEl } from "./hass-base-mixin";
+import { fireEvent } from "../../common/dom/fire_event";
+
+/* tslint:disable:no-console */
+const DEBUG = false;
+
+export const urlSyncMixin = (
+  superClass: Constructor<LitElement & HassBaseEl>
+) =>
+  // Disable this functionality in the demo.
+  __DEMO__
+    ? superClass
+    : class extends superClass {
+        private _ignoreNextHassChange = false;
+        private _ignoreNextPopstate = false;
+        private _moreInfoOpenedFromPath?: string;
+
+        public connectedCallback(): void {
+          super.connectedCallback();
+          window.addEventListener("popstate", this._popstateChangeListener);
+        }
+
+        public disconnectedCallback(): void {
+          super.disconnectedCallback();
+          window.removeEventListener("popstate", this._popstateChangeListener);
+        }
+
+        protected hassChanged(newHass, oldHass): void {
+          super.hassChanged(newHass, oldHass);
+
+          if (this._ignoreNextHassChange) {
+            if (DEBUG) {
+              console.log("ignore hasschange");
+            }
+            this._ignoreNextHassChange = false;
+            return;
+          }
+          if (
+            !oldHass ||
+            oldHass.moreInfoEntityId === newHass.moreInfoEntityId
+          ) {
+            if (DEBUG) {
+              console.log("ignoring hass change");
+            }
+            return;
+          }
+
+          if (newHass.moreInfoEntityId) {
+            if (DEBUG) {
+              console.log("pushing state");
+            }
+            // We keep track of where we opened moreInfo from so that we don't
+            // pop the state when we close the modal if the modal has navigated
+            // us away.
+            this._moreInfoOpenedFromPath = window.location.pathname;
+            history.pushState(null, "", window.location.pathname);
+          } else if (
+            window.location.pathname === this._moreInfoOpenedFromPath
+          ) {
+            if (DEBUG) {
+              console.log("history back");
+            }
+            this._ignoreNextPopstate = true;
+            history.back();
+          }
+        }
+
+        private _popstateChangeListener = (ev) => {
+          if (this._ignoreNextPopstate) {
+            if (DEBUG) {
+              console.log("ignore popstate");
+            }
+            this._ignoreNextPopstate = false;
+            return;
+          }
+
+          if (DEBUG) {
+            console.log("popstate", ev);
+          }
+
+          if (this.hass && this.hass.moreInfoEntityId) {
+            if (DEBUG) {
+              console.log("deselect entity");
+            }
+            this._ignoreNextHassChange = true;
+            fireEvent(this, "hass-more-info", { entityId: null });
+          }
+        };
+      };

src/layouts/home-assistant-main.ts

@@ -15,8 +15,6 @@ import { AppDrawerElement } from "@polymer/app-layout/app-drawer/app-drawer";
 import "@polymer/app-route/app-route";
 import "@polymer/iron-media-query/iron-media-query";
 
-import "../util/ha-url-sync";
-
 import "./partial-panel-resolver";
 import { HomeAssistant, Route } from "../types";
 import { fireEvent } from "../common/dom/fire_event";
@@ -47,7 +45,6 @@ class HomeAssistantMain extends LitElement {
     const disableSwipe = NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
 
     return html`
-      <ha-url-sync .hass=${hass}></ha-url-sync>
       <iron-media-query
         query="(max-width: 870px)"
         @query-matches-changed=${this._narrowChanged}

src/polymer-types.ts

@@ -25,9 +25,6 @@ declare global {
     "iron-resize": undefined;
     "config-refresh": undefined;
     "ha-refresh-cloud-status": undefined;
-    "hass-more-info": {
-      entityId: string;
-    };
     "location-changed": undefined;
     "hass-notification": {
       message: string;

src/util/ha-url-sync.js

@@ -1,76 +0,0 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import EventsMixin from "../mixins/events-mixin";
-
-/* eslint-disable no-console */
-const DEBUG = false;
-
-/*
- * @appliesMixin EventsMixin
- */
-class HaUrlSync extends EventsMixin(PolymerElement) {
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "hassChanged",
-      },
-    };
-  }
-
-  hassChanged(newHass, oldHass) {
-    if (this.ignoreNextHassChange) {
-      if (DEBUG) console.log("ignore hasschange");
-      this.ignoreNextHassChange = false;
-      return;
-    }
-    if (!oldHass || oldHass.moreInfoEntityId === newHass.moreInfoEntityId) {
-      return;
-    }
-
-    if (newHass.moreInfoEntityId) {
-      if (DEBUG) console.log("pushing state");
-      // We keep track of where we opened moreInfo from so that we don't
-      // pop the state when we close the modal if the modal has navigated
-      // us away.
-      this.moreInfoOpenedFromPath = window.location.pathname;
-      history.pushState(null, null, window.location.pathname);
-    } else if (window.location.pathname === this.moreInfoOpenedFromPath) {
-      if (DEBUG) console.log("history back");
-      this.ignoreNextPopstate = true;
-      history.back();
-    }
-  }
-
-  popstateChangeListener(ev) {
-    if (this.ignoreNextPopstate) {
-      if (DEBUG) console.log("ignore popstate");
-      this.ignoreNextPopstate = false;
-      return;
-    }
-
-    if (DEBUG) console.log("popstate", ev);
-
-    if (this.hass.moreInfoEntityId) {
-      if (DEBUG) console.log("deselect entity");
-      this.ignoreNextHassChange = true;
-      this.fire("hass-more-info", { entityId: null });
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.ignoreNextPopstate = false;
-    this.ignoreNextHassChange = false;
-    this.popstateChangeListener = this.popstateChangeListener.bind(this);
-    window.addEventListener("popstate", this.popstateChangeListener);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("popstate", this.popstateChangeListener);
-  }
-}
-if (!__DEMO__) {
-  customElements.define("ha-url-sync", HaUrlSync);
-}