@egjs/flicking 4.12.0-beta.8 → 4.12.0
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/CrossFlicking.d.ts +89 -52
- 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 +54 -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 +15 -15
- 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 +47 -47
- package/dist/flicking-inline.css +37 -0
- package/dist/flicking-inline.min.css +1 -0
- package/dist/flicking-inline.min.min.css +1 -0
- package/dist/flicking.cjs.js +201 -120
- package/dist/flicking.cjs.js.map +1 -1
- package/dist/flicking.css +40 -0
- package/dist/flicking.esm.js +200 -121
- package/dist/flicking.esm.js.map +1 -1
- package/dist/flicking.js +200 -120
- package/dist/flicking.js.map +1 -1
- package/dist/flicking.min.css +1 -0
- package/dist/flicking.min.js +2 -2
- package/dist/flicking.min.js.map +1 -1
- package/dist/flicking.min.min.css +1 -0
- package/dist/flicking.pkgd.js +950 -870
- 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 +5 -6
- package/sass/flicking.sass +13 -0
- package/src/CrossFlicking.ts +224 -112
- package/src/Flicking.ts +1 -1
- package/src/camera/Camera.ts +24 -4
- package/src/control/states/HoldingState.ts +4 -0
- package/src/core/panel/Panel.ts +4 -0
- package/src/utils.ts +4 -0
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
.flicking-viewport {
|
|
2
|
+
position: relative;
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
}
|
|
5
|
+
.flicking-viewport.vertical {
|
|
6
|
+
display: -webkit-inline-box;
|
|
7
|
+
display: -ms-inline-flexbox;
|
|
8
|
+
display: inline-flex;
|
|
9
|
+
}
|
|
10
|
+
.flicking-viewport.vertical > .flicking-camera {
|
|
11
|
+
display: -webkit-inline-box;
|
|
12
|
+
display: -ms-inline-flexbox;
|
|
13
|
+
display: inline-flex;
|
|
14
|
+
-webkit-box-orient: vertical;
|
|
15
|
+
-webkit-box-direction: normal;
|
|
16
|
+
-ms-flex-direction: column;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
}
|
|
19
|
+
.flicking-viewport.flicking-hidden > .flicking-camera > * {
|
|
20
|
+
visibility: hidden;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.flicking-camera {
|
|
24
|
+
width: 100%;
|
|
25
|
+
height: 100%;
|
|
26
|
+
display: -webkit-box;
|
|
27
|
+
display: -ms-flexbox;
|
|
28
|
+
display: flex;
|
|
29
|
+
position: relative;
|
|
30
|
+
-webkit-box-orient: horizontal;
|
|
31
|
+
-webkit-box-direction: normal;
|
|
32
|
+
-ms-flex-direction: row;
|
|
33
|
+
flex-direction: row;
|
|
34
|
+
z-index: 1;
|
|
35
|
+
will-change: transform;
|
|
36
|
+
}
|
|
37
|
+
.flicking-camera > * {
|
|
38
|
+
-ms-flex-negative: 0;
|
|
39
|
+
flex-shrink: 0;
|
|
40
|
+
}
|
package/dist/flicking.esm.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
|
|
7
|
+
version: 4.12.0
|
|
8
8
|
*/
|
|
9
9
|
import Component, { ComponentEvent } from '@egjs/component';
|
|
10
10
|
import Axes, { PanInput } from '@egjs/axes';
|
|
@@ -677,6 +677,9 @@ var getStyle = function (el) {
|
|
|
677
677
|
var setSize = function (el, _a) {
|
|
678
678
|
var width = _a.width,
|
|
679
679
|
height = _a.height;
|
|
680
|
+
if (!el) {
|
|
681
|
+
return;
|
|
682
|
+
}
|
|
680
683
|
if (width != null) {
|
|
681
684
|
if (isString(width)) {
|
|
682
685
|
el.style.width = width;
|
|
@@ -1590,6 +1593,9 @@ var HoldingState = /*#__PURE__*/function (_super) {
|
|
|
1590
1593
|
axesEvent = ctx.axesEvent,
|
|
1591
1594
|
transitTo = ctx.transitTo;
|
|
1592
1595
|
var inputEvent = axesEvent.inputEvent;
|
|
1596
|
+
if (!inputEvent) {
|
|
1597
|
+
return;
|
|
1598
|
+
}
|
|
1593
1599
|
var offset = flicking.horizontal ? inputEvent.offsetX : inputEvent.offsetY;
|
|
1594
1600
|
var moveStartEvent = new ComponentEvent(EVENTS.MOVE_START, {
|
|
1595
1601
|
isTrusted: axesEvent.isTrusted,
|
|
@@ -3744,6 +3750,7 @@ var Camera = /*#__PURE__*/function () {
|
|
|
3744
3750
|
var _this = this;
|
|
3745
3751
|
var _b = (_a === void 0 ? {} : _a).align,
|
|
3746
3752
|
align = _b === void 0 ? ALIGN.CENTER : _b;
|
|
3753
|
+
this._lookedOffset = 0;
|
|
3747
3754
|
this._checkTranslateSupport = function () {
|
|
3748
3755
|
var e_1, _a;
|
|
3749
3756
|
var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
|
|
@@ -4103,6 +4110,8 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4103
4110
|
*/
|
|
4104
4111
|
__proto.lookAt = function (pos) {
|
|
4105
4112
|
var _this = this;
|
|
4113
|
+
var prevOffset = this._offset;
|
|
4114
|
+
var isChangedOffset = this._lookedOffset !== prevOffset;
|
|
4106
4115
|
var flicking = getFlickingAttached(this._flicking);
|
|
4107
4116
|
var prevPos = this._position;
|
|
4108
4117
|
this._position = pos;
|
|
@@ -4113,7 +4122,12 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4113
4122
|
if (toggled) {
|
|
4114
4123
|
void flicking.renderer.render().then(function () {
|
|
4115
4124
|
_this.updateOffset();
|
|
4125
|
+
_this._lookedOffset = _this._offset;
|
|
4116
4126
|
});
|
|
4127
|
+
} else if (isChangedOffset) {
|
|
4128
|
+
// sync offset for renderOnlyVisible on resize
|
|
4129
|
+
this.updateOffset();
|
|
4130
|
+
this._lookedOffset = this._offset;
|
|
4117
4131
|
} else {
|
|
4118
4132
|
this.applyTransform();
|
|
4119
4133
|
}
|
|
@@ -4288,8 +4302,8 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4288
4302
|
return this;
|
|
4289
4303
|
};
|
|
4290
4304
|
/**
|
|
4291
|
-
* Update Viewport's height to
|
|
4292
|
-
* @ko 현재
|
|
4305
|
+
* Update Viewport's height to visible panel's max height
|
|
4306
|
+
* @ko 현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
|
|
4293
4307
|
* @throws {FlickingError}
|
|
4294
4308
|
* {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
|
|
4295
4309
|
* <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
|
|
@@ -4299,9 +4313,17 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4299
4313
|
__proto.updateAdaptiveHeight = function () {
|
|
4300
4314
|
var flicking = getFlickingAttached(this._flicking);
|
|
4301
4315
|
var activePanel = flicking.control.activePanel;
|
|
4302
|
-
|
|
4316
|
+
var visiblePanels = flicking.visiblePanels;
|
|
4317
|
+
var selectedPanels = __spread(visiblePanels);
|
|
4318
|
+
if (activePanel) {
|
|
4319
|
+
selectedPanels.push(activePanel);
|
|
4320
|
+
}
|
|
4321
|
+
if (!flicking.horizontal || !flicking.adaptive || !selectedPanels.length) return;
|
|
4322
|
+
var maxHeight = Math.max.apply(Math, __spread(selectedPanels.map(function (panel) {
|
|
4323
|
+
return panel.height;
|
|
4324
|
+
})));
|
|
4303
4325
|
flicking.viewport.setSize({
|
|
4304
|
-
height:
|
|
4326
|
+
height: maxHeight
|
|
4305
4327
|
});
|
|
4306
4328
|
};
|
|
4307
4329
|
/**
|
|
@@ -4372,6 +4394,7 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4372
4394
|
};
|
|
4373
4395
|
__proto._resetInternalValues = function () {
|
|
4374
4396
|
this._position = 0;
|
|
4397
|
+
this._lookedOffset = 0;
|
|
4375
4398
|
this._alignPos = 0;
|
|
4376
4399
|
this._offset = 0;
|
|
4377
4400
|
this._circularOffset = 0;
|
|
@@ -5432,6 +5455,9 @@ var Panel = /*#__PURE__*/function () {
|
|
|
5432
5455
|
var flicking = this._flicking;
|
|
5433
5456
|
var horizontal = flicking.horizontal,
|
|
5434
5457
|
useFractionalSize = flicking.useFractionalSize;
|
|
5458
|
+
if (!el) {
|
|
5459
|
+
return this;
|
|
5460
|
+
}
|
|
5435
5461
|
if (cached) {
|
|
5436
5462
|
this._size = cached.size;
|
|
5437
5463
|
this._margin = __assign({}, cached.margin);
|
|
@@ -7839,7 +7865,7 @@ var Flicking = /*#__PURE__*/function (_super) {
|
|
|
7839
7865
|
var defaultPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
|
|
7840
7866
|
if (!defaultPanel) return;
|
|
7841
7867
|
var nearestAnchor = camera.findNearestAnchor(defaultPanel.position);
|
|
7842
|
-
var initialPanel = nearestAnchor && defaultPanel.index !== nearestAnchor.panel.index ? nearestAnchor.panel : defaultPanel;
|
|
7868
|
+
var initialPanel = nearestAnchor && defaultPanel.position !== nearestAnchor.panel.position && defaultPanel.index !== nearestAnchor.panel.index ? nearestAnchor.panel : defaultPanel;
|
|
7843
7869
|
control.setActive(initialPanel, null, false);
|
|
7844
7870
|
if (!nearestAnchor) {
|
|
7845
7871
|
throw new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(initialPanel.position), CODE.POSITION_NOT_REACHABLE);
|
|
@@ -7893,103 +7919,146 @@ var Flicking = /*#__PURE__*/function (_super) {
|
|
|
7893
7919
|
* Flicking.VERSION; // ex) 4.0.0
|
|
7894
7920
|
* ```
|
|
7895
7921
|
*/
|
|
7896
|
-
Flicking.VERSION = "4.12.0
|
|
7922
|
+
Flicking.VERSION = "4.12.0";
|
|
7897
7923
|
return Flicking;
|
|
7898
7924
|
}(Component);
|
|
7899
7925
|
|
|
7900
|
-
|
|
7901
|
-
|
|
7902
|
-
|
|
7903
|
-
|
|
7926
|
+
var SIDE_EVENTS = {
|
|
7927
|
+
HOLD_START: "sideHoldStart",
|
|
7928
|
+
HOLD_END: "sideHoldEnd",
|
|
7929
|
+
MOVE_START: "sideMoveStart",
|
|
7930
|
+
MOVE: "sideMove",
|
|
7931
|
+
MOVE_END: "sideMoveEnd",
|
|
7932
|
+
WILL_CHANGE: "sideWillChange",
|
|
7933
|
+
CHANGED: "sideChanged",
|
|
7934
|
+
WILL_RESTORE: "sideWillRestore",
|
|
7935
|
+
RESTORED: "sideRestored"
|
|
7936
|
+
};
|
|
7904
7937
|
var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
7905
7938
|
__extends(CrossFlicking, _super);
|
|
7906
7939
|
function CrossFlicking(root, options) {
|
|
7907
|
-
if (options === void 0) {
|
|
7908
|
-
options = {
|
|
7909
|
-
sideOptions: {},
|
|
7910
|
-
preserveIndex: false,
|
|
7911
|
-
disableSlideOnHold: false,
|
|
7912
|
-
disableIndexSync: false
|
|
7913
|
-
};
|
|
7914
|
-
}
|
|
7915
7940
|
var _this = _super.call(this, root, options) || this;
|
|
7941
|
+
_this._syncToCategory = function (index, outerIndex) {
|
|
7942
|
+
if (_this._disableIndexSync) {
|
|
7943
|
+
return;
|
|
7944
|
+
}
|
|
7945
|
+
_this.stopAnimation();
|
|
7946
|
+
_this._sideFlicking.forEach(function (child, i) {
|
|
7947
|
+
var _a = _this._sideState[i],
|
|
7948
|
+
start = _a.start,
|
|
7949
|
+
end = _a.end;
|
|
7950
|
+
if (start <= index && end >= index && outerIndex !== i) {
|
|
7951
|
+
child.stopAnimation();
|
|
7952
|
+
void child.moveTo(index, 0);
|
|
7953
|
+
void _this.moveTo(i, 0);
|
|
7954
|
+
}
|
|
7955
|
+
});
|
|
7956
|
+
};
|
|
7957
|
+
_this._setDraggable = function (direction, draggable) {
|
|
7958
|
+
if (!_this._disableSlideOnHold) {
|
|
7959
|
+
return;
|
|
7960
|
+
}
|
|
7961
|
+
var dragThreshold = _this._originalDragThreshold;
|
|
7962
|
+
var threshold = draggable ? dragThreshold && dragThreshold >= 10 ? dragThreshold : 10 : Infinity;
|
|
7963
|
+
if (direction === MOVE_DIRECTION.HORIZONTAL === _this.horizontal) {
|
|
7964
|
+
_this.dragThreshold = threshold;
|
|
7965
|
+
} else if (direction === MOVE_DIRECTION.VERTICAL === _this.horizontal) {
|
|
7966
|
+
_this._sideFlicking.forEach(function (child) {
|
|
7967
|
+
child.dragThreshold = threshold;
|
|
7968
|
+
});
|
|
7969
|
+
}
|
|
7970
|
+
};
|
|
7971
|
+
_this._setPreviousSideIndex = function () {
|
|
7972
|
+
_this._sideFlicking.forEach(function (child, i) {
|
|
7973
|
+
var _a = _this._sideState[i],
|
|
7974
|
+
start = _a.start,
|
|
7975
|
+
end = _a.end;
|
|
7976
|
+
if (_this._preserveIndex) {
|
|
7977
|
+
if (_this._nextIndex !== i) {
|
|
7978
|
+
if (child.index < start) {
|
|
7979
|
+
child.stopAnimation();
|
|
7980
|
+
void child.moveTo(start, 0);
|
|
7981
|
+
} else if (child.index > end) {
|
|
7982
|
+
child.stopAnimation();
|
|
7983
|
+
void child.moveTo(end, 0);
|
|
7984
|
+
}
|
|
7985
|
+
}
|
|
7986
|
+
} else {
|
|
7987
|
+
if (_this._nextIndex !== i) {
|
|
7988
|
+
void child.moveTo(start, 0);
|
|
7989
|
+
}
|
|
7990
|
+
}
|
|
7991
|
+
});
|
|
7992
|
+
};
|
|
7993
|
+
_this._addSideIndex = function (e) {
|
|
7994
|
+
e.sideIndex = _this._sideFlicking[e.index].index;
|
|
7995
|
+
};
|
|
7916
7996
|
_this._onHorizontalHoldStart = function () {
|
|
7917
|
-
_this.
|
|
7997
|
+
_this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
|
|
7918
7998
|
_this._moveDirection = null;
|
|
7919
7999
|
};
|
|
7920
8000
|
_this._onHorizontalMove = function (e) {
|
|
7921
8001
|
if (e.isTrusted && !_this._moveDirection) {
|
|
7922
|
-
_this.
|
|
7923
|
-
child.dragThreshold = Infinity;
|
|
7924
|
-
});
|
|
8002
|
+
_this._setDraggable(MOVE_DIRECTION.VERTICAL, false);
|
|
7925
8003
|
_this._moveDirection = MOVE_DIRECTION.HORIZONTAL;
|
|
7926
8004
|
}
|
|
7927
8005
|
};
|
|
7928
8006
|
_this._onHorizontalMoveEnd = function (e) {
|
|
7929
8007
|
var visiblePanels = _this.visiblePanels;
|
|
7930
|
-
_this._sideFlicking.forEach(function (child) {
|
|
7931
|
-
child.dragThreshold = 10;
|
|
7932
|
-
});
|
|
7933
|
-
_this._moveDirection = null;
|
|
7934
8008
|
if (visiblePanels.length > 1) {
|
|
7935
8009
|
_this._nextIndex = e.direction === "NEXT" ? visiblePanels[1].index : visiblePanels[0].index;
|
|
7936
8010
|
} else {
|
|
7937
8011
|
_this._nextIndex = visiblePanels[0].index;
|
|
7938
8012
|
}
|
|
8013
|
+
_this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
|
|
8014
|
+
_this._moveDirection = null;
|
|
7939
8015
|
// _syncToCategory에서 완전히 가로 이동이 이루어지기 전에 세로 방향 index가 변하는 경우가 있어 requestAnimationFrame 처리
|
|
7940
8016
|
requestAnimationFrame(function () {
|
|
7941
|
-
_this.
|
|
7942
|
-
if (_this._nextIndex !== i) {
|
|
7943
|
-
var _a = _this._sideState[i],
|
|
7944
|
-
start = _a.start,
|
|
7945
|
-
end = _a.end;
|
|
7946
|
-
if (child.index < start) {
|
|
7947
|
-
child.stopAnimation();
|
|
7948
|
-
void child.moveTo(start, 0);
|
|
7949
|
-
} else if (child.index > end) {
|
|
7950
|
-
child.stopAnimation();
|
|
7951
|
-
void child.moveTo(end, 0);
|
|
7952
|
-
}
|
|
7953
|
-
}
|
|
7954
|
-
});
|
|
8017
|
+
return _this._setPreviousSideIndex();
|
|
7955
8018
|
});
|
|
7956
8019
|
if (e.isTrusted) {
|
|
7957
8020
|
_this._syncToCategory(_this._sideFlicking[_this._nextIndex].index, _this._nextIndex);
|
|
7958
8021
|
}
|
|
7959
8022
|
};
|
|
7960
8023
|
_this._onSideHoldStart = function () {
|
|
7961
|
-
_this.
|
|
7962
|
-
child.dragThreshold = 10;
|
|
7963
|
-
});
|
|
8024
|
+
_this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
|
|
7964
8025
|
_this._moveDirection = null;
|
|
7965
8026
|
};
|
|
7966
8027
|
_this._onSideMove = function (e) {
|
|
7967
8028
|
if (e.isTrusted && !_this._moveDirection) {
|
|
7968
|
-
_this.
|
|
8029
|
+
_this._setDraggable(MOVE_DIRECTION.HORIZONTAL, false);
|
|
7969
8030
|
_this._moveDirection = MOVE_DIRECTION.VERTICAL;
|
|
7970
8031
|
}
|
|
7971
8032
|
};
|
|
7972
8033
|
_this._onSideMoveEnd = function () {
|
|
7973
|
-
_this.
|
|
8034
|
+
_this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
|
|
7974
8035
|
_this._moveDirection = null;
|
|
7975
8036
|
};
|
|
7976
8037
|
_this._onSideChanged = function (e) {
|
|
7977
|
-
// this.visiblePanels.length
|
|
7978
|
-
//
|
|
8038
|
+
// If this.visiblePanels.length >= 2, it means that horizontal flicking is being dragged.
|
|
8039
|
+
// In this case, syncToCategory in _onHorizontalMoveEnd will fire after moving finishes, so we don't fire it here.
|
|
7979
8040
|
if (_this.visiblePanels.length < 2 && _this._sideFlicking[_this.index] === e.currentTarget) {
|
|
7980
8041
|
_this._syncToCategory(e.index, _this.index);
|
|
7981
8042
|
}
|
|
7982
8043
|
};
|
|
8044
|
+
var _a = options.sideOptions,
|
|
8045
|
+
sideOptions = _a === void 0 ? {} : _a,
|
|
8046
|
+
_b = options.preserveIndex,
|
|
8047
|
+
preserveIndex = _b === void 0 ? true : _b,
|
|
8048
|
+
_c = options.disableSlideOnHold,
|
|
8049
|
+
disableSlideOnHold = _c === void 0 ? true : _c,
|
|
8050
|
+
_d = options.disableIndexSync,
|
|
8051
|
+
disableIndexSync = _d === void 0 ? false : _d;
|
|
7983
8052
|
// Internal states
|
|
7984
8053
|
_this._moveDirection = null;
|
|
7985
8054
|
_this._nextIndex = 0;
|
|
8055
|
+
_this._originalDragThreshold = _this.dragThreshold;
|
|
7986
8056
|
// Bind options
|
|
7987
|
-
_this._sideOptions =
|
|
7988
|
-
_this._preserveIndex =
|
|
7989
|
-
_this._disableSlideOnHold =
|
|
7990
|
-
_this._disableIndexSync =
|
|
8057
|
+
_this._sideOptions = sideOptions;
|
|
8058
|
+
_this._preserveIndex = preserveIndex;
|
|
8059
|
+
_this._disableSlideOnHold = disableSlideOnHold;
|
|
8060
|
+
_this._disableIndexSync = disableIndexSync;
|
|
7991
8061
|
return _this;
|
|
7992
|
-
// Create core components
|
|
7993
8062
|
}
|
|
7994
8063
|
var __proto = CrossFlicking.prototype;
|
|
7995
8064
|
Object.defineProperty(__proto, "sideFlicking", {
|
|
@@ -8000,6 +8069,15 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
|
8000
8069
|
enumerable: false,
|
|
8001
8070
|
configurable: true
|
|
8002
8071
|
});
|
|
8072
|
+
Object.defineProperty(__proto, "sideIndex", {
|
|
8073
|
+
get: function () {
|
|
8074
|
+
return this._sideFlicking.map(function (i) {
|
|
8075
|
+
return i.index;
|
|
8076
|
+
});
|
|
8077
|
+
},
|
|
8078
|
+
enumerable: false,
|
|
8079
|
+
configurable: true
|
|
8080
|
+
});
|
|
8003
8081
|
Object.defineProperty(__proto, "sideState", {
|
|
8004
8082
|
get: function () {
|
|
8005
8083
|
return this._sideState;
|
|
@@ -8058,7 +8136,9 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
|
8058
8136
|
});
|
|
8059
8137
|
};
|
|
8060
8138
|
__proto.destroy = function () {
|
|
8061
|
-
|
|
8139
|
+
this._sideFlicking.forEach(function (flicking) {
|
|
8140
|
+
flicking.destroy();
|
|
8141
|
+
});
|
|
8062
8142
|
_super.prototype.destroy.call(this);
|
|
8063
8143
|
};
|
|
8064
8144
|
__proto._addComponentEvents = function () {
|
|
@@ -8066,80 +8146,83 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
|
8066
8146
|
this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
|
|
8067
8147
|
this.on(EVENTS.MOVE, this._onHorizontalMove);
|
|
8068
8148
|
this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
|
|
8069
|
-
|
|
8149
|
+
[EVENTS.CHANGED, EVENTS.WILL_CHANGE].forEach(function (event) {
|
|
8150
|
+
_this.on(event, _this._addSideIndex);
|
|
8151
|
+
});
|
|
8152
|
+
this._sideFlicking.forEach(function (flicking, mainIndex) {
|
|
8070
8153
|
flicking.on(EVENTS.HOLD_START, _this._onSideHoldStart);
|
|
8071
8154
|
flicking.on(EVENTS.MOVE, _this._onSideMove);
|
|
8072
8155
|
flicking.on(EVENTS.MOVE_END, _this._onSideMoveEnd);
|
|
8073
8156
|
flicking.on(EVENTS.CHANGED, _this._onSideChanged);
|
|
8157
|
+
Object.keys(SIDE_EVENTS).forEach(function (name) {
|
|
8158
|
+
flicking.on(EVENTS[name], function (event) {
|
|
8159
|
+
_this.trigger(new ComponentEvent(SIDE_EVENTS[name], __assign({
|
|
8160
|
+
mainIndex: mainIndex
|
|
8161
|
+
}, event)));
|
|
8162
|
+
});
|
|
8163
|
+
});
|
|
8074
8164
|
});
|
|
8075
8165
|
};
|
|
8076
|
-
__proto._getGroupFromAttribute = function (panels) {
|
|
8077
|
-
var groupKeys = [];
|
|
8078
|
-
var groupPanels = {};
|
|
8079
|
-
panels.forEach(function (panel) {
|
|
8080
|
-
var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
|
|
8081
|
-
if (groupKey && !includes(groupKeys, groupKey)) {
|
|
8082
|
-
groupKeys.push(groupKey);
|
|
8083
|
-
groupPanels[groupKey] = [panel];
|
|
8084
|
-
} else if (groupKey) {
|
|
8085
|
-
groupPanels[groupKey].push(panel);
|
|
8086
|
-
}
|
|
8087
|
-
});
|
|
8088
|
-
return groupPanels;
|
|
8089
|
-
};
|
|
8090
8166
|
__proto._createSideState = function () {
|
|
8091
|
-
var _this = this;
|
|
8092
8167
|
var viewportEl = this.element;
|
|
8093
8168
|
var cameraEl = this.camera.element;
|
|
8094
8169
|
var panels = toArray(cameraEl.children);
|
|
8095
|
-
var sideState = [];
|
|
8096
|
-
var sidePanels = "";
|
|
8097
|
-
// check data attribute exists
|
|
8098
|
-
var sideCamera = document.createElement("div");
|
|
8099
|
-
sideCamera.classList.add(CLASS.CAMERA);
|
|
8100
8170
|
var isCrossStructure = getDataAttributes(viewportEl, "data-cross-").structure;
|
|
8171
|
+
var sideState = [];
|
|
8101
8172
|
if (!isCrossStructure) {
|
|
8102
|
-
viewportEl.setAttribute("data-cross-structure", "true");
|
|
8103
8173
|
var groupPanels = this._getGroupFromAttribute(panels);
|
|
8104
8174
|
var groupKeys = Object.keys(groupPanels);
|
|
8105
8175
|
if (groupKeys.length) {
|
|
8106
8176
|
sideState = this._getSideStateFromGroup(groupPanels);
|
|
8107
8177
|
this.remove(0, this.panelCount - groupKeys.length);
|
|
8108
|
-
sideState.forEach(function (state, i) {
|
|
8109
|
-
var panel = _this.camera.children[i];
|
|
8110
|
-
sidePanels += state.element.innerHTML;
|
|
8111
|
-
Array.from(panel.attributes).forEach(function (attribute) {
|
|
8112
|
-
return panel.removeAttribute(attribute.name);
|
|
8113
|
-
});
|
|
8114
|
-
});
|
|
8115
8178
|
} else {
|
|
8116
|
-
sideState =
|
|
8117
|
-
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8118
|
-
sidePanels += panel.innerHTML;
|
|
8119
|
-
return __spread(state, [{
|
|
8120
|
-
key: i.toString(),
|
|
8121
|
-
start: start,
|
|
8122
|
-
end: start + panel.children.length - 1,
|
|
8123
|
-
element: panel
|
|
8124
|
-
}]);
|
|
8125
|
-
}, []);
|
|
8179
|
+
sideState = this._getSideStateFromPanels(panels);
|
|
8126
8180
|
}
|
|
8127
|
-
|
|
8128
|
-
sideState.forEach(function (_, i) {
|
|
8129
|
-
var panel = _this.camera.children[i];
|
|
8130
|
-
[CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
|
|
8131
|
-
if (!panel.classList.contains(className)) {
|
|
8132
|
-
panel.classList.add(className);
|
|
8133
|
-
}
|
|
8134
|
-
});
|
|
8135
|
-
panel.innerHTML = sideCamera.outerHTML;
|
|
8136
|
-
});
|
|
8181
|
+
this._createCrossStructure(sideState);
|
|
8137
8182
|
} else {
|
|
8138
|
-
sideState = this.
|
|
8183
|
+
sideState = this._getSideStateFromCrossStructure(panels);
|
|
8139
8184
|
}
|
|
8140
8185
|
void this.resize();
|
|
8141
8186
|
return sideState;
|
|
8142
8187
|
};
|
|
8188
|
+
__proto._createCrossStructure = function (sideState) {
|
|
8189
|
+
var _this = this;
|
|
8190
|
+
var sideCamera = document.createElement("div");
|
|
8191
|
+
var sidePanels = "";
|
|
8192
|
+
sideCamera.classList.add(CLASS.CAMERA);
|
|
8193
|
+
sideState.forEach(function (state, i) {
|
|
8194
|
+
var panel = _this.camera.children[i];
|
|
8195
|
+
sidePanels += state.element.innerHTML;
|
|
8196
|
+
Array.from(panel.attributes).forEach(function (attribute) {
|
|
8197
|
+
return panel.removeAttribute(attribute.name);
|
|
8198
|
+
});
|
|
8199
|
+
});
|
|
8200
|
+
sideCamera.innerHTML = sidePanels;
|
|
8201
|
+
sideState.forEach(function (_, i) {
|
|
8202
|
+
var panel = _this.camera.children[i];
|
|
8203
|
+
[CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
|
|
8204
|
+
if (!panel.classList.contains(className)) {
|
|
8205
|
+
panel.classList.add(className);
|
|
8206
|
+
}
|
|
8207
|
+
});
|
|
8208
|
+
panel.innerHTML = sideCamera.outerHTML;
|
|
8209
|
+
});
|
|
8210
|
+
this.element.setAttribute("data-cross-structure", "true");
|
|
8211
|
+
};
|
|
8212
|
+
__proto._getGroupFromAttribute = function (panels) {
|
|
8213
|
+
var groupKeys = [];
|
|
8214
|
+
var groupPanels = {};
|
|
8215
|
+
panels.forEach(function (panel) {
|
|
8216
|
+
var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
|
|
8217
|
+
if (groupKey && !includes(groupKeys, groupKey)) {
|
|
8218
|
+
groupKeys.push(groupKey);
|
|
8219
|
+
groupPanels[groupKey] = [panel];
|
|
8220
|
+
} else if (groupKey) {
|
|
8221
|
+
groupPanels[groupKey].push(panel);
|
|
8222
|
+
}
|
|
8223
|
+
});
|
|
8224
|
+
return groupPanels;
|
|
8225
|
+
};
|
|
8143
8226
|
__proto._getSideStateFromGroup = function (groupPanels) {
|
|
8144
8227
|
return Object.keys(groupPanels).reduce(function (state, key) {
|
|
8145
8228
|
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
@@ -8156,6 +8239,17 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
|
8156
8239
|
}, []);
|
|
8157
8240
|
};
|
|
8158
8241
|
__proto._getSideStateFromPanels = function (panels) {
|
|
8242
|
+
return panels.reduce(function (state, panel, i) {
|
|
8243
|
+
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8244
|
+
return __spread(state, [{
|
|
8245
|
+
key: i.toString(),
|
|
8246
|
+
start: start,
|
|
8247
|
+
end: start + panel.children.length - 1,
|
|
8248
|
+
element: panel
|
|
8249
|
+
}]);
|
|
8250
|
+
}, []);
|
|
8251
|
+
};
|
|
8252
|
+
__proto._getSideStateFromCrossStructure = function (panels) {
|
|
8159
8253
|
var groupPanels = this._getGroupFromAttribute(panels);
|
|
8160
8254
|
return this._getSideStateFromGroup(groupPanels);
|
|
8161
8255
|
};
|
|
@@ -8165,25 +8259,10 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
|
8165
8259
|
return new Flicking(_this.camera.children[i], __assign(__assign({}, _this.sideOptions), {
|
|
8166
8260
|
horizontal: false,
|
|
8167
8261
|
panelsPerView: 1,
|
|
8168
|
-
defaultIndex: state.start
|
|
8169
|
-
moveType: "strict"
|
|
8262
|
+
defaultIndex: state.start
|
|
8170
8263
|
}));
|
|
8171
8264
|
});
|
|
8172
8265
|
};
|
|
8173
|
-
__proto._syncToCategory = function (index, outerIndex) {
|
|
8174
|
-
var _this = this;
|
|
8175
|
-
this.stopAnimation();
|
|
8176
|
-
this._sideFlicking.forEach(function (child, i) {
|
|
8177
|
-
var _a = _this._sideState[i],
|
|
8178
|
-
start = _a.start,
|
|
8179
|
-
end = _a.end;
|
|
8180
|
-
if (start <= index && end >= index && outerIndex !== i) {
|
|
8181
|
-
child.stopAnimation();
|
|
8182
|
-
void child.moveTo(index, 0);
|
|
8183
|
-
void _this.moveTo(i, 0);
|
|
8184
|
-
}
|
|
8185
|
-
});
|
|
8186
|
-
};
|
|
8187
8266
|
return CrossFlicking;
|
|
8188
8267
|
}(Flicking);
|
|
8189
8268
|
|
|
@@ -8401,5 +8480,5 @@ var parseAlign = function (alignVal) {
|
|
|
8401
8480
|
* egjs projects are licensed under the MIT license
|
|
8402
8481
|
*/
|
|
8403
8482
|
|
|
8404
|
-
export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCameraMode, CIRCULAR_FALLBACK, CLASS, Camera, CircularCameraMode, Control, CrossFlicking, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCameraMode, MOVE_DIRECTION, MOVE_TYPE, NormalRenderingStrategy, ORDER, Panel, Renderer, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, camelize, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, getDataAttributes, getDefaultCameraTransform, getDirection, getElement, getElementSize, getFlickingAttached, getMinusCompensatedIndex, getProgress, getRenderingPanels, getStyle, includes, isBetween, isString, merge, parseAlign$1 as parseAlign, parseArithmeticExpression, parseArithmeticSize, parseBounce, parseCSSSizeValue, parseElement, parsePanelAlign, range, setPrototypeOf, setSize, sync, toArray, withFlickingMethods };
|
|
8483
|
+
export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCameraMode, CIRCULAR_FALLBACK, CLASS, Camera, CircularCameraMode, Control, CrossFlicking, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCameraMode, MOVE_DIRECTION, MOVE_TYPE, NormalRenderingStrategy, ORDER, Panel, Renderer, SIDE_EVENTS, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, camelize, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, getDataAttributes, getDefaultCameraTransform, getDirection, getElement, getElementSize, getFlickingAttached, getMinusCompensatedIndex, getProgress, getRenderingPanels, getStyle, includes, isBetween, isString, merge, parseAlign$1 as parseAlign, parseArithmeticExpression, parseArithmeticSize, parseBounce, parseCSSSizeValue, parseElement, parsePanelAlign, range, setPrototypeOf, setSize, sync, toArray, withFlickingMethods };
|
|
8405
8484
|
//# sourceMappingURL=flicking.esm.js.map
|