65 lines
2.2 KiB
HTML
65 lines
2.2 KiB
HTML
<cat-template>
|
|
<cat-control-section label="Name">
|
|
<cat-hbox>
|
|
<cat-input class='animation-name'></cat-input>
|
|
</cat-hbox>
|
|
</cat-control-section>
|
|
<cat-control-section label="Timing Function">
|
|
<cat-hbox>
|
|
<cat-input class='animation-timing-function' placeholder='linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)'></cat-input>
|
|
</cat-hbox>
|
|
</cat-control-section>
|
|
<cat-control-section label="Timings">
|
|
<cat-hbox>
|
|
<label for="animation-duration">Duration</label>
|
|
<cat-input class='animation-duration' placeholder='6000ms'></cat-input>
|
|
</cat-hbox>
|
|
<cat-hbox>
|
|
<label for="animation-delay">Delay</label>
|
|
<cat-input class='animation-delay' placeholder='500ms'></cat-input>
|
|
</cat-hbox>
|
|
</cat-control-section>
|
|
<cat-control-section label="Playback">
|
|
<cat-hbox>
|
|
<label for="animation-iteration-count">Iterations</label>
|
|
<cat-input type='number' class='animation-iteration-count' value=0 step=1 placeholder='1'></cat-input>
|
|
</cat-hbox>
|
|
<cat-hbox>
|
|
<label for="animation-direction">Direction</label>
|
|
<cat-input class='animation-direction' placeholder='normal|reverse|alternate|alternate-reverse'></cat-input>
|
|
</cat-hbox>
|
|
</cat-control-section>
|
|
</cat-template>
|
|
|
|
<script>
|
|
customElements.define('cat-ctl-animation', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
document.currentScript.ownerDocument.getElementsByTagName('cat-template')[0].cloneTo(this);
|
|
}
|
|
connectedCallback() {
|
|
// looping is easier
|
|
let inputs = this.querySelectorAll('cat-input');
|
|
for (let i = 0; i < inputs.length; i++) {
|
|
inputs[i].addEventListener('input', ev => {
|
|
this.dispatchEvent(new CustomEvent('value-change', {'detail': {
|
|
type: inputs[i].className,
|
|
value: ev.target.value
|
|
}}));
|
|
});
|
|
}
|
|
}
|
|
setInput(which, value, shouldEmit) {
|
|
let input = this.querySelector('cat-input.'+which);
|
|
if (!input) return false;
|
|
input.setAttribute('value', value);
|
|
if (shouldEmit) {
|
|
this.dispatchEvent(new CustomEvent('value-change', {'detail': {
|
|
type: which,
|
|
value: value
|
|
}}));
|
|
}
|
|
}
|
|
});
|
|
</script>
|