viewportobserver.js

class ViewportObserver {
	constructor() {
		const intersectionObserverCallbackClosure = (observerEntries, which) => { this.intersectionObserverFired(observerEntries, which) }
		this.viewportObserver = new IntersectionObserver(intersectionObserverCallbackClosure, {
			root: null,
			rootMargin: "0px 0px 0px 0px"
		})
		this.nearViewportObserver = new IntersectionObserver(intersectionObserverCallbackClosure, {
			root: null,
			rootMargin: "200% 0px 200% 0px"
		})
	}
	add(component) {
		let element = component.$el
		element._stored_component = component
		this.viewportObserver.observe(element)
		this.nearViewportObserver.observe(element)
	}
	remove(component) {
		let element = component.$el
		element._stored_component = null
		this.viewportObserver.unobserve(element)
		this.nearViewportObserver.unobserve(element)
	}
	intersectionObserverFired(observerEntries, which) {
		for(let i = 0; i < observerEntries.length; i++) {
			let entry = observerEntries[i]
			let element = entry.target
			let component = element._stored_component
			if (entry.isIntersecting) {
				if (which === this.viewportObserver) {
					component.didEnterFrame()
				}
				else if (which === this.nearViewportObserver) {
					component.didApproachFrame()
				}
				else {
					alert("Unknown which in intersectionObserverFired", which)
				}
			}
		}
	}
}

const _sharedViewportObserver = new ViewportObserver()

export default {
	mounted() {
		_sharedViewportObserver.add(this)
	},
	beforeDestroy() {
		_sharedViewportObserver.remove(this)
	},
	methods: {
		didApproachFrame() {
		},
		didEnterFrame() {
		},
		stopViewportObservation() {
			_sharedViewportObserver.remove(this)
		}
	}
}

/* Use in a component:

import ViewportObserver from '@/mixins/viewportobserver.js'

export default {
  name: 'MyComponent',
  mixins: [ViewportObserver],
  methods: {
    didApproachFrame() { },
    didEnterFrame() { },
  }
}
*/