Handle changing amoutn of elements
This commit is contained in:
		
							parent
							
								
									636ac56070
								
							
						
					
					
						commit
						ea65ae01a9
					
				@ -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(
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user