43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
import {CustomElement, defineElement, Host, ShadowDOM, State, Prop} from "../../packages/csx";
|
|
import {SvgLoader} from "./svg-loader";
|
|
|
|
@defineElement('svg-tester')
|
|
export class SvgTester 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(){
|
|
return (
|
|
<Host>
|
|
<SvgLoader inverted={this.state.inverted} inverted-color={this.state.invertedColor} />
|
|
</Host>
|
|
);
|
|
}
|
|
}
|