X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/7f902e41c7a6a18a754bb889c2655aa4fba736ec..refs/pull/2333/head:/resources/views/components/image-picker.blade.php

diff --git a/resources/views/components/image-picker.blade.php b/resources/views/components/image-picker.blade.php
index 2aa39d3d2..9c2661ccc 100644
--- a/resources/views/components/image-picker.blade.php
+++ b/resources/views/components/image-picker.blade.php
@@ -1,66 +1,32 @@
-<div class="image-picker" image-picker="{{$name}}" data-default-image="{{ $defaultImage }}" data-resize-height="{{ $resizeHeight }}" data-resize-width="{{ $resizeWidth }}" data-current-id="{{ $currentId or '' }}" data-resize-crop="{{ $resizeCrop or '' }}">
-
-    <div>
-        <img @if($currentImage && $currentImage !== 'none') src="{{$currentImage}}" @else src="{{$defaultImage}}" @endif  class="{{$imageClass}} @if($currentImage=== 'none') none @endif" alt="{{ trans('components.image_preview') }}">
+<div class="image-picker @if($errors->has($name)) has-error @endif"
+     image-picker="{{$name}}"
+     data-default-image="{{ $defaultImage }}">
+
+    <div class="grid half">
+        <div class="text-center">
+            <img @if($currentImage && $currentImage !== 'none') src="{{$currentImage}}" @else src="{{$defaultImage}}" @endif  class="{{$imageClass}} @if($currentImage=== 'none') none @endif" alt="{{ trans('components.image_preview') }}">
+        </div>
+        <div class="text-center">
+
+            <input type="file" class="custom-file-input" accept="image/*" name="{{ $name }}" id="{{ $name }}">
+            <label for="{{ $name }}" class="button outline">{{ trans('components.image_select_image') }}</label>
+            <input type="hidden" data-reset-input name="{{ $name }}_reset" value="true" disabled="disabled">
+            @if(isset($removeName))
+                <input type="hidden" data-remove-input name="{{ $removeName }}" value="{{ $removeValue }}" disabled="disabled">
+            @endif
+
+            <br>
+            <button class="text-button text-muted" data-action="reset-image" type="button">{{ trans('common.reset') }}</button>
+
+            @if(isset($removeName))
+                <span class="sep">|</span>
+                <button class="text-button text-muted" data-action="remove-image" type="button">{{ trans('common.remove') }}</button>
+            @endif
+        </div>
     </div>
 
-    <button class="button" type="button" data-action="show-image-manager">{{ trans('components.image_select_image') }}</button>
-    <br>
-    <button class="text-button" data-action="reset-image" type="button">{{ trans('common.reset') }}</button>
-
-    @if ($showRemove)
-        <span class="sep">|</span>
-        <button class="text-button neg" data-action="remove-image" type="button">{{ trans('common.remove') }}</button>
+    @if($errors->has($name))
+        <div class="text-neg text-small">{{ $errors->first($name) }}</div>
     @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