X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/b94b945fb03e21a1997cfe6e50148967586cb26d..HEAD:/resources/js/components/image-picker.js

diff --git a/resources/js/components/image-picker.js b/resources/js/components/image-picker.js
index 7455fa622..d25e01dd7 100644
--- a/resources/js/components/image-picker.js
+++ b/resources/js/components/image-picker.js
@@ -1,21 +1,25 @@
+import {Component} from './component';
 
-class ImagePicker {
+export class ImagePicker extends Component {
 
-    constructor(elem) {
-        this.elem = elem;
-        this.imageElem = elem.querySelector('img');
-        this.imageInput = elem.querySelector('input[type=file]');
-        this.resetInput = elem.querySelector('input[data-reset-input]');
-        this.removeInput = elem.querySelector('input[data-remove-input]');
+    setup() {
+        this.imageElem = this.$refs.image;
+        this.imageInput = this.$refs.imageInput;
+        this.resetInput = this.$refs.resetInput;
+        this.removeInput = this.$refs.removeInput;
+        this.resetButton = this.$refs.resetButton;
+        this.removeButton = this.$refs.removeButton || null;
 
-        this.defaultImage = elem.getAttribute('data-default-image');
+        this.defaultImage = this.$opts.defaultImage;
 
-        const resetButton = elem.querySelector('button[data-action="reset-image"]');
-        resetButton.addEventListener('click', this.reset.bind(this));
+        this.setupListeners();
+    }
+
+    setupListeners() {
+        this.resetButton.addEventListener('click', this.reset.bind(this));
 
-        const removeButton = elem.querySelector('button[data-action="remove-image"]');
-        if (removeButton) {
-            removeButton.addEventListener('click', this.removeImage.bind(this));
+        if (this.removeButton) {
+            this.removeButton.addEventListener('click', this.removeImage.bind(this));
         }
 
         this.imageInput.addEventListener('change', this.fileInputChange.bind(this));
@@ -27,7 +31,7 @@ class ImagePicker {
             this.removeInput.setAttribute('disabled', 'disabled');
         }
 
-        for (let file of this.imageInput.files) {
+        for (const file of this.imageInput.files) {
             this.imageElem.src = window.URL.createObjectURL(file);
         }
         this.imageElem.classList.remove('none');
@@ -51,5 +55,3 @@ class ImagePicker {
     }
 
 }
-
-export default ImagePicker;
\ No newline at end of file