1
0
Fork 0
Browse Source

chore: define a complete event and track it

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
main
André Jaenisch 7 months ago
parent
commit
b4baf34283
Signed by: ryuno-ki
GPG Key ID: 5A668E771F1ED854
  1. 15
      partials/type-effect.js
  2. 3
      stories/components/type-effect.stories.mdx

15
partials/type-effect.js

@ -1,5 +1,7 @@
import { LitElement, html } from 'lit';
const name = 'type-effect'
/**
* Animated type text effect.
*
@ -36,11 +38,18 @@ export class TypeEffect extends LitElement {
this.shadowRoot.append(el)
}
this._timeoutHandle = setTimeout(this._playAnimation.bind(this), this.speed, element, textIndex + 1)
}
} else {
element._emitCompletion(element)
}
}
_emitCompletion(element) {
const event = new Event(`${name}:complete`, {bubbles: true, composed: true})
element.dispatchEvent(event)
}
}
if (!customElements.get('type-effect')) {
customElements.define('type-effect', TypeEffect)
if (!customElements.get(name)) {
customElements.define(name, TypeEffect)
}

3
stories/components/type-effect.stories.mdx

@ -17,6 +17,9 @@ const args = {typedtext: 'Some text'}
<Story
name='TypeEffect'
parameters={{
actions: {
handles: ['type-effect:complete'],
},
controls: {
expanded: true,
hideNoControlsWarning: true,

Loading…
Cancel
Save