2023-04-18 17:20:02 -04:00
|
|
|
import {Component} from './component';
|
2018-03-18 11:13:46 -04:00
|
|
|
|
2022-11-15 07:44:57 -05:00
|
|
|
export class ToggleSwitch extends Component {
|
2018-03-18 11:13:46 -04:00
|
|
|
|
2022-11-15 07:44:57 -05:00
|
|
|
setup() {
|
|
|
|
this.input = this.$el.querySelector('input[type=hidden]');
|
|
|
|
this.checkbox = this.$el.querySelector('input[type=checkbox]');
|
2018-03-18 11:13:46 -04:00
|
|
|
|
2019-06-04 05:45:44 -04:00
|
|
|
this.checkbox.addEventListener('change', this.stateChange.bind(this));
|
2018-03-18 11:13:46 -04:00
|
|
|
}
|
|
|
|
|
2019-06-04 05:45:44 -04:00
|
|
|
stateChange() {
|
|
|
|
this.input.value = (this.checkbox.checked ? 'true' : 'false');
|
2019-08-18 08:11:30 -04:00
|
|
|
|
|
|
|
// Dispatch change event from hidden input so they can be listened to
|
|
|
|
// like a normal checkbox.
|
|
|
|
const changeEvent = new Event('change');
|
|
|
|
this.input.dispatchEvent(changeEvent);
|
2018-03-18 11:13:46 -04:00
|
|
|
}
|
|
|
|
|
2023-04-18 17:20:02 -04:00
|
|
|
}
|