2020-10-01 12:06:53 +03:00
|
|
|
import Component from '@glimmer/component';
|
2021-09-08 15:00:24 +03:00
|
|
|
import getScrollParent from '../utils/get-scroll-parent';
|
2020-10-01 12:06:53 +03:00
|
|
|
import {action} from '@ember/object';
|
|
|
|
import {inject as service} from '@ember/service';
|
|
|
|
export default class GhScrollTrigger extends Component {
|
|
|
|
@service inViewport;
|
|
|
|
|
|
|
|
@action
|
|
|
|
setupInViewport(element) {
|
|
|
|
this.loaderElement = element;
|
2017-08-02 10:05:59 +03:00
|
|
|
|
2020-10-01 12:06:53 +03:00
|
|
|
let viewportTolerance = this.args.triggerOffset || {};
|
2018-04-24 15:10:20 +03:00
|
|
|
|
|
|
|
// if triggerOffset is a number we use it for all dimensions
|
2020-10-01 12:06:53 +03:00
|
|
|
if (typeof viewportTolerance === 'number') {
|
|
|
|
viewportTolerance = {
|
|
|
|
top: viewportTolerance,
|
|
|
|
bottom: viewportTolerance,
|
|
|
|
left: viewportTolerance,
|
|
|
|
right: viewportTolerance
|
2018-04-24 15:10:20 +03:00
|
|
|
};
|
|
|
|
}
|
2017-08-02 10:05:59 +03:00
|
|
|
|
2020-10-01 12:06:53 +03:00
|
|
|
let options = {
|
|
|
|
viewportSpy: true,
|
|
|
|
viewportTolerance,
|
|
|
|
scrollableArea: this.args.scrollable || getScrollParent(element)
|
|
|
|
};
|
2017-08-02 10:05:59 +03:00
|
|
|
|
2020-10-01 12:06:53 +03:00
|
|
|
let {onEnter, onExit} = this.inViewport.watchElement(element, options);
|
2018-04-24 15:10:20 +03:00
|
|
|
|
2020-10-01 12:06:53 +03:00
|
|
|
onEnter(this.didEnterViewport.bind(this));
|
|
|
|
onExit(this.didExitViewport.bind(this));
|
|
|
|
|
|
|
|
this.args.registerElement?.(element);
|
|
|
|
}
|
2017-08-02 10:05:59 +03:00
|
|
|
|
|
|
|
didEnterViewport() {
|
2020-10-01 12:06:53 +03:00
|
|
|
this.args.enter?.();
|
|
|
|
}
|
2018-04-24 15:10:20 +03:00
|
|
|
|
|
|
|
didExitViewport() {
|
2020-10-01 12:06:53 +03:00
|
|
|
this.args.exit?.();
|
2017-08-02 10:05:59 +03:00
|
|
|
}
|
|
|
|
|
2020-10-01 12:06:53 +03:00
|
|
|
@action
|
|
|
|
teardownInViewport(element) {
|
|
|
|
this.inViewport.stopWatching(element);
|
|
|
|
}
|
|
|
|
}
|