Refactored image picker to js component

Also adjusted default cover image size

app/Book.php

@@ -17,14 +17,14 @@ class Book extends Entity
         }
         return baseUrl('/books/' . urlencode($this->slug));
     }
-    
+
     /**
      * Returns book cover image, if book cover not exists return default cover image.
-     * @param int $height - Height of the image
      * @param int $width - Width of the image
+     * @param int $height - Height of the image
      * @return string
      */
-    public function getBookCover($height = 170, $width = 300)
+    public function getBookCover($width = 440, $height = 250)
     {
         $default = baseUrl('/book_default_cover.png');
         if (!$this->image_id) return $default;
@@ -36,7 +36,7 @@ class Book extends Entity
         }
         return $cover;
     }
-    
+
     /**
      * Get the cover image of the book
      * @return \Illuminate\Database\Eloquent\Relations\BelongsTo

resources/assets/js/components/image-picker.js

@@ -0,0 +1,59 @@
+
+class ImagePicker {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.imageElem = elem.querySelector('img');
+        this.input = elem.querySelector('input');
+
+        this.isUsingIds = elem.getAttribute('data-current-id') !== '';
+        this.isResizing = elem.getAttribute('data-resize-height') && elem.getAttribute('data-resize-width');
+        this.isResizeCropping = elem.getAttribute('data-resize-crop') !== '';
+
+        let selectButton = elem.querySelector('button[data-action="show-image-manager"]');
+        selectButton.addEventListener('click', this.selectImage.bind(this));
+
+        let resetButton = elem.querySelector('button[data-action="reset-image"]');
+        resetButton.addEventListener('click', this.reset.bind(this));
+
+        let removeButton = elem.querySelector('button[data-action="remove-image"]');
+        if (removeButton) {
+            removeButton.addEventListener('click', this.removeImage.bind(this));
+        }
+    }
+
+    selectImage() {
+        window.ImageManager.show(image => {
+            if (!this.isResizing) {
+                this.setImage(image);
+                return;
+            }
+
+            let requestString = '/images/thumb/' + image.id + '/' + this.elem.getAttribute('data-resize-width') + '/' + this.elem.getAttribute('data-resize-height') + '/' + (this.isResizeCropping ? 'true' : 'false');
+
+            window.$http.get(window.baseUrl(requestString)).then(resp => {
+                image.url = resp.data.url;
+                this.setImage(image);
+            });
+        });
+    }
+
+    reset() {
+        this.setImage({id: 0, url: this.elem.getAttribute('data-default-image')});
+    }
+
+    setImage(image) {
+        this.imageElem.src = image.url;
+        this.input.value = this.isUsingIds ? image.id : image.url;
+        this.imageElem.classList.remove('none');
+    }
+
+    removeImage() {
+        this.imageElem.src = this.elem.getAttribute('data-default-image');
+        this.imageElem.classList.add('none');
+        this.input.value = 'none';
+    }
+
+}
+
+module.exports = ImagePicker;

resources/assets/js/components/index.js

@@ -14,6 +14,7 @@ let componentMapping = {
     'wysiwyg-editor': require('./wysiwyg-editor'),
     'markdown-editor': require('./markdown-editor'),
     'editor-toolbox': require('./editor-toolbox'),
+    'image-picker': require('./image-picker'),
 };
 
 window.components = {};

resources/lang/en/common.php

@@ -19,7 +19,7 @@ return [
     'description' => 'Description',
     'role' => 'Role',
     'cover_image' => 'Cover image',
-    'cover_image_description' => 'This image should be approx 300x170px.',
+    'cover_image_description' => 'This image should be approx 440x250px.',
     
     /**
      * Actions
@@ -49,6 +49,7 @@ return [
     'toggle_details' => 'Toggle Details',
     'toggle_thumbnails' => 'Toggle Thumbnails',
     'details' => 'Details',
+
     /**
      * Header
      */

resources/views/books/form.blade.php

@@ -16,7 +16,7 @@
         @include('components.image-picker', [
             'resizeHeight' => '512',
             'resizeWidth' => '512',
-            'showRemove' => true,
+            'showRemove' => false,
             'defaultImage' => baseUrl('/book_default_cover.png'),
             'currentImage' => @isset($model) ? $model->getBookCover() : baseUrl('/book_default_cover.png') ,
             'currentId' => @isset($model) ? $model->image_id : 0,

resources/views/components/image-picker.blade.php

@@ -14,53 +14,4 @@
     @endif
 
     <input type="hidden" name="{{$name}}" id="{{$name}}" value="{{ isset($currentId) && ($currentId !== 0 && $currentId !== false) ? $currentId : $currentImage}}">
-</div>
+</div>
-
-<script>
-    (function(){
-
-        var picker = document.querySelector('[image-picker="{{$name}}"]');
-        picker.addEventListener('click', function(event) {
-            if (event.target.nodeName.toLowerCase() !== 'button') return;
-             var button = event.target;
-             var action = button.getAttribute('data-action');
-             var resize = picker.getAttribute('data-resize-height') && picker.getAttribute('data-resize-width');
-             var usingIds = picker.getAttribute('data-current-id') !== '';
-             var resizeCrop = picker.getAttribute('data-resize-crop') !== '';
-             var imageElem = picker.querySelector('img');
-             var input = picker.querySelector('input');
-
-             function setImage(image) {
-                 if (image === 'none') {
-                     imageElem.src = picker.getAttribute('data-default-image');
-                     imageElem.classList.add('none');
-                     input.value = 'none';
-                     return;
-                 }
-                 imageElem.src = image.url;
-                 input.value = usingIds ? image.id : image.url;
-                 imageElem.classList.remove('none');
-             }
-
-             if (action === 'show-image-manager') {
-                 window.ImageManager.show((image) => {
-                     if (!resize) {
-                         setImage(image);
-                         return;
-                     }
-                     var requestString = '/images/thumb/' + image.id + '/' + picker.getAttribute('data-resize-width') + '/' + picker.getAttribute('data-resize-height') + '/' + (resizeCrop ? 'true' : 'false');
-                     $.get(window.baseUrl(requestString), resp => {
-                         image.url = resp.url;
-                         setImage(image);
-                     });
-                 });
-             } else if (action === 'reset-image') {
-                 setImage({id: 0, url: picker.getAttribute('data-default-image')});
-             } else if (action === 'remove-image') {
-                 setImage('none');
-             }
-
-            });
-
-    })();
-</script>

resources/views/partials/custom-styles.blade.php

@@ -7,6 +7,7 @@
     }
     .button-base, .button, input[type="button"], input[type="submit"] {
         background-color: {{ setting('app-color') }};
+        border-color: {{ setting('app-color') }};
     }
     .button-base:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover, .button:focus {
         background-color: {{ setting('app-color') }};