@jood/appearer
Version:
javascript intersection observer
95 lines • 9.81 kB
JavaScript
/**
* 화면(지정된 root 영역)에 진입 여부를 판단하고 알리기 위한 클래스.
* 등록된 Actor(s)를 IntersectionObserver 를 통해 관찰하고 관찰된 상태에 따라 Actor 에게 알림.
* @template T Actor
*/
export class AppearStage {
/**
* 초기화
* @param [option] 초기 옵션. 인터섹션 옵저버는 생성시에만 옵션 지정이 가능
*/
init(option = {}) {
if (!this.observer) {
this.actorMap = new Map();
this.observer = new IntersectionObserver(this.onObserveEntries.bind(this), option);
}
}
/**
* 전달된 actor 를 옵저버에 등록합니다.
* @param actor 등록할 Actor
*/
observe(actor) {
const { element } = actor;
if (this.actorMap && !this.actorMap.has(element)) {
actor.bind(this);
this.actorMap.set(element, actor);
this.intersectionObserver.observe(element);
}
}
/**
* 전달된 actor 를 옵저버에서 제외합니다.
* @param actor 제외할 Actor
*/
unobserve(actor) {
const { element } = actor;
if (this.actorMap && this.actorMap.has(element)) {
this.actorMap.delete(element);
this.intersectionObserver.unobserve(element);
}
}
/**
* 옵저버에 등록(관찰) 중 인 Actor 의 수
*/
get actorSize() {
return this.actorMap ? this.actorMap.size : 0;
}
/**
* 등록 되어있는 Actor 를 반환 합니다.
* @returns T[]
*/
getActors() {
return Array.from(this.actorMap ? this.actorMap.values() : []);
}
/**
* 생성된 intersection observer 인스턴스
*/
get intersectionObserver() {
if (!this.observer)
throw new Error("uninitialize");
return this.observer;
}
/**
* 옵저버의 콜백 핸들러
* @param entries 옵저버의 콜백으로 전달받는 엔트리 값
*/
onObserveEntries(entries) {
entries.forEach((entry) => {
if (!this.actorMap)
return;
const { isIntersecting, target } = entry;
const actor = this.actorMap.get(target);
if (actor) {
if (isIntersecting) {
actor.appear(entry);
}
else {
actor.disappear(entry);
}
}
});
}
/**
* 파기
*/
dispose() {
if (this.observer) {
this.observer.disconnect();
this.observer = null;
}
if (this.actorMap) {
this.actorMap.clear();
this.actorMap = null;
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwZWFyLXN0YWdlLmpzIiwic291cmNlUm9vdCI6Ii9ob21lL3J1bm5lci93b3JrL2pvb2QtYXBwZWFyZXIvam9vZC1hcHBlYXJlci9wcm9qZWN0cy9wYWNrYWdlcy9zcmMvIiwic291cmNlcyI6WyJzdGFnZS9hcHBlYXItc3RhZ2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUE7Ozs7R0FJRztBQUNILE1BQU0sT0FBTyxXQUFXO0lBWXRCOzs7T0FHRztJQUNILElBQUksQ0FBQyxTQUFzQixFQUFFO1FBQzNCLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxHQUFHLEVBQW1CLENBQUM7WUFDM0MsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLG9CQUFvQixDQUN0QyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUNoQyxNQUFNLENBQ1AsQ0FBQztTQUNIO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNILE9BQU8sQ0FBQyxLQUFRO1FBQ2QsTUFBTSxFQUFFLE9BQU8sRUFBRSxHQUFHLEtBQUssQ0FBQztRQUMxQixJQUFJLElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsRUFBRTtZQUNoRCxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ2pCLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsQ0FBQztZQUNsQyxJQUFJLENBQUMsb0JBQW9CLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1NBQzVDO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNILFNBQVMsQ0FBQyxLQUFRO1FBQ2hCLE1BQU0sRUFBRSxPQUFPLEVBQUUsR0FBRyxLQUFLLENBQUM7UUFDMUIsSUFBSSxJQUFJLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxFQUFFO1lBQy9DLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQzlCLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUM7U0FDOUM7SUFDSCxDQUFDO0lBRUQ7O09BRUc7SUFDSCxJQUFJLFNBQVM7UUFDWCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDaEQsQ0FBQztJQUVEOzs7T0FHRztJQUNILFNBQVM7UUFDUCxPQUFPLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDakUsQ0FBQztJQUVEOztPQUVHO0lBQ0gsSUFBSSxvQkFBb0I7UUFDdEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRO1lBQUUsTUFBTSxJQUFJLEtBQUssQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUNwRCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDdkIsQ0FBQztJQUVEOzs7T0FHRztJQUNPLGdCQUFnQixDQUFDLE9BQW9DO1FBQzdELE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxLQUFnQyxFQUFFLEVBQUU7WUFDbkQsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRO2dCQUFFLE9BQU87WUFDM0IsTUFBTSxFQUFFLGNBQWMsRUFBRSxNQUFNLEVBQUUsR0FBRyxLQUFLLENBQUM7WUFDekMsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLENBQUM7WUFDeEMsSUFBSSxLQUFLLEVBQUU7Z0JBQ1QsSUFBSSxjQUFjLEVBQUU7b0JBQ2xCLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7aUJBQ3JCO3FCQUFNO29CQUNMLEtBQUssQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7aUJBQ3hCO2FBQ0Y7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRDs7T0FFRztJQUNILE9BQU87UUFDTCxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDakIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUMzQixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztTQUN0QjtRQUNELElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1NBQ3RCO0lBQ0gsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSVN0YWdlLCBTdGFnZU9wdGlvbiwgQWN0b3IsIEFjdG9yRWxlbWVudCB9IGZyb20gXCIuLi9jb21tb24vdHlwZXNcIjtcblxuLyoqXG4gKiDtmZTrqbQo7KeA7KCV65CcIHJvb3Qg7JiB7JetKeyXkCDsp4TsnoUg7Jes67aA66W8IO2MkOuLqO2VmOqzoCDslYzrpqzquLAg7JyE7ZWcIO2BtOuemOyKpC5cbiAqIOuTseuhneuQnCBBY3RvcihzKeulvCBJbnRlcnNlY3Rpb25PYnNlcnZlciDrpbwg7Ya17ZW0IOq0gOywsO2VmOqzoCDqtIDssLDrkJwg7IOB7YOc7JeQIOuUsOudvCBBY3RvciDsl5Dqsowg7JWM66a8LlxuICogQHRlbXBsYXRlIFQgQWN0b3JcbiAqL1xuZXhwb3J0IGNsYXNzIEFwcGVhclN0YWdlPFQgZXh0ZW5kcyBBY3RvciA9IEFjdG9yPiBpbXBsZW1lbnRzIElTdGFnZTxUPiB7XG4gIC8qKlxuICAgKiBBY3RvciDrp7VcbiAgICovXG4gIHByb3RlY3RlZCBhY3Rvck1hcDogTWFwPEFjdG9yRWxlbWVudCwgVD47XG5cbiAgLyoqXG4gICAqIEludGVyc2VjdGlvbk9ic2VydmVyXG4gICAqIEBzZWUgaHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvQVBJL0ludGVyc2VjdGlvbl9PYnNlcnZlcl9BUElcbiAgICovXG4gIHByb3RlY3RlZCBvYnNlcnZlcjogSW50ZXJzZWN0aW9uT2JzZXJ2ZXI7XG5cbiAgLyoqXG4gICAqIOy0iOq4sO2ZlFxuICAgKiBAcGFyYW0gW29wdGlvbl0g7LSI6riwIOyYteyFmC4g7J247YSw7IS57IWYIOyYteyggOuyhOuKlCDsg53shLHsi5zsl5Drp4wg7Ji17IWYIOyngOygleydtCDqsIDriqVcbiAgICovXG4gIGluaXQob3B0aW9uOiBTdGFnZU9wdGlvbiA9IHt9KTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLm9ic2VydmVyKSB7XG4gICAgICB0aGlzLmFjdG9yTWFwID0gbmV3IE1hcDxBY3RvckVsZW1lbnQsIFQ+KCk7XG4gICAgICB0aGlzLm9ic2VydmVyID0gbmV3IEludGVyc2VjdGlvbk9ic2VydmVyKFxuICAgICAgICB0aGlzLm9uT2JzZXJ2ZUVudHJpZXMuYmluZCh0aGlzKSxcbiAgICAgICAgb3B0aW9uXG4gICAgICApO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiDsoITri6zrkJwgYWN0b3Ig66W8IOyYteyggOuyhOyXkCDrk7HroZ3tlanri4jri6QuXG4gICAqIEBwYXJhbSBhY3RvciDrk7HroZ3tlaAgQWN0b3JcbiAgICovXG4gIG9ic2VydmUoYWN0b3I6IFQpOiB2b2lkIHtcbiAgICBjb25zdCB7IGVsZW1lbnQgfSA9IGFjdG9yO1xuICAgIGlmICh0aGlzLmFjdG9yTWFwICYmICF0aGlzLmFjdG9yTWFwLmhhcyhlbGVtZW50KSkge1xuICAgICAgYWN0b3IuYmluZCh0aGlzKTtcbiAgICAgIHRoaXMuYWN0b3JNYXAuc2V0KGVsZW1lbnQsIGFjdG9yKTtcbiAgICAgIHRoaXMuaW50ZXJzZWN0aW9uT2JzZXJ2ZXIub2JzZXJ2ZShlbGVtZW50KTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICog7KCE64us65CcIGFjdG9yIOulvCDsmLXsoIDrsoTsl5DshJwg7KCc7Jm47ZWp64uI64ukLlxuICAgKiBAcGFyYW0gYWN0b3Ig7KCc7Jm47ZWgIEFjdG9yXG4gICAqL1xuICB1bm9ic2VydmUoYWN0b3I6IFQpOiB2b2lkIHtcbiAgICBjb25zdCB7IGVsZW1lbnQgfSA9IGFjdG9yO1xuICAgIGlmICh0aGlzLmFjdG9yTWFwICYmIHRoaXMuYWN0b3JNYXAuaGFzKGVsZW1lbnQpKSB7XG4gICAgICB0aGlzLmFjdG9yTWFwLmRlbGV0ZShlbGVtZW50KTtcbiAgICAgIHRoaXMuaW50ZXJzZWN0aW9uT2JzZXJ2ZXIudW5vYnNlcnZlKGVsZW1lbnQpO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiDsmLXsoIDrsoTsl5Ag65Ox66GdKOq0gOywsCkg7KSRIOyduCBBY3RvciDsnZgg7IiYXG4gICAqL1xuICBnZXQgYWN0b3JTaXplKCkge1xuICAgIHJldHVybiB0aGlzLmFjdG9yTWFwID8gdGhpcy5hY3Rvck1hcC5zaXplIDogMDtcbiAgfVxuXG4gIC8qKlxuICAgKiDrk7HroZ0g65CY7Ja07J6I64qUIEFjdG9yIOulvCDrsJjtmZgg7ZWp64uI64ukLlxuICAgKiBAcmV0dXJucyBUW11cbiAgICovXG4gIGdldEFjdG9ycygpOiBUW10ge1xuICAgIHJldHVybiBBcnJheS5mcm9tKHRoaXMuYWN0b3JNYXAgPyB0aGlzLmFjdG9yTWFwLnZhbHVlcygpIDogW10pO1xuICB9XG5cbiAgLyoqXG4gICAqIOyDneyEseuQnCBpbnRlcnNlY3Rpb24gb2JzZXJ2ZXIg7J247Iqk7YS07IqkXG4gICAqL1xuICBnZXQgaW50ZXJzZWN0aW9uT2JzZXJ2ZXIoKTogSW50ZXJzZWN0aW9uT2JzZXJ2ZXIge1xuICAgIGlmICghdGhpcy5vYnNlcnZlcikgdGhyb3cgbmV3IEVycm9yKFwidW5pbml0aWFsaXplXCIpO1xuICAgIHJldHVybiB0aGlzLm9ic2VydmVyO1xuICB9XG5cbiAgLyoqXG4gICAqIOyYteyggOuyhOydmCDsvZzrsLEg7ZW465Ok65+sXG4gICAqIEBwYXJhbSBlbnRyaWVzIOyYteyggOuyhOydmCDsvZzrsLHsnLzroZwg7KCE64us67Cb64qUIOyXlO2KuOumrCDqsJJcbiAgICovXG4gIHByb3RlY3RlZCBvbk9ic2VydmVFbnRyaWVzKGVudHJpZXM6IEludGVyc2VjdGlvbk9ic2VydmVyRW50cnlbXSkge1xuICAgIGVudHJpZXMuZm9yRWFjaCgoZW50cnk6IEludGVyc2VjdGlvbk9ic2VydmVyRW50cnkpID0+IHtcbiAgICAgIGlmICghdGhpcy5hY3Rvck1hcCkgcmV0dXJuO1xuICAgICAgY29uc3QgeyBpc0ludGVyc2VjdGluZywgdGFyZ2V0IH0gPSBlbnRyeTtcbiAgICAgIGNvbnN0IGFjdG9yID0gdGhpcy5hY3Rvck1hcC5nZXQodGFyZ2V0KTtcbiAgICAgIGlmIChhY3Rvcikge1xuICAgICAgICBpZiAoaXNJbnRlcnNlY3RpbmcpIHtcbiAgICAgICAgICBhY3Rvci5hcHBlYXIoZW50cnkpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIGFjdG9yLmRpc2FwcGVhcihlbnRyeSk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9KTtcbiAgfVxuXG4gIC8qKlxuICAgKiDtjIzquLBcbiAgICovXG4gIGRpc3Bvc2UoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMub2JzZXJ2ZXIpIHtcbiAgICAgIHRoaXMub2JzZXJ2ZXIuZGlzY29ubmVjdCgpO1xuICAgICAgdGhpcy5vYnNlcnZlciA9IG51bGw7XG4gICAgfVxuICAgIGlmICh0aGlzLmFjdG9yTWFwKSB7XG4gICAgICB0aGlzLmFjdG9yTWFwLmNsZWFyKCk7XG4gICAgICB0aGlzLmFjdG9yTWFwID0gbnVsbDtcbiAgICB9XG4gIH1cbn1cbiJdfQ==