Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(potentiometer): added keyboard reactions #16

Merged
merged 7 commits into from
Apr 13, 2020
Merged

fix(potentiometer): added keyboard reactions #16

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e0869b9
fix(potentiometer): added keyboard reactions
LironHazan Apr 11, 2020
980ad23
fix(ssd1306): added focus indication
LironHazan Apr 12, 2020
c4c3bfe
fix(ssd1306): removed redundant code
LironHazan Apr 12, 2020
2c59d6f
fix(ssd1306): reassigned element
LironHazan Apr 12, 2020
1a6d7af
fix(potentiometer): local inputel
LironHazan Apr 12, 2020
fa83547
fix(potentiometer): click/focus glowing outline
LironHazan Apr 12, 2020
60cb097
fix(potentiometer): click/focus glowing outline via css
LironHazan Apr 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix(potentiometer): added keyboard reactions
  • Loading branch information
@LironHazan
LironHazan committed Apr 11, 2020
commit e0869b9a121fc29feda56e4d4b8bb49071fa209c
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ build
*.log
storybook-static
custom-elements.json
.idea
25 changes: 25 additions & 0 deletions src/potentiometer-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,13 @@ export class PotentiometerElement extends LitElement {
word-spacing: 0px;
fill: #ffffff;
}
.hide-input {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
}
`;
}

Expand All @@ -53,7 +60,20 @@ export class PotentiometerElement extends LitElement {
const knobDeg = (this.endDegree - this.startDegree) * percent + this.startDegree;

return html`
<input
tabindex="0"
type="range"
class="hide-input"
max="${this.max}"
min="${this.min}"
value="${this.value}"
step="${this.step}"
aria-valuemin="${this.min}"
aria-valuenow="${this.value}"
@input="${this.onValueChange}"
/>
<svg
role="slider"
width="20mm"
height="20mm"
version="1.1"
Expand Down Expand Up @@ -120,6 +140,11 @@ export class PotentiometerElement extends LitElement {
`;
}

private onValueChange(event: KeyboardEvent) {
const target = event.target as HTMLInputElement;
this.updateValue(parseFloat(target.value));
}

private down(event: MouseEvent) {
if (event.button === 0 || window.navigator.maxTouchPoints) {
this.pressed = true;
Expand Down