Skip to content

fix(dialer): firing each dial event once #28

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

Merged
merged 2 commits into from
May 28, 2020
Merged

fix(dialer): firing each dial event once #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c606e8
fix(dialer): firing each dial event once
LironHazan May 28, 2020
2008d96
fix(dialer): firing each dial event once
LironHazan May 28, 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
12 changes: 11 additions & 1 deletion src/rotary-dailer-element.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,14 @@ import { logEvent } from 'storybook-events-logger';
storiesOf('Rotary Dialer', module)
.addParameters({ component: 'wokwi-rotary-dialer' })
.addDecorator(withKnobs)
.add('Default', () => html` <wokwi-rotary-dialer @dial=${logEvent}></wokwi-rotary-dialer> `);
.add(
'Default',
() =>
html`
<wokwi-rotary-dialer
@dial=${logEvent}
@dial-start=${logEvent}
@dial-end=${logEvent}
></wokwi-rotary-dialer>
`
);
10 changes: 9 additions & 1 deletion src/rotary-dialer-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export class RotaryDialerElement extends LitElement {

private addDialerAnim(digit: Digit) {
requestAnimationFrame(() => {
this.dispatchEvent(new CustomEvent('dial-start', { detail: { digit: this.digit } }));
// When you click on a digit, the circle-hole of that digit
// should go all the way until the finger stop.
this.classes = { ...this.classes, 'dialer-anim': true };
Expand Down Expand Up @@ -91,9 +92,16 @@ export class RotaryDialerElement extends LitElement {
<circle stroke="#fff" stroke-width="2" fill="#D8D8D8" cx="133" cy="133" r="72" />
<path
class=${classMap(this.classes)}
@transitionstart="${() => {
if (!this.classes['dialer-anim']) {
this.dispatchEvent(new CustomEvent('dial', { detail: { digit: this.digit } }));
}
}}"
@transitionend="${() => {
if (!this.classes['dialer-anim']) {
this.dispatchEvent(new CustomEvent('dial-end', { detail: { digit: this.digit } }));
}
this.removeDialerAnim();
this.dispatchEvent(new CustomEvent('dial', { detail: { digit: this.digit } }));
}}"
d="M133.5,210 C146.478692,210 157,220.521308 157,233.5 C157,246.478692 146.478692,257 133.5,257 C120.521308,257 110,246.478692 110,233.5 C110,220.521308 120.521308,210 133.5,210 Z M83.5,197 C96.4786916,197 107,207.521308 107,220.5 C107,233.478692 96.4786916,244 83.5,244 C70.5213084,244 60,233.478692 60,220.5 C60,207.521308 70.5213084,197 83.5,197 Z M45.5,163 C58.4786916,163 69,173.521308 69,186.5 C69,199.478692 58.4786916,210 45.5,210 C32.5213084,210 22,199.478692 22,186.5 C22,173.521308 32.5213084,163 45.5,163 Z M32.5,114 C45.4786916,114 56,124.521308 56,137.5 C56,150.478692 45.4786916,161 32.5,161 C19.5213084,161 9,150.478692 9,137.5 C9,124.521308 19.5213084,114 32.5,114 Z M234.5,93 C247.478692,93 258,103.521308 258,116.5 C258,129.478692 247.478692,140 234.5,140 C221.521308,140 211,129.478692 211,116.5 C211,103.521308 221.521308,93 234.5,93 Z M41.5,64 C54.4786916,64 65,74.5213084 65,87.5 C65,100.478692 54.4786916,111 41.5,111 C28.5213084,111 18,100.478692 18,87.5 C18,74.5213084 28.5213084,64 41.5,64 Z M214.5,46 C227.478692,46 238,56.5213084 238,69.5 C238,82.4786916 227.478692,93 214.5,93 C201.521308,93 191,82.4786916 191,69.5 C191,56.5213084 201.521308,46 214.5,46 Z M76.5,26 C89.4786916,26 100,36.5213084 100,49.5 C100,62.4786916 89.4786916,73 76.5,73 C63.5213084,73 53,62.4786916 53,49.5 C53,36.5213084 63.5213084,26 76.5,26 Z M173.5,15 C186.478692,15 197,25.5213084 197,38.5 C197,51.4786916 186.478692,62 173.5,62 C160.521308,62 150,51.4786916 150,38.5 C150,25.5213084 160.521308,15 173.5,15 Z M123.5,7 C136.478692,7 147,17.5213084 147,30.5 C147,43.4786916 136.478692,54 123.5,54 C110.521308,54 100,43.4786916 100,30.5 C100,17.5213084 110.521308,7 123.5,7 Z"
id="slots"
Expand Down