@egjs/flicking 4.12.0-beta.3 → 4.12.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/declaration/Flicking.d.ts +244 -244
- package/declaration/camera/Camera.d.ts +90 -89
- package/declaration/camera/index.d.ts +4 -4
- package/declaration/camera/mode/BoundCameraMode.d.ts +13 -13
- package/declaration/camera/mode/CameraMode.d.ts +20 -20
- package/declaration/camera/mode/CircularCameraMode.d.ts +19 -19
- package/declaration/camera/mode/LinearCameraMode.d.ts +9 -9
- package/declaration/camera/mode/index.d.ts +6 -6
- package/declaration/cfc/getDefaultCameraTransform.d.ts +3 -3
- package/declaration/cfc/getRenderingPanels.d.ts +4 -4
- package/declaration/cfc/index.d.ts +5 -5
- package/declaration/cfc/sync.d.ts +4 -4
- package/declaration/cfc/withFlickingMethods.d.ts +2 -2
- package/declaration/const/axes.d.ts +8 -8
- package/declaration/const/error.d.ts +34 -34
- package/declaration/const/external.d.ts +48 -54
- package/declaration/control/AxesController.d.ts +44 -44
- package/declaration/control/Control.d.ts +45 -45
- package/declaration/control/FreeControl.d.ts +14 -14
- package/declaration/control/SnapControl.d.ts +16 -16
- package/declaration/control/StateMachine.d.ts +14 -14
- package/declaration/control/StrictControl.d.ts +20 -20
- package/declaration/control/index.d.ts +14 -14
- package/declaration/control/states/AnimatingState.d.ts +9 -9
- package/declaration/control/states/DisabledState.d.ts +9 -9
- package/declaration/control/states/DraggingState.d.ts +8 -8
- package/declaration/control/states/HoldingState.d.ts +10 -10
- package/declaration/control/states/IdleState.d.ts +9 -9
- package/declaration/control/states/State.d.ts +47 -47
- package/declaration/core/AnchorPoint.d.ts +15 -15
- package/declaration/core/AutoResizer.d.ts +16 -16
- package/declaration/core/FlickingError.d.ts +5 -5
- package/declaration/core/ResizeWatcher.d.ts +33 -33
- package/declaration/core/Viewport.d.ts +25 -25
- package/declaration/core/VirtualManager.d.ts +37 -37
- package/declaration/core/index.d.ts +6 -6
- package/declaration/core/panel/Panel.d.ts +89 -89
- package/declaration/core/panel/VirtualPanel.d.ts +19 -19
- package/declaration/core/panel/index.d.ts +5 -5
- package/declaration/core/panel/provider/ElementProvider.d.ts +8 -8
- package/declaration/core/panel/provider/VanillaElementProvider.d.ts +12 -12
- package/declaration/core/panel/provider/VirtualElementProvider.d.ts +15 -15
- package/declaration/core/panel/provider/index.d.ts +5 -5
- package/declaration/index.cjs.d.ts +3 -3
- package/declaration/index.d.ts +13 -14
- package/declaration/index.umd.d.ts +2 -2
- package/declaration/renderer/ExternalRenderer.d.ts +7 -7
- package/declaration/renderer/Renderer.d.ts +59 -59
- package/declaration/renderer/VanillaRenderer.d.ts +10 -10
- package/declaration/renderer/index.d.ts +6 -6
- package/declaration/renderer/strategy/NormalRenderingStrategy.d.ts +23 -23
- package/declaration/renderer/strategy/RenderingStrategy.d.ts +15 -15
- package/declaration/renderer/strategy/VirtualRenderingStrategy.d.ts +17 -17
- package/declaration/renderer/strategy/index.d.ts +5 -5
- package/declaration/type/event.d.ts +88 -88
- package/declaration/type/external.d.ts +31 -31
- package/declaration/type/internal.d.ts +13 -13
- package/declaration/utils.d.ts +45 -47
- package/dist/flicking.cjs.js +15 -324
- package/dist/flicking.cjs.js.map +1 -1
- package/dist/flicking.esm.js +15 -316
- package/dist/flicking.esm.js.map +1 -1
- package/dist/flicking.js +15 -325
- package/dist/flicking.js.map +1 -1
- package/dist/flicking.min.js +2 -2
- package/dist/flicking.min.js.map +1 -1
- package/dist/flicking.pkgd.js +775 -1092
- package/dist/flicking.pkgd.js.map +1 -1
- package/dist/flicking.pkgd.min.js +2 -2
- package/dist/flicking.pkgd.min.js.map +1 -1
- package/package.json +2 -2
- package/src/camera/Camera.ts +9 -0
- package/src/const/external.ts +0 -14
- package/src/index.ts +0 -2
- package/src/index.umd.ts +0 -2
- package/src/utils.ts +0 -21
- package/declaration/CrossFlicking.d.ts +0 -35
- package/src/CrossFlicking.ts +0 -356
package/declaration/utils.d.ts
CHANGED
|
@@ -1,47 +1,45 @@
|
|
|
1
|
-
import Flicking, { FlickingOptions } from "./Flicking";
|
|
2
|
-
import { ALIGN, DIRECTION } from "./const/external";
|
|
3
|
-
import { LiteralUnion, Merged, ValueOf } from "./type/internal";
|
|
4
|
-
import { ElementLike } from "./type/external";
|
|
5
|
-
export declare const merge: <From extends object, To extends object>(target: From, ...sources: To[]) => Merged<From, To>;
|
|
6
|
-
export declare const getElement: (el: HTMLElement | string | null, parent?: HTMLElement) => HTMLElement;
|
|
7
|
-
export declare const checkExistence: (value: any, nameOnErrMsg: string) => void;
|
|
8
|
-
export declare const clamp: (x: number, min: number, max: number) => number;
|
|
9
|
-
export declare const getFlickingAttached: (val: Flicking | null) => Flicking;
|
|
10
|
-
export declare const toArray: <T>(iterable: ArrayLike<T>) => T[];
|
|
11
|
-
export declare const parseAlign: (align: LiteralUnion<ValueOf<typeof ALIGN>> | number, size: number) => number;
|
|
12
|
-
export declare const parseBounce: (bounce: FlickingOptions["bounce"], size: number) => number[];
|
|
13
|
-
export declare const parseArithmeticSize: (cssValue: number | string, base: number) => number | null;
|
|
14
|
-
export declare const parseArithmeticExpression: (cssValue: number | string) => {
|
|
15
|
-
percentage: number;
|
|
16
|
-
absolute: number;
|
|
17
|
-
} | null;
|
|
18
|
-
export declare const parseCSSSizeValue: (val: string | number) => string;
|
|
19
|
-
export declare const parsePanelAlign: (align: FlickingOptions["align"]) => string | number;
|
|
20
|
-
export declare const getDirection: (start: number, end: number) => ValueOf<typeof DIRECTION>;
|
|
21
|
-
export declare const parseElement: (element: ElementLike | ElementLike[]) => HTMLElement[];
|
|
22
|
-
export declare const getMinusCompensatedIndex: (idx: number, max: number) => number;
|
|
23
|
-
export declare const includes: <T>(array: T[], target: any) => target is T;
|
|
24
|
-
export declare const isString: (val: any) => val is string;
|
|
25
|
-
export declare const circulatePosition: (pos: number, min: number, max: number) => number;
|
|
26
|
-
export declare const find: <T>(array: T[], checker: (val: T) => boolean) => T;
|
|
27
|
-
export declare const findRight: <T>(array: T[], checker: (val: T) => boolean) => T;
|
|
28
|
-
export declare const findIndex: <T>(array: T[], checker: (val: T) => boolean) => number;
|
|
29
|
-
export declare const getProgress: (pos: number, prev: number, next: number) => number;
|
|
30
|
-
export declare const getStyle: (el: HTMLElement) => CSSStyleDeclaration;
|
|
31
|
-
export declare const setSize: (el: HTMLElement, { width, height }: Partial<{
|
|
32
|
-
width: number | string;
|
|
33
|
-
height: number | string;
|
|
34
|
-
}>) => void;
|
|
35
|
-
export declare const isBetween: (val: number, min: number, max: number) => boolean;
|
|
36
|
-
export declare const circulateIndex: (index: number, max: number) => number;
|
|
37
|
-
export declare const range: (end: number) => number[];
|
|
38
|
-
export declare const getElementSize: ({ el, horizontal, useFractionalSize, useOffset, style }: {
|
|
39
|
-
el: HTMLElement;
|
|
40
|
-
horizontal: boolean;
|
|
41
|
-
useFractionalSize: boolean;
|
|
42
|
-
useOffset: boolean;
|
|
43
|
-
style: CSSStyleDeclaration;
|
|
44
|
-
}) => number;
|
|
45
|
-
export declare const setPrototypeOf: (o: any, proto: object) => any;
|
|
46
|
-
export declare const camelize: (str: string) => string;
|
|
47
|
-
export declare const getDataAttributes: (element: HTMLElement, attributePrefix: string) => Record<string, string>;
|
|
1
|
+
import Flicking, { FlickingOptions } from "./Flicking";
|
|
2
|
+
import { ALIGN, DIRECTION } from "./const/external";
|
|
3
|
+
import { LiteralUnion, Merged, ValueOf } from "./type/internal";
|
|
4
|
+
import { ElementLike } from "./type/external";
|
|
5
|
+
export declare const merge: <From extends object, To extends object>(target: From, ...sources: To[]) => Merged<From, To>;
|
|
6
|
+
export declare const getElement: (el: HTMLElement | string | null, parent?: HTMLElement) => HTMLElement;
|
|
7
|
+
export declare const checkExistence: (value: any, nameOnErrMsg: string) => void;
|
|
8
|
+
export declare const clamp: (x: number, min: number, max: number) => number;
|
|
9
|
+
export declare const getFlickingAttached: (val: Flicking | null) => Flicking;
|
|
10
|
+
export declare const toArray: <T>(iterable: ArrayLike<T>) => T[];
|
|
11
|
+
export declare const parseAlign: (align: LiteralUnion<ValueOf<typeof ALIGN>> | number, size: number) => number;
|
|
12
|
+
export declare const parseBounce: (bounce: FlickingOptions["bounce"], size: number) => number[];
|
|
13
|
+
export declare const parseArithmeticSize: (cssValue: number | string, base: number) => number | null;
|
|
14
|
+
export declare const parseArithmeticExpression: (cssValue: number | string) => {
|
|
15
|
+
percentage: number;
|
|
16
|
+
absolute: number;
|
|
17
|
+
} | null;
|
|
18
|
+
export declare const parseCSSSizeValue: (val: string | number) => string;
|
|
19
|
+
export declare const parsePanelAlign: (align: FlickingOptions["align"]) => string | number;
|
|
20
|
+
export declare const getDirection: (start: number, end: number) => ValueOf<typeof DIRECTION>;
|
|
21
|
+
export declare const parseElement: (element: ElementLike | ElementLike[]) => HTMLElement[];
|
|
22
|
+
export declare const getMinusCompensatedIndex: (idx: number, max: number) => number;
|
|
23
|
+
export declare const includes: <T>(array: T[], target: any) => target is T;
|
|
24
|
+
export declare const isString: (val: any) => val is string;
|
|
25
|
+
export declare const circulatePosition: (pos: number, min: number, max: number) => number;
|
|
26
|
+
export declare const find: <T>(array: T[], checker: (val: T) => boolean) => T;
|
|
27
|
+
export declare const findRight: <T>(array: T[], checker: (val: T) => boolean) => T;
|
|
28
|
+
export declare const findIndex: <T>(array: T[], checker: (val: T) => boolean) => number;
|
|
29
|
+
export declare const getProgress: (pos: number, prev: number, next: number) => number;
|
|
30
|
+
export declare const getStyle: (el: HTMLElement) => CSSStyleDeclaration;
|
|
31
|
+
export declare const setSize: (el: HTMLElement, { width, height }: Partial<{
|
|
32
|
+
width: number | string;
|
|
33
|
+
height: number | string;
|
|
34
|
+
}>) => void;
|
|
35
|
+
export declare const isBetween: (val: number, min: number, max: number) => boolean;
|
|
36
|
+
export declare const circulateIndex: (index: number, max: number) => number;
|
|
37
|
+
export declare const range: (end: number) => number[];
|
|
38
|
+
export declare const getElementSize: ({ el, horizontal, useFractionalSize, useOffset, style }: {
|
|
39
|
+
el: HTMLElement;
|
|
40
|
+
horizontal: boolean;
|
|
41
|
+
useFractionalSize: boolean;
|
|
42
|
+
useOffset: boolean;
|
|
43
|
+
style: CSSStyleDeclaration;
|
|
44
|
+
}) => number;
|
|
45
|
+
export declare const setPrototypeOf: (o: any, proto: object) => any;
|
package/dist/flicking.cjs.js
CHANGED
|
@@ -4,7 +4,7 @@ name: @egjs/flicking
|
|
|
4
4
|
license: MIT
|
|
5
5
|
author: NAVER Corp.
|
|
6
6
|
repository: https://github.com/naver/egjs-flicking
|
|
7
|
-
version: 4.12.0-beta.
|
|
7
|
+
version: 4.12.0-beta.4
|
|
8
8
|
*/
|
|
9
9
|
'use strict';
|
|
10
10
|
|
|
@@ -12,7 +12,7 @@ var Component = require('@egjs/component');
|
|
|
12
12
|
var Axes = require('@egjs/axes');
|
|
13
13
|
var ImReady = require('@egjs/imready');
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
/*! *****************************************************************************
|
|
16
16
|
Copyright (c) Microsoft Corporation.
|
|
17
17
|
|
|
18
18
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -26,7 +26,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
|
26
26
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
27
27
|
PERFORMANCE OF THIS SOFTWARE.
|
|
28
28
|
***************************************************************************** */
|
|
29
|
-
/* global Reflect, Promise
|
|
29
|
+
/* global Reflect, Promise */
|
|
30
30
|
|
|
31
31
|
var extendStatics = function (d, b) {
|
|
32
32
|
extendStatics = Object.setPrototypeOf || {
|
|
@@ -111,7 +111,7 @@ function __generator(thisArg, body) {
|
|
|
111
111
|
}
|
|
112
112
|
function step(op) {
|
|
113
113
|
if (f) throw new TypeError("Generator is already executing.");
|
|
114
|
-
while (
|
|
114
|
+
while (_) try {
|
|
115
115
|
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
116
116
|
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
117
117
|
switch (op[0]) {
|
|
@@ -215,10 +215,6 @@ function __spread() {
|
|
|
215
215
|
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
|
|
216
216
|
return ar;
|
|
217
217
|
}
|
|
218
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
219
|
-
var e = new Error(message);
|
|
220
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
221
|
-
};
|
|
222
218
|
|
|
223
219
|
/*
|
|
224
220
|
* Copyright (c) 2015 NAVER Corp.
|
|
@@ -387,8 +383,6 @@ var MOVE_TYPE = {
|
|
|
387
383
|
STRICT: "strict"
|
|
388
384
|
};
|
|
389
385
|
var CLASS = {
|
|
390
|
-
VIEWPORT: "flicking-viewport",
|
|
391
|
-
CAMERA: "flicking-camera",
|
|
392
386
|
VERTICAL: "vertical",
|
|
393
387
|
HIDDEN: "flicking-hidden",
|
|
394
388
|
DEFAULT_VIRTUAL: "flicking-panel"
|
|
@@ -415,17 +409,6 @@ var ORDER = {
|
|
|
415
409
|
LTR: "ltr",
|
|
416
410
|
RTL: "rtl"
|
|
417
411
|
};
|
|
418
|
-
/**
|
|
419
|
-
* An object that contains the direction that {@link Flicking} is moving
|
|
420
|
-
* @ko {@link Flicking}이 움직이는 방향을 담고 있는 객체
|
|
421
|
-
* @type {object}
|
|
422
|
-
* @property {"horizontal"} HORIZONTAL horizontal<ko>수평 방향</ko>
|
|
423
|
-
* @property {"vertical"} VERTICAL vertical<ko>수직 방향</ko>
|
|
424
|
-
*/
|
|
425
|
-
var MOVE_DIRECTION = {
|
|
426
|
-
HORIZONTAL: "horizontal",
|
|
427
|
-
VERTICAL: "vertical"
|
|
428
|
-
};
|
|
429
412
|
|
|
430
413
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
431
414
|
var merge = function (target) {
|
|
@@ -740,26 +723,6 @@ var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
|
|
|
740
723
|
obj.__proto__ = proto;
|
|
741
724
|
return obj;
|
|
742
725
|
};
|
|
743
|
-
var camelize = function (str) {
|
|
744
|
-
return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
|
|
745
|
-
return letter.toUpperCase();
|
|
746
|
-
});
|
|
747
|
-
};
|
|
748
|
-
var getDataAttributes = function (element, attributePrefix) {
|
|
749
|
-
var dataAttributes = {};
|
|
750
|
-
var attributes = element.attributes;
|
|
751
|
-
var length = attributes.length;
|
|
752
|
-
for (var i = 0; i < length; ++i) {
|
|
753
|
-
var attribute = attributes[i];
|
|
754
|
-
var name_1 = attribute.name,
|
|
755
|
-
value = attribute.value;
|
|
756
|
-
if (name_1.indexOf(attributePrefix) === -1) {
|
|
757
|
-
continue;
|
|
758
|
-
}
|
|
759
|
-
dataAttributes[camelize(name_1.replace(attributePrefix, ""))] = value;
|
|
760
|
-
}
|
|
761
|
-
return dataAttributes;
|
|
762
|
-
};
|
|
763
726
|
|
|
764
727
|
/*
|
|
765
728
|
* Copyright (c) 2015 NAVER Corp.
|
|
@@ -3746,6 +3709,7 @@ var Camera = /*#__PURE__*/function () {
|
|
|
3746
3709
|
var _this = this;
|
|
3747
3710
|
var _b = (_a === void 0 ? {} : _a).align,
|
|
3748
3711
|
align = _b === void 0 ? ALIGN.CENTER : _b;
|
|
3712
|
+
this._lookedOffset = 0;
|
|
3749
3713
|
this._checkTranslateSupport = function () {
|
|
3750
3714
|
var e_1, _a;
|
|
3751
3715
|
var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
|
|
@@ -4105,6 +4069,8 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4105
4069
|
*/
|
|
4106
4070
|
__proto.lookAt = function (pos) {
|
|
4107
4071
|
var _this = this;
|
|
4072
|
+
var prevOffset = this._offset;
|
|
4073
|
+
var isChangedOffset = this._lookedOffset !== prevOffset;
|
|
4108
4074
|
var flicking = getFlickingAttached(this._flicking);
|
|
4109
4075
|
var prevPos = this._position;
|
|
4110
4076
|
this._position = pos;
|
|
@@ -4115,7 +4081,12 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4115
4081
|
if (toggled) {
|
|
4116
4082
|
void flicking.renderer.render().then(function () {
|
|
4117
4083
|
_this.updateOffset();
|
|
4084
|
+
_this._lookedOffset = _this._offset;
|
|
4118
4085
|
});
|
|
4086
|
+
} else if (isChangedOffset) {
|
|
4087
|
+
// sync offset for renderOnlyVisible on resize
|
|
4088
|
+
this.updateOffset();
|
|
4089
|
+
this._lookedOffset = this._offset;
|
|
4119
4090
|
} else {
|
|
4120
4091
|
this.applyTransform();
|
|
4121
4092
|
}
|
|
@@ -4374,6 +4345,7 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4374
4345
|
};
|
|
4375
4346
|
__proto._resetInternalValues = function () {
|
|
4376
4347
|
this._position = 0;
|
|
4348
|
+
this._lookedOffset = 0;
|
|
4377
4349
|
this._alignPos = 0;
|
|
4378
4350
|
this._offset = 0;
|
|
4379
4351
|
this._circularOffset = 0;
|
|
@@ -7895,283 +7867,10 @@ var Flicking = /*#__PURE__*/function (_super) {
|
|
|
7895
7867
|
* Flicking.VERSION; // ex) 4.0.0
|
|
7896
7868
|
* ```
|
|
7897
7869
|
*/
|
|
7898
|
-
Flicking.VERSION = "4.12.0-beta.
|
|
7870
|
+
Flicking.VERSION = "4.12.0-beta.4";
|
|
7899
7871
|
return Flicking;
|
|
7900
7872
|
}(Component);
|
|
7901
7873
|
|
|
7902
|
-
/*
|
|
7903
|
-
* Copyright (c) 2015 NAVER Corp.
|
|
7904
|
-
* egjs projects are licensed under the MIT license
|
|
7905
|
-
*/
|
|
7906
|
-
/**
|
|
7907
|
-
* @extends Component
|
|
7908
|
-
* @support {"ie": "9+(with polyfill)", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "4.X+"}
|
|
7909
|
-
* @requires {@link https://github.com/naver/egjs-component|@egjs/component}
|
|
7910
|
-
* @requires {@link https://github.com/naver/egjs-axes|@egjs/axes}
|
|
7911
|
-
*/
|
|
7912
|
-
var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
7913
|
-
__extends(CrossFlicking, _super);
|
|
7914
|
-
// Options Setter
|
|
7915
|
-
// public set align(val: FlickingOptions["align"]) {
|
|
7916
|
-
// this._align = val;
|
|
7917
|
-
// }
|
|
7918
|
-
function CrossFlicking(root, _a) {
|
|
7919
|
-
var _b = (_a === void 0 ? {} : _a).verticalOptions,
|
|
7920
|
-
verticalOptions = _b === void 0 ? undefined : _b;
|
|
7921
|
-
var _this = _super.call(this, root) || this;
|
|
7922
|
-
_this._onHorizontalHoldStart = function () {
|
|
7923
|
-
_this.dragThreshold = 10;
|
|
7924
|
-
_this._moveDirection = null;
|
|
7925
|
-
};
|
|
7926
|
-
_this._onHorizontalMove = function (e) {
|
|
7927
|
-
if (e.isTrusted && !_this._moveDirection) {
|
|
7928
|
-
_this._verticalFlicking.forEach(function (child) {
|
|
7929
|
-
child.dragThreshold = Infinity;
|
|
7930
|
-
});
|
|
7931
|
-
_this._moveDirection = MOVE_DIRECTION.HORIZONTAL;
|
|
7932
|
-
}
|
|
7933
|
-
};
|
|
7934
|
-
_this._onHorizontalMoveEnd = function (e) {
|
|
7935
|
-
var visiblePanels = _this.visiblePanels;
|
|
7936
|
-
_this._verticalFlicking.forEach(function (child) {
|
|
7937
|
-
child.dragThreshold = 10;
|
|
7938
|
-
});
|
|
7939
|
-
_this._moveDirection = null;
|
|
7940
|
-
if (visiblePanels.length > 1) {
|
|
7941
|
-
_this._nextIndex = e.direction === "NEXT" ? visiblePanels[1].index : visiblePanels[0].index;
|
|
7942
|
-
} else {
|
|
7943
|
-
_this._nextIndex = visiblePanels[0].index;
|
|
7944
|
-
}
|
|
7945
|
-
_this._verticalFlicking.forEach(function (child, i) {
|
|
7946
|
-
if (_this._nextIndex !== i) {
|
|
7947
|
-
var _a = _this._verticalState[i],
|
|
7948
|
-
start = _a.start,
|
|
7949
|
-
end = _a.end;
|
|
7950
|
-
if (child.index < start) {
|
|
7951
|
-
child.stopAnimation();
|
|
7952
|
-
void child.moveTo(start, 0);
|
|
7953
|
-
} else if (child.index > end) {
|
|
7954
|
-
child.stopAnimation();
|
|
7955
|
-
void child.moveTo(end, 0);
|
|
7956
|
-
}
|
|
7957
|
-
}
|
|
7958
|
-
});
|
|
7959
|
-
if (e.isTrusted) {
|
|
7960
|
-
_this._syncToCategory(_this._verticalFlicking[_this._nextIndex].index, _this._nextIndex);
|
|
7961
|
-
}
|
|
7962
|
-
};
|
|
7963
|
-
_this._onVerticalHoldStart = function () {
|
|
7964
|
-
_this._verticalFlicking.forEach(function (child) {
|
|
7965
|
-
child.dragThreshold = 10;
|
|
7966
|
-
});
|
|
7967
|
-
_this._moveDirection = null;
|
|
7968
|
-
};
|
|
7969
|
-
_this._onVerticalMove = function (e) {
|
|
7970
|
-
if (e.isTrusted && !_this._moveDirection) {
|
|
7971
|
-
_this.dragThreshold = Infinity;
|
|
7972
|
-
_this._moveDirection = MOVE_DIRECTION.VERTICAL;
|
|
7973
|
-
}
|
|
7974
|
-
};
|
|
7975
|
-
_this._onVerticalMoveEnd = function () {
|
|
7976
|
-
_this.dragThreshold = 10;
|
|
7977
|
-
_this._moveDirection = null;
|
|
7978
|
-
};
|
|
7979
|
-
_this._onVerticalChanged = function (e) {
|
|
7980
|
-
// this.visiblePanels.length 가 2보다 크다면 가로 방향 Flicking이 조작 중이라는 것을 의미합니다.
|
|
7981
|
-
// 이 경우 가로 방향 Flicking의 이동이 완전히 끝난 뒤 _onHorizontalMoveEnd 에서 syncToCategory할 것이므로 여기서는 하지 않습니다.
|
|
7982
|
-
if (_this.visiblePanels.length < 2 && _this._verticalFlicking[_this.index] === e.currentTarget) {
|
|
7983
|
-
_this._syncToCategory(e.index, _this.index);
|
|
7984
|
-
}
|
|
7985
|
-
};
|
|
7986
|
-
// Internal states
|
|
7987
|
-
_this._verticalState = _this._createVerticalState();
|
|
7988
|
-
_this._moveDirection = null;
|
|
7989
|
-
_this._nextIndex = 0;
|
|
7990
|
-
// Bind options
|
|
7991
|
-
_this._verticalOptions = verticalOptions;
|
|
7992
|
-
// Create core components
|
|
7993
|
-
_this._verticalFlicking = _this._createVerticalFlicking();
|
|
7994
|
-
return _this;
|
|
7995
|
-
}
|
|
7996
|
-
var __proto = CrossFlicking.prototype;
|
|
7997
|
-
Object.defineProperty(__proto, "verticalFlicking", {
|
|
7998
|
-
// Components
|
|
7999
|
-
/**
|
|
8000
|
-
* {@link Control} instance of the Flicking
|
|
8001
|
-
* @ko 현재 Flicking에 활성화된 {@link Control} 인스턴스
|
|
8002
|
-
* @type {Control}
|
|
8003
|
-
* @default SnapControl
|
|
8004
|
-
* @readonly
|
|
8005
|
-
* @see Control
|
|
8006
|
-
* @see SnapControl
|
|
8007
|
-
* @see FreeControl
|
|
8008
|
-
*/
|
|
8009
|
-
get: function () {
|
|
8010
|
-
return this._verticalFlicking;
|
|
8011
|
-
},
|
|
8012
|
-
enumerable: false,
|
|
8013
|
-
configurable: true
|
|
8014
|
-
});
|
|
8015
|
-
Object.defineProperty(__proto, "verticalState", {
|
|
8016
|
-
// Internal States
|
|
8017
|
-
/**
|
|
8018
|
-
* Whether Flicking's {@link Flicking#init init()} is called.
|
|
8019
|
-
* This is `true` when {@link Flicking#init init()} is called, and is `false` after calling {@link Flicking#destroy destroy()}.
|
|
8020
|
-
* @ko Flicking의 {@link Flicking#init init()}이 호출되었는지를 나타내는 멤버 변수.
|
|
8021
|
-
* 이 값은 {@link Flicking#init init()}이 호출되었으면 `true`로 변하고, {@link Flicking#destroy destroy()}호출 이후에 다시 `false`로 변경됩니다.
|
|
8022
|
-
* @type {boolean}
|
|
8023
|
-
* @default false
|
|
8024
|
-
* @readonly
|
|
8025
|
-
*/
|
|
8026
|
-
get: function () {
|
|
8027
|
-
return this._verticalState;
|
|
8028
|
-
},
|
|
8029
|
-
enumerable: false,
|
|
8030
|
-
configurable: true
|
|
8031
|
-
});
|
|
8032
|
-
Object.defineProperty(__proto, "verticalOptions", {
|
|
8033
|
-
// Options Getter
|
|
8034
|
-
/**
|
|
8035
|
-
* Change active panel index on mouse/touch hold while animating.
|
|
8036
|
-
* `index` of the `willChange`/`willRestore` event will be used as new index.
|
|
8037
|
-
* @ko 애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
|
|
8038
|
-
* `willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다.
|
|
8039
|
-
* @type {FlickingOptions}
|
|
8040
|
-
* @default undefined
|
|
8041
|
-
* @see {@link https://naver.github.io/egjs-flicking/Options#changeonhold changeOnHold ( Options )}
|
|
8042
|
-
*/
|
|
8043
|
-
get: function () {
|
|
8044
|
-
return this._verticalOptions;
|
|
8045
|
-
},
|
|
8046
|
-
enumerable: false,
|
|
8047
|
-
configurable: true
|
|
8048
|
-
});
|
|
8049
|
-
/**
|
|
8050
|
-
* Initialize Flicking and move to the default index
|
|
8051
|
-
* This is automatically called on Flicking's constructor when `autoInit` is true(default)
|
|
8052
|
-
* @ko Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
|
|
8053
|
-
* 이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
|
|
8054
|
-
* @fires Flicking#ready
|
|
8055
|
-
* @return {Promise<void>}
|
|
8056
|
-
*/
|
|
8057
|
-
__proto.init = function () {
|
|
8058
|
-
var _this = this;
|
|
8059
|
-
return _super.prototype.init.call(this).then(function () {
|
|
8060
|
-
return _this._addComponentEvents();
|
|
8061
|
-
});
|
|
8062
|
-
};
|
|
8063
|
-
__proto._addComponentEvents = function () {
|
|
8064
|
-
var _this = this;
|
|
8065
|
-
this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
|
|
8066
|
-
this.on(EVENTS.MOVE, this._onHorizontalMove);
|
|
8067
|
-
this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
|
|
8068
|
-
this._verticalFlicking.forEach(function (flicking) {
|
|
8069
|
-
flicking.on(EVENTS.HOLD_START, _this._onVerticalHoldStart);
|
|
8070
|
-
flicking.on(EVENTS.MOVE, _this._onVerticalMove);
|
|
8071
|
-
flicking.on(EVENTS.MOVE_END, _this._onVerticalMoveEnd);
|
|
8072
|
-
flicking.on(EVENTS.CHANGED, _this._onVerticalChanged);
|
|
8073
|
-
});
|
|
8074
|
-
};
|
|
8075
|
-
__proto._createVerticalState = function () {
|
|
8076
|
-
var _this = this;
|
|
8077
|
-
// data-index로 분류하기 전에 임시로 모든 children에 대해 vertical flicking으로 해보자.
|
|
8078
|
-
// panels에 data-attributes가 붙어있을 때와 안 붙어있을 때를 다르게 처리
|
|
8079
|
-
// 붙어있다면 가상의 viewport들을 index 갯수만큼 만들어줘야 한다
|
|
8080
|
-
var cameraEl = this.camera.element;
|
|
8081
|
-
var panels = toArray(cameraEl.children);
|
|
8082
|
-
var verticalState;
|
|
8083
|
-
var verticalPanels = "";
|
|
8084
|
-
// check data attribute exists
|
|
8085
|
-
var groupKeys = [];
|
|
8086
|
-
var groupPanels = {};
|
|
8087
|
-
var verticalCamera = document.createElement("div");
|
|
8088
|
-
verticalCamera.classList.add(CLASS.CAMERA);
|
|
8089
|
-
panels.forEach(function (panel) {
|
|
8090
|
-
var groupKey = getDataAttributes(panel, "data-flicking-").groupkey;
|
|
8091
|
-
if (groupKey && !includes(groupKeys, groupKey)) {
|
|
8092
|
-
groupKeys.push(groupKey);
|
|
8093
|
-
groupPanels[groupKey] = [panel];
|
|
8094
|
-
} else if (groupKey) {
|
|
8095
|
-
groupPanels[groupKey].push(panel);
|
|
8096
|
-
}
|
|
8097
|
-
return groupKey;
|
|
8098
|
-
});
|
|
8099
|
-
if (groupKeys.length) {
|
|
8100
|
-
panels.forEach(function () {
|
|
8101
|
-
return _this.remove(0);
|
|
8102
|
-
});
|
|
8103
|
-
verticalState = groupKeys.reduce(function (state, key) {
|
|
8104
|
-
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8105
|
-
var element = groupPanels[key].reduce(function (el, panel) {
|
|
8106
|
-
verticalPanels += panel.outerHTML;
|
|
8107
|
-
el.appendChild(panel);
|
|
8108
|
-
return el;
|
|
8109
|
-
}, document.createElement("div"));
|
|
8110
|
-
return __spread(state, [{
|
|
8111
|
-
key: key,
|
|
8112
|
-
start: start,
|
|
8113
|
-
end: start + groupPanels[key].length - 1,
|
|
8114
|
-
element: element
|
|
8115
|
-
}]);
|
|
8116
|
-
}, []);
|
|
8117
|
-
verticalCamera.innerHTML = verticalPanels;
|
|
8118
|
-
cameraEl.innerHTML = "";
|
|
8119
|
-
groupKeys.forEach(function () {
|
|
8120
|
-
var panel = document.createElement("div");
|
|
8121
|
-
panel.classList.add(CLASS.VIEWPORT, CLASS.VERTICAL);
|
|
8122
|
-
panel.innerHTML = verticalCamera.outerHTML;
|
|
8123
|
-
_this.append(panel);
|
|
8124
|
-
});
|
|
8125
|
-
} else {
|
|
8126
|
-
verticalState = panels.reduce(function (state, panel, i) {
|
|
8127
|
-
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8128
|
-
verticalPanels += panel.innerHTML;
|
|
8129
|
-
return __spread(state, [{
|
|
8130
|
-
key: i.toString(),
|
|
8131
|
-
start: start,
|
|
8132
|
-
end: start + panel.children.length - 1,
|
|
8133
|
-
element: panel
|
|
8134
|
-
}]);
|
|
8135
|
-
}, []);
|
|
8136
|
-
verticalCamera.innerHTML = verticalPanels;
|
|
8137
|
-
panels.forEach(function (panel) {
|
|
8138
|
-
[CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
|
|
8139
|
-
if (!panel.classList.contains(className)) {
|
|
8140
|
-
panel.classList.add(className);
|
|
8141
|
-
}
|
|
8142
|
-
});
|
|
8143
|
-
panel.innerHTML = verticalCamera.outerHTML;
|
|
8144
|
-
});
|
|
8145
|
-
}
|
|
8146
|
-
return verticalState;
|
|
8147
|
-
};
|
|
8148
|
-
__proto._createVerticalFlicking = function () {
|
|
8149
|
-
var _this = this;
|
|
8150
|
-
return this.camera.children.map(function (panel, i) {
|
|
8151
|
-
return new Flicking(panel, __assign(__assign({}, _this.verticalOptions), {
|
|
8152
|
-
horizontal: false,
|
|
8153
|
-
panelsPerView: 1,
|
|
8154
|
-
defaultIndex: _this._verticalState[i].start
|
|
8155
|
-
}));
|
|
8156
|
-
});
|
|
8157
|
-
};
|
|
8158
|
-
__proto._syncToCategory = function (index, outerIndex) {
|
|
8159
|
-
var _this = this;
|
|
8160
|
-
this.stopAnimation();
|
|
8161
|
-
this._verticalFlicking.forEach(function (child, i) {
|
|
8162
|
-
var _a = _this._verticalState[i],
|
|
8163
|
-
start = _a.start,
|
|
8164
|
-
end = _a.end;
|
|
8165
|
-
if (start <= index && end >= index && outerIndex !== i) {
|
|
8166
|
-
child.stopAnimation();
|
|
8167
|
-
void child.moveTo(index, 0);
|
|
8168
|
-
void _this.moveTo(i, 0);
|
|
8169
|
-
}
|
|
8170
|
-
});
|
|
8171
|
-
};
|
|
8172
|
-
return CrossFlicking;
|
|
8173
|
-
}(Flicking);
|
|
8174
|
-
|
|
8175
7874
|
/**
|
|
8176
7875
|
* Decorator that makes the method of flicking available in the framework.
|
|
8177
7876
|
* @ko 프레임워크에서 플리킹의 메소드를 사용할 수 있게 하는 데코레이터.
|
|
@@ -8389,7 +8088,6 @@ var parseAlign = function (alignVal) {
|
|
|
8389
8088
|
var modules = {
|
|
8390
8089
|
__proto__: null,
|
|
8391
8090
|
'default': Flicking,
|
|
8392
|
-
CrossFlicking: CrossFlicking,
|
|
8393
8091
|
VanillaElementProvider: VanillaElementProvider,
|
|
8394
8092
|
VirtualElementProvider: VirtualElementProvider,
|
|
8395
8093
|
Panel: Panel,
|
|
@@ -8427,7 +8125,6 @@ var modules = {
|
|
|
8427
8125
|
CLASS: CLASS,
|
|
8428
8126
|
CIRCULAR_FALLBACK: CIRCULAR_FALLBACK,
|
|
8429
8127
|
ORDER: ORDER,
|
|
8430
|
-
MOVE_DIRECTION: MOVE_DIRECTION,
|
|
8431
8128
|
withFlickingMethods: withFlickingMethods,
|
|
8432
8129
|
sync: sync,
|
|
8433
8130
|
getRenderingPanels: getRenderingPanels,
|
|
@@ -8460,9 +8157,7 @@ var modules = {
|
|
|
8460
8157
|
circulateIndex: circulateIndex,
|
|
8461
8158
|
range: range,
|
|
8462
8159
|
getElementSize: getElementSize,
|
|
8463
|
-
setPrototypeOf: setPrototypeOf
|
|
8464
|
-
camelize: camelize,
|
|
8465
|
-
getDataAttributes: getDataAttributes
|
|
8160
|
+
setPrototypeOf: setPrototypeOf
|
|
8466
8161
|
};
|
|
8467
8162
|
|
|
8468
8163
|
/*
|
|
@@ -8484,7 +8179,6 @@ exports.CLASS = CLASS;
|
|
|
8484
8179
|
exports.Camera = Camera;
|
|
8485
8180
|
exports.CircularCameraMode = CircularCameraMode;
|
|
8486
8181
|
exports.Control = Control;
|
|
8487
|
-
exports.CrossFlicking = CrossFlicking;
|
|
8488
8182
|
exports.DIRECTION = DIRECTION;
|
|
8489
8183
|
exports.DisabledState = DisabledState;
|
|
8490
8184
|
exports.DraggingState = DraggingState;
|
|
@@ -8496,7 +8190,6 @@ exports.FreeControl = FreeControl;
|
|
|
8496
8190
|
exports.HoldingState = HoldingState;
|
|
8497
8191
|
exports.IdleState = IdleState;
|
|
8498
8192
|
exports.LinearCameraMode = LinearCameraMode;
|
|
8499
|
-
exports.MOVE_DIRECTION = MOVE_DIRECTION;
|
|
8500
8193
|
exports.MOVE_TYPE = MOVE_TYPE;
|
|
8501
8194
|
exports.NormalRenderingStrategy = NormalRenderingStrategy;
|
|
8502
8195
|
exports.ORDER = ORDER;
|
|
@@ -8513,7 +8206,6 @@ exports.VirtualElementProvider = VirtualElementProvider;
|
|
|
8513
8206
|
exports.VirtualManager = VirtualManager;
|
|
8514
8207
|
exports.VirtualPanel = VirtualPanel;
|
|
8515
8208
|
exports.VirtualRenderingStrategy = VirtualRenderingStrategy;
|
|
8516
|
-
exports.camelize = camelize;
|
|
8517
8209
|
exports.checkExistence = checkExistence;
|
|
8518
8210
|
exports.circulateIndex = circulateIndex;
|
|
8519
8211
|
exports.circulatePosition = circulatePosition;
|
|
@@ -8522,7 +8214,6 @@ exports["default"] = Flicking;
|
|
|
8522
8214
|
exports.find = find;
|
|
8523
8215
|
exports.findIndex = findIndex;
|
|
8524
8216
|
exports.findRight = findRight;
|
|
8525
|
-
exports.getDataAttributes = getDataAttributes;
|
|
8526
8217
|
exports.getDefaultCameraTransform = getDefaultCameraTransform;
|
|
8527
8218
|
exports.getDirection = getDirection;
|
|
8528
8219
|
exports.getElement = getElement;
|