added open file by click on image [UX]

resources/js/panel/general-events.js

@@ -1,18 +1,3 @@
-document.addEventListener('click', function(e) {
-    if (e.target.classList.contains('delete-confirm')) {
-        if (!confirm('Are you sure you want to delete this item?')) { // WIP Need to translate
-           e.preventDefault();
-        }
-    }
-});
-
-document.querySelectorAll('.delete-confirm')?.forEach(function (el) {
-  el.addEventListener('click',function (e) {
-      if (!confirm('Are you sure you want to delete this item?')) { // WIP Need to translate
-          e.preventDefault();
-      }
-  });
-});
 
 
 window.findUrl = function (name, item = null) {
@@ -30,3 +15,27 @@ window.findUrl = function (name,item = null) {
 
 
 
+document.addEventListener('DOMContentLoaded', () => {
+
+    document.addEventListener('click', function (e) {
+        if (e.target.classList.contains('delete-confirm')) {
+            if (!confirm('Are you sure you want to delete this item?')) { // WIP Need to translate
+                e.preventDefault();
+            }
+        }
+    });
+
+    document.querySelectorAll('.delete-confirm')?.forEach(function (el) {
+        el.addEventListener('click', function (e) {
+            if (!confirm('Are you sure you want to delete this item?')) { // WIP Need to translate
+                e.preventDefault();
+            }
+        });
+    });
+
+    document.querySelectorAll('[data-open-file]')?.forEach(function (el) {
+        el.addEventListener('click', function () {
+            document.querySelector(this.getAttribute('data-open-file')).click();
+        });
+    });
+});

resources/sass/panel/_common.scss

@@ -194,3 +194,6 @@ a.btn,a.action-btn,a.circle-btn{
         margin: 1rem auto;
     }
 }
+[data-open-file]{
+    cursor: pointer;
+}

resources/views/admin/categories/category-form.blade.php

@@ -30,7 +30,7 @@
                         <i class="ri-image-2-line"></i>
                         {{__('Feature image')}}
                     </h3>
-                    <img src="{{$item->imgUrl()}}" alt="{{$item->name}}" class="img-fluid mb-4">
+                    <img src="{{$item->imgUrl()}}" alt="{{$item->name}}" data-open-file="#image" class="img-fluid mb-4">
 
                 </div>
                 <div class="item-list mb-3">
@@ -38,7 +38,7 @@
                         <i class="ri-image-2-line"></i>
                         {{__('Background image')}}
                     </h3>
-                    <img src="{{$item->bgUrl()}}" alt="{{$item->name}}" class="img-fluid mb-4">
+                    <img src="{{$item->bgUrl()}}" data-open-file="#bg" alt="{{$item->name}}" class="img-fluid mb-4">
 
                 </div>
             @endif

resources/views/admin/galleries/gallery-form.blade.php

@@ -36,7 +36,7 @@
                         {{__("Index image")}}
                     </h3>
                     <div class="pb-4">
-                        <img src="{{$item->imgUrl()}}" class="img-fluid" alt="{{$item->title}}">
+                        <img src="{{$item->imgUrl()}}" data-open-file="#image" class="img-fluid" alt="{{$item->title}}">
                     </div>
                 </div>
             @endif
@@ -111,7 +111,7 @@
                             </label>
                             <input name="image" accept=".jpg,.png,.jpeg,.gif,.svg" type="file"
                                    class="form-control @error('image') is-invalid @enderror"
-                                   placeholder="{{__('Index image')}}" value="{{old('image',$item->image??null)}}"/>
+                                   placeholder="{{__('Index image')}}" id="image"/>
                         </div>
                     </div>
                     <div class="col-md-12">

resources/views/admin/groups/group-form.blade.php

@@ -29,7 +29,7 @@
                         <i class="ri-image-2-line"></i>
                         {{__('Feature image')}}
                     </h3>
-                    <img src="{{$item->imgUrl()}}" alt="{{$item->name}}" class="img-fluid">
+                    <img src="{{$item->imgUrl()}}" data-open-file="#image" alt="{{$item->name}}" class="img-fluid">
 
                 </div>
                 <div class="item-list mb-3">
@@ -37,7 +37,7 @@
                         <i class="ri-image-2-line"></i>
                         {{__('Background image')}}
                     </h3>
-                    <img src="{{$item->bgUrl()}}" alt="{{$item->name}}" class="img-fluid">
+                    <img src="{{$item->bgUrl()}}" data-open-file="#bg" alt="{{$item->name}}" class="img-fluid">
 
                 </div>
             @endif

resources/views/admin/posts/post-form.blade.php

@@ -29,7 +29,7 @@
                         <i class="ri-image-2-line"></i>
                         {{__("Index image")}}
                     </h3>
-                    <div>
+                    <div data-open-file="#customFile">
                         <img src="{{$item->imgUrl()}}" class="img-fluid" alt="{{$item->title}}">
                     </div>
                 </div>

resources/views/admin/sliders/slider-form.blade.php

@@ -30,7 +30,7 @@
                         {{__("Preview")}}
                     </h3>
                     <div class="p2 pb-5">
-                        <img src="{{$item->imgUrl()}}" class="img-fluid" alt="image">
+                        <img src="{{$item->imgUrl()}}" data-open-file="#cover" class="img-fluid" alt="image">
                     </div>
                 </div>
             @endif