1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | import { FlickingOptions, EventType, Direction, AxesEventType, StateType, MoveTypeSnapOption, MoveTypeFreeScrollOption, FlickingMethodsKeys } from "./types";
|
7 |
|
8 | export const MOVE_TYPE: {
|
9 | SNAP: "snap";
|
10 | FREE_SCROLL: "freeScroll";
|
11 | } = {
|
12 | SNAP: "snap",
|
13 | FREE_SCROLL: "freeScroll",
|
14 | };
|
15 |
|
16 | export const DEFAULT_MOVE_TYPE_OPTIONS: {
|
17 | snap: MoveTypeSnapOption,
|
18 | freeScroll: MoveTypeFreeScrollOption,
|
19 | } = {
|
20 | snap: {
|
21 | type: "snap",
|
22 | count: 1,
|
23 | },
|
24 | freeScroll: {
|
25 | type: "freeScroll",
|
26 | },
|
27 | };
|
28 | export const isBrowser = typeof document !== "undefined";
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 | export const DEFAULT_OPTIONS: Readonly<FlickingOptions> = {
|
37 | classPrefix: "eg-flick",
|
38 | deceleration: 0.0075,
|
39 | horizontal: true,
|
40 | circular: false,
|
41 | infinite: false,
|
42 | infiniteThreshold: 0,
|
43 | lastIndex: Infinity,
|
44 | threshold: 40,
|
45 | duration: 100,
|
46 | panelEffect: x => 1 - Math.pow(1 - x, 3),
|
47 | defaultIndex: 0,
|
48 | inputType: ["touch", "mouse"],
|
49 | thresholdAngle: 45,
|
50 | bounce: 10,
|
51 | autoResize: false,
|
52 | adaptive: false,
|
53 | zIndex: 2000,
|
54 | bound: false,
|
55 | overflow: false,
|
56 | hanger: "50%",
|
57 | anchor: "50%",
|
58 | gap: 0,
|
59 | moveType: DEFAULT_MOVE_TYPE_OPTIONS.snap,
|
60 | useOffset: false,
|
61 | isEqualSize: false,
|
62 | isConstantSize: false,
|
63 | renderOnlyVisible: false,
|
64 | renderExternal: false,
|
65 | resizeOnContentsReady: false,
|
66 | iOSEdgeSwipeThreshold: 30,
|
67 | collectStatistics: true,
|
68 | };
|
69 |
|
70 | export const DEFAULT_VIEWPORT_CSS = {
|
71 | position: "relative",
|
72 | zIndex: DEFAULT_OPTIONS.zIndex,
|
73 | overflow: "hidden",
|
74 | };
|
75 |
|
76 | export const DEFAULT_CAMERA_CSS = {
|
77 | width: "100%",
|
78 | height: "100%",
|
79 | willChange: "transform",
|
80 | };
|
81 |
|
82 | export const DEFAULT_PANEL_CSS = {
|
83 | position: "absolute",
|
84 | };
|
85 |
|
86 | export const EVENTS: EventType = {
|
87 | HOLD_START: "holdStart",
|
88 | HOLD_END: "holdEnd",
|
89 | MOVE_START: "moveStart",
|
90 | MOVE: "move",
|
91 | MOVE_END: "moveEnd",
|
92 | CHANGE: "change",
|
93 | RESTORE: "restore",
|
94 | SELECT: "select",
|
95 | NEED_PANEL: "needPanel",
|
96 | VISIBLE_CHANGE: "visibleChange",
|
97 | CONTENT_ERROR: "contentError",
|
98 | };
|
99 |
|
100 | export const AXES_EVENTS: AxesEventType = {
|
101 | HOLD: "hold",
|
102 | CHANGE: "change",
|
103 | RELEASE: "release",
|
104 | ANIMATION_END: "animationEnd",
|
105 | FINISH: "finish",
|
106 | };
|
107 |
|
108 | export const STATE_TYPE: StateType = {
|
109 | IDLE: 0,
|
110 | HOLDING: 1,
|
111 | DRAGGING: 2,
|
112 | ANIMATING: 3,
|
113 | DISABLED: 4,
|
114 | };
|
115 |
|
116 | export const DIRECTION: Direction = {
|
117 | PREV: "PREV",
|
118 | NEXT: "NEXT",
|
119 | };
|
120 | export const FLICKING_METHODS: {[key in FlickingMethodsKeys]: true} = {
|
121 | prev: true,
|
122 | next: true,
|
123 | moveTo: true,
|
124 | getIndex: true,
|
125 | getAllPanels: true,
|
126 | getCurrentPanel: true,
|
127 | getElement: true,
|
128 | getSize: true,
|
129 | getPanel: true,
|
130 | getPanelCount: true,
|
131 | getStatus: true,
|
132 | getVisiblePanels: true,
|
133 | enableInput: true,
|
134 | disableInput: true,
|
135 | destroy: true,
|
136 | resize: true,
|
137 | setStatus: true,
|
138 | isPlaying: true,
|
139 | };
|
140 |
|
141 |
|
142 |
|
143 | export let checkTranslateSupport = () => {
|
144 | const transforms = {
|
145 | webkitTransform: "-webkit-transform",
|
146 | msTransform: "-ms-transform",
|
147 | MozTransform: "-moz-transform",
|
148 | OTransform: "-o-transform",
|
149 | transform: "transform",
|
150 | };
|
151 |
|
152 | if (!isBrowser) {
|
153 | return {
|
154 | name: transforms.transform,
|
155 | has3d: true,
|
156 | };
|
157 | }
|
158 | const supportedStyle = document.documentElement.style;
|
159 | let transformName = "";
|
160 | for (const prefixedTransform in transforms) {
|
161 | if (prefixedTransform in supportedStyle) {
|
162 | transformName = prefixedTransform;
|
163 | }
|
164 | }
|
165 |
|
166 | if (!transformName) {
|
167 | throw new Error("Browser doesn't support CSS3 2D Transforms.");
|
168 | }
|
169 |
|
170 | const el = document.createElement("div");
|
171 |
|
172 | document.documentElement.insertBefore(el, null);
|
173 |
|
174 | el.style[transformName] = "translate3d(1px, 1px, 1px)";
|
175 | const styleVal = window.getComputedStyle(el).getPropertyValue(transforms[transformName]);
|
176 |
|
177 | el.parentElement!.removeChild(el);
|
178 |
|
179 | const transformInfo = {
|
180 | name: transformName,
|
181 | has3d: styleVal.length > 0 && styleVal !== "none",
|
182 | };
|
183 |
|
184 | checkTranslateSupport = () => transformInfo;
|
185 |
|
186 | return transformInfo;
|
187 | };
|
188 |
|
189 | export const TRANSFORM = checkTranslateSupport();
|