Updated another set of components

[bookstack] / resources / js / components / custom-checkbox.js

diff --git a/resources/js/components/custom-checkbox.js b/resources/js/components/custom-checkbox.js
index 65ce8c194d641db09d37ae437742611e909a1ebe..99804c4bcea010165ad4298f405860e904b9689d 100644 (file)
--- a/resources/js/components/custom-checkbox.js
+++ b/resources/js/components/custom-checkbox.js
@@ -1,18 +1,19 @@
+import {Component} from "./component";
 
-class CustomCheckbox {
+export class CustomCheckbox extends Component {
 
-    constructor(elem) {
-        this.elem = elem;
-        this.checkbox = elem.querySelector('input[type=checkbox]');
-        this.display = elem.querySelector('[role="checkbox"]');
+    setup() {
+        this.container = this.$el;
+        this.checkbox = this.container.querySelector('input[type=checkbox]');
+        this.display = this.container.querySelector('[role="checkbox"]');
 
         this.checkbox.addEventListener('change', this.stateChange.bind(this));
-        this.elem.addEventListener('keydown', this.onKeyDown.bind(this));
+        this.container.addEventListener('keydown', this.onKeyDown.bind(this));
     }
 
     onKeyDown(event) {
-        const isEnterOrPress = event.keyCode === 32 || event.keyCode === 13;
-        if (isEnterOrPress) {
+        const isEnterOrSpace = event.key === ' ' || event.key === 'Enter';
+        if (isEnterOrSpace) {
             event.preventDefault();
             this.toggle();
         }
@@ -29,6 +30,4 @@ class CustomCheckbox {
         this.display.setAttribute('aria-checked', checked);
     }
 
-}
-
-export default CustomCheckbox;
\ No newline at end of file
+}
\ No newline at end of file