@egjs/flicking 4.12.0-beta.1 → 4.12.0-beta.11

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.
@@ -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.1
7
+ version: 4.12.0-beta.11
8
8
  */
9
9
  'use strict';
10
10
 
@@ -387,6 +387,8 @@ var MOVE_TYPE = {
387
387
  STRICT: "strict"
388
388
  };
389
389
  var CLASS = {
390
+ VIEWPORT: "flicking-viewport",
391
+ CAMERA: "flicking-camera",
390
392
  VERTICAL: "vertical",
391
393
  HIDDEN: "flicking-hidden",
392
394
  DEFAULT_VIRTUAL: "flicking-panel"
@@ -738,6 +740,26 @@ var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
738
740
  obj.__proto__ = proto;
739
741
  return obj;
740
742
  };
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
+ };
741
763
 
742
764
  /*
743
765
  * Copyright (c) 2015 NAVER Corp.
@@ -1570,6 +1592,9 @@ var HoldingState = /*#__PURE__*/function (_super) {
1570
1592
  axesEvent = ctx.axesEvent,
1571
1593
  transitTo = ctx.transitTo;
1572
1594
  var inputEvent = axesEvent.inputEvent;
1595
+ if (!inputEvent) {
1596
+ return;
1597
+ }
1573
1598
  var offset = flicking.horizontal ? inputEvent.offsetX : inputEvent.offsetY;
1574
1599
  var moveStartEvent = new Component.ComponentEvent(EVENTS.MOVE_START, {
1575
1600
  isTrusted: axesEvent.isTrusted,
@@ -3724,6 +3749,7 @@ var Camera = /*#__PURE__*/function () {
3724
3749
  var _this = this;
3725
3750
  var _b = (_a === void 0 ? {} : _a).align,
3726
3751
  align = _b === void 0 ? ALIGN.CENTER : _b;
3752
+ this._lookedOffset = 0;
3727
3753
  this._checkTranslateSupport = function () {
3728
3754
  var e_1, _a;
3729
3755
  var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
@@ -4083,6 +4109,8 @@ var Camera = /*#__PURE__*/function () {
4083
4109
  */
4084
4110
  __proto.lookAt = function (pos) {
4085
4111
  var _this = this;
4112
+ var prevOffset = this._offset;
4113
+ var isChangedOffset = this._lookedOffset !== prevOffset;
4086
4114
  var flicking = getFlickingAttached(this._flicking);
4087
4115
  var prevPos = this._position;
4088
4116
  this._position = pos;
@@ -4093,7 +4121,12 @@ var Camera = /*#__PURE__*/function () {
4093
4121
  if (toggled) {
4094
4122
  void flicking.renderer.render().then(function () {
4095
4123
  _this.updateOffset();
4124
+ _this._lookedOffset = _this._offset;
4096
4125
  });
4126
+ } else if (isChangedOffset) {
4127
+ // sync offset for renderOnlyVisible on resize
4128
+ this.updateOffset();
4129
+ this._lookedOffset = this._offset;
4097
4130
  } else {
4098
4131
  this.applyTransform();
4099
4132
  }
@@ -4268,8 +4301,8 @@ var Camera = /*#__PURE__*/function () {
4268
4301
  return this;
4269
4302
  };
4270
4303
  /**
4271
- * Update Viewport's height to active panel's height
4272
- * @ko 현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
4304
+ * Update Viewport's height to visible panel's max height
4305
+ * @ko 현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
4273
4306
  * @throws {FlickingError}
4274
4307
  * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
4275
4308
  * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
@@ -4279,9 +4312,17 @@ var Camera = /*#__PURE__*/function () {
4279
4312
  __proto.updateAdaptiveHeight = function () {
4280
4313
  var flicking = getFlickingAttached(this._flicking);
4281
4314
  var activePanel = flicking.control.activePanel;
4282
- if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
4315
+ var visiblePanels = flicking.visiblePanels;
4316
+ var selectedPanels = __spread(visiblePanels);
4317
+ if (activePanel) {
4318
+ selectedPanels.push(activePanel);
4319
+ }
4320
+ if (!flicking.horizontal || !flicking.adaptive || !selectedPanels.length) return;
4321
+ var maxHeight = Math.max.apply(Math, __spread(selectedPanels.map(function (panel) {
4322
+ return panel.height;
4323
+ })));
4283
4324
  flicking.viewport.setSize({
4284
- height: activePanel.height
4325
+ height: maxHeight
4285
4326
  });
4286
4327
  };
4287
4328
  /**
@@ -4352,6 +4393,7 @@ var Camera = /*#__PURE__*/function () {
4352
4393
  };
4353
4394
  __proto._resetInternalValues = function () {
4354
4395
  this._position = 0;
4396
+ this._lookedOffset = 0;
4355
4397
  this._alignPos = 0;
4356
4398
  this._offset = 0;
4357
4399
  this._circularOffset = 0;
@@ -5412,6 +5454,9 @@ var Panel = /*#__PURE__*/function () {
5412
5454
  var flicking = this._flicking;
5413
5455
  var horizontal = flicking.horizontal,
5414
5456
  useFractionalSize = flicking.useFractionalSize;
5457
+ if (!el) {
5458
+ return this;
5459
+ }
5415
5460
  if (cached) {
5416
5461
  this._size = cached.size;
5417
5462
  this._margin = __assign({}, cached.margin);
@@ -7873,180 +7918,334 @@ var Flicking = /*#__PURE__*/function (_super) {
7873
7918
  * Flicking.VERSION; // ex) 4.0.0
7874
7919
  * ```
7875
7920
  */
7876
- Flicking.VERSION = "4.12.0-beta.1";
7921
+ Flicking.VERSION = "4.12.0-beta.11";
7877
7922
  return Flicking;
7878
7923
  }(Component);
7879
7924
 
7880
- /*
7881
- * Copyright (c) 2015 NAVER Corp.
7882
- * egjs projects are licensed under the MIT license
7883
- */
7884
- /**
7885
- * @extends Component
7886
- * @support {"ie": "9+(with polyfill)", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "4.X+"}
7887
- * @requires {@link https://github.com/naver/egjs-component|@egjs/component}
7888
- * @requires {@link https://github.com/naver/egjs-axes|@egjs/axes}
7889
- */
7925
+ var SIDE_EVENTS = {
7926
+ HOLD_START: "sideHoldStart",
7927
+ HOLD_END: "sideHoldEnd",
7928
+ MOVE_START: "sideMoveStart",
7929
+ MOVE: "sideMove",
7930
+ MOVE_END: "sideMoveEnd",
7931
+ WILL_CHANGE: "sideWillChange",
7932
+ CHANGED: "sideChanged",
7933
+ WILL_RESTORE: "sideWillRestore",
7934
+ RESTORED: "sideRestored"
7935
+ };
7890
7936
  var CrossFlicking = /*#__PURE__*/function (_super) {
7891
7937
  __extends(CrossFlicking, _super);
7892
- // Options Setter
7893
- // UI / LAYOUT
7894
- // public set align(val: FlickingOptions["align"]) {
7895
- // this._align = val;
7896
- // }
7897
- function CrossFlicking(root, _a) {
7898
- var _b = (_a === void 0 ? {} : _a).verticalOptions,
7899
- verticalOptions = _b === void 0 ? undefined : _b;
7900
- var _this = _super.call(this, root) || this;
7938
+ function CrossFlicking(root, options) {
7939
+ var _this = _super.call(this, root, options) || this;
7940
+ _this._syncToCategory = function (index, outerIndex) {
7941
+ if (_this._disableIndexSync) {
7942
+ return;
7943
+ }
7944
+ _this.stopAnimation();
7945
+ _this._sideFlicking.forEach(function (child, i) {
7946
+ var _a = _this._sideState[i],
7947
+ start = _a.start,
7948
+ end = _a.end;
7949
+ if (start <= index && end >= index && outerIndex !== i) {
7950
+ child.stopAnimation();
7951
+ void child.moveTo(index, 0);
7952
+ void _this.moveTo(i, 0);
7953
+ }
7954
+ });
7955
+ };
7956
+ _this._setDraggable = function (direction, draggable) {
7957
+ if (!_this._disableSlideOnHold) {
7958
+ return;
7959
+ }
7960
+ var dragThreshold = _this._originalDragThreshold;
7961
+ var threshold = draggable ? dragThreshold && dragThreshold >= 10 ? dragThreshold : 10 : Infinity;
7962
+ if (direction === MOVE_DIRECTION.HORIZONTAL === _this.horizontal) {
7963
+ _this.dragThreshold = threshold;
7964
+ } else if (direction === MOVE_DIRECTION.VERTICAL === _this.horizontal) {
7965
+ _this._sideFlicking.forEach(function (child) {
7966
+ child.dragThreshold = threshold;
7967
+ });
7968
+ }
7969
+ };
7970
+ _this._setPreviousSideIndex = function () {
7971
+ _this._sideFlicking.forEach(function (child, i) {
7972
+ var _a = _this._sideState[i],
7973
+ start = _a.start,
7974
+ end = _a.end;
7975
+ if (_this._preserveIndex) {
7976
+ if (_this._nextIndex !== i) {
7977
+ if (child.index < start) {
7978
+ child.stopAnimation();
7979
+ void child.moveTo(start, 0);
7980
+ } else if (child.index > end) {
7981
+ child.stopAnimation();
7982
+ void child.moveTo(end, 0);
7983
+ }
7984
+ }
7985
+ } else {
7986
+ if (_this._nextIndex !== i) {
7987
+ void child.moveTo(start, 0);
7988
+ }
7989
+ }
7990
+ });
7991
+ };
7901
7992
  _this._onHorizontalHoldStart = function () {
7902
- _this.dragThreshold = 10;
7993
+ _this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
7903
7994
  _this._moveDirection = null;
7904
7995
  };
7905
7996
  _this._onHorizontalMove = function (e) {
7906
7997
  if (e.isTrusted && !_this._moveDirection) {
7907
- _this._verticalFlicking.forEach(function (child) {
7908
- child.dragThreshold = Infinity;
7909
- });
7998
+ _this._setDraggable(MOVE_DIRECTION.VERTICAL, false);
7910
7999
  _this._moveDirection = MOVE_DIRECTION.HORIZONTAL;
7911
8000
  }
7912
8001
  };
7913
8002
  _this._onHorizontalMoveEnd = function (e) {
7914
8003
  var visiblePanels = _this.visiblePanels;
7915
- _this._verticalFlicking.forEach(function (child) {
7916
- child.dragThreshold = 10;
7917
- });
7918
- _this._moveDirection = null;
7919
8004
  if (visiblePanels.length > 1) {
7920
8005
  _this._nextIndex = e.direction === "NEXT" ? visiblePanels[1].index : visiblePanels[0].index;
7921
8006
  } else {
7922
8007
  _this._nextIndex = visiblePanels[0].index;
7923
8008
  }
7924
- _this._verticalFlicking.forEach(function (child, i) {
7925
- if (_this._nextIndex !== i) {
7926
- var _a = _this._verticalState[i],
7927
- start = _a.start,
7928
- end = _a.end;
7929
- if (child.index < start) {
7930
- child.stopAnimation();
7931
- void child.moveTo(start, 0);
7932
- } else if (child.index > end) {
7933
- child.stopAnimation();
7934
- void child.moveTo(end, 0);
7935
- }
7936
- }
8009
+ _this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
8010
+ _this._moveDirection = null;
8011
+ // _syncToCategory에서 완전히 가로 이동이 이루어지기 전에 세로 방향 index가 변하는 경우가 있어 requestAnimationFrame 처리
8012
+ requestAnimationFrame(function () {
8013
+ return _this._setPreviousSideIndex();
7937
8014
  });
7938
8015
  if (e.isTrusted) {
7939
- _this._syncToCategory(_this._verticalFlicking[_this._nextIndex].index, _this._nextIndex);
8016
+ _this._syncToCategory(_this._sideFlicking[_this._nextIndex].index, _this._nextIndex);
7940
8017
  }
7941
8018
  };
7942
- _this._onVerticalHoldStart = function () {
7943
- _this._verticalFlicking.forEach(function (child) {
7944
- child.dragThreshold = 10;
7945
- });
8019
+ _this._onSideHoldStart = function () {
8020
+ _this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
7946
8021
  _this._moveDirection = null;
7947
8022
  };
7948
- _this._onVerticalMove = function (e) {
8023
+ _this._onSideMove = function (e) {
7949
8024
  if (e.isTrusted && !_this._moveDirection) {
7950
- _this.dragThreshold = Infinity;
8025
+ _this._setDraggable(MOVE_DIRECTION.HORIZONTAL, false);
7951
8026
  _this._moveDirection = MOVE_DIRECTION.VERTICAL;
7952
8027
  }
7953
8028
  };
7954
- _this._onVerticalMoveEnd = function () {
7955
- _this.dragThreshold = 10;
8029
+ _this._onSideMoveEnd = function () {
8030
+ _this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
7956
8031
  _this._moveDirection = null;
7957
8032
  };
7958
- _this._onVerticalChanged = function (e) {
7959
- // this.visiblePanels.length 2보다 크다면 가로 방향 Flicking이 조작 중이라는 것을 의미합니다.
7960
- // 경우 가로 방향 Flicking의 이동이 완전히 끝난 _onHorizontalMoveEnd 에서 syncToCategory할 것이므로 여기서는 하지 않습니다.
7961
- if (_this.visiblePanels.length < 2 && _this._verticalFlicking[_this.index] === e.currentTarget) {
8033
+ _this._onSideChanged = function (e) {
8034
+ // If this.visiblePanels.length >= 2, it means that horizontal flicking is being dragged.
8035
+ // In this case, syncToCategory in _onHorizontalMoveEnd will fire after moving finishes, so we don't fire it here.
8036
+ if (_this.visiblePanels.length < 2 && _this._sideFlicking[_this.index] === e.currentTarget) {
7962
8037
  _this._syncToCategory(e.index, _this.index);
7963
8038
  }
7964
8039
  };
8040
+ var _a = options.sideOptions,
8041
+ sideOptions = _a === void 0 ? {} : _a,
8042
+ _b = options.preserveIndex,
8043
+ preserveIndex = _b === void 0 ? true : _b,
8044
+ _c = options.disableSlideOnHold,
8045
+ disableSlideOnHold = _c === void 0 ? true : _c,
8046
+ _d = options.disableIndexSync,
8047
+ disableIndexSync = _d === void 0 ? false : _d;
7965
8048
  // Internal states
7966
- _this._verticalState = [];
7967
8049
  _this._moveDirection = null;
7968
8050
  _this._nextIndex = 0;
8051
+ _this._originalDragThreshold = _this.dragThreshold;
7969
8052
  // Bind options
7970
- _this._verticalOptions = verticalOptions;
8053
+ _this._sideOptions = sideOptions;
8054
+ _this._preserveIndex = preserveIndex;
8055
+ _this._disableSlideOnHold = disableSlideOnHold;
8056
+ _this._disableIndexSync = disableIndexSync;
7971
8057
  return _this;
7972
- // Create core components
7973
- // this._viewport = new Viewport(this, getElement(root));
7974
8058
  }
7975
8059
  var __proto = CrossFlicking.prototype;
7976
- Object.defineProperty(__proto, "verticalOptions", {
8060
+ Object.defineProperty(__proto, "sideFlicking", {
7977
8061
  // Components
7978
- /**
7979
- * Change active panel index on mouse/touch hold while animating.
7980
- * `index` of the `willChange`/`willRestore` event will be used as new index.
7981
- * @ko 애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
7982
- * `willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다.
7983
- * @type {FlickingOptions}
7984
- * @default undefined
7985
- * @see {@link https://naver.github.io/egjs-flicking/Options#changeonhold changeOnHold ( Options )}
7986
- */
7987
8062
  get: function () {
7988
- return this._verticalOptions;
8063
+ return this._sideFlicking;
8064
+ },
8065
+ enumerable: false,
8066
+ configurable: true
8067
+ });
8068
+ Object.defineProperty(__proto, "sideState", {
8069
+ get: function () {
8070
+ return this._sideState;
8071
+ },
8072
+ enumerable: false,
8073
+ configurable: true
8074
+ });
8075
+ Object.defineProperty(__proto, "sideOptions", {
8076
+ // Options Getter
8077
+ get: function () {
8078
+ return this._sideOptions;
8079
+ },
8080
+ // Options Setter
8081
+ set: function (val) {
8082
+ this._sideOptions = val;
8083
+ },
8084
+ enumerable: false,
8085
+ configurable: true
8086
+ });
8087
+ Object.defineProperty(__proto, "preserveIndex", {
8088
+ get: function () {
8089
+ return this._preserveIndex;
8090
+ },
8091
+ set: function (val) {
8092
+ this._preserveIndex = val;
8093
+ },
8094
+ enumerable: false,
8095
+ configurable: true
8096
+ });
8097
+ Object.defineProperty(__proto, "disableSlideOnHold", {
8098
+ get: function () {
8099
+ return this._disableSlideOnHold;
8100
+ },
8101
+ set: function (val) {
8102
+ this._disableSlideOnHold = val;
8103
+ },
8104
+ enumerable: false,
8105
+ configurable: true
8106
+ });
8107
+ Object.defineProperty(__proto, "disableIndexSync", {
8108
+ get: function () {
8109
+ return this._disableIndexSync;
8110
+ },
8111
+ set: function (val) {
8112
+ this._disableIndexSync = val;
7989
8113
  },
7990
8114
  enumerable: false,
7991
8115
  configurable: true
7992
8116
  });
7993
- /**
7994
- * Initialize Flicking and move to the default index
7995
- * This is automatically called on Flicking's constructor when `autoInit` is true(default)
7996
- * @ko Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
7997
- * 이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
7998
- * @fires Flicking#ready
7999
- * @return {Promise<void>}
8000
- */
8001
8117
  __proto.init = function () {
8002
8118
  var _this = this;
8003
8119
  return _super.prototype.init.call(this).then(function () {
8004
- // data-index로 분류하기 전에 임시로 모든 children에 대해 vertical flicking으로 해보자.
8005
- // camera.children들에 대해 갯수 세기
8006
- var verticalPanels = "";
8007
- _this._verticalState = _this.camera.children.reduce(function (state, child) {
8008
- var start = state.length ? +state[state.length - 1].end + 1 : 0;
8009
- verticalPanels += child.children[0].innerHTML;
8010
- return __spread(state, [{
8011
- start: start,
8012
- end: start + child.children[0].children.length - 1,
8013
- element: child
8014
- }]);
8015
- }, []);
8016
- _this.camera.children.forEach(function (child) {
8017
- child.children[0].innerHTML = verticalPanels;
8120
+ _this._sideState = _this._createSideState();
8121
+ _this._sideFlicking = _this._createSideFlicking();
8122
+ _this._addComponentEvents();
8123
+ });
8124
+ };
8125
+ __proto.destroy = function () {
8126
+ this._sideFlicking.forEach(function (flicking) {
8127
+ flicking.destroy();
8128
+ });
8129
+ _super.prototype.destroy.call(this);
8130
+ };
8131
+ __proto._addComponentEvents = function () {
8132
+ var _this = this;
8133
+ this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
8134
+ this.on(EVENTS.MOVE, this._onHorizontalMove);
8135
+ this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
8136
+ this._sideFlicking.forEach(function (flicking, mainIndex) {
8137
+ flicking.on(EVENTS.HOLD_START, _this._onSideHoldStart);
8138
+ flicking.on(EVENTS.MOVE, _this._onSideMove);
8139
+ flicking.on(EVENTS.MOVE_END, _this._onSideMoveEnd);
8140
+ flicking.on(EVENTS.CHANGED, _this._onSideChanged);
8141
+ Object.keys(SIDE_EVENTS).forEach(function (name) {
8142
+ flicking.on(EVENTS[name], function (event) {
8143
+ _this.trigger(new Component.ComponentEvent(SIDE_EVENTS[name], __assign({
8144
+ mainIndex: mainIndex
8145
+ }, event)));
8146
+ });
8018
8147
  });
8019
- _this._verticalFlicking = _this.camera.children.map(function (child, i) {
8020
- return new Flicking(child, __assign(__assign({}, _this.verticalOptions), {
8021
- horizontal: false,
8022
- panelsPerView: 1,
8023
- defaultIndex: _this._verticalState[i].start
8024
- }));
8148
+ });
8149
+ };
8150
+ __proto._createSideState = function () {
8151
+ var viewportEl = this.element;
8152
+ var cameraEl = this.camera.element;
8153
+ var panels = toArray(cameraEl.children);
8154
+ var isCrossStructure = getDataAttributes(viewportEl, "data-cross-").structure;
8155
+ var sideState = [];
8156
+ if (!isCrossStructure) {
8157
+ var groupPanels = this._getGroupFromAttribute(panels);
8158
+ var groupKeys = Object.keys(groupPanels);
8159
+ if (groupKeys.length) {
8160
+ sideState = this._getSideStateFromGroup(groupPanels);
8161
+ this.remove(0, this.panelCount - groupKeys.length);
8162
+ } else {
8163
+ sideState = this._getSideStateFromPanels(panels);
8164
+ }
8165
+ this._createCrossStructure(sideState);
8166
+ } else {
8167
+ sideState = this._getSideStateFromCrossStructure(panels);
8168
+ }
8169
+ void this.resize();
8170
+ return sideState;
8171
+ };
8172
+ __proto._createCrossStructure = function (sideState) {
8173
+ var _this = this;
8174
+ var sideCamera = document.createElement("div");
8175
+ var sidePanels = "";
8176
+ sideCamera.classList.add(CLASS.CAMERA);
8177
+ sideState.forEach(function (state, i) {
8178
+ var panel = _this.camera.children[i];
8179
+ sidePanels += state.element.innerHTML;
8180
+ Array.from(panel.attributes).forEach(function (attribute) {
8181
+ return panel.removeAttribute(attribute.name);
8025
8182
  });
8026
- _this.on(EVENTS.HOLD_START, _this._onHorizontalHoldStart);
8027
- _this.on(EVENTS.MOVE, _this._onHorizontalMove);
8028
- _this.on(EVENTS.MOVE_END, _this._onHorizontalMoveEnd);
8029
- _this._verticalFlicking.forEach(function (child) {
8030
- child.on(EVENTS.HOLD_START, _this._onVerticalHoldStart);
8031
- child.on(EVENTS.MOVE, _this._onVerticalMove);
8032
- child.on(EVENTS.MOVE_END, _this._onVerticalMoveEnd);
8033
- child.on(EVENTS.CHANGED, _this._onVerticalChanged);
8183
+ });
8184
+ sideCamera.innerHTML = sidePanels;
8185
+ sideState.forEach(function (_, i) {
8186
+ var panel = _this.camera.children[i];
8187
+ [CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
8188
+ if (!panel.classList.contains(className)) {
8189
+ panel.classList.add(className);
8190
+ }
8034
8191
  });
8192
+ panel.innerHTML = sideCamera.outerHTML;
8035
8193
  });
8194
+ this.element.setAttribute("data-cross-structure", "true");
8036
8195
  };
8037
- __proto._syncToCategory = function (index, outerIndex) {
8038
- var _this = this;
8039
- this.stopAnimation();
8040
- this._verticalFlicking.forEach(function (child, i) {
8041
- var _a = _this._verticalState[i],
8042
- start = _a.start,
8043
- end = _a.end;
8044
- if (start <= index && end >= index && outerIndex !== i) {
8045
- child.stopAnimation();
8046
- void child.moveTo(index, 0);
8047
- void _this.moveTo(i, 0);
8196
+ __proto._getGroupFromAttribute = function (panels) {
8197
+ var groupKeys = [];
8198
+ var groupPanels = {};
8199
+ panels.forEach(function (panel) {
8200
+ var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
8201
+ if (groupKey && !includes(groupKeys, groupKey)) {
8202
+ groupKeys.push(groupKey);
8203
+ groupPanels[groupKey] = [panel];
8204
+ } else if (groupKey) {
8205
+ groupPanels[groupKey].push(panel);
8048
8206
  }
8049
8207
  });
8208
+ return groupPanels;
8209
+ };
8210
+ __proto._getSideStateFromGroup = function (groupPanels) {
8211
+ return Object.keys(groupPanels).reduce(function (state, key) {
8212
+ var start = state.length ? +state[state.length - 1].end + 1 : 0;
8213
+ var element = groupPanels[key].reduce(function (el, panel) {
8214
+ el.innerHTML += panel.outerHTML;
8215
+ return el;
8216
+ }, document.createElement("div"));
8217
+ return __spread(state, [{
8218
+ key: key,
8219
+ start: start,
8220
+ end: start + groupPanels[key].length - 1,
8221
+ element: element
8222
+ }]);
8223
+ }, []);
8224
+ };
8225
+ __proto._getSideStateFromPanels = function (panels) {
8226
+ return panels.reduce(function (state, panel, i) {
8227
+ var start = state.length ? +state[state.length - 1].end + 1 : 0;
8228
+ return __spread(state, [{
8229
+ key: i.toString(),
8230
+ start: start,
8231
+ end: start + panel.children.length - 1,
8232
+ element: panel
8233
+ }]);
8234
+ }, []);
8235
+ };
8236
+ __proto._getSideStateFromCrossStructure = function (panels) {
8237
+ var groupPanels = this._getGroupFromAttribute(panels);
8238
+ return this._getSideStateFromGroup(groupPanels);
8239
+ };
8240
+ __proto._createSideFlicking = function () {
8241
+ var _this = this;
8242
+ return this.sideState.map(function (state, i) {
8243
+ return new Flicking(_this.camera.children[i], __assign(__assign({}, _this.sideOptions), {
8244
+ horizontal: false,
8245
+ panelsPerView: 1,
8246
+ defaultIndex: state.start
8247
+ }));
8248
+ });
8050
8249
  };
8051
8250
  return CrossFlicking;
8052
8251
  }(Flicking);
@@ -8268,6 +8467,7 @@ var parseAlign = function (alignVal) {
8268
8467
  var modules = {
8269
8468
  __proto__: null,
8270
8469
  'default': Flicking,
8470
+ SIDE_EVENTS: SIDE_EVENTS,
8271
8471
  CrossFlicking: CrossFlicking,
8272
8472
  VanillaElementProvider: VanillaElementProvider,
8273
8473
  VirtualElementProvider: VirtualElementProvider,
@@ -8339,7 +8539,9 @@ var modules = {
8339
8539
  circulateIndex: circulateIndex,
8340
8540
  range: range,
8341
8541
  getElementSize: getElementSize,
8342
- setPrototypeOf: setPrototypeOf
8542
+ setPrototypeOf: setPrototypeOf,
8543
+ camelize: camelize,
8544
+ getDataAttributes: getDataAttributes
8343
8545
  };
8344
8546
 
8345
8547
  /*
@@ -8379,6 +8581,7 @@ exports.NormalRenderingStrategy = NormalRenderingStrategy;
8379
8581
  exports.ORDER = ORDER;
8380
8582
  exports.Panel = Panel;
8381
8583
  exports.Renderer = Renderer;
8584
+ exports.SIDE_EVENTS = SIDE_EVENTS;
8382
8585
  exports.SnapControl = SnapControl;
8383
8586
  exports.State = State;
8384
8587
  exports.StateMachine = StateMachine;
@@ -8390,6 +8593,7 @@ exports.VirtualElementProvider = VirtualElementProvider;
8390
8593
  exports.VirtualManager = VirtualManager;
8391
8594
  exports.VirtualPanel = VirtualPanel;
8392
8595
  exports.VirtualRenderingStrategy = VirtualRenderingStrategy;
8596
+ exports.camelize = camelize;
8393
8597
  exports.checkExistence = checkExistence;
8394
8598
  exports.circulateIndex = circulateIndex;
8395
8599
  exports.circulatePosition = circulatePosition;
@@ -8398,6 +8602,7 @@ exports["default"] = Flicking;
8398
8602
  exports.find = find;
8399
8603
  exports.findIndex = findIndex;
8400
8604
  exports.findRight = findRight;
8605
+ exports.getDataAttributes = getDataAttributes;
8401
8606
  exports.getDefaultCameraTransform = getDefaultCameraTransform;
8402
8607
  exports.getDirection = getDirection;
8403
8608
  exports.getElement = getElement;