97 lines
1007 B
JavaScript
97 lines
1007 B
JavaScript
|
|
||
|
|
|
||
|
|
export default class toggle{
|
||
|
|
|
||
|
|
boxCursor = "pointer";
|
||
|
|
|
||
|
|
cursor = "pointer";
|
||
|
|
|
||
|
|
boxBorderRadius = 16;
|
||
|
|
|
||
|
|
boxBackground = "grey"
|
||
|
|
|
||
|
|
boxWidth = 50;
|
||
|
|
|
||
|
|
boxHeight = 24;
|
||
|
|
|
||
|
|
height = 20;
|
||
|
|
|
||
|
|
width = 20;
|
||
|
|
|
||
|
|
margin = 2;
|
||
|
|
|
||
|
|
borderRadius = "100%"
|
||
|
|
|
||
|
|
background = "white";
|
||
|
|
|
||
|
|
transform;
|
||
|
|
|
||
|
|
value = true;
|
||
|
|
|
||
|
|
transition = "0.2s";
|
||
|
|
|
||
|
|
boxTransition = "0.2s";
|
||
|
|
|
||
|
|
create() {
|
||
|
|
|
||
|
|
if( this.value ) {
|
||
|
|
|
||
|
|
this.transform = "translateX(130%)";
|
||
|
|
|
||
|
|
this.boxBackground = "green";
|
||
|
|
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
this.transform = "translateX(0%)";
|
||
|
|
|
||
|
|
this.boxBackground = "grey";
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
boxClick( event ) {
|
||
|
|
|
||
|
|
this.updateState( event );
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
click( event ) {
|
||
|
|
|
||
|
|
this.updateState( event );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
updateState( event ) {
|
||
|
|
|
||
|
|
if( this.value ) {
|
||
|
|
|
||
|
|
this.transform = "translateX(0%)";
|
||
|
|
|
||
|
|
this.boxBackground = "grey";
|
||
|
|
|
||
|
|
this.value = false;
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
this.transform = "translateX(130%)";
|
||
|
|
|
||
|
|
this.value = true;
|
||
|
|
|
||
|
|
this.boxBackground = "green";
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if( this.change ) {
|
||
|
|
|
||
|
|
this.change( event );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|