refactor: add alpine tabs component

Author: Roardom

resources/js/app.js

@@ -45,6 +45,7 @@ import './components/alpine/dislikeButton';
 import './components/alpine/likeButton';
 import './components/alpine/livewireDialog';
 import './components/alpine/smallBookmarkButton';
+import './components/alpine/tabs';
 import './components/alpine/toggle';
 import './components/alpine/torrentGrouping';
 

resources/js/components/alpine/tabs.js

@@ -0,0 +1,26 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('tabs', () => ({
+        tab: null,
+        init() {
+            this.tab = this.$root.dataset.defaultTab;
+        },
+        tabButton: {
+            ['x-on:click']() {
+                this.tab = this.$el.dataset.tab;
+            },
+            ['x-bind:role']() {
+                return 'tab';
+            },
+            ['x-bind:class']() {
+                return this.tab === this.$el.dataset.tab
+                    ? 'panel__tab panel__tab--active'
+                    : 'panel__tab';
+            },
+        },
+        tabPanel: {
+            ['x-show']() {
+                return this.tab === this.$el.dataset.tab;
+            },
+        },
+    }));
+});

resources/views/torrent/partials/buttons.blade.php

@@ -187,26 +187,12 @@ class="form__button form__button--outlined form__button--centered"
                     </div>
                 </div>
             </header>
-            <div x-bind="dialogForm" x-data="{ tab: 'hierarchy' }">
+            <div x-bind="dialogForm" x-data="tabs" data-default-tab="hierarchy">
                 <menu class="panel__tabs">
-                    <li
-                        class="panel__tab"
-                        role="tab"
-                        x-bind:class="tab === 'hierarchy' && 'panel__tab--active'"
-                        x-on:click="tab = 'hierarchy'"
-                    >
-                        Hierarchy
-                    </li>
-                    <li
-                        class="panel__tab"
-                        role="tab"
-                        x-bind:class="tab === 'list' && 'panel__tab--active'"
-                        x-on:click="tab = 'list'"
-                    >
-                        List
-                    </li>
+                    <li x-bind="tabButton" data-tab="hierarchy">Hierarchy</li>
+                    <li x-bind="tabButton" data-tab="list">List</li>
                 </menu>
-                <div class="dialog__form" x-show="tab === 'hierarchy'" style="gap: 0">
+                <div class="dialog__form" x-bind="tabPanel" data-tab="hierarchy" style="gap: 0">
                     @if ($torrent->folder !== null)
                         <span
                             style="
@@ -329,7 +315,7 @@ class="text-info"
                         @endforeach
                     @endforeach
                 </div>
-                <div class="data-table-wrapper" x-show="tab === 'list'">
+                <div class="data-table-wrapper" x-bind="tabPanel" data-tab="list">
                     <table class="data-table">
                         <thead>
                             <tr>

resources/views/torrent/partials/extra_meta.blade.php

@@ -1,46 +1,17 @@
-<section
-    class="panelV2"
-    x-data="{
-        tab: window.location.hash ? window.location.hash.substring(1) : 'recommendations',
-    }"
-    id="tab_wrapper"
->
-    <!-- The tabs navigation -->
+<section class="panelV2" x-data="tabs" data-default-tab="recommendations" id="tab_wrapper">
     <h2 class="panel__heading">Relations</h2>
     <menu class="panel__tabs">
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'recommendations' && 'panel__tab--active'"
-            x-on:click="tab = 'recommendations'; window.location.hash = 'recommendations'"
-        >
-            Recommendations
-        </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'collection' && 'panel__tab--active'"
-            x-on:click="tab = 'collection'; window.location.hash = 'collection'"
-        >
-            Collection
-        </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'playlists' && 'panel__tab--active'"
-            x-on:click="tab = 'playlists'; window.location.hash = 'playlists'"
-        >
-            Playlists
-        </li>
+        <li class="panel__tab" x-bind="tabButton" data-tab="recommendations">Recommendations</li>
+        <li class="panel__tab" x-bind="tabButton" data-tab="collection">Collection</li>
+        <li class="panel__tab" x-bind="tabButton" data-tab="playlists">Playlists</li>
     </menu>
-    <!-- The tabs content -->
-    <div x-show="tab === 'recommendations'">
+    <div x-bind="tabPanel" data-tab="recommendations">
         @include('torrent.partials.recommendations')
     </div>
-    <div x-show="tab === 'collection'" x-cloak>
+    <div x-bind="tabPanel" data-tab="collection" x-cloak>
         @include('torrent.partials.collection')
     </div>
-    <div x-show="tab === 'playlists'" x-cloak>
+    <div x-bind="tabPanel" data-tab="playlists" x-cloak>
         @include('torrent.partials.playlists')
     </div>
 </section>