Conditional element support for use in picture-elements #2865

yosilevy · 2019-02-28T14:34:45Z

(Re-posting as standalone code + joint utility functions)

This was requested a while back by a bunch of people. This can allow to take picture-elements in to the next level (I think this is needed in many other cards as well.
For example it can help create an interactive multi device remote. Now people just show/hide whole cards and that's bad UX...

Here's just a simple demo of just one control:
https://www.dropbox.com/s/h6t2hlrbj07qs94/Capture.mp4?dl=0

Need to update docs and I can also make a nice video to post in the docs

balloob · 2019-02-28T17:36:13Z

src/data/lovelace.ts

@@ -76,3 +76,9 @@ export const saveConfig = (
    type: "lovelace/config/save",
    config,
  });
+
+export interface Condition {


Move this to lovelace/common/validate-condition.ts

balloob · 2019-02-28T17:37:39Z

src/panels/lovelace/elements/hui-conditional-element.ts

+  elements: LovelaceElementConfig[];
+}
+
+class HuiConditionalElement extends LitElement implements LovelaceElement {


Why is this a LitElement and not HTMLElement like the conditional card?

balloob · 2019-02-28T17:38:54Z

src/panels/lovelace/elements/hui-conditional-element.ts

+    return html`
+      <style>
+        :host {
+          position: absolute;


If you extend HTMLElement and not use shadow DOM, this probably won't be necessary, the element will be able to position itself ?

Having it position absolute means it will overlay all buttons and make those not clickable ?

balloob · 2019-02-28T17:39:48Z

src/panels/lovelace/elements/hui-conditional-element.ts

+    `;
+  }
+
+  private _createHuiElement(


Can we extract this into a method that is shared with the picture elements card?

src/panels/lovelace/elements/hui-conditional-element.ts

balloob · 2019-02-28T17:40:17Z

src/panels/lovelace/elements/hui-conditional-element.ts

+    }
+
+    return html`
+      ${this.renderStyle()}


Even if you are going to use Lit (which you shouldn't), don't use renderStyle() but instead use static get styles

yosilevy · 2019-03-01T04:37:45Z

Resolved all of the above and simplified. Had to use PolymerElement since I need to know when I'm ready because now the elements go in to the parent to avoid styling and click shadowing. Therefore, I need to know when I have a parent. Comments welcome.

iantrich · 2019-03-01T12:20:11Z

We are moving away from polymerelement to litelement

yosilevy · 2019-03-01T15:28:15Z

I know but @balloob wanted it to be HTMLElement but the problem is I need to be able to know when it's ready so I have a parent to set the elements in to (to avoid styling and click shadowing) so I ended up using PolymerElement to get the event. I can switch to Lit or if you have another solution to stay with HTMLElement that would be good. @balloob ?

iantrich · 2019-03-01T17:27:37Z

I don't know about an HTMLElement solution, but LitElement is the replacement for PolymerElement, so we should always prefer LitElement if it is truly needed. Wait to hear back from @balloob before refactoring though.

balloob · 2019-03-01T18:48:55Z

src/panels/lovelace/cards/hui-picture-elements-card.ts

@@ -1,6 +1,6 @@
 import { html, LitElement, TemplateResult } from "lit-element";

-import { createHuiElement } from "../common/create-hui-element";
+import { createConfiguredHuiElement } from "../../lovelace/common/validate-condition";


This method should obviously not be in common or in validate-condition. It's unique to this card and the conditional card.

balloob · 2019-03-01T18:49:39Z

src/panels/lovelace/common/validate-condition.ts

+  state_not?: string;
+}
+
+export function createConfiguredHuiElement(


This has nothing to do with this file.

balloob · 2019-03-01T18:49:47Z

src/panels/lovelace/elements/hui-conditional-element.ts

@@ -0,0 +1,83 @@
+import { PolymerElement } from "@polymer/polymer/polymer-element";


Don't create Polymer.

balloob · 2019-03-01T18:50:44Z

src/panels/lovelace/elements/hui-conditional-element.ts

+    });
+  }
+
+  public ready() {


connectedCallback / disconnectedCallback are part of the custom element spec, also available on HTMLElement. Use that.

yosilevy · 2019-03-01T19:07:39Z

All done. Thanks for the review. I thought about connected callback but VS code intellisense threw me off.

src/panels/lovelace/elements/hui-conditional-element.ts

balloob · 2019-03-01T19:24:58Z

src/panels/lovelace/elements/hui-conditional-element.ts

+    this._config = config;
+
+    this._config.elements.map((elementConfig: LovelaceElementConfig) => {
+      this._elements.push(


Why is this an array? You are only ever creating a single element.

Ah see it now. that's fine.

You are still not clearing this._elements and cleaning up old elements.

We support multiple elements under the same set of conditions

balloob · 2019-03-01T19:26:06Z

src/panels/lovelace/elements/hui-conditional-element.ts

+
+    this._config.elements.map((elementConfig: LovelaceElementConfig) => {
+      this._elements.push(
+        createConfiguredHuiElement(elementConfig, this._hass!)


You don't have this._hass here. We always call setConfig first.

createConfiguredHuiElement should not take hass as that's not needed for creation of the element.

It does need hass to provide it to the element. This is exactly what the local _createHuiElement method used to do and it is required (not for creation but for full operation).

balloob · 2019-03-01T19:27:26Z

src/panels/lovelace/elements/hui-conditional-element.ts

+    });
+
+    if (this._hass) {
+      this.hass = this._hass;


You're doing this here and in connectedCallback. It's confusing. I think that we should instead just have a render method that does the right thing ?

It's needed because config can be called even after component was fully loaded.

And render won't help since we're adding the elements to the parent to maintain positioning as regular picture-elements elements...

balloob · 2019-03-02T04:41:02Z

src/panels/lovelace/elements/hui-conditional-element.ts

+      throw new Error("Error in card configuration.");
+    }
+
+    if (this._elements && this._elements.length > 0) {


No need to check for this._elements, it is initialized as []

balloob · 2019-03-02T04:42:08Z

src/panels/lovelace/elements/hui-conditional-element.ts

+  }
+
+  private update() {
+    if (this._hass) {


haha, I meant to put the visible check and appending elements in here 😆

balloob · 2019-03-03T18:24:06Z

src/panels/lovelace/cards/hui-conditional-card.ts

@@ -75,6 +64,12 @@ class HuiConditionalCard extends HTMLElement implements LovelaceCard {
  public getCardSize() {
    return computeCardSize(this._card!);
  }
+
+  private update() {


This is silly. Move EVERYTHING from the hass setter, except for assigning this._hass = hass, into this method. So that the update method is responsible for updates.

Just like updateElements for conditional element

Yes I forgot picture-elements. Done.

balloob · 2019-03-03T19:27:39Z

🎉 🎉 🎉 🎉

balloob · 2019-03-03T19:27:54Z

Please open a PR for the docs repo

yosilevy · 2019-03-03T19:35:38Z

Already open - home-assistant/home-assistant.io#8795

Conditional element support for use in picture-elements

570ddc8

homeassistant added the cla-signed label Feb 28, 2019

ghost added the in progress label Feb 28, 2019

balloob reviewed Feb 28, 2019

View reviewed changes

src/panels/lovelace/elements/hui-conditional-element.ts Show resolved Hide resolved

balloob reviewed Feb 28, 2019

View reviewed changes

Refactored

451da21

balloob reviewed Mar 1, 2019

View reviewed changes

yosilevy added 2 commits March 1, 2019 21:01

Refactor to HTMLElement, separated files

622569f

New file

1376bf6

balloob reviewed Mar 1, 2019

View reviewed changes

src/panels/lovelace/elements/hui-conditional-element.ts Show resolved Hide resolved

balloob reviewed Mar 1, 2019

View reviewed changes

Added disconnected callback, handled multiple config calls.

43b4c38

yosilevy mentioned this pull request Mar 1, 2019

Added conditional element documentation home-assistant/home-assistant.io#8795

Merged

Added update method

8bcf45c

balloob reviewed Mar 2, 2019

View reviewed changes

yosilevy added 2 commits March 2, 2019 21:43

Refactored and simplified - elements contained internally

c27c477

Removed excess if

72604cf

balloob reviewed Mar 3, 2019

View reviewed changes

Refactored also picture elements

871fece

balloob approved these changes Mar 3, 2019

View reviewed changes

balloob merged commit 19c44f7 into home-assistant:dev Mar 3, 2019

ghost removed the in progress label Mar 3, 2019

balloob mentioned this pull request Mar 4, 2019

20190303.0 #2880

Merged

yosilevy deleted the conditional-element-support branch March 5, 2019 19:05

github-actions bot locked and limited conversation to collaborators Jul 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Conditional element support for use in picture-elements #2865

Conditional element support for use in picture-elements #2865

yosilevy commented Feb 28, 2019

balloob Feb 28, 2019

balloob Feb 28, 2019

balloob Feb 28, 2019

balloob Feb 28, 2019

balloob Feb 28, 2019

yosilevy commented Mar 1, 2019

iantrich commented Mar 1, 2019

yosilevy commented Mar 1, 2019

iantrich commented Mar 1, 2019

balloob Mar 1, 2019

balloob Mar 1, 2019

balloob Mar 1, 2019

balloob Mar 1, 2019

yosilevy commented Mar 1, 2019

balloob Mar 1, 2019

balloob Mar 1, 2019

yosilevy Mar 1, 2019

balloob Mar 1, 2019

balloob Mar 1, 2019

yosilevy Mar 1, 2019

balloob Mar 1, 2019

yosilevy Mar 1, 2019

yosilevy Mar 1, 2019

balloob Mar 2, 2019

balloob Mar 2, 2019

balloob Mar 3, 2019

balloob Mar 3, 2019

yosilevy Mar 3, 2019

balloob commented Mar 3, 2019

balloob commented Mar 3, 2019

yosilevy commented Mar 3, 2019

		@@ -0,0 +1,83 @@
		import { PolymerElement } from "@polymer/polymer/polymer-element";

Conditional element support for use in picture-elements #2865

Conditional element support for use in picture-elements #2865

Conversation

yosilevy commented Feb 28, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yosilevy commented Mar 1, 2019

iantrich commented Mar 1, 2019

yosilevy commented Mar 1, 2019

iantrich commented Mar 1, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yosilevy commented Mar 1, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

balloob commented Mar 3, 2019

balloob commented Mar 3, 2019

yosilevy commented Mar 3, 2019