(Add) Buttons to horizontally scroll poster row

resources/js/app.js

@@ -44,7 +44,9 @@ import './components/alpine/dialog';
 import './components/alpine/dislikeButton';
 import './components/alpine/likeButton';
 import './components/alpine/livewireDialog';
+import './components/alpine/posterRow';
 import './components/alpine/smallBookmarkButton';
+import './components/alpine/tabs';
 import './components/alpine/toggle';
 import './components/alpine/torrentGrouping';
 

resources/js/components/alpine/posterRow.js

@@ -0,0 +1,69 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('posterRow', () => ({
+        tab: null,
+        init() {
+            this.tab = this.$root.dataset.defaultTab;
+        },
+        getPosterRow() {
+            let panel = this.$el.closest('.panelV2');
+            let posterRows = panel.querySelectorAll('[x-ref="posters"]');
+
+            let posterRow = [...posterRows].find((el) => el.checkVisibility());
+
+            return posterRow;
+        },
+        scrollLeft: {
+            ['x-on:click.prevent']() {
+                let posterRow = this.getPosterRow();
+
+                let scrollBy = posterRow.offsetWidth / 2;
+                let currentScroll = posterRow.scrollLeft;
+                let maxScroll = posterRow.scrollWidth - posterRow.offsetWidth;
+
+                if (currentScroll == 0) {
+                    posterRow.scrollTo({
+                        left: maxScroll,
+                        behavior: 'smooth',
+                    });
+                } else if (currentScroll < scrollBy) {
+                    posterRow.scrollTo({
+                        left: 0,
+                        behavior: 'smooth',
+                    });
+                } else {
+                    posterRow.scrollBy({
+                        left: -1 * scrollBy,
+                        behavior: 'smooth',
+                    });
+                }
+            },
+        },
+        scrollRight: {
+            ['x-on:click.prevent']() {
+                let posterRow = this.getPosterRow();
+
+                let scrollBy = posterRow.offsetWidth / 2;
+                let currentScroll = posterRow.scrollLeft;
+                let maxScroll = posterRow.scrollWidth - posterRow.offsetWidth;
+                let remainingScroll = maxScroll - currentScroll;
+
+                if (remainingScroll == 0) {
+                    posterRow.scrollTo({
+                        left: 0,
+                        behavior: 'smooth',
+                    });
+                } else if (remainingScroll < scrollBy) {
+                    posterRow.scrollTo({
+                        left: maxScroll,
+                        behavior: 'smooth',
+                    });
+                } else {
+                    posterRow.scrollBy({
+                        left: scrollBy,
+                        behavior: 'smooth',
+                    });
+                }
+            },
+        },
+    }));
+});

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,31 @@
-<section
-    class="panelV2"
-    x-data="{
-        tab: window.location.hash ? window.location.hash.substring(1) : 'recommendations',
-    }"
-    id="tab_wrapper"
->
-    <!-- The tabs navigation -->
-    <h2 class="panel__heading">Relations</h2>
+<section class="panelV2" x-data="tabs" data-default-tab="recommendations" id="tab_wrapper">
+    <header class="panel__header">
+        <h2 class="panel__heading">Relations</h2>
+        <div class="panel__actions" x-data="posterRow">
+            <div class="panel__action">
+                <button class="form__standard-icon-button" x-bind="scrollLeft">
+                    <i class="{{ \config('other.font-awesome') }} fa-angle-left"></i>
+                </button>
+            </div>
+            <div class="panel__action">
+                <button class="form__standard-icon-button" x-bind="scrollRight">
+                    <i class="{{ \config('other.font-awesome') }} fa-angle-right"></i>
+                </button>
+            </div>
+        </div>
+    </header>
     <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>

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

@@ -1,5 +1,5 @@
 <div class="panel__body">
-    <section class="recommendations" style="max-height: 330px !important">
+    <section class="recommendations" style="max-height: 330px !important" x-ref="posters">
         @switch(true)
             @case($torrent->category->movie_meta)
                 @forelse ($meta->recommendedMovies ?? [] as $movie)