display outside panels done 'auth pages so to speak'

bezhanSalleh · Nov 19, 2023 · 4dab053 · 4dab053
1 parent f459331
commit 4dab053
Show file tree

Hide file tree

Showing 7 changed files with 218 additions and 90 deletions.
diff --git a/resources/css/filament-language-switch.css b/resources/css/filament-language-switch.css
@@ -6,4 +6,9 @@
     .flags-only {
         max-width: 3rem !important;
     }
+
+    .fls-dropdown-width {
+        width: 8rem !important;
+        max-width: fit-content !important;
+    }
 }
diff --git a/resources/dist/filament-language-switch.css b/resources/dist/filament-language-switch.css
diff --git a/resources/views/components/flag.blade.php b/resources/views/components/flag.blade.php
@@ -0,0 +1,18 @@
+@props([
+    'src',
+    'alt' => '',
+    'circular' => false,
+])
+<img
+    src="{{ $src }}"
+    {{ $attributes
+        ->class([
+            'object-cover object-center max-w-none',
+            'rounded-full' => $circular,
+            'rounded-md' => ! $circular,
+        ])
+    }}
+    @class([
+
+    ])
+/>
diff --git a/resources/views/language-switch.blade.php b/resources/views/language-switch.blade.php
@@ -2,91 +2,29 @@
     $locales = $languageSwitch->getLocales();
     $isCircular = $languageSwitch->isCircular();
     $isFlagsOnly = $languageSwitch->isFlagsOnly();
+    $hasFlags = filled($languageSwitch->getFlags());
+    $isDisplayOn = $languageSwitch->isDisplayOn();
+    $alignment = $languageSwitch->getPlacement()->value;
+    $placement = match(true){
+        $alignment === 'top-center' => 'bottom',
+        $alignment === 'bottom-center' => 'top',
+        default => 'bottom-end',
+    };
 @endphp
 
-<x-filament::dropdown
-    teleport
-    placement="bottom"
-    :width="$isFlagsOnly ? 'flags-only' : null"
-    class="fi-dropdown fi-user-menu"
->
-    <x-slot name="trigger">
-        <div
-            @class([
-                'flex items-center justify-center text-sm font-semibold w-9 h-9 language-switch-trigger text-primary-500 bg-primary-500/10',
-                'rounded-full' => $isCircular,
-                'rounded-lg' => !$isCircular,
-                'p-1 ring-2 ring-inset ring-gray-200 hover:ring-gray-300 dark:ring-gray-500 hover:dark:ring-gray-400' => $isFlagsOnly,
-            ])
-            @if ($isFlagsOnly)
-            x-tooltip="{
-                content: @js($languageSwitch->getLabel(app()->getLocale())),
-                theme: $store.theme,
-                placement: 'bottom'
-            }"
-            @endif
-        >
-            @if ($isFlagsOnly)
-                <img
-                    src="{{ $languageSwitch->getFlag(app()->getLocale()) }}"
-                    @class([
-                        'object-cover object-center max-w-none',
-                        'rounded-full' => $isCircular,
-                        'rounded-md' => !$isCircular,
-                    ])
-                />
-            @else
-                <span>{{ $languageSwitch->getFlag(app()->getLocale()) }}</span>
-            @endif
+@if ($isDisplayOn)
+    <div @class([
+        'fls-display-on fixed w-full flex p-4 z-50',
+        'top-0' => str_contains($alignment, 'top'),
+        'bottom-0' => str_contains($alignment, 'bottom'),
+        'justify-start' => str_contains($alignment, 'left'),
+        'justify-end' => str_contains($alignment, 'right'),
+        'justify-center' => str_contains($alignment, 'center'),
+    ])>
+        <div class="rounded-lg bg-gray-50 dark:bg-gray-950">
+            @include('filament-language-switch::switch')
         </div>
-    </x-slot>
-
-    <x-filament::dropdown.list @class(['!border-t-0 space-y-1'])>
-        @foreach ($locales as $locale)
-            @if (!app()->isLocale($locale))
-                <button
-                    type="button"
-                    wire:click="changeLocale('{{ $locale }}')"
-                    @if ($isFlagsOnly)
-                    x-tooltip="{
-                        content: @js($languageSwitch->getLabel($locale)),
-                        theme: $store.theme,
-                        placement: 'right'
-                    }"
-                    @endif
-
-                    @class([
-                        'flex items-center justify-center w-full px-2 py-0.5 text-sm transition-colors duration-75 rounded-md outline-none fi-dropdown-list-item whitespace-nowrap disabled:pointer-events-none disabled:opacity-70 fi-dropdown-list-item-color-gray hover:bg-gray-950/5 focus:bg-gray-950/5 dark:hover:bg-white/5 dark:focus:bg-white/5',
-                    ])
-                >
-
-                    @if ($isFlagsOnly)
-                        <img
-                            src="{{ $languageSwitch->getFlag($locale) }}"
-                            @class([
-                                'object-cover object-center max-w-none w-9 h-9 p-1 ring-2 ring-inset ring-gray-200 hover:ring-gray-300 dark:ring-gray-500 hover:dark:ring-gray-400',
-                                'rounded-full' => $isCircular,
-                                'rounded-lg' => !$isCircular,
-                            ])
-                        />
-                    @else
-                        <span
-                            @class([
-                                'flex items-center justify-center flex-shrink-0 w-6 h-6 p-4 text-xs font-semibold group-hover:bg-white group-hover:text-primary-600 group-hover:border group-hover:border-primary-500/10 group-focus:text-white bg-primary-500/10 text-primary-500',
-                                'rounded-full' => $isCircular,
-                                'rounded-lg' => !$isCircular,
-                            ])
-                        >
-                            {{ $languageSwitch->getFlag($locale) }}
-                        </span>
-
-                        <span class="text-gray-700 hover:bg-transparent dark:text-gray-200">
-                            {{ $languageSwitch->getLabel($locale) }}
-                        </span>
-
-                    @endif
-                </button>
-            @endif
-        @endforeach
-    </x-filament::dropdown.list>
-</x-filament::dropdown>
+    </div>
+@else
+    @include('filament-language-switch::switch')
+@endif
diff --git a/resources/views/switch.blade.php b/resources/views/switch.blade.php
@@ -0,0 +1,92 @@
+<x-filament::dropdown
+    teleport
+    :placement="$placement"
+    :width="$isFlagsOnly ? 'flags-only' : 'fls-dropdown-width'"
+    class="fi-dropdown fi-user-menu"
+>
+    <x-slot name="trigger">
+        <div
+            @class([
+                'flex items-center justify-center text-sm font-semibold w-9 h-9 language-switch-trigger text-primary-500 bg-primary-500/10',
+                'rounded-full' => $isCircular,
+                'rounded-lg' => !$isCircular,
+                'p-1 ring-2 ring-inset ring-gray-200 hover:ring-gray-300 dark:ring-gray-500 hover:dark:ring-gray-400' => $isFlagsOnly || $hasFlags,
+            ])
+            @if ($isFlagsOnly || $hasFlags)
+            x-tooltip="{
+                content: @js($languageSwitch->getLabel(app()->getLocale())),
+                theme: $store.theme,
+                arrowless: true,
+                placement: 'right'
+            }"
+            @endif
+        >
+            @if ($isFlagsOnly || $hasFlags)
+                <x-filament-language-switch::flag
+                    :src="$languageSwitch->getFlag(app()->getLocale())"
+                    :circular="$isCircular"
+                    :alt="$languageSwitch->getLabel(app()->getLocale())"
+                />
+            @else
+                <span>{{ $languageSwitch->getFlag(app()->getLocale()) }}</span>
+            @endif
+        </div>
+    </x-slot>
+
+    <x-filament::dropdown.list @class(['!border-t-0 space-y-1'])>
+        @foreach ($locales as $locale)
+            @if (!app()->isLocale($locale))
+                <button
+                    type="button"
+                    wire:click="changeLocale('{{ $locale }}')"
+                    @if ($isFlagsOnly)
+                    x-tooltip="{
+                        content: @js($languageSwitch->getLabel($locale)),
+                        theme: $store.theme,
+                        arrowless: true,
+                        placement: 'right'
+                    }"
+                    @endif
+
+                    @class([
+                        'flex items-center w-full px-2 py-0.5 text-sm transition-colors duration-75 rounded-md outline-none fi-dropdown-list-item whitespace-nowrap disabled:pointer-events-none disabled:opacity-70 fi-dropdown-list-item-color-gray hover:bg-gray-950/5 focus:bg-gray-950/5 dark:hover:bg-white/5 dark:focus:bg-white/5',
+                        'justify-center' => $isFlagsOnly,
+                        'justify-start space-x-1' => !$isFlagsOnly,
+                    ])
+                >
+
+                    @if ($isFlagsOnly)
+                        <x-filament-language-switch::flag
+                            :src="$languageSwitch->getFlag($locale)"
+                            :circular="$isCircular"
+                            :alt="$languageSwitch->getLabel($locale)"
+                        />
+                    @else
+                        @if ($hasFlags)
+                            <x-filament-language-switch::flag
+                                :src="$languageSwitch->getFlag($locale)"
+                                :circular="$isCircular"
+                                :alt="$languageSwitch->getLabel($locale)"
+                                class="p-1 !rounded-lg w-7 h-7"
+                            />
+                        @else
+                            <span
+                                @class([
+                                    'flex items-center justify-center flex-shrink-0 w-6 h-6 p-4 text-xs font-semibold group-hover:bg-white group-hover:text-primary-600 group-hover:border group-hover:border-primary-500/10 group-focus:text-white bg-primary-500/10 text-primary-500',
+                                    'rounded-full' => $isCircular,
+                                    'rounded-lg' => !$isCircular,
+                                ])
+                            >
+                                {{ $languageSwitch->getFlag($locale) }}
+                            </span>
+                        @endif
+                        <span class="font-medium text-gray-700 hover:bg-transparent dark:text-gray-200">
+                            {{ $languageSwitch->getLabel($locale) }}
+                        </span>
+
+                    @endif
+                </button>
+            @endif
+        @endforeach
+    </x-filament::dropdown.list>
+</x-filament::dropdown>
diff --git a/src/Enums/Alignment.php b/src/Enums/Alignment.php
@@ -0,0 +1,20 @@
+<?php
+
+declare(strict_types=1);
+
+namespace BezhanSalleh\FilamentLanguageSwitch\Enums;
+
+enum Alignment: string
+{
+    case TopLeft = 'top-left';
+
+    case TopCenter = 'top-center';
+
+    case TopRight = 'top-right';
+
+    case BottomLeft = 'bottom-left';
+
+    case BottomCenter = 'bottom-center';
+
+    case BottomRight = 'bottom-right';
+}
diff --git a/src/LanguageSwitch.php b/src/LanguageSwitch.php
@@ -4,6 +4,7 @@
 
 namespace BezhanSalleh\FilamentLanguageSwitch;
 
+use BezhanSalleh\FilamentLanguageSwitch\Enums\Alignment;
 use Closure;
 use Filament\Panel;
 use Filament\Support\Concerns;
@@ -15,20 +16,26 @@ class LanguageSwitch
     use Concerns\Configurable;
     use Concerns\EvaluatesClosures;
 
-    protected bool | Closure $isCircular = false;
-
     protected ?string $displayLocale = null;
 
+    protected array | Closure | null $displayOn = null;
+
+    protected string | Closure $displayOnRenderHook = 'panels::body.end';
+
     protected array | Closure $excludes = [];
 
     protected array | Closure $flags = [];
 
+    protected bool | Closure $isCircular = false;
+
     protected bool $isFlagsOnly = false;
 
     protected array | Closure $labels = [];
 
     protected array | Closure $locales = [];
 
+    protected ?Alignment $placement = null;
+
     protected Closure | string $renderHook = 'panels::global-search.after';
 
     public static function make(): static
@@ -50,6 +57,13 @@ public static function boot(): void
             name: $static->getRenderHook(),
             hook: fn (): string => Blade::render('@livewire(\'filament-language-switch\')')
         );
+
+        if ($static->isDisplayOn()) {
+            FilamentView::registerRenderHook(
+                name: $static->getDisplayOnRenderHook(),
+                hook: fn (): string => Blade::render('@livewire(\'filament-language-switch\')')
+            );
+        }
     }
 
     public function circular(bool $condition = true): static
@@ -66,6 +80,25 @@ public function displayLocale(string $locale = 'en'): static
         return $this;
     }
 
+    public function displayOn(array | Closure $routes = null): static
+    {
+        $this->displayOn = $routes ?? [
+            'auth.login',
+            'auth.password',
+            'auth.profile',
+            'auth.register',
+        ];
+
+        return $this;
+    }
+
+    public function displayOnRenderHook(string | Closure $hook): static
+    {
+        $this->displayOnRenderHook = $hook;
+
+        return $this;
+    }
+
     public function excludes(array | Closure $excludes): static
     {
         $this->excludes = $excludes;
@@ -101,9 +134,16 @@ public function locales(array | Closure $locales): static
         return $this;
     }
 
-    public function renderHook(array | Closure $renderHook): static
+    public function placement(Alignment $alignment): static
+    {
+        $this->placement = $alignment;
+
+        return $this;
+    }
+
+    public function renderHook(string $hook): static
     {
-        $this->renderHook = $renderHook;
+        $this->renderHook = $hook;
 
         return $this;
     }
@@ -113,6 +153,11 @@ public function getDisplayLocale(): string
         return (string) $this->evaluate($this->displayLocale);
     }
 
+    public function getDisplayOnRenderHook(): string
+    {
+        return (string) $this->evaluate($this->displayOnRenderHook);
+    }
+
     public function getExcludes(): array
     {
         return (array) $this->evaluate($this->excludes);
@@ -142,6 +187,11 @@ public function isFlagsOnly(): bool
         return (bool) $this->evaluate($this->isFlagsOnly) && filled($this->getFlags());
     }
 
+    public function isDisplayOn(): bool
+    {
+        return str(request()->route()->getName())->contains($this->displayOn);
+    }
+
     public function getLabels(): array
     {
         return (array) $this->evaluate($this->labels);
@@ -152,6 +202,11 @@ public function getLocales(): array
         return (array) $this->evaluate(filled($this->locales) ? $this->locales : ['ar', config('app.locale'), 'fr']);
     }
 
+    public function getPlacement(): Alignment
+    {
+        return $this->placement ?? Alignment::TopRight;
+    }
+
     public function getRenderHook(): string
     {
         return (string) $this->evaluate($this->renderHook);