fix(potentiometer): added keyboard reactions #16
Conversation
|
Works like a charm! Two things are missing though:
|
@urish done, I used stroke instead of the outline for the rotating part of the knob (rect) |
src/potentiometer-element.ts
Outdated
| '#rotating' | ||
| ); | ||
|
|
||
| this.inputEl?.addEventListener('focus', () => { |
There was a problem hiding this comment.
You can probably achieve the same with css, e.g. something like:
input:focus + svg #rotating or similar
also, in general - you can have lit-element manage the event handlers for you (by adding @focus and @blur attributes to the input)
There was a problem hiding this comment.
Thanks I actually tried input:focus + svg #rotating in one of my tries and it didn't work but maybe I selected it by class instead of id.. I'll check it out again :)
regarding the lit-element handlers totally right I wasn't thinking :)
src/potentiometer-element.ts
Outdated
| @@ -81,6 +112,7 @@ export class PotentiometerElement extends LitElement { | |||
| /> | |||
| <rect x="5.4" y=".70" width="9.1" height="1.9" fill="#ccdae3" stroke-width=".15" /> | |||
| <ellipse | |||
| filter="url(#outline)" | |||
There was a problem hiding this comment.
How about controlling this filter directly from CSS? then you don't really need the input event listeners and updating the stdDeviation from JS
There was a problem hiding this comment.
always better - will fix :)
|
Released as version 0.13.1 |
* fix(potentiometer): added keyboard reactions * fix(potentiometer): click/focus glowing outline via css
No description provided.