refactor dropdown's Alpine directives

opcodesio · Sep 9, 2022 · 5057eb0 · 5057eb0
1 parent e7a83d3
commit 5057eb0
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 43 deletions.
diff --git a/public/app.css b/public/app.css
diff --git a/public/app.js b/public/app.js
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -13,6 +13,31 @@ Alpine.plugin(Persist)
 
 window.Alpine = Alpine
 
+Alpine.data('dropdown', () => ({
+    open: false,
+    direction: 'down',
+    toggle() {
+        if (this.open) { return this.close() }
+        this.$refs.button.focus()
+        this.open = true
+        const p = this.$refs.list.getBoundingClientRect()
+        this.direction = this.$refs.button.getBoundingClientRect().bottom - p.top + 140 > p.height ? 'up' : 'down';
+    },
+    close(focusAfter) {
+        if (! this.open) { return }
+        this.open = false
+        focusAfter?.focus()
+    },
+    transitions: {
+        'x-transition:enter': "transition ease-out duration-100",
+        'x-transition:enter-start': "opacity-0 scale-90",
+        'x-transition:enter-end': "opacity-100 scale-100",
+        'x-transition:leave': "transition ease-in duration-100",
+        'x-transition:leave-start': "opacity-100 scale-100",
+        'x-transition:leave-end': "opacity-0 scale-90",
+    }
+}));
+
 Alpine.store('fileViewer', {
     foldersOpen: [],
     foldersInView: [],

diff --git a/resources/views/partials/file-list-item.blade.php b/resources/views/partials/file-list-item.blade.php
@@ -3,22 +3,7 @@
     wire:key="log-file-{{$logFile->identifier}}"
     wire:click="selectFile('{{ $logFile->identifier }}')"
     x-on:click="selectFile('{{ $logFile->identifier }}')"
-    x-data="{
-        open: false,
-        direction: 'down',
-        toggle() {
-            if (this.open) { return this.close() }
-            this.$refs.button.focus()
-            this.open = true
-            const p = this.$refs.list.getBoundingClientRect()
-            this.direction = this.$refs.button.getBoundingClientRect().bottom - p.top + 140 > p.height ? 'up' : 'down';
-        },
-        close(focusAfter) {
-            if (! this.open) { return }
-            this.open = false
-            focusAfter && focusAfter.focus()
-        }
-    }"
+    x-data="dropdown"
     x-on:keydown.escape.prevent.stop="close($refs.button)"
     x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
     x-id="['dropdown-button']"
@@ -36,12 +21,7 @@
     <div
         x-ref="panel"
         x-show="open"
-        x-transition:enter="transition ease-out duration-100"
-        x-transition:enter-start="opacity-0 scale-90"
-        x-transition:enter-end="opacity-100 scale-100"
-        x-transition:leave="transition ease-in duration-100"
-        x-transition:leave-start="opacity-100 scale-100"
-        x-transition:leave-end="opacity-0 scale-90"
+        x-bind="transitions"
         x-on:click.outside="close($refs.button)"
         :id="$id('dropdown-button')"
         class="dropdown w-48"

diff --git a/resources/views/partials/site-settings-dropdown.blade.php b/resources/views/partials/site-settings-dropdown.blade.php
@@ -1,16 +1,4 @@
-<div x-data="{
-        open: false,
-        toggle() {
-            if (this.open) { return this.close() }
-            this.$refs.button.focus()
-            this.open = true
-        },
-        close(focusAfter) {
-            if (! this.open) { return }
-            this.open = false
-            focusAfter && focusAfter.focus()
-        }
-    }"
+<div x-data="dropdown"
     x-on:keydown.escape.prevent.stop="close($refs.button)"
     x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
     x-id="['dropdown-button']"
@@ -24,12 +12,7 @@ class="relative"
     <div
         x-ref="panel"
         x-show="open"
-        x-transition:enter="transition ease-out duration-100"
-        x-transition:enter-start="opacity-0 scale-90"
-        x-transition:enter-end="opacity-100 scale-100"
-        x-transition:leave="transition ease-in duration-100"
-        x-transition:leave-start="opacity-100 scale-100"
-        x-transition:leave-end="opacity-0 scale-90"
+        x-bind="transitions"
         x-on:click.outside="close($refs.button)"
         :id="$id('dropdown-button')"
         style="min-width: 250px;"