44 lines
1.2 KiB
JavaScript
44 lines
1.2 KiB
JavaScript
import {CustomElement, defineElement, Host, ShadowDOM, state, prop} from "../../packages/csx";
|
|
import {SvgLoader} from "./svg-loader";
|
|
|
|
@defineElement('svg-tester-two')
|
|
export class SvgTesterTwo extends CustomElement{
|
|
// Constructor
|
|
constructor(){
|
|
super();
|
|
}
|
|
|
|
// Private properties
|
|
states = [
|
|
{ inverted: true, invertedColor: "#F00"},
|
|
{ inverted: true, invertedColor: "#FF0"},
|
|
{ inverted: true, invertedColor: "#0FF"},
|
|
{ inverted: false},
|
|
{ inverted: true, invertedColor: "#0F0"},
|
|
];
|
|
|
|
// Properties
|
|
@state() state = this.states[0];
|
|
|
|
// Handlers
|
|
|
|
// CustomElement
|
|
connectedCallback() {
|
|
setInterval(()=>{
|
|
// Moving state
|
|
let curIndex = this.states.indexOf(this.state);
|
|
this.state = this.states[(curIndex+1)>=this.states.length?0:curIndex+1];
|
|
}, 1000);
|
|
super.connectedCallback();
|
|
}
|
|
|
|
render(){
|
|
// invertedColor instead of inverted-color is the only difference!
|
|
return (
|
|
<Host>
|
|
<SvgLoader inverted={this.state.inverted} invertedColor={this.state.invertedColor} />
|
|
</Host>
|
|
);
|
|
}
|
|
}
|