1 | /**
|
2 | * egjs-conveyer
|
3 | * Copyright (c) 2022-present NAVER Corp.
|
4 | * MIT license
|
5 | */
|
6 | import Axes from "@egjs/axes";
|
7 | import Component from "@egjs/component";
|
8 | import { ReactiveSubscribe, Ref } from "@cfcs/core";
|
9 | import { ConveyerEvents, ConveyerItem, ConveyerOptions, FindItemOptions, ConveyerReactiveState, ScrollIntoViewOptions } from "./types";
|
10 | /**
|
11 | * Conveyer adds Drag gestures to your Native Scroll.
|
12 | * @ko Conveyer는 네이티브 스크롤에 드래그 제스처를 추가합니다.
|
13 | * @extends Component
|
14 | * @support {"ie": "9+(with polyfill)", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "4.X+"}
|
15 | * @example
|
16 | ```html
|
17 | <div class="items">
|
18 | <div class="item"></div>
|
19 | <div class="item"></div>
|
20 | <div class="item"></div>
|
21 | </div>
|
22 | <script>
|
23 | import Conveyer from "@egjs/conveyer";
|
24 |
|
25 | const conveyer = new Conveyer(".items");
|
26 | </script>
|
27 | ```
|
28 | */
|
29 | declare class Conveyer extends Component<ConveyerEvents> {
|
30 | protected _scrollAreaElement: HTMLElement;
|
31 | protected _axes: Axes | null;
|
32 | protected _items: ConveyerItem[];
|
33 | protected _size: number;
|
34 | protected _scrollSize: number;
|
35 | protected _options: ConveyerOptions;
|
36 | protected _animateParam: {
|
37 | expectedPos: number;
|
38 | } | null;
|
39 | private _resizeObserver;
|
40 | private _scrollTimer;
|
41 | private _isWheelScroll;
|
42 | private _isDragScroll;
|
43 | private _isAnimationScroll;
|
44 | private _scrollArea;
|
45 | /**
|
46 | * Whether the scroll has reached the start.
|
47 | * @ko 스크롤이 시작에 닿았는지 여부.
|
48 | * @name Conveyer#isReachStart
|
49 | * @type {boolean}
|
50 | * @default true
|
51 | * @readonly
|
52 | * @example
|
53 | * ```js
|
54 | * import { Conveyer } from "@egjs/conveyer";
|
55 | *
|
56 | * const conveyer = new Conveyer(".container");
|
57 | *
|
58 | * conveyer.isReachStart
|
59 | * ```
|
60 | */
|
61 | private _isReachStart;
|
62 | /**
|
63 | * Whether the scroll has reached the end.
|
64 | * @ko 스크롤이 끝에 닿았는지 여부.
|
65 | * @name Conveyer#isReachEnd
|
66 | * @type {boolean}
|
67 | * @default false
|
68 | * @readonly
|
69 | * @example
|
70 | * ```js
|
71 | * import { Conveyer } from "@egjs/conveyer";
|
72 | *
|
73 | * const conveyer = new Conveyer(".container");
|
74 | *
|
75 | * conveyer.isReachEnd
|
76 | * ```
|
77 | */
|
78 | private _isReachEnd;
|
79 | /**
|
80 | * the scroll position of the container
|
81 | * @ko 컨테이너의 스크롤 위치
|
82 | * @name Conveyer#scrollPos
|
83 | * @type {number}
|
84 | * @default 0
|
85 | * @readonly
|
86 | * @example
|
87 | * ```js
|
88 | * import { Conveyer } from "@egjs/conveyer";
|
89 | *
|
90 | * const conveyer = new Conveyer(".container");
|
91 | *
|
92 | * conveyer.scrollPos
|
93 | * ```
|
94 | */
|
95 | protected _pos: number;
|
96 | /**
|
97 | * @param - A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko>
|
98 | * @param - The option object of the InfiniteGrid module <ko>eg.InfiniteGrid 모듈의 옵션 객체</ko>
|
99 | */
|
100 | constructor(scrollArea: string | HTMLElement | Ref<HTMLElement>, options?: ConveyerOptions);
|
101 | /**
|
102 | * Finds an element for that direction.
|
103 | * @ko 해당 방향에 대해 엘리먼트를 찾는다.]
|
104 | * @see {@link /docs/examples/Methods direction's example} page for detailed information
|
105 | * @param - direction of the element. "start" and "end" find inside. "prev" and "next" find outside. <ko>엘리먼트의 방향. "start", "end"는 안쪽으로 찾는다. "prev", "next"는 바깥쪽으로 찾는다.</ko>
|
106 | * @param - Options for the `findElement` method. <ko>findElement 메서드의 옵션</ko>
|
107 | *
|
108 | * <p align="center">
|
109 | * <img src="https://naver.github.io/egjs-conveyer/img/scrollIntoView1.png" height="200" />
|
110 | * </p>
|
111 | * <p align="center">
|
112 | * <img src="https://naver.github.io/egjs-conveyer/img/scrollIntoView2.png" height="210" />
|
113 | * </p>
|
114 | */
|
115 | findElement(direction: "start" | "end" | "prev" | "next", options?: FindItemOptions): HTMLElement;
|
116 | /**
|
117 | * Finds an item for an element or its direction.
|
118 | * @ko 엘리먼트 또는 해당 방향에 대해 아이템을 찾는다.
|
119 | * @see {@link /docs/examples/Methods direction's example} page for detailed information
|
120 | * @param - direction of the element. "start" and "end" find inside. "prev" and "next" find outside. <ko>엘리먼트의 방향. "start", "end"는 안쪽으로 찾는다. "prev", "next"는 바깥쪽으로 찾는다.</ko>
|
121 | * @param - Options for the `findItem` method. <ko>`findItem` 메서드의 옵션</ko>
|
122 | * @example
|
123 | * <p align="center">
|
124 | * <img src="https://naver.github.io/egjs-conveyer/img/scrollIntoView1.png" height="200" />
|
125 | * </p>
|
126 | * <p align="center">
|
127 | * <img src="https://naver.github.io/egjs-conveyer/img/scrollIntoView2.png" height="210" />
|
128 | * </p>
|
129 | */
|
130 | findItem(target: HTMLElement | "start" | "end" | "prev" | "next", options?: FindItemOptions): ConveyerItem | null;
|
131 | /**
|
132 | * Scrolls an element or an item in that direction into the view.
|
133 | * @ko 엘리먼트나 해당 방향에 있는 아이템을 뷰안으로 스크롤을 한다.
|
134 | * @see {@link /docs/examples/Methods target's example} page for detailed information
|
135 | * @param - direction of the element. "start" and "end" find inside. "prev" and "next" find outside. <ko>엘리먼트의 방향. "start", "end"는 안쪽으로 찾는다. "prev", "next"는 바깥쪽으로 찾는다.</ko>
|
136 | * @param - Options for the `scrollIntoView` method. <ko>`scrollIntoView` 메서드의 옵션</ko>
|
137 | * @example
|
138 | * <p align="center">
|
139 | * <img src="https://naver.github.io/egjs-conveyer/img/scrollIntoView1.png" height="200" />
|
140 | * </p>
|
141 | * <p align="center">
|
142 | * <img src="https://naver.github.io/egjs-conveyer/img/scrollIntoView2.png" height="210" />
|
143 | * </p>
|
144 | */
|
145 | scrollIntoView(target: HTMLElement | "start" | "end" | "prev" | "next", options?: ScrollIntoViewOptions): void;
|
146 | /**
|
147 | * Scrolls by the given position amount.
|
148 | * @ko 주어진 위치 양만큼 스크롤한다.
|
149 | * @param - Amount of position to scroll by. <ko>스크롤할 위치의 양.</ko>
|
150 | * @param - Duration to scroll by that position. <ko>해당 위치만큼 스크롤하는 시간</ko>
|
151 | */
|
152 | scrollBy(pos: number, duration?: number): void;
|
153 | /**
|
154 | * Scroll to the given position.
|
155 | * @ko 주어진 위치로 스크롤한다.
|
156 | * @param - Amount of position to scroll to. <ko>스크롤할 위치의 양.</ko>
|
157 | * @param - Duration to scroll to that position. <ko>해당 위치로 스크롤하는 시간</ko>
|
158 | */
|
159 | scrollTo(pos: number, duration?: number): void;
|
160 | /**
|
161 | * Set the items directly to the Conveyer.
|
162 | * @ko Conveyer에 아이템들을 직접 설정한다.
|
163 | * @param - Items to set on Conveyer <ko>Conveyer에 설정할 아이템들</ko>
|
164 | */
|
165 | setItems(items: ConveyerItem[]): void;
|
166 | /**
|
167 | * Update the position and size information of items.
|
168 | * @ko 아이템들의 포지션, 사이즈 정보를 업데이트 한다.
|
169 | */
|
170 | updateItems(): void;
|
171 | /**
|
172 | * Update container size and scroll size.
|
173 | * @ko 컨테이너의 크기, 스크롤 사이즈를 업데이트 한다.
|
174 | */
|
175 | updateContainer(): void;
|
176 | /**
|
177 | * Updating containers and items.
|
178 | * @ko 컨테이너와 아이템들을 업데이트 한다.
|
179 | * @method
|
180 | */
|
181 | update: () => void;
|
182 | /**
|
183 | * If you use the autoInit option as false, you can initialize it directly through the init method.
|
184 | * @ko autoInit 옵션을 false로 사용하는 경우 직접 init 메서드를 통해 초기화 할 수 있다.
|
185 | */
|
186 | init(): void;
|
187 | /**
|
188 | * Releases the instnace and events.
|
189 | * @ko 인스턴스와 이벤트를 해제한다.
|
190 | */
|
191 | destroy(): void;
|
192 | private _refreshScroll;
|
193 | private _getItem;
|
194 | private _getNativeEvent;
|
195 | private _getNextScrollPos;
|
196 | private _isMixedWheel;
|
197 | private _checkNestedMove;
|
198 | private _onScroll;
|
199 | private _debounceScroll;
|
200 | private _createAnimationParam;
|
201 | }
|
202 | interface Conveyer extends ConveyerReactiveState, ReactiveSubscribe<ConveyerReactiveState> {
|
203 | }
|
204 | export default Conveyer;
|