Refactored image picker to js component

Also adjusted default cover image size

diff --git a/app/Book.php b/app/Book.php
index 15fbbe5ff737a2f692a35552ecdf62b5669a3017..3fb87b4c519a11804815532932edf59c25093a6f 100644 (file)
--- a/app/Book.php
+++ b/app/Book.php
@@ -17,14 +17,14 @@ class Book extends Entity
         }
         return baseUrl('/books/' . urlencode($this->slug));
     }
         }
         return baseUrl('/books/' . urlencode($this->slug));
     }

-    
+

     /**
      * Returns book cover image, if book cover not exists return default cover image.
     /**
      * 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 $width - Width of the image

+     * @param int $height - Height of the image

      * @return string
      */
      * @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;
     {
         $default = baseUrl('/book_default_cover.png');
         if (!$this->image_id) return $default;


@@ -36,7 +36,7 @@ class Book extends Entity
         }
         return $cover;
     }
         }
         return $cover;
     }

-    
+

     /**
      * Get the cover image of the book
      * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     /**
      * Get the cover image of the book
      * @return \Illuminate\Database\Eloquent\Relations\BelongsTo

diff --git a/resources/assets/js/components/image-picker.js b/resources/assets/js/components/image-picker.js
new file mode 100644 (file)
index 0000000..d8fd7cc
--- /dev/null
+++ b/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;
\ No newline at end of file

diff --git a/resources/assets/js/components/index.js b/resources/assets/js/components/index.js
index f37709101088b68ee1da5ee6c4f248e8c6a26fea..4cb16d06afcb6d62bd9da06a0e6e3270349d946b 100644 (file)
--- a/resources/assets/js/components/index.js
+++ b/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'),
     'wysiwyg-editor': require('./wysiwyg-editor'),
     'markdown-editor': require('./markdown-editor'),
     'editor-toolbox': require('./editor-toolbox'),

+    'image-picker': require('./image-picker'),

 };
 
 window.components = {};
 };
 
 window.components = {};

diff --git a/resources/lang/en/common.php b/resources/lang/en/common.php
index 70cfc5701bd3d379d32650d6f9412df399463b40..7cdd7c23e527a8f8b4394bf8a906ff49185d9247 100644 (file)
--- a/resources/lang/en/common.php
+++ b/resources/lang/en/common.php
@@ -19,7 +19,7 @@ return [
     'description' => 'Description',
     'role' => 'Role',
     'cover_image' => 'Cover image',
     '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
     
     /**
      * Actions


@@ -49,6 +49,7 @@ return [
     'toggle_details' => 'Toggle Details',
     'toggle_thumbnails' => 'Toggle Thumbnails',
     'details' => 'Details',
     'toggle_details' => 'Toggle Details',
     'toggle_thumbnails' => 'Toggle Thumbnails',
     'details' => 'Details',

+

     /**
      * Header
      */
     /**
      * Header
      */

diff --git a/resources/views/books/form.blade.php b/resources/views/books/form.blade.php
index 4a443466bbd88a70910f8a9362320496182f3b9a..06eea7ca9f5aeb8c08b4fdaa4103b304addd32e4 100644 (file)
--- a/resources/views/books/form.blade.php
+++ b/resources/views/books/form.blade.php
@@ -16,7 +16,7 @@
         @include('components.image-picker', [
             'resizeHeight' => '512',
             'resizeWidth' => '512',
         @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,
             'defaultImage' => baseUrl('/book_default_cover.png'),
             'currentImage' => @isset($model) ? $model->getBookCover() : baseUrl('/book_default_cover.png') ,
             'currentId' => @isset($model) ? $model->image_id : 0,

diff --git a/resources/views/components/image-picker.blade.php b/resources/views/components/image-picker.blade.php
index 2aa39d3d2639e18ed9150f5f811e12fbc235855c..034b65cc5f64389541f13ac323f12e0dd39604b1 100644 (file)
--- a/resources/views/components/image-picker.blade.php
+++ b/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}}">
     @endif
 
     <input type="hidden" name="{{$name}}" id="{{$name}}" value="{{ isset($currentId) && ($currentId !== 0 && $currentId !== false) ? $currentId : $currentImage}}">

-</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>
\ No newline at end of file
+</div>
\ No newline at end of file

diff --git a/resources/views/partials/custom-styles.blade.php b/resources/views/partials/custom-styles.blade.php
index c13051df4f3a363c8bbcfbf140bad183cffbca99..a02f529c7b5351aa3b0a18d188689d3cd48e1334 100644 (file)
--- a/resources/views/partials/custom-styles.blade.php
+++ b/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') }};
     }
     .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') }};
     }
     .button-base:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover, .button:focus {
         background-color: {{ setting('app-color') }};