Add setting to enable/disable square display

mansoorkhan96 · Mar 29, 2024 · bc9a8ac · bc9a8ac
1 parent aab6ebf
commit bc9a8ac
Show file tree

Hide file tree

Showing 11 changed files with 147 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 
 Unsplash gallery for Filament. Search and pick any image from Unsplash.com, specify which size to use.
 
-![](./screenshot.jpeg)
+![](./screenshot.jpg)
 
 ## Installation
 
@@ -97,6 +97,29 @@ Forms\Components\FileUpload::make('featured_image')
     )
 ```
 
+# Enable/Disable Square Mode
+
+You can choose to dispaly images in square which uses `aspect-square` class from Tailwind CSS or disable it to display images in original height.
+
+Update use_square_display option in `.env` to apply this setting globally.
+
+```php
+'use_square_display' => env('UNSPLASH_PICKER_USE_SQUARE_DISPLAY', true),
+```
+
+Or, You can disable this setting for each `UnsplashPickerAction` by appending `->useSquareDisplay(false)` method
+
+```php
+Forms\Components\FileUpload::make('featured_image')
+    ->image()
+    ->hintAction(
+        UnsplashPickerAction::make()
+            ->thumbnail()
+            ->perPage(20)
+            ->useSquareDisplay(false)
+    )
+```
+
 ## Customization
 
 The `UnsplashPickerAction` is simple Filament Form Action and you append all the available methods. The Image picker component is a livewire component, you can extend and override the methods.

diff --git a/config/unsplash-picker.php b/config/unsplash-picker.php
@@ -3,4 +3,5 @@
 return [
     'unsplash_client_id' => env('UNSPLASH_CLIENT_ID'),
     'per_page' => env('UNSPLASH_PICKER_PER_PAGE', 20),
+    'use_square_display' => env('UNSPLASH_PICKER_USE_SQUARE_DISPLAY', true),
 ];
diff --git a/resources/dist/unsplash-picker.css b/resources/dist/unsplash-picker.css
diff --git a/resources/lang/en/actions.php b/resources/lang/en/actions.php
diff --git a/resources/lang/en/unsplash-picker.php b/resources/lang/en/unsplash-picker.php
@@ -8,4 +8,5 @@
     'empty_search' => 'Please type in search box to find results.',
     'no_results' => 'Sorry, your search didn\'t return any results.',
     'try_again' => 'Please try a different search.',
+    'square_mode' => 'Square Mode',
 ];
diff --git a/resources/views/livewire/unsplash-picker.blade.php b/resources/views/livewire/unsplash-picker.blade.php
@@ -0,0 +1,69 @@
+<div>
+    <div
+        class="mb-4"
+        x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('unsplash-picker', 'mansoor/unsplash-picker'))]"
+    >
+        {{ $this->form }}
+    </div>
+
+    <div>
+        @if (blank($search))
+            <p class="text-center">{{ __('unsplash-picker::unsplash-picker.empty_search') }}</p>
+        @else
+            <div @class([
+                'grid grid-cols-3 lg:grid-cols-4 gap-4' =>
+                    filled($this->getImages) && $this->shouldUseSquareDisplay,
+                'columns-3 space-y-4 lg:columns-4' =>
+                    filled($this->getImages) && !$this->shouldUseSquareDisplay,
+            ])>
+                @forelse ($this->getImages as $item)
+                    <div
+                        x-data="{ picked: false }"
+                        class="group relative w-full cursor-pointer overflow-hidden rounded-lg ring-gray-950/10 hover:ring-2 hover:ring-primary-600 hover:ring-offset-2 dark:ring-white/20 dark:hover:ring-primary-500 dark:hover:ring-offset-black"
+                    >
+                        <span @click="picked = true; $wire.$parent.callMountedFormComponentAction(@js($item))">
+                            <img
+                                @class([
+                                    'aspect-square' => $this->shouldUseSquareDisplay,
+                                    'pointer-events-none  w-full object-cover',
+                                ])
+                                src="{{ $item['urls']['thumb'] }}"
+                            >
+                        </span>
+
+                        <div
+                            x-show="picked"
+                            x-cloak
+                            class="absolute inset-0 flex h-full w-full flex-col items-center justify-center bg-gray-900 bg-opacity-60"
+                        >
+                            <x-icons.spinner class="h-8 w-8 animate-spin text-white" />
+                        </div>
+
+                        <div
+                            class="absolute bottom-0 hidden w-full items-center justify-center bg-black opacity-80 group-hover:flex">
+                            <a
+                                href="{{ $item['user']['links']['html'] }}?utm_source=goldencarers&utm_medium=referral&utm_campaign=api-credit"
+                                target="_blank"
+                                class="text-xs text-white underline"
+                            >
+                                {{ str($item['user']['name'])->limit(20) }}
+                            </a>
+                        </div>
+                    </div>
+                @empty
+                    <div class="col-span-full text-center">
+                        <p>{{ __('unsplash-picker::unsplash-picker.no_results') }}</p>
+                        <p>{{ __('unsplash-picker::unsplash-picker.try_again') }}</p>
+                    </div>
+                @endforelse
+            </div>
+        @endif
+
+        @if (filled($search) && count($this->getImages) > 0)
+            <div class="mt-6 flex justify-between">
+                {{ $this->previousPageAction }}
+                {{ $this->nextPageAction }}
+            </div>
+        @endif
+    </div>
+</div>
diff --git a/resources/views/unsplash-picker.blade.php b/resources/views/unsplash-picker.blade.php
@@ -1,63 +1 @@
-<div>
-    <div
-        class="mb-4"
-        x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('unsplash-picker', 'mansoor/unsplash-picker'))]"
-    >
-        {{ $this->form }}
-    </div>
-
-    <div>
-        @if (blank($search))
-            <p class="text-center">{{ __('unsplash-picker::unsplash-picker.empty_search') }}</p>
-        @else
-            <div @class([
-                'columns-3 space-y-4 lg:columns-4' => filled($this->getImages),
-            ])>
-                @forelse ($this->getImages as $item)
-                    <div
-                        x-data="{ picked: false }"
-                        class="group relative w-full cursor-pointer overflow-hidden rounded-lg ring-gray-950/10 hover:ring-2 hover:ring-primary-600 hover:ring-offset-2 dark:ring-white/20 dark:hover:ring-primary-500 dark:hover:ring-offset-black"
-                    >
-                        <span @click="picked = true; $wire.$parent.callMountedFormComponentAction(@js($item))">
-                            <img
-                                class="pointer-events-none w-full object-cover"
-                                src="{{ $item['urls']['thumb'] }}"
-                            >
-                        </span>
-
-                        <div
-                            x-show="picked"
-                            x-cloak
-                            class="absolute inset-0 flex h-full w-full flex-col items-center justify-center bg-gray-900 bg-opacity-60"
-                        >
-                            <x-icons.spinner class="h-8 w-8 animate-spin text-white" />
-                        </div>
-
-                        <div
-                            class="absolute bottom-0 hidden w-full items-center justify-center bg-black opacity-80 group-hover:flex">
-                            <a
-                                href="{{ $item['user']['links']['html'] }}?utm_source=goldencarers&utm_medium=referral&utm_campaign=api-credit"
-                                target="_blank"
-                                class="text-xs text-white underline"
-                            >
-                                {{ str($item['user']['name'])->limit(20) }}
-                            </a>
-                        </div>
-                    </div>
-                @empty
-                    <div class="col-span-full text-center">
-                        <p>{{ __('unsplash-picker::unsplash-picker.no_results') }}</p>
-                        <p>{{ __('unsplash-picker::unsplash-picker.try_again') }}</p>
-                    </div>
-                @endforelse
-            </div>
-        @endif
-
-        @if (filled($search) && count($this->getImages) > 0)
-            <div class="mt-6 flex justify-between">
-                {{ $this->previousPageAction }}
-                {{ $this->nextPageAction }}
-            </div>
-        @endif
-    </div>
-</div>
+@livewire('unsplash-picker-component', $options)
diff --git a/screenshot.jpeg b/screenshot.jpeg
diff --git a/screenshot.jpg b/screenshot.jpg
diff --git a/src/Actions/UnsplashPickerAction.php b/src/Actions/UnsplashPickerAction.php
@@ -8,8 +8,6 @@
 use Filament\Forms\Components\FileUpload;
 use Filament\Support\Enums\MaxWidth;
 use Illuminate\Support\Arr;
-use Illuminate\Support\Facades\Blade;
-use Illuminate\Support\HtmlString;
 use Livewire\Component;
 use Livewire\Features\SupportFileUploads\FileUploadConfiguration;
 use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;
@@ -23,6 +21,8 @@ class UnsplashPickerAction extends Action
 
     protected ?int $perPage = null;
 
+    protected ?bool $useSquareDisplay = null;
+
     public static function getDefaultName(): ?string
     {
         return 'unsplash_picker';
@@ -40,7 +40,7 @@ protected function setUp(): void
 
         $this->modalWidth(fn (MountableAction $action): ?MaxWidth => MaxWidth::ScreenLarge);
 
-        $this->modalContent(fn () => new HtmlString(Blade::render("@livewire('unsplash-picker-component', {$this->getOptions()})")));
+        $this->modalContent(fn () => view('unsplash-picker::unsplash-picker', ['options' => $this->getOptions()]));
 
         $this->action($this->uploadImage(...));
     }
@@ -52,6 +52,13 @@ public function perPage(int $perPage): static
         return $this;
     }
 
+    public function useSquareDisplay(bool $useSquareDisplay): static
+    {
+        $this->useSquareDisplay = $useSquareDisplay;
+
+        return $this;
+    }
+
     public function raw(): static
     {
         $this->imageSize = ImageSize::Raw;
@@ -125,15 +132,19 @@ public function getImageSize(): ImageSize
 
     public function getPerPage(): ?int
     {
-        return $this->perPage;
+        return $this->perPage ?? config('unsplash-picker.per_page');
     }
 
-    public function getOptions()
+    public function shouldUseSquareDisplay(): ?bool
     {
-        if (! $this->getPerPage()) {
-            return;
-        }
+        return $this->useSquareDisplay ?? config('unsplash-picker.use_square_display');
+    }
 
-        return "['perPage' => {$this->getPerPage()}]";
+    public function getOptions(): array
+    {
+        return [
+            'perPage' => $this->getPerPage(),
+            'useSquareDisplay' => $this->shouldUseSquareDisplay(),
+        ];
     }
 }
diff --git a/src/Components/UnsplashPickerComponent.php b/src/Components/UnsplashPickerComponent.php
@@ -6,7 +6,9 @@
 use Filament\Actions\Action;
 use Filament\Actions\Concerns\InteractsWithActions;
 use Filament\Actions\Contracts\HasActions;
+use Filament\Forms\Components\Split;
 use Filament\Forms\Components\TextInput;
+use Filament\Forms\Components\Toggle;
 use Filament\Forms\Concerns\InteractsWithForms;
 use Filament\Forms\Contracts\HasForms;
 use Filament\Forms\Form;
@@ -22,7 +24,9 @@ class UnsplashPickerComponent extends Component implements HasActions, HasForms
 
     public string $search = '';
 
-    public ?int $perPage = null;
+    public int $perPage;
+
+    public bool $useSquareDisplay = true;
 
     public int $page = 1;
 
@@ -31,13 +35,24 @@ class UnsplashPickerComponent extends Component implements HasActions, HasForms
     public function form(Form $form): Form
     {
         return $form
+            // ->columns(5)
+            // ->extraAttributes([''])
             ->schema([
-                TextInput::make('search')
-                    ->live(debounce: 300)
-                    ->hiddenLabel()
-                    ->autocomplete(false)
-                    ->autofocus()
-                    ->placeholder(__('unsplash-picker::unsplash-picker.search_for_an_image')),
+                Split::make([
+                    TextInput::make('search')
+                        ->live(debounce: 300)
+                        ->hiddenLabel()
+                        ->autocomplete(false)
+                        ->autofocus()
+                        ->grow()
+                        ->placeholder(__('unsplash-picker::unsplash-picker.search_for_an_image')),
+
+                    Toggle::make('useSquareDisplay')
+                        ->label(__('unsplash-picker::unsplash-picker.square_mode'))
+                        ->default(fn () => dd($this->shouldUseSquareDisplay()))
+                        ->reactive()
+                        ->grow(false),
+                ])->extraAttributes(['class' => 'items-center']),
             ]);
     }
 
@@ -98,11 +113,17 @@ public function getTotalPages(): int
 
     public function getPerPage(): int
     {
-        return $this->perPage ?? config('unsplash-picker.per_page');
+        return $this->perPage;
+    }
+
+    #[Computed]
+    public function shouldUseSquareDisplay(): bool
+    {
+        return $this->useSquareDisplay;
     }
 
     public function render()
     {
-        return view('unsplash-picker::unsplash-picker');
+        return view('unsplash-picker::livewire.unsplash-picker');
     }
 }