Page MenuHomeSealhub
Files F9582898

No OneTemporary
Actions

View Options

diff --git a/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts b/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts
index fce7fdb..59f6270 100644
--- a/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts
+++ b/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts
@@ -1,93 +1,101 @@
/* eslint-disable @typescript-eslint/consistent-type-assertions */
import { Controller } from "stimulus";
export default class HorizontalScroller extends Controller {
currentIndex = 0;
interval_id: number;
declare scrollerTarget: HTMLDivElement;
declare markerTargets: HTMLDivElement[];
declare elementTargets: HTMLDivElement[];
static targets = ["scroller", "marker", "element"];
visibility: number[];
intersectionObservers: IntersectionObserver[];
connect() {
this.visibility = this.elementTargets.map(() => 0);
this.intersectionObservers = [0, 0.5, 0.9, 1].map((threshold) => {
const observer = new IntersectionObserver(
(events) => this.handleIntersection(events),
{
root: this.scrollerTarget,
rootMargin: "0px",
threshold,
}
);
return observer;
});
this.observe();
this.refreshMarkers();
}
markerTargetConnected() {
this.observe();
}
observe() {
this.intersectionObservers?.forEach((observer) =>
this.elementTargets.forEach((e) => observer.observe(e))
);
}
handleIntersection(events: IntersectionObserverEntry[]) {
events.forEach((event) => {
const element_index = this.elementTargets.indexOf(
event.target as HTMLDivElement
);
this.visibility[element_index] = event.intersectionRatio;
});
this.refreshMarkers();
}
refreshMarkers() {
this.visibility.forEach((value, index) => {
this.markerTargets[index].style.setProperty(
"--visibility-value",
value.toFixed(2)
);
});
this.element.classList.toggle("has-next", this.visibility.at(-1) < 1);
this.element.classList.toggle("has-prev", this.visibility.at(0) < 1);
}
findNextNotFullyVisible(visibility: number[]) {
// taking it as an argument instead of using this.visibilty because sometimes we'd
// want to read it in reverse to get the previous instead of next
let current_index = 0;
while (visibility[current_index] !== 1 && current_index < visibility.length) {
current_index++;
}
while (visibility[current_index] == 1 && current_index < visibility.length) {
current_index++;
}
return current_index;
}
scrollLeft() {
const index = Math.max(
0,
this.visibility.length -
1 -
this.findNextNotFullyVisible([...this.visibility].reverse())
);
- this.elementTargets[index].scrollIntoView({ behavior: "smooth" });
+ this.elementTargets[index].scrollIntoView({
+ behavior: "smooth",
+ block: "nearest",
+ inline: "center",
+ });
}
scrollRight() {
const index = this.findNextNotFullyVisible(this.visibility);
- this.elementTargets[index].scrollIntoView({ behavior: "smooth" });
+ this.elementTargets[index].scrollIntoView({
+ behavior: "smooth",
+ block: "nearest",
+ inline: "center",
+ });
}
}

File Metadata

Mime Type
text/x-diff
Expires
Sat, Oct 11, 08:06 (1 d, 14 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
984024
Default Alt Text
(3 KB)

Event Timeline