Merge pull request #1453 from moonshine-software/image-extra-popup-data

feat: Extra data for Image field
moonshine-software · Jan 9, 2025 · 21bf804 · 21bf804
2 parents c810bad + 84d2d97
commit 21bf804
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 7 deletions.
diff --git a/src/Support/src/DTOs/FileItem.php b/src/Support/src/DTOs/FileItem.php
@@ -15,6 +15,7 @@ public function __construct(
         private string $rawValue,
         private string $name,
         private ComponentAttributesBagContract $attributes = new MoonShineComponentAttributeBag(),
+        private ?FileItemExtra $extra = null,
     ) {
     }
 
@@ -33,6 +34,11 @@ public function getName(): string
         return $this->name;
     }
 
+    public function getExtra(): ?FileItemExtra
+    {
+        return $this->extra;
+    }
+
     public function getAttributes(): ComponentAttributesBagContract
     {
         return $this->attributes;
@@ -45,6 +51,7 @@ public function toArray(): array
             'raw_value' => $this->getRawValue(),
             'name' => $this->getName(),
             'attributes' => $this->getAttributes(),
+            'extra' => $this->getExtra()?->toArray(),
         ];
     }
 }
diff --git a/src/Support/src/DTOs/FileItemExtra.php b/src/Support/src/DTOs/FileItemExtra.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MoonShine\Support\DTOs;
+
+use Illuminate\Contracts\Support\Arrayable;
+
+final readonly class FileItemExtra implements Arrayable
+{
+    public function __construct(
+        private bool $wide,
+        private bool $auto,
+        private ?string $styles = null,
+    ) {
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'wide' => $this->wide,
+            'auto' => $this->auto,
+            'content_styles' => $this->styles ?? '',
+        ];
+    }
+}
diff --git a/src/UI/resources/views/components/thumbnails.blade.php b/src/UI/resources/views/components/thumbnails.blade.php
@@ -11,7 +11,13 @@
             <img class="h-full w-full object-cover"
                  src="{{ $value['full_path'] }}"
                  alt="{{ $value['name'] ?? $alt }}"
-                 @click.stop="$dispatch('img-popup', {open: true, src: '{{ $value['full_path']  }}' })"
+                 @click.stop="$dispatch('img-popup', {
+                    open: true,
+                    src: '{{ $value['full_path']  }}',
+                    wide: {{ isset($value['extra']['wide']) && $value['extra']['wide'] ? 'true' : 'false'  }},
+                    auto: {{ isset($value['extra']['auto']) && $value['extra']['auto'] ? 'true' : 'false'  }},
+                    styles: '{{ $value['extra']['content_styles'] ?? ''  }}'
+                 })"
             >
         </div>
     </div>
@@ -25,7 +31,13 @@
                     class="h-full w-full object-cover"
                     src="{{ $value['full_path'] }}"
                     alt="{{ $value['name'] ?? $alt }}"
-                    @click.stop="$dispatch('img-popup', {open: true, src: '{{ $value['full_path']  }}' })"
+                    @click.stop="$dispatch('img-popup', {
+                        open: true,
+                        src: '{{ $value['full_path']  }}',
+                        wide: {{ isset($value['extra']['wide']) && $value['extra']['wide'] ? 'true' : 'false'  }},
+                        auto: {{ isset($value['extra']['auto']) && $value['extra']['auto'] ? 'true' : 'false'  }},
+                        styles: '{{ $value['extra']['content_styles'] ?? ''  }}'
+                    })"
                 />
             </div>
         @endforeach

diff --git a/src/UI/resources/views/shared/img-popup.blade.php b/src/UI/resources/views/shared/img-popup.blade.php
@@ -1,6 +1,6 @@
-<div x-data="{ open : false, src : ''}">
+<div x-data="{ open : false, src : '', auto: true, wide: false, styles: ''}">
     <template
-        @img-popup.window="open = true; src = $event.detail.src;"
+        @img-popup.window="open = true; src = $event.detail.src; auto = $event.detail.auto; wide = $event.detail.wide; styles = $event.detail.styles"
         x-if="open"
         x-teleport="body"
     >
@@ -18,7 +18,9 @@ class="modal"
                 role="dialog"
                 @click.self="open=false"
             >
-                <div class="modal-dialog modal-dialog-auto">
+                <div class="modal-dialog"
+                    :class="{'modal-dialog-auto': auto, 'modal-dialog-xl': wide}"
+                >
                     <div class="modal-content">
                         <div class="modal-header">
                             <button type="button"
@@ -36,6 +38,7 @@ class="btn btn-close"
                             <img @click.outside="open = false"
                                  src=""
                                  :src="src"
+                                 :style="styles"
                                  alt=""
                             />
                         </div>

diff --git a/src/UI/src/Fields/File.php b/src/UI/src/Fields/File.php
@@ -79,6 +79,7 @@ protected function getFiles(): Collection
                     rawValue: data_get($this->toValue(), $index, $this->toValue()),
                     name: (string) \call_user_func($this->resolveNames(), $path, $index, $this),
                     attributes: \call_user_func($this->resolveItemAttributes(), $path, $index, $this),
+                    extra: \call_user_func($this->resolveExtraAttributes(), $path, $index, $this),
                 ),
             ]);
     }

diff --git a/src/UI/src/Traits/Fields/FileTrait.php b/src/UI/src/Traits/Fields/FileTrait.php
@@ -8,6 +8,7 @@
 use Illuminate\Support\Collection;
 use MoonShine\Contracts\UI\ComponentAttributesBagContract;
 use MoonShine\Support\Components\MoonShineComponentAttributeBag;
+use MoonShine\Support\DTOs\FileItemExtra;
 use MoonShine\UI\Traits\WithStorage;
 
 trait FileTrait
@@ -26,9 +27,12 @@ trait FileTrait
     /** @var ?Closure(string, int): string */
     protected ?Closure $names = null;
 
-    /** @var ?Closure(string, int): string */
+    /** @var ?Closure(string, int): array */
     protected ?Closure $itemAttributes = null;
 
+    /** @var ?Closure(string, int): ?FileItemExtra */
+    protected ?Closure $extraAttributes = null;
+
     /** @var ?Closure(static): Collection */
     protected ?Closure $remainingValuesResolver = null;
 
@@ -57,7 +61,7 @@ public function resolveNames(): Closure
     }
 
     /**
-     * @param  Closure(string $filename, int $index): string  $callback
+     * @param  Closure(string $filename, int $index): array  $callback
      */
     public function itemAttributes(Closure $callback): static
     {
@@ -82,6 +86,30 @@ public function resolveItemAttributes(): Closure
         };
     }
 
+    /**
+     * @param  Closure(string $filename, int $index): ?FileItemExtra  $callback
+     */
+    public function extraAttributes(Closure $callback): static
+    {
+        $this->extraAttributes = $callback;
+
+        return $this;
+    }
+
+    /**
+     * @return Closure(string $filename, int $index): ?FileItemExtra
+     */
+    public function resolveExtraAttributes(): Closure
+    {
+        return function (string $filename, int $index = 0): ?FileItemExtra {
+            if (\is_null($this->extraAttributes)) {
+                return null;
+            }
+
+            return \call_user_func($this->extraAttributes, $filename, $index);
+        };
+    }
+
     public function keepOriginalFileName(): static
     {
         $this->keepOriginalFileName = true;