BookStack Code Mirror - bookstack/blob - resources/js/components/custom-checkbox.js

   1
   2 class CustomCheckbox {
   3
   4     constructor(elem) {
   5         this.elem = elem;
   6         this.checkbox = elem.querySelector('input[type=checkbox]');
   7         this.display = elem.querySelector('[role="checkbox"]');
   8
   9         this.checkbox.addEventListener('change', this.stateChange.bind(this));
  10         this.elem.addEventListener('keydown', this.onKeyDown.bind(this));
  11     }
  12
  13     onKeyDown(event) {
  14         const isEnterOrPress = event.keyCode === 32 || event.keyCode === 13;
  15         if (isEnterOrPress) {
  16             event.preventDefault();
  17             this.toggle();
  18         }
  19     }
  20
  21     toggle() {
  22         this.checkbox.checked = !this.checkbox.checked;
  23         this.checkbox.dispatchEvent(new Event('change'));
  24         this.stateChange();
  25     }
  26
  27     stateChange() {
  28         const checked = this.checkbox.checked ? 'true' : 'false';
  29         this.display.setAttribute('aria-checked', checked);
  30     }
  31
  32 }
  33
  34 export default CustomCheckbox;