Lovelace - Long Press for everything #1848
Conversation
ghost
assigned 
| @@ -16,6 +16,7 @@ import { fireEvent } from "../../../common/dom/fire_event.js"; | |||
| import { HassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; | |||
| import { HomeAssistant } from "../../../types.js"; | |||
| import { LovelaceCard, LovelaceConfig } from "../types.js"; | |||
| import { longPress } from "../common/long-press.ts"; | |||
There was a problem hiding this comment.
Can we make a new folder for directives and name it long-press-directive.ts
There was a problem hiding this comment.
Should it be a directive, or should we think bigger?
|
|
||
| const firstSetup = (element.longPress == null); | ||
|
|
||
| element.longPress = { |
There was a problem hiding this comment.
No need to set it as property on the element, you will always get passed the same part, so you can use part.value and part.setValue
There was a problem hiding this comment.
Part interface: https://github.com/Polymer/lit-html/blob/master/src/lib/part.ts#L5
Just don't call commit 👍
There was a problem hiding this comment.
The value seems to be reset on each new render, so this doesn't work.
Also, setting it as a element property allows longPressBind to be called directly - so it can be used outside of lit-html templates as well. That's why I export that too.
There was a problem hiding this comment.
It is not supposed to be re-set on each render, that's how Lit maintains state. Are you sure you're actually dealing with the same element when value is not set?
There was a problem hiding this comment.
Adding
console.log(part.value.test);
part.setValue({test: "hello"});
to the directive just fills the log with undefined, with more popping up when rerendering (such as by changing window size).
There was a problem hiding this comment.
But what about the element? This one: const surfaceNode = part.committer.element as HTMLElement; is it the same?
You can verify by using a weakMap.
// outside directive
const interactionNodes = new WeakMap();// inside directive
console.log(interactionNodes.get(part.committer.element))
interactionNodes.set(part.committer.element, "yooo")
|
amazing. |
|
I made some changes.
|
|
This shows how long-pressability can be added to elements without lit-html templates. |
|
Finished up and cleaned up the git history. Should all this be one PR, or should I make one for the controller and directive, and then separate ones for each implementation?
|
thomasloven
changed the title
| @@ -157,7 +163,7 @@ class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement) | |||
| return `hsl(${hue}, 100%, ${100 - sat / 2}%)`; | |||
| } | |||
|
|
|||
| private handleClick() { | |||
| private handleClick(hold=false) { | |||
There was a problem hiding this comment.
... I... don't know... It was needed in some case before, but I've since then changed things so it isn't...
| private stopAnimation() { | ||
| this.ripple.active = false; | ||
| this.ripple.disabled = true; | ||
| this.style.visibility = "hidden"; |
There was a problem hiding this comment.
should this be visibility or display: none.
There was a problem hiding this comment.
display: none feels more right. I'll change it.
| @@ -32,7 +33,13 @@ class HuiIconElement extends ElementClickMixin(PolymerElement) { | |||
|
|
|||
| ready() { | |||
| super.ready(); | |||
| this.registerMouse(this._config); | |||
There was a problem hiding this comment.
I think we can get rid of the element click mixin now?
There was a problem hiding this comment.
It still handles actually picking and executing the actions, which could be done in the elements themselves, but that's some code duplication...
It's actually restored to almost what it was before the first long-press PR.
There was a problem hiding this comment.
nevermind saw you updated it already.
A working directive for long-press. Applied to LoveLace glance card.
This might not need to be limited only to lovelace...
I hate naming things. Suggestions for names that make sense are highly appreciated.
I also pushed this to home-assistant:long-press so it's easier for people to test.
Documentation
home-assistant/home-assistant.io#7111