Use resize controller

home-assistant · Jun 24, 2024 · 11cf3cf · 11cf3cf
1 parent 4aa5bc1
commit 11cf3cf
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 69 deletions.
diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts
@@ -1,3 +1,4 @@
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { mdiDotsVertical } from "@mdi/js";
 import {
   CSSResultGroup,
@@ -26,38 +27,16 @@ import { HumidifierCardConfig } from "./types";
 
 @customElement("hui-humidifier-card")
 export class HuiHumidifierCard extends LitElement implements LovelaceCard {
-  private _resizeObserver?: ResizeObserver;
+  @query(".container") private _container?: HTMLElement;
 
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this._attachObserver();
-  }
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._detachObserver();
-  }
-
-  @query(".container") private _container!: HTMLElement;
-
-  private _attachObserver(): void {
-    if (!this._resizeObserver && this._container) {
-      this._resizeObserver = new ResizeObserver(() => {
-        this._container.style.setProperty(
-          "--height",
-          `${this._container.clientHeight}px`
-        );
-      });
-      this._resizeObserver.observe(this._container);
-    }
-  }
-
-  private _detachObserver(): void {
-    if (this._resizeObserver) {
-      this._resizeObserver.disconnect();
-      this._resizeObserver = undefined;
-    }
-  }
+  // @ts-ignore
+  private _resizeController = new ResizeController(this, {
+    callback: () => {
+      const height = this._container?.clientHeight;
+      if (!height) return;
+      this._container.style.setProperty("--height", `${height}px`);
+    },
+  });
 
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import("../editor/config-elements/hui-humidifier-card-editor");
@@ -115,8 +94,6 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
-    this._attachObserver();
-
     if (
       !this._config ||
       !this.hass ||
@@ -231,6 +208,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
         overflow: hidden;
         max-width: 100%;
         box-sizing: border-box;
+        flex: 1;
       }
 
       .container:before {
@@ -242,7 +220,6 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
       .container > * {
         padding: 8px;
         max-width: var(--height, 100%);
-        height: 100%;
       }
 
       .more-info {

diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -1,3 +1,4 @@
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { mdiDotsVertical } from "@mdi/js";
 import {
   CSSResultGroup,
@@ -26,38 +27,16 @@ import { ThermostatCardConfig } from "./types";
 
 @customElement("hui-thermostat-card")
 export class HuiThermostatCard extends LitElement implements LovelaceCard {
-  private _resizeObserver?: ResizeObserver;
+  @query(".container") private _container?: HTMLElement;
 
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this._attachObserver();
-  }
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._detachObserver();
-  }
-
-  @query(".container") private _container!: HTMLElement;
-
-  private _attachObserver(): void {
-    if (!this._resizeObserver && this._container) {
-      this._resizeObserver = new ResizeObserver(() => {
-        this._container.style.setProperty(
-          "--height",
-          `${this._container.clientHeight}px`
-        );
-      });
-      this._resizeObserver.observe(this._container);
-    }
-  }
-
-  private _detachObserver(): void {
-    if (this._resizeObserver) {
-      this._resizeObserver.disconnect();
-      this._resizeObserver = undefined;
-    }
-  }
+  // @ts-ignore
+  private _resizeController = new ResizeController(this, {
+    callback: () => {
+      const height = this._container?.clientHeight;
+      if (!height) return;
+      this._container.style.setProperty("--height", `${height}px`);
+    },
+  });
 
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import("../editor/config-elements/hui-thermostat-card-editor");
@@ -107,8 +86,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
-    this._attachObserver();
-
     if (
       !this._config ||
       !this.hass ||
@@ -223,6 +200,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         overflow: hidden;
         max-width: 100%;
         box-sizing: border-box;
+        flex: 1;
       }
 
       .container:before {
@@ -234,8 +212,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       .container > * {
         padding: 8px;
         max-width: var(--height, 100%);
-        height: 100%;
-        aspect-ratio: 1 / 1;
       }
 
       .more-info {