Better integrate elements into stock HA custom element support.

2021-10-09 15:52:52 -07:00
parent 49455ab741
commit 9a915af390
7 changed files with 201 additions and 80 deletions
@@ -2,91 +2,136 @@ import { LitElement, TemplateResult, html, CSSResultGroup, unsafeCSS } from 'lit
 import { HomeAssistant } from 'custom-card-helpers';
 import { customElement, property } from 'lit/decorators';

-import { ExtendedHomeAssistant, PictureElement, PictureElements } from '../types';
+import { ExtendedHomeAssistant, MenuButton, MenuIcon, MenuStateIcon, menuStateIconSchema, PictureElements } from '../types';
+import { menuIconSchema } from '../types'
+import { dispatchErrorMessageEvent, dispatchEvent, getParseErrorKeys } from '../common';

 import elementsStyle from '../scss/elements.scss';
+import { localize } from '../localize/localize';
+import { z } from 'zod';
+
+/* A note on picture element rendering:
+ *
+ * To avoid needing to deal with the rendering of all the picture elements
+ * ourselves, instead the card relies on a stock conditional element (with no
+ * conditions) to render elements (this._root). This has a few advantages:
+ * 
+ * - Does not depend on (much of!) an internal API -- conditional picture
+ *   elements are unlikely to go away or change.
+ * - Forces usage of elements that HA understands. If the rendering is done
+ *   directly, it is (ask me how I know!) very tempting to render things in such
+ *   a way that a nested conditional element would not be able to render, i.e.
+ *   the custom rendering logic would only apply at the first level.
+ */
+
+/* A note on custom elements:
+ *
+ * The native HA support for custom elements is used for the menu-icon and
+ * menu-state-icon elements. This ensures multi-nested conditionals will work
+ * correctly. These custom elements 'render' by firing events that are caught by
+ * the card to call for inclusion/exclusion of the menu icon in question.
+ * 
+ * One major complexity here is that the top <frigate-card-elements> element
+ * will not necessarily know when a menu icon is no longer rendered because of a
+ * conditional that no-longer evaluates to true. As such, it cannot know when to
+ * signal for the menu icon removal. Furthermore, the menu icon element itself
+ * will only know it's been removed _after_ it's been disconnected from the DOM,
+ * so normal event propagation at that point will not work. Instead, we must
+ * catch the menu icon _addition_ and register the eventhandler for the removal
+ * directly on the child (which will have no parent at time of calling). That
+ * then triggers <frigate-card-elements> to re-dispatch a removal event for
+ * upper layers to handle correctly.
+ */
+

@customElement('frigate-card-elements')
 export class FrigateCardElements extends LitElement {
  @property({ attribute: false })
-  protected _pictureElements: PictureElements;
+  protected pictureElements: PictureElements;

  protected _hass!: HomeAssistant & ExtendedHomeAssistant;
-  protected _elements: HTMLElement[] = [];
+  protected _root: HTMLElement | null = null;

  set hass(hass: HomeAssistant & ExtendedHomeAssistant) {
-    for (let i = 0; hass && i < this._elements.length; i++) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (this._elements[i] as any).hass = hass;
+    if (this._root) {
+      (this._root as any).hass = hass;
    }
    this._hass = hass;
  }

-  set pictureElements(pictureElements: PictureElements) {
-    if (this._elements.length > 0) {
-      this._elements.forEach((el: HTMLElement) => {
-        if (el.parentElement) {
-          el.parentElement.removeChild(el);
-        }
-      });
-      this._elements = [];
-    }
-    if (!pictureElements) {
+  protected _menuRemoveHandler(ev: Event): void {
+    // Re-dispatch event from this element (instead of the disconnected one, as
+    // there is no parent of the disconnected element).
+    dispatchEvent<MenuButton>(this, 'menu-remove', (ev as CustomEvent).detail);
+  }
+
+  protected _menuAddHandler(ev: Event): void {
+    ev = ev as CustomEvent<MenuButton>;
+    const path = ev.composedPath()
+    if (!path.length) {
      return;
    }
-    for (let i = 0; i < pictureElements.length && pictureElements[i]; i++) {
-      const element = this._createPictureElement(pictureElements[i]);
-      if (element) {
-        this._elements.push(element);
-      }
+
+    // See 'A note on custom elements' above to explain what's going on here.
+
+    // Ensure listener is only attached 1 time by removing it first.
+    path[0].removeEventListener(
+      'frigate-card:menu-remove',
+      this._menuRemoveHandler.bind(this));
+
+    path[0].addEventListener(
+      'frigate-card:menu-remove',
+      this._menuRemoveHandler.bind(this));
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    // Catch icons being added to the menu (so their removal can be subsequently
+    // handled).
+    this.addEventListener(
+      'frigate-card:menu-add',
+      this._menuAddHandler,
+    );
+
+    if (!this._root) {
+      this._createRoot();
    }
  }

-  @property({ attribute: false })
-  protected _createPictureElement(pictureElement: PictureElement): HTMLElement | null {
-    let customElementName: string | null = null;
-
-    switch (pictureElement.type) {
-      case 'state-badge':
-      case 'state-icon':
-      case 'state-label':
-      case 'service-button':
-      case 'icon':
-      case 'image':
-      case 'conditional':
-        customElementName = `hui-${pictureElement.type}-element`;
-        break;
-    }
-
-    if (!customElementName) {
-      return null;
-    }
+  disconnectedCallback(): void {
+    this.removeEventListener(
+      'frigate-card:menu-add',
+      this._menuAddHandler,
+    );
+    super.disconnectedCallback();
+  }

+  protected _createRoot(): void {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const elementConstructor = customElements.get(customElementName) as any;
+    const elementConstructor = customElements.get('hui-conditional-element') as any;
    if (!elementConstructor) {
-      return null;
+      return;
    }

    const element = new elementConstructor();
    element.hass = this._hass;
+    const config = {
+      type: 'conditional',
+      conditions: [],
+      elements: this.pictureElements,
+    }
    try {
-      element.setConfig(pictureElement);
+      element.setConfig(config);
    } catch (e) {
      console.error(e, (e as Error).stack);
-      return null;
+      return;
    }
-    element.classList.add('element');
-
-    const targetStyle = pictureElement.style || {};
-    Object.keys(targetStyle).forEach((prop) => {
-      element.style.setProperty(prop, targetStyle[prop]);
-    });
-    return element;
+    this._root = element;
  }

  protected render(): TemplateResult {
-    return html`${this._elements.map((element) => element)}`;
+    return html`${this._root || ''}`;
  }

  static get styles(): CSSResultGroup {
@@ -94,10 +139,31 @@ export class FrigateCardElements extends LitElement {
  }
 }

-export function renderFrigateCardElements(
-  hass: HomeAssistant & ExtendedHomeAssistant,
-  pictureElements: PictureElements,
-): TemplateResult {
-  return html` <frigate-card-elements .hass=${hass} .pictureElements=${pictureElements}>
-  </frigate-card-elements>`;
+export class FrigateCardElementsBaseMenuIcon<T> extends LitElement {
+  @property({ attribute: false })
+  protected _config: T | null = null;
+
+  public setConfig(config: T): void {
+    this._config = config;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    if (this._config) {
+       dispatchEvent<T>(this, 'menu-add', this._config);
+    }
+  }
+
+  disconnectedCallback(): void {
+    if (this._config) {
+       dispatchEvent<T>(this, 'menu-remove', this._config);
+    }
+    super.disconnectedCallback()
+  }
 }
+
+@customElement('frigate-card-menu-icon')
+export class FrigateCardElementsMenuIcon extends FrigateCardElementsBaseMenuIcon<MenuIcon> {}
+
+@customElement('frigate-card-menu-state-icon')
+export class FrigateCardElementsMenuStateIcon extends FrigateCardElementsBaseMenuIcon<MenuStateIcon> {}
@@ -33,6 +33,16 @@ export class FrigateCardMenu extends LitElement {
  @property({ attribute: false })
  public buttons: MenuButton[] = [];

+  public addButton(button: MenuButton): void {
+    if (!this.buttons.includes(button)) {
+      this.buttons = [...this.buttons, button];
+    }
+  }
+
+  public removeButton(target: MenuButton): void {
+    this.buttons = this.buttons.filter(button => button != target);
+  }
+
  // Call the callback.
  protected _callAction(ev: CustomEvent, button: MenuButton): void {
    if (this.menuMode.startsWith('hidden-')) {
@@ -53,7 +63,7 @@ export class FrigateCardMenu extends LitElement {
  protected shouldUpdate(changedProps: PropertyValues): boolean {
    const oldHass = changedProps.get('hass') as HomeAssistant | undefined;

-    if (!oldHass) {
+    if (changedProps.size > 1 || !oldHass) {
      return true;
    }

@@ -61,7 +71,7 @@ export class FrigateCardMenu extends LitElement {
    const entities: string[] = []
    for (let i = 0; i < this.buttons.length; i++) {
      const button = this.buttons[i];
-      if (button.type == 'menu-state-icon') {
+      if (button.type == 'custom:frigate-card-menu-state-icon') {
        entities.push(button.entity);
      }
    }
@@ -76,7 +86,7 @@ export class FrigateCardMenu extends LitElement {
    let icon = button.icon;
    const style = ('style' in button ? button.style : {}) || {};

-    if (button.type === 'menu-state-icon') {
+    if (button.type === 'custom:frigate-card-menu-state-icon') {
      state = this.hass.states[button.entity];
      emphasize =
        !!state && button.state_color && ['on', 'active', 'home'].includes(state.state);