Handle changing amoutn of elements

This commit is contained in:
Kuba Orlik 2024-07-02 19:06:35 +02:00
parent 636ac56070
commit ea65ae01a9

View File

@ -12,9 +12,11 @@ export default class HorizontalScroller extends Controller {
visibility: number[];
intersectionObservers: IntersectionObserver[];
connect() {
this.visibility = this.elementTargets.map(() => 0);
[0, 0.5, 0.9, 1].forEach((threshold) => {
this.intersectionObservers = [0, 0.5, 0.9, 1].map((threshold) => {
const observer = new IntersectionObserver(
(events) => this.handleIntersection(events),
{
@ -23,12 +25,23 @@ export default class HorizontalScroller extends Controller {
threshold,
}
);
this.elementTargets.forEach((e) => observer.observe(e));
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(