https://www.vasterastidning.se/view-resources/public/common/SlideIn/SlideIn.js

1
2class SlideIn {
3
4    /**
5     * 
6     * @param {NodeList} elements Dom-elements to slide in
7     */
8    constructor(elements) {
9        this.observer = this.getObserver(this.observerCallback.bind(this));
10        if (!this.observer) {
11            return;
12        }
13        for (const element of elements) {
14            this.registerElement(element);
15        }
16    }
17
18    registerElement(element) {
19        element.classList.add('slidein', 'slidein-out');
20        this.observer.observe(element);
21    }
22
23    observerCallback(entries, observer) {
24        for (const entry of entries) {
25            if (entry.isIntersecting) {
26                entry.target.classList.remove('slidein-out');
27                this.observer.unobserve(entry.target);
28            }
29        }     
30    }
31
32    /**
33     * Create and return a new IntersectionObserver
34     * @param {function} callback 
35     * @returns Instance of IntersectionObserver
36     */
37    getObserver(callback) {
38        if (!'IntersectionObserver' in window) {
39            // Feature not supported in client.
40            return null;
41        }
42        var options = {
43            root: null,
44            rootMargin: '0px',
45            threshold: 0.4
46        };
47        return new IntersectionObserver(callback, options);
48    }
49
50}