From 71fd9a0fa838354723510da9fddb8f921ccbc4c0 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Sat, 14 Oct 2023 11:15:30 +0200 Subject: [PATCH] Close #1116 gallery: scroll to active item --- examples/plugin-gallery.html | 1 + packages/gallery-plugin/src/GalleryComponent.ts | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/plugin-gallery.html b/examples/plugin-gallery.html index 626ab5bd1..95848728c 100644 --- a/examples/plugin-gallery.html +++ b/examples/plugin-gallery.html @@ -116,6 +116,7 @@ [GalleryPlugin, { items: items, visibleOnLoad: true, + // hideOnClick: false, // thumbnailSize: { // width: 100, // height: 100, diff --git a/packages/gallery-plugin/src/GalleryComponent.ts b/packages/gallery-plugin/src/GalleryComponent.ts index 2bdb79245..f9ab008bc 100644 --- a/packages/gallery-plugin/src/GalleryComponent.ts +++ b/packages/gallery-plugin/src/GalleryComponent.ts @@ -160,8 +160,11 @@ export class GalleryComponent extends AbstractComponent { currentActive?.classList.remove(ACTIVE_CLASS); if (id) { - const nextActive = this.items.querySelector(`[data-${GALLERY_ITEM_DATA_KEY}="${id}"]`); - nextActive?.classList.add(ACTIVE_CLASS); + const nextActive = this.items.querySelector(`[data-${GALLERY_ITEM_DATA_KEY}="${id}"]`) as HTMLElement; + if (nextActive) { + nextActive.classList.add(ACTIVE_CLASS); + this.items.scrollLeft = nextActive.offsetLeft + nextActive.clientWidth / 2 - this.items.clientWidth / 2; + } } } }