boboko/3dealer
3
0
Fork 0
generated from boboko/starter
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

product page: only show up down arrows when not all thumbnails are visible

Browse Source
This commit is contained in:
elvira
2026-09-29 19:16:07 +03:00
parent df29429257
commit 7e38f05650
2 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/stimulus/product-gallery-controller.js
+15 -2
View File
@@ -3,20 +3,25 @@ import { Controller } from "@hotwired/stimulus";
const SCROLL_STEP = 1;
export default class extends Controller {
static targets = ["main", "thumb", "track", "lightbox", "lightboxImage", "lightboxCounter"];
static targets = ["main", "thumb", "track", "arrow", "lightbox", "lightboxImage", "lightboxCounter"];
connect() {
this.offset = 0;
this.lightboxIndex = 0;
this.#syncHeight();
this.mainTarget.addEventListener("load", () => this.#syncHeight());
// Main image and thumbnails resize as their images load and on viewport
// changes; re-sync the track height and arrow visibility each time.
this._resizeObserver = new ResizeObserver(() => this.#syncHeight());
this._resizeObserver.observe(this.mainTarget);
this.thumbTargets.forEach((t) => this._resizeObserver.observe(t));
this._onKeydown = this.#handleKeydown.bind(this);
document.addEventListener("keydown", this._onKeydown);
}
disconnect() {
this._resizeObserver?.disconnect();
document.removeEventListener("keydown", this._onKeydown);
}
@@ -103,6 +108,14 @@ export default class extends Controller {
if (h > 0) {
this.trackTarget.style.maxHeight = h + "px";
}
this.#toggleArrows();
}
// Arrows stay in the layout (invisible, not hidden) so the thumbnail
// column keeps its alignment with the main image.
#toggleArrows() {
const overflowing = this.trackTarget.scrollHeight > this.trackTarget.clientHeight;
this.arrowTargets.forEach((a) => a.classList.toggle("invisible", !overflowing));
}
#handleKeydown(e) {
resources/views/product/show.blade.php
+4 -2
View File
@@ -37,7 +37,8 @@ class="relative flex gap-4 items-start"
<button
type="button"
data-action="click->product-gallery#scrollUp"
class="gallery-arrow w-full flex items-center justify-center py-2"
data-product-gallery-target="arrow"
class="gallery-arrow invisible w-full flex items-center justify-center py-2"
aria-label="Scroll thumbnails up"
><x-ui.icon name="arrow-up" :size="30" /></button>
@@ -67,7 +68,8 @@ class="block w-full shrink-0 border border-black overflow-hidden "
<button
type="button"
data-action="click->product-gallery#scrollDown"
class="gallery-arrow w-full flex items-center justify-center py-2"
data-product-gallery-target="arrow"
class="gallery-arrow invisible w-full flex items-center justify-center py-2"
aria-label="Scroll thumbnails down"
><x-ui.icon name="arrow-down" :size="30" /></button>
</div>