X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/4310d34135243e91fdacd960a825f60f0231621e..b37e84dc101e8ca5c80bcd731adb9cc19b9e08ab:/resources/js/components/custom-checkbox.js

diff --git a/resources/js/components/custom-checkbox.js b/resources/js/components/custom-checkbox.js
index 65ce8c194..99804c4bc 100644
--- 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