@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.
Files changed (85) hide show
  1. package/declaration/CrossFlicking.d.ts +89 -52
  2. package/declaration/Flicking.d.ts +244 -244
  3. package/declaration/camera/Camera.d.ts +90 -89
  4. package/declaration/camera/index.d.ts +4 -4
  5. package/declaration/camera/mode/BoundCameraMode.d.ts +13 -13
  6. package/declaration/camera/mode/CameraMode.d.ts +20 -20
  7. package/declaration/camera/mode/CircularCameraMode.d.ts +19 -19
  8. package/declaration/camera/mode/LinearCameraMode.d.ts +9 -9
  9. package/declaration/camera/mode/index.d.ts +6 -6
  10. package/declaration/cfc/getDefaultCameraTransform.d.ts +3 -3
  11. package/declaration/cfc/getRenderingPanels.d.ts +4 -4
  12. package/declaration/cfc/index.d.ts +5 -5
  13. package/declaration/cfc/sync.d.ts +4 -4
  14. package/declaration/cfc/withFlickingMethods.d.ts +2 -2
  15. package/declaration/const/axes.d.ts +8 -8
  16. package/declaration/const/error.d.ts +34 -34
  17. package/declaration/const/external.d.ts +54 -54
  18. package/declaration/control/AxesController.d.ts +44 -44
  19. package/declaration/control/Control.d.ts +45 -45
  20. package/declaration/control/FreeControl.d.ts +14 -14
  21. package/declaration/control/SnapControl.d.ts +16 -16
  22. package/declaration/control/StateMachine.d.ts +14 -14
  23. package/declaration/control/StrictControl.d.ts +20 -20
  24. package/declaration/control/index.d.ts +14 -14
  25. package/declaration/control/states/AnimatingState.d.ts +9 -9
  26. package/declaration/control/states/DisabledState.d.ts +9 -9
  27. package/declaration/control/states/DraggingState.d.ts +8 -8
  28. package/declaration/control/states/HoldingState.d.ts +10 -10
  29. package/declaration/control/states/IdleState.d.ts +9 -9
  30. package/declaration/control/states/State.d.ts +47 -47
  31. package/declaration/core/AnchorPoint.d.ts +15 -15
  32. package/declaration/core/AutoResizer.d.ts +16 -16
  33. package/declaration/core/FlickingError.d.ts +5 -5
  34. package/declaration/core/ResizeWatcher.d.ts +33 -33
  35. package/declaration/core/Viewport.d.ts +25 -25
  36. package/declaration/core/VirtualManager.d.ts +37 -37
  37. package/declaration/core/index.d.ts +6 -6
  38. package/declaration/core/panel/Panel.d.ts +89 -89
  39. package/declaration/core/panel/VirtualPanel.d.ts +19 -19
  40. package/declaration/core/panel/index.d.ts +5 -5
  41. package/declaration/core/panel/provider/ElementProvider.d.ts +8 -8
  42. package/declaration/core/panel/provider/VanillaElementProvider.d.ts +12 -12
  43. package/declaration/core/panel/provider/VirtualElementProvider.d.ts +15 -15
  44. package/declaration/core/panel/provider/index.d.ts +5 -5
  45. package/declaration/index.cjs.d.ts +3 -3
  46. package/declaration/index.d.ts +15 -15
  47. package/declaration/index.umd.d.ts +2 -2
  48. package/declaration/renderer/ExternalRenderer.d.ts +7 -7
  49. package/declaration/renderer/Renderer.d.ts +59 -59
  50. package/declaration/renderer/VanillaRenderer.d.ts +10 -10
  51. package/declaration/renderer/index.d.ts +6 -6
  52. package/declaration/renderer/strategy/NormalRenderingStrategy.d.ts +23 -23
  53. package/declaration/renderer/strategy/RenderingStrategy.d.ts +15 -15
  54. package/declaration/renderer/strategy/VirtualRenderingStrategy.d.ts +17 -17
  55. package/declaration/renderer/strategy/index.d.ts +5 -5
  56. package/declaration/type/event.d.ts +88 -88
  57. package/declaration/type/external.d.ts +31 -31
  58. package/declaration/type/internal.d.ts +13 -13
  59. package/declaration/utils.d.ts +47 -47
  60. package/dist/flicking-inline.css +37 -0
  61. package/dist/flicking-inline.min.css +1 -0
  62. package/dist/flicking-inline.min.min.css +1 -0
  63. package/dist/flicking.cjs.js +201 -120
  64. package/dist/flicking.cjs.js.map +1 -1
  65. package/dist/flicking.css +40 -0
  66. package/dist/flicking.esm.js +200 -121
  67. package/dist/flicking.esm.js.map +1 -1
  68. package/dist/flicking.js +200 -120
  69. package/dist/flicking.js.map +1 -1
  70. package/dist/flicking.min.css +1 -0
  71. package/dist/flicking.min.js +2 -2
  72. package/dist/flicking.min.js.map +1 -1
  73. package/dist/flicking.min.min.css +1 -0
  74. package/dist/flicking.pkgd.js +950 -870
  75. package/dist/flicking.pkgd.js.map +1 -1
  76. package/dist/flicking.pkgd.min.js +2 -2
  77. package/dist/flicking.pkgd.min.js.map +1 -1
  78. package/package.json +5 -6
  79. package/sass/flicking.sass +13 -0
  80. package/src/CrossFlicking.ts +224 -112
  81. package/src/Flicking.ts +1 -1
  82. package/src/camera/Camera.ts +24 -4
  83. package/src/control/states/HoldingState.ts +4 -0
  84. package/src/core/panel/Panel.ts +4 -0
  85. 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
+ }
@@ -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.8
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 active panel's height
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
- if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
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: activePanel.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-beta.8";
7922
+ Flicking.VERSION = "4.12.0";
7897
7923
  return Flicking;
7898
7924
  }(Component);
7899
7925
 
7900
- /*
7901
- * Copyright (c) 2015 NAVER Corp.
7902
- * egjs projects are licensed under the MIT license
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.dragThreshold = 10;
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._sideFlicking.forEach(function (child) {
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._sideFlicking.forEach(function (child, i) {
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._sideFlicking.forEach(function (child) {
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.dragThreshold = Infinity;
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.dragThreshold = 10;
8034
+ _this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
7974
8035
  _this._moveDirection = null;
7975
8036
  };
7976
8037
  _this._onSideChanged = function (e) {
7977
- // this.visiblePanels.length 2보다 크다면 가로 방향 Flicking이 조작 중이라는 것을 의미합니다.
7978
- // 경우 가로 방향 Flicking의 이동이 완전히 끝난 _onHorizontalMoveEnd 에서 syncToCategory할 것이므로 여기서는 하지 않습니다.
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 = options.sideOptions;
7988
- _this._preserveIndex = options.preserveIndex;
7989
- _this._disableSlideOnHold = options.disableSlideOnHold;
7990
- _this._disableIndexSync = options.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
- // TODO 모든 child flicking destroy
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
- this._sideFlicking.forEach(function (flicking) {
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 = panels.reduce(function (state, panel, i) {
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
- sideCamera.innerHTML = sidePanels;
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._getSideStateFromPanels(panels);
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