Source: src/Parallax.ts | egjs::infinitegrid

import { ALIGN, isMobile, TRANSFORM } from "./consts";
import { $, isWindow, assign } from "./utils";
import { IAlign, IJQuery, PositionType, SizeType, InnerSizeType, ClientSizeType, IInfiniteGridItemElement, OffsetSizeType, IInfiniteGridItem } from "./types";
export interface IParallaxStyle {
	position: PositionType;
	size: SizeType;
	cammelSize: string;
	coordinate: string;
}
const style: {
	vertical: IParallaxStyle;
	horizontal: IParallaxStyle;
} = {
	vertical: { position: "top", size: "height", cammelSize: "Height", coordinate: "Y" },
	horizontal: { position: "left", size: "width", cammelSize: "Width", coordinate: "X" },
};
const { START, CENTER } = ALIGN;
/**
 * @classdesc Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight. You can apply parallax by scrolling the image and speed of the item.
 * @ko Parallax는 서로 다른 두 개의 시선에서 바라본 물체의 외관상 위치의 변위 또는 차이입니다. 스크롤에 따라 이미지와 아이템의 속도를 차이를 줌으로써 parallax을 적용할 수 있습니다.
 * @class eg.Parallax
 * @param {Element|String} [root=window] Scrolling target. If you scroll in the body, set window. 스크롤하는 대상. 만약 body에서 스크롤하면 window로 설정한다.
 * @param {Object} [options] The option object of eg.Parallax module <ko>eg.Parallax 모듈의 옵션 객체</ko>
 * @param {Boolean} [options.horizontal=false] Direction of the scroll movement (false: vertical, true: horizontal) <ko>스크롤 이동 방향 (false: 세로방향, true: 가로방향)</ko>
 * @param {Element|String} [options.container=null] Container wrapping items. If root and container have no gaps, do not set option. <ko> 아이템들을 감싸고 있는 컨테이너. 만약 root와 container간의 차이가 없으면, 옵션을 설정하지 않아도 된다.</ko>
 * @param {String} [options.selector="img"] The selector of the image to apply the parallax in the item <ko> 아이템안에 있는 parallax를 적용할 이미지의 selector </ko>
 * @param {Boolean} [options.strength=1] Dimensions that indicate the sensitivity of parallax. The higher the strength, the faster.
 * @param {Boolean} [options.center=0] The middle point of parallax. The top is 1 and the bottom is -1. <ko> parallax가 가운데로 오는 점. 상단이 1이고 하단이 -1이다. </ko>
 * @param {Boolean} [options.range=[-1, 1]] Range to apply the parallax. The top is 1 and the bottom is -1. <ko> parallax가 적용되는 범위, 상단이 1이고 하단이 -1이다. </ko>
 * @param {Boolean} [options.align="start"] The alignment of the image in the item. ("start" : top or left, "center": middle) <ko> 아이템안의 이미지의 정렬 </ko>
 * @example
```
<script>
// isOverflowScroll: false
var parallax = new eg.Parallax(window, {
  container: ".container",
  selector: "img.parallax",
  strength: 0.8,
  center: 0,
  range: [-1, 1],
  align: "center",
  horizontal: true,
});
// isOverflowScroll: ture
var parallax = new eg.Parallax(".container", {
  selector: "img.parallax",
  strength: 0.8,
  center: 0,
  range: [-1, 1],
  align: "center",
  horizontal: true,
});
// item interface
var item = {
  // original size
  size: {
    width: 100,
    height: 100,
  },
  // view size
  rect: {
    top: 100,
    left: 100,
    width: 100,
    height: 100,
  }
};
</script>
```
 **/
class Parallax {
	public options: {
		container: HTMLElement;
		selector: string;
		strength: number;
		center: number;
		range: number[];
		align: IAlign[keyof IAlign];
		horizontal: boolean;
	};
	private _root: Window | HTMLElement;
	private _container: HTMLElement;
	private _rootSize: number;
	private _containerPosition: number;
	private _style: IParallaxStyle;
	constructor(
		root: Window | HTMLElement | IJQuery | string = window,
		options: Partial<Parallax["options"]> = {}) {
		this.options = assign({
			container: null,
			selector: "img",
			strength: 1,
			center: 0,
			range: [-1, 1],
			align: START,
			horizontal: false,
		}, options);
		this._root = $(root);
		this._container = this.options.container && $(this.options.container);
		this._rootSize = 0;
		this._containerPosition = 0;
		this._style = style[this.options.horizontal ? "horizontal" : "vertical"];
		this.resize();
	}
	/**
	 * As the browser is resized, the gaps between the root and the container and the size of the items are updated.
	 * @ko 브라우저의 크기가 변경됨으로 써 root와 container의 간격과 아이템들의 크기를 갱신한다.
	 * @method eg.Parallax#resize
	 * @param {Array} [items = []] Items to apply parallax. It does not apply if it is not in visible range. <ko>parallax를 적용할 아이템들. 가시거리에 존재하지 않으면 적용이 안된다.</ko>
	 * @return {eg.Parallax} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
	 * @example
  ```js
  window.addEventListener("resize", function (e) {
	parallax.resize(items);
  });
  ```
	 */
	public resize(items: IInfiniteGridItem[] = []) {
		const root = this._root;
		const container = this._container;
		const positionName = this._style.position;
		const sizeName = this._style.cammelSize;
		if (!container || root === container) {
			this._containerPosition = 0;
		} else {
			const rootRect = (isWindow(root) ? document.body : root).getBoundingClientRect();
			const containertRect = container.getBoundingClientRect();
			this._containerPosition = containertRect[positionName] - rootRect[positionName];
		}
		this._rootSize = isWindow(root) ?
			window[`inner${sizeName}` as InnerSizeType] ||
			document.documentElement[`client${sizeName}` as ClientSizeType] :
			root[`client${sizeName}` as ClientSizeType];
		if (isMobile && isWindow(root)) {
			const bodyWidth = document.body.offsetWidth || document.documentElement.offsetWidth;
			const windowWidth = window.innerWidth;
			this._rootSize = this._rootSize / (bodyWidth / windowWidth);
		}
		items.forEach(item => {
			this._checkParallaxItem(item.el!);
		});
		return this;
	}
	/**
	 * Scrolls the image in the item by a parallax.
	 * @ko 스크롤하면 아이템안의 이미지를 시차적용시킨다.
	 * @method eg.Parallax#refresh
	 * @param {Array} [items = []] Items to apply parallax. It does not apply if it is not in visible range. <ko>parallax를 적용할 아이템들. 가시거리에 존재하지 않으면 적용이 안된다.</ko>
	 * @param {Number} [scrollPositionStart = 0] The scroll position.
	 * @return {eg.Parallax} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
	 * @example
  ```js
  document.body.addEventListener("scroll", function (e) {
	parallax.refresh(items, e.scrollTop);
  });
  ```
	 */
	public refresh(items: IInfiniteGridItem[] = [], scrollPositionStart = 0) {
		const styleNames = this._style;
		const positionName = styleNames.position;
		const coordinateName = styleNames.coordinate;
		const sizeName = styleNames.size;
		const options = this.options;
		const { strength, center, range, align } = options;
		const rootSize = this._rootSize;
		const scrollPositionEnd = scrollPositionStart + rootSize;
		const containerPosition = this._containerPosition;
		items.forEach(item => {
			if (!item.rect || !item.size || !item.el) {
				return;
			}
			const position = containerPosition + item.rect[positionName];
			const itemSize = item.rect[sizeName] || item.size[sizeName];
			// check item is in container.
			if (scrollPositionStart > position + itemSize ||
				scrollPositionEnd < position) {
				return;
			}
			const el = item.el;
			if (!el.__IMAGE__) {
				this._checkParallaxItem(el);
			}
			if (el.__IMAGE__ === -1) {
				return;
			}
			const imageElement = el.__IMAGE__!;
			const boxElement = el.__BOX__!;
			const boxSize = boxElement.__SIZE__!;
			const imageSize = imageElement.__SIZE__!;
			// no parallax
			if (boxSize >= imageSize) {
				// remove transform style
				imageElement.style[TRANSFORM] = "";
				return;
			}
			// if area's position is center, ratio is 0.
			// if area is hidden at the top, ratio is 1.
			// if area is hidden at the bottom, ratio is -1.
			const imagePosition = position + boxSize / 2;
			let ratio = (scrollPositionStart + rootSize / 2 -
				(rootSize + boxSize) / 2 * center - imagePosition) /
				(rootSize + boxSize) * 2 * strength;
			// if ratio is out of the range of -1 and 1, show empty space.
			ratio = Math.max(Math.min(ratio, range[1]), range[0]);
			// dist is the position when thumnail's image is centered.
			const dist = (boxSize - imageSize) / 2;
			let translate = dist * (1 - ratio);
			if (align === CENTER) {
				translate -= dist;
			}
			imageElement.__TRANSLATE__ = translate;
			imageElement.__RATIO__ = ratio;
			imageElement.style[TRANSFORM] = `translate${coordinateName}(${translate}px)`;
		});
		return this;
	}
	private _checkParallaxItem(element: IInfiniteGridItemElement) {
		if (!element) {
			return;
		}
		const selector = this.options.selector;
		if (!element.__IMAGE__) {
			const img = element.querySelector<IInfiniteGridItemElement>(selector);
			element.__IMAGE__ = img || -1;
			if (!img) {
				return;
			}
			element.__BOX__ = img.parentNode as IInfiniteGridItemElement;
		}
		if (element.__IMAGE__ === -1) {
			return;
		}
		const sizeName = this._style.cammelSize;
		element.__IMAGE__.__SIZE__ = element.__IMAGE__[`offset${sizeName}` as OffsetSizeType];
		element.__BOX__!.__SIZE__ = element.__BOX__![`offset${sizeName}` as OffsetSizeType];
	}
}
export default Parallax;