Added content-perms API examples and docs tweaks

[bookstack] / resources / js / components / image-picker.js

diff --git a/resources/js/components/image-picker.js b/resources/js/components/image-picker.js
index 7455fa622379a798ae102dd65dc7c72aed28417e..03d9567d22e331c82a04c75bc1840e207c5d1eec 100644 (file)
--- 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));
@@ -50,6 +54,4 @@ class ImagePicker {
         this.resetInput.setAttribute('disabled', 'disabled');
     }
 
-}
-
-export default ImagePicker;
\ No newline at end of file
+}
\ No newline at end of file