51 lines
1.1 KiB
JavaScript
51 lines
1.1 KiB
JavaScript
|
export class Switch
|
||
|
|
{
|
||
|
|
constructor(status = false) {
|
||
|
|
this.htmlElement = document.createElement('div');
|
||
|
|
this.htmlElement.classList.add('switch');
|
||
|
|
this.slider = document.createElement('div');
|
||
|
|
this.slider.classList.add('switch-slider');
|
||
|
|
this.htmlElement.appendChild(this.slider);
|
||
|
|
this.status = status;
|
||
|
|
this.isEnabled = true;
|
||
|
|
|
||
|
|
this.updateSlider();
|
||
|
|
|
||
|
|
this.onToggle = () => {}
|
||
|
|
|
||
|
|
this.htmlElement.addEventListener(
|
||
|
|
'click',
|
||
|
|
() => {
|
||
|
|
if (!this.isEnabled) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.toggle();
|
||
|
|
this.onToggle(this.status);
|
||
|
|
}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
toggle()
|
||
|
|
{
|
||
|
|
this.status = !this.status;
|
||
|
|
this.updateSlider();
|
||
|
|
}
|
||
|
|
|
||
|
|
updateSlider()
|
||
|
|
{
|
||
|
|
this.slider.classList.add(this.status ? 'switch-slider-on' : 'switch-slider-off');
|
||
|
|
this.slider.classList.remove(this.status ? 'switch-slider-off' : 'switch-slider-on');
|
||
|
|
}
|
||
|
|
|
||
|
|
enable()
|
||
|
|
{
|
||
|
|
this.isEnabled = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
disable()
|
||
|
|
{
|
||
|
|
this.isEnabled = false;
|
||
|
|
}
|
||
|
|
}
|