Merge pull request #366 from awcodes/fix/modal-injection

Fix: inject modal to page without teleport
awcodes · Dec 4, 2023 · fcb9839 · fcb9839
2 parents 5295bff + ae04bb0
commit fcb9839
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,12 @@ composer require awcodes/filament-curator
 php artisan curator:install
 ```
 
+***If you are using the stand-alone forms package then you will need to include the Curator modal in your layout file, typically you would place this, before the closing `body` tag.***
+
+```html
+<x-curator::modals.modal />
+```
+
 In an effort to align with Filament's theming methodology you will need to use a custom theme to use this plugin.
 
 > **Note**
@@ -510,8 +516,6 @@ media item, only the ones where you're trying to change the focal point, etc.
 @endif
 ```
 
-
-
 ### Custom Model
 
 If you want to use your own model for your media you can extend Curator's `Media` model with your own and set it in the config.

diff --git a/resources/views/components/forms/picker.blade.php b/resources/views/components/forms/picker.blade.php
@@ -80,15 +80,15 @@ class="flex items-center justify-center flex-none w-8 h-8 transition text-gray-4
 
                                     <div class="flex items-center justify-center flex-none w-8 h-8">
                                         <x-filament-actions::group
-                                        :actions="[
-                                            $getAction('view')(['url' => $item['url']]),
-                                            $getAction('edit')(['id' => $item['id']]),
-                                            $getAction('download')(['uuid' => $uuid]),
-                                            $getAction('remove')(['uuid' => $uuid]),
-                                        ]"
-                                        color="gray"
-                                        size="xs"
-                                        dropdown-placement="bottom-end"
+                                            :actions="[
+                                                $getAction('view')(['url' => $item['url']]),
+                                                $getAction('edit')(['id' => $item['id']]),
+                                                $getAction('download')(['uuid' => $uuid]),
+                                                $getAction('remove')(['uuid' => $uuid]),
+                                            ]"
+                                            color="gray"
+                                            size="xs"
+                                            dropdown-placement="bottom-end"
                                         />
                                     </div>
                                 </div>
@@ -184,16 +184,5 @@ class="flex items-center justify-center flex-none w-10 h-10 transition text-gray
                 {{ $getAction('removeAll') }}
             @endif
         </div>
-
-        @once
-        <template x-teleport="body">
-            <x-filament::modal id="curator-panel" width="screen" class="curator-panel" displayClasses="block">
-                <x-slot name="heading">
-                    {{ __('curator::views.panel.heading') }}
-                </x-slot>
-                <livewire:curator-panel/>
-            </x-filament::modal>
-        </template>
-        @endonce
     </div>
 </x-dynamic-component>
diff --git a/resources/views/components/modals/modal.blade.php b/resources/views/components/modals/modal.blade.php
@@ -0,0 +1,6 @@
+<x-filament::modal id="curator-panel" width="screen" class="curator-panel" displayClasses="block">
+    <x-slot name="heading">
+        {{ __('curator::views.panel.heading') }}
+    </x-slot>
+    <livewire:curator-panel/>
+</x-filament::modal>
diff --git a/src/CuratorServiceProvider.php b/src/CuratorServiceProvider.php
@@ -5,9 +5,14 @@
 use Awcodes\Curator\Models\Media;
 use Awcodes\Curator\Observers\MediaObserver;
 use Awcodes\Curator\Resources\MediaResource;
+use Awcodes\Curator\View\Components\Glider;
+use Awcodes\Curator\View\Components\Curation;
+use Filament\Facades\Filament;
 use Filament\Support\Assets\AlpineComponent;
 use Filament\Support\Assets\Css;
 use Filament\Support\Facades\FilamentAsset;
+use Filament\Support\Facades\FilamentView;
+use Illuminate\Contracts\View\View;
 use Illuminate\Support\Facades\Blade;
 use Livewire\Livewire;
 use Spatie\LaravelPackageTools\Commands\InstallCommand;
@@ -44,12 +49,19 @@ public function packageBooted(): void
         Livewire::component('curator-panel', Components\Modals\CuratorPanel::class);
         Livewire::component('curator-curation', Components\Modals\CuratorCuration::class);
 
-        Blade::component('curator-glider', View\Components\Glider::class);
-        Blade::component('curator-curation', View\Components\Curation::class);
+        Blade::component('curator-glider', Glider::class);
+        Blade::component('curator-curation', Curation::class);
 
         FilamentAsset::register([
             AlpineComponent::make('curation', __DIR__ . '/../resources/dist/curation.js'),
             Css::make('curator', __DIR__ . '/../resources/dist/curator.css')->loadedOnRequest(),
         ], 'awcodes/curator');
+
+        if (Filament::getCurrentPanel()) {
+            FilamentView::registerRenderHook(
+                'panels::body.end',
+                fn (): View => view('curator::components.modals.modal')
+            );
+        }
     }
 }