34 lines
928 B
JavaScript
34 lines
928 B
JavaScript
|
|
||
|
|
class CustomCheckbox {
|
||
|
|
|
||
|
|
constructor(elem) {
|
||
|
|
this.elem = elem;
|
||
|
|
this.checkbox = elem.querySelector('input[type=checkbox]');
|
||
|
|
this.display = elem.querySelector('[role="checkbox"]');
|
||
|
|
|
||
|
|
this.checkbox.addEventListener('change', this.stateChange.bind(this));
|
||
|
|
this.elem.addEventListener('keydown', this.onKeyDown.bind(this));
|
||
|
|
}
|
||
|
|
|
||
|
|
onKeyDown(event) {
|
||
|
|
const isEnterOrPress = event.keyCode === 32 || event.keyCode === 13;
|
||
|
|
if (isEnterOrPress) {
|
||
|
|
event.preventDefault();
|
||
|
|
this.toggle();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
toggle() {
|
||
|
|
this.checkbox.checked = !this.checkbox.checked;
|
||
|
|
this.checkbox.dispatchEvent(new Event('change'));
|
||
|
|
this.stateChange();
|
||
|
|
}
|
||
|
|
|
||
|
|
stateChange() {
|
||
|
|
const checked = this.checkbox.checked ? 'true' : 'false';
|
||
|
|
this.display.setAttribute('aria-checked', checked);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
export default CustomCheckbox;
|