From 2a00c64fead1e162dc8d7cf9070e6060b8788889 Mon Sep 17 00:00:00 2001
From: A1Gard <a1gard@4xmen.ir>
Date: Wed, 10 Jul 2024 08:14:14 +0330
Subject: [PATCH] added open file by click on image [UX]

---
 resources/js/panel/general-events.js          | 45 +++++++++++--------
 resources/sass/panel/_common.scss             |  3 ++
 .../admin/categories/category-form.blade.php  |  4 +-
 .../admin/galleries/gallery-form.blade.php    |  6 +--
 .../views/admin/groups/group-form.blade.php   |  4 +-
 .../views/admin/posts/post-form.blade.php     |  2 +-
 .../views/admin/sliders/slider-form.blade.php |  2 +-
 7 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/resources/js/panel/general-events.js b/resources/js/panel/general-events.js
index ef0b1e8..426c969 100644
--- a/resources/js/panel/general-events.js
+++ b/resources/js/panel/general-events.js
@@ -1,26 +1,11 @@
-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) {
+window.findUrl = function (name, item = null) {
     for (var i = 0; i < window.routesList.length; i++) {
         if (window.routesList[i].name === name) {
-            if (item != null){
+            if (item != null) {
                 return window.routesList[i].url.split('{item}').join(item);
-            }else{
+            } else {
                 return window.routesList[i].url;
             }
         }
@@ -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();
+        });
+    });
+});
diff --git a/resources/sass/panel/_common.scss b/resources/sass/panel/_common.scss
index e74eda6..9f7d200 100644
--- a/resources/sass/panel/_common.scss
+++ b/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;
+}
diff --git a/resources/views/admin/categories/category-form.blade.php b/resources/views/admin/categories/category-form.blade.php
index 1c6fa58..1cf099c 100644
--- a/resources/views/admin/categories/category-form.blade.php
+++ b/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
diff --git a/resources/views/admin/galleries/gallery-form.blade.php b/resources/views/admin/galleries/gallery-form.blade.php
index 724385a..8a4f9be 100644
--- a/resources/views/admin/galleries/gallery-form.blade.php
+++ b/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">
@@ -143,7 +143,7 @@
                                 <a href="{{route('admin.image.destroy',$img->id)}}" class="btn btn-danger delete-confirm rm-img ms-2">
                                     <i class="ri-delete-bin-6-line"></i>
                                 </a>
-                                <img src="{{$img->imgUrl()}}" class="img-squire" alt="">
+                                <img src="{{$img->imgUrl()}}"  class="img-squire" alt="">
                                 <div class="row mt-2">
                                     <div class="col-md-10">
                                         <input type="text" class="form-control" name="titles[{{$img->id}}]"
diff --git a/resources/views/admin/groups/group-form.blade.php b/resources/views/admin/groups/group-form.blade.php
index 28c2c54..5895f97 100644
--- a/resources/views/admin/groups/group-form.blade.php
+++ b/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
diff --git a/resources/views/admin/posts/post-form.blade.php b/resources/views/admin/posts/post-form.blade.php
index 2629391..d1471e4 100644
--- a/resources/views/admin/posts/post-form.blade.php
+++ b/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>
diff --git a/resources/views/admin/sliders/slider-form.blade.php b/resources/views/admin/sliders/slider-form.blade.php
index cc3c66f..d141f04 100644
--- a/resources/views/admin/sliders/slider-form.blade.php
+++ b/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