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

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