141 lines
4.0 KiB
HTML
141 lines
4.0 KiB
HTML
<!-- Timeline Element
|
|
This element provides an interface for controlling HTML5-based animations:
|
|
* `totalFrames` value for amount of frames stored
|
|
* `currentFrame` value for current frame position
|
|
* `frameStep` value that controls how many frames should be stepped
|
|
* A scrollable view that can be zoomed and moves according to `frameStep`
|
|
* Start, Stop, Step Back, Step Forward, Reverse controls that use the
|
|
`frameStep` value to step or begin loop stepping.
|
|
* Keyframe add/move/delete functionality that is based on percentages
|
|
due to CSS3's animation methodology.
|
|
-->
|
|
<cat-template>
|
|
<cat-timeline-view><cat-inherits zoom='zoom'></cat-inherits>
|
|
<cat-timeline-scroller></cat-timeline-scroller>
|
|
<!--<cat-timeline-keyframe></cat-timeline-keyframe>-->
|
|
</cat-timeline-view>
|
|
</cat-template>
|
|
<script>
|
|
(function() {
|
|
let template = document.currentScript.ownerDocument.querySelector('cat-template');
|
|
/**** cat-timeline ****/
|
|
customElements.define('cat-timeline', class extends HTMLElement {
|
|
static get observedAttributes() { return ["zoom", "framestep"]; }
|
|
attributeChangedCallback(attr, oldValue, newValue) {
|
|
this[attr] = newValue;
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.frameStep = 1;
|
|
this.totalFrames = 6000;
|
|
this.keyframes = {};
|
|
template.cloneTo(this);
|
|
}
|
|
connectedCallback() {
|
|
}
|
|
/* properties */
|
|
set zoom(value) {
|
|
this.mZoom = parseFloat(value);
|
|
}
|
|
get zoom() {
|
|
return this.mZoom || 0.0;
|
|
}
|
|
set frameStep(value) {
|
|
this.mFrameStep = parseInt(value);
|
|
}
|
|
get frameStep() {
|
|
return this.mFrameStep || 0;
|
|
}
|
|
/* methods */
|
|
scrollTo(frame) {
|
|
}
|
|
play() {
|
|
}
|
|
pause() {
|
|
}
|
|
stepForward() {
|
|
}
|
|
stepBackward() {
|
|
}
|
|
clearKeyframes() {
|
|
for (let keyframe in this.keyframes) {
|
|
this.keyframes[keyframe].parentNode.removeChild(this.keyframes[keyframe]);
|
|
}
|
|
this.keyframes = {};
|
|
}
|
|
addKeyframe(frame) {
|
|
frame = parseInt(frame) || 0;
|
|
if (!this.keyframes[frame]) {
|
|
let perc = frame / this.totalFrames * 100;
|
|
let keyframe = document.createElement('cat-timeline-keyframe');
|
|
keyframe.position = perc;
|
|
keyframe.frame = frame;
|
|
this.dispatchEvent(new CustomEvent('keyframe-add', { detail: keyframe }));
|
|
this.querySelector('cat-timeline-view').appendChild(keyframe);
|
|
this.keyframes[frame] = keyframe;
|
|
}
|
|
return this.keyframes[frame];
|
|
}
|
|
delKeyframe(frame) {
|
|
frame = parseInt(frame) || 0;
|
|
if (this.keyframes[frame]) {
|
|
let perc = frame / this.totalFrames;
|
|
this.querySelector('cat-timeline-view').removeChild(keyframe);
|
|
delete this.keyframes[frame];
|
|
this.dispatchEvent(new CustomEvent('keyframe-delete', { detail: frame }));
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
getKeyframe(frame) {
|
|
return this.keyframes[frame];
|
|
}
|
|
});
|
|
/**** cat-timeline-view ****/
|
|
customElements.define('cat-timeline-view', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
connectedCallback() {
|
|
console.log('--- timeline-view ---');
|
|
console.log(this.children);
|
|
}
|
|
});
|
|
/**** cat-timeline-scroller ****/
|
|
customElements.define('cat-timeline-scroller', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
connectedCallback() {
|
|
console.log('--- timeline-scroller ---');
|
|
console.log(this.children);
|
|
}
|
|
});
|
|
/**** cat-timeline-keyframe ****/
|
|
customElements.define('cat-timeline-keyframe', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
connectedCallback() {
|
|
console.log('--- timeline-keyframe ---');
|
|
console.log(this.children);
|
|
}
|
|
set position(value) {
|
|
this.mPosition = parseInt(value);
|
|
this.style.left = this.mPosition+'%';
|
|
}
|
|
get position() {
|
|
return this.mPosition || 0;
|
|
}
|
|
onmouseup(e) {
|
|
console.log(e);
|
|
}
|
|
onmousedown(e) {
|
|
console.log(e);
|
|
}
|
|
});
|
|
|
|
})()
|
|
</script>
|