@egjs/flicking 4.12.0-beta.7 → 4.12.0-beta.9

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.7
7
+ version: 4.12.0-beta.9
8
8
  */
9
9
  import Component, { ComponentEvent } from '@egjs/component';
10
10
  import Axes, { PanInput } from '@egjs/axes';
@@ -3744,6 +3744,7 @@ var Camera = /*#__PURE__*/function () {
3744
3744
  var _this = this;
3745
3745
  var _b = (_a === void 0 ? {} : _a).align,
3746
3746
  align = _b === void 0 ? ALIGN.CENTER : _b;
3747
+ this._lookedOffset = 0;
3747
3748
  this._checkTranslateSupport = function () {
3748
3749
  var e_1, _a;
3749
3750
  var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
@@ -4103,6 +4104,8 @@ var Camera = /*#__PURE__*/function () {
4103
4104
  */
4104
4105
  __proto.lookAt = function (pos) {
4105
4106
  var _this = this;
4107
+ var prevOffset = this._offset;
4108
+ var isChangedOffset = this._lookedOffset !== prevOffset;
4106
4109
  var flicking = getFlickingAttached(this._flicking);
4107
4110
  var prevPos = this._position;
4108
4111
  this._position = pos;
@@ -4113,7 +4116,12 @@ var Camera = /*#__PURE__*/function () {
4113
4116
  if (toggled) {
4114
4117
  void flicking.renderer.render().then(function () {
4115
4118
  _this.updateOffset();
4119
+ _this._lookedOffset = _this._offset;
4116
4120
  });
4121
+ } else if (isChangedOffset) {
4122
+ // sync offset for renderOnlyVisible on resize
4123
+ this.updateOffset();
4124
+ this._lookedOffset = this._offset;
4117
4125
  } else {
4118
4126
  this.applyTransform();
4119
4127
  }
@@ -4288,8 +4296,8 @@ var Camera = /*#__PURE__*/function () {
4288
4296
  return this;
4289
4297
  };
4290
4298
  /**
4291
- * Update Viewport's height to active panel's height
4292
- * @ko 현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
4299
+ * Update Viewport's height to visible panel's max height
4300
+ * @ko 현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
4293
4301
  * @throws {FlickingError}
4294
4302
  * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
4295
4303
  * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
@@ -4299,9 +4307,17 @@ var Camera = /*#__PURE__*/function () {
4299
4307
  __proto.updateAdaptiveHeight = function () {
4300
4308
  var flicking = getFlickingAttached(this._flicking);
4301
4309
  var activePanel = flicking.control.activePanel;
4302
- if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
4310
+ var visiblePanels = flicking.visiblePanels;
4311
+ var selectedPanels = __spread(visiblePanels);
4312
+ if (activePanel) {
4313
+ selectedPanels.push(activePanel);
4314
+ }
4315
+ if (!flicking.horizontal || !flicking.adaptive || !selectedPanels.length) return;
4316
+ var maxHeight = Math.max.apply(Math, __spread(selectedPanels.map(function (panel) {
4317
+ return panel.height;
4318
+ })));
4303
4319
  flicking.viewport.setSize({
4304
- height: activePanel.height
4320
+ height: maxHeight
4305
4321
  });
4306
4322
  };
4307
4323
  /**
@@ -4372,6 +4388,7 @@ var Camera = /*#__PURE__*/function () {
4372
4388
  };
4373
4389
  __proto._resetInternalValues = function () {
4374
4390
  this._position = 0;
4391
+ this._lookedOffset = 0;
4375
4392
  this._alignPos = 0;
4376
4393
  this._offset = 0;
4377
4394
  this._circularOffset = 0;
@@ -7893,119 +7910,143 @@ var Flicking = /*#__PURE__*/function (_super) {
7893
7910
  * Flicking.VERSION; // ex) 4.0.0
7894
7911
  * ```
7895
7912
  */
7896
- Flicking.VERSION = "4.12.0-beta.7";
7913
+ Flicking.VERSION = "4.12.0-beta.9";
7897
7914
  return Flicking;
7898
7915
  }(Component);
7899
7916
 
7900
- /*
7901
- * Copyright (c) 2015 NAVER Corp.
7902
- * egjs projects are licensed under the MIT license
7903
- */
7904
- /**
7905
- * @extends Component
7906
- * @support {"ie": "9+(with polyfill)", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "4.X+"}
7907
- * @requires {@link https://github.com/naver/egjs-component|@egjs/component}
7908
- * @requires {@link https://github.com/naver/egjs-axes|@egjs/axes}
7909
- */
7917
+ var SIDE_EVENTS = {
7918
+ HOLD_START: "sideHoldStart",
7919
+ HOLD_END: "sideHoldEnd",
7920
+ MOVE_START: "sideMoveStart",
7921
+ MOVE: "sideMove",
7922
+ MOVE_END: "sideMoveEnd",
7923
+ WILL_CHANGE: "sideWillChange",
7924
+ CHANGED: "sideChanged"
7925
+ };
7910
7926
  var CrossFlicking = /*#__PURE__*/function (_super) {
7911
7927
  __extends(CrossFlicking, _super);
7912
- // Options Setter
7913
- // public set align(val: FlickingOptions["align"]) {
7914
- // this._align = val;
7915
- // }
7916
7928
  function CrossFlicking(root, options) {
7917
- if (options === void 0) {
7918
- options = {};
7919
- }
7920
7929
  var _this = _super.call(this, root, options) || this;
7930
+ _this._syncToCategory = function (index, outerIndex) {
7931
+ if (_this._disableIndexSync) {
7932
+ return;
7933
+ }
7934
+ _this.stopAnimation();
7935
+ _this._sideFlicking.forEach(function (child, i) {
7936
+ var _a = _this._sideState[i],
7937
+ start = _a.start,
7938
+ end = _a.end;
7939
+ if (start <= index && end >= index && outerIndex !== i) {
7940
+ child.stopAnimation();
7941
+ void child.moveTo(index, 0);
7942
+ void _this.moveTo(i, 0);
7943
+ }
7944
+ });
7945
+ };
7946
+ _this._setDraggable = function (direction, draggable) {
7947
+ if (!_this._disableSlideOnHold) {
7948
+ return;
7949
+ }
7950
+ var threshold = draggable ? _this.dragThreshold && _this.dragThreshold >= 10 ? _this.dragThreshold : 10 : Infinity;
7951
+ if (direction === MOVE_DIRECTION.HORIZONTAL === _this.horizontal) {
7952
+ _this.dragThreshold = threshold;
7953
+ } else if (direction === MOVE_DIRECTION.VERTICAL === _this.horizontal) {
7954
+ _this._sideFlicking.forEach(function (child) {
7955
+ child.dragThreshold = threshold;
7956
+ });
7957
+ }
7958
+ };
7959
+ _this._setPreviousSideIndex = function () {
7960
+ _this._sideFlicking.forEach(function (child, i) {
7961
+ var _a = _this._sideState[i],
7962
+ start = _a.start,
7963
+ end = _a.end;
7964
+ if (_this._preserveIndex) {
7965
+ if (_this._nextIndex !== i) {
7966
+ if (child.index < start) {
7967
+ child.stopAnimation();
7968
+ void child.moveTo(start, 0);
7969
+ } else if (child.index > end) {
7970
+ child.stopAnimation();
7971
+ void child.moveTo(end, 0);
7972
+ }
7973
+ }
7974
+ } else {
7975
+ if (_this._nextIndex !== i) {
7976
+ void child.moveTo(start, 0);
7977
+ }
7978
+ }
7979
+ });
7980
+ };
7921
7981
  _this._onHorizontalHoldStart = function () {
7922
- _this.dragThreshold = 10;
7982
+ _this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
7923
7983
  _this._moveDirection = null;
7924
7984
  };
7925
7985
  _this._onHorizontalMove = function (e) {
7926
7986
  if (e.isTrusted && !_this._moveDirection) {
7927
- _this._sideFlicking.forEach(function (child) {
7928
- child.dragThreshold = Infinity;
7929
- });
7987
+ _this._setDraggable(MOVE_DIRECTION.VERTICAL, false);
7930
7988
  _this._moveDirection = MOVE_DIRECTION.HORIZONTAL;
7931
7989
  }
7932
7990
  };
7933
7991
  _this._onHorizontalMoveEnd = function (e) {
7934
7992
  var visiblePanels = _this.visiblePanels;
7935
- _this._sideFlicking.forEach(function (child) {
7936
- child.dragThreshold = 10;
7937
- });
7938
- _this._moveDirection = null;
7939
7993
  if (visiblePanels.length > 1) {
7940
7994
  _this._nextIndex = e.direction === "NEXT" ? visiblePanels[1].index : visiblePanels[0].index;
7941
7995
  } else {
7942
7996
  _this._nextIndex = visiblePanels[0].index;
7943
7997
  }
7944
- // _syncToCategory에서 완전히 가로 이동이 이루어지기 전에 세로 방향 index가 변하는 경우가 있어 timeout으로 처리
7945
- _this._sideFlicking.forEach(function (child, i) {
7946
- if (_this._nextIndex !== i) {
7947
- var _a = _this._sideState[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
- }
7998
+ _this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
7999
+ _this._moveDirection = null;
8000
+ // _syncToCategory에서 완전히 가로 이동이 이루어지기 전에 세로 방향 index가 변하는 경우가 있어 requestAnimationFrame 처리
8001
+ requestAnimationFrame(function () {
8002
+ return _this._setPreviousSideIndex();
7958
8003
  });
7959
8004
  if (e.isTrusted) {
7960
8005
  _this._syncToCategory(_this._sideFlicking[_this._nextIndex].index, _this._nextIndex);
7961
8006
  }
7962
8007
  };
7963
8008
  _this._onSideHoldStart = function () {
7964
- _this._sideFlicking.forEach(function (child) {
7965
- child.dragThreshold = 10;
7966
- });
8009
+ _this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
7967
8010
  _this._moveDirection = null;
7968
8011
  };
7969
8012
  _this._onSideMove = function (e) {
7970
8013
  if (e.isTrusted && !_this._moveDirection) {
7971
- _this.dragThreshold = Infinity;
8014
+ _this._setDraggable(MOVE_DIRECTION.HORIZONTAL, false);
7972
8015
  _this._moveDirection = MOVE_DIRECTION.VERTICAL;
7973
8016
  }
7974
8017
  };
7975
8018
  _this._onSideMoveEnd = function () {
7976
- _this.dragThreshold = 10;
8019
+ _this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
7977
8020
  _this._moveDirection = null;
7978
8021
  };
7979
8022
  _this._onSideChanged = function (e) {
7980
- // this.visiblePanels.length 2보다 크다면 가로 방향 Flicking이 조작 중이라는 것을 의미합니다.
7981
- // 경우 가로 방향 Flicking의 이동이 완전히 끝난 _onHorizontalMoveEnd 에서 syncToCategory할 것이므로 여기서는 하지 않습니다.
8023
+ // If this.visiblePanels.length >= 2, it means that horizontal flicking is being dragged.
8024
+ // In this case, syncToCategory in _onHorizontalMoveEnd will fire after moving finishes, so we don't fire it here.
7982
8025
  if (_this.visiblePanels.length < 2 && _this._sideFlicking[_this.index] === e.currentTarget) {
7983
8026
  _this._syncToCategory(e.index, _this.index);
7984
8027
  }
7985
8028
  };
8029
+ var _a = options.sideOptions,
8030
+ sideOptions = _a === void 0 ? {} : _a,
8031
+ _b = options.preserveIndex,
8032
+ preserveIndex = _b === void 0 ? true : _b,
8033
+ _c = options.disableSlideOnHold,
8034
+ disableSlideOnHold = _c === void 0 ? true : _c,
8035
+ _d = options.disableIndexSync,
8036
+ disableIndexSync = _d === void 0 ? false : _d;
7986
8037
  // Internal states
7987
- _this._sideState = _this._createSideState();
7988
8038
  _this._moveDirection = null;
7989
8039
  _this._nextIndex = 0;
7990
8040
  // Bind options
7991
- _this._sideOptions = options.sideOptions;
7992
- // Create core components
7993
- _this._sideFlicking = _this._createSideFlicking();
8041
+ _this._sideOptions = sideOptions;
8042
+ _this._preserveIndex = preserveIndex;
8043
+ _this._disableSlideOnHold = disableSlideOnHold;
8044
+ _this._disableIndexSync = disableIndexSync;
7994
8045
  return _this;
7995
8046
  }
7996
8047
  var __proto = CrossFlicking.prototype;
7997
8048
  Object.defineProperty(__proto, "sideFlicking", {
7998
8049
  // 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
8050
  get: function () {
8010
8051
  return this._sideFlicking;
8011
8052
  },
@@ -8013,16 +8054,6 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
8013
8054
  configurable: true
8014
8055
  });
8015
8056
  Object.defineProperty(__proto, "sideState", {
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
8057
  get: function () {
8027
8058
  return this._sideState;
8028
8059
  },
@@ -8031,42 +8062,58 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
8031
8062
  });
8032
8063
  Object.defineProperty(__proto, "sideOptions", {
8033
8064
  // 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
8065
  get: function () {
8044
8066
  return this._sideOptions;
8045
8067
  },
8068
+ // Options Setter
8069
+ set: function (val) {
8070
+ this._sideOptions = val;
8071
+ },
8072
+ enumerable: false,
8073
+ configurable: true
8074
+ });
8075
+ Object.defineProperty(__proto, "preserveIndex", {
8076
+ get: function () {
8077
+ return this._preserveIndex;
8078
+ },
8079
+ set: function (val) {
8080
+ this._preserveIndex = val;
8081
+ },
8082
+ enumerable: false,
8083
+ configurable: true
8084
+ });
8085
+ Object.defineProperty(__proto, "disableSlideOnHold", {
8086
+ get: function () {
8087
+ return this._disableSlideOnHold;
8088
+ },
8089
+ set: function (val) {
8090
+ this._disableSlideOnHold = val;
8091
+ },
8092
+ enumerable: false,
8093
+ configurable: true
8094
+ });
8095
+ Object.defineProperty(__proto, "disableIndexSync", {
8096
+ get: function () {
8097
+ return this._disableIndexSync;
8098
+ },
8099
+ set: function (val) {
8100
+ this._disableIndexSync = val;
8101
+ },
8046
8102
  enumerable: false,
8047
8103
  configurable: true
8048
8104
  });
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
8105
  __proto.init = function () {
8058
8106
  var _this = this;
8059
8107
  return _super.prototype.init.call(this).then(function () {
8060
- return _this._addComponentEvents();
8108
+ _this._sideState = _this._createSideState();
8109
+ _this._sideFlicking = _this._createSideFlicking();
8110
+ _this._addComponentEvents();
8061
8111
  });
8062
8112
  };
8063
- /**
8064
- * Destroy Flicking and remove all event handlers
8065
- * @ko Flicking과 하위 컴포넌트들을 초기 상태로 되돌리고, 부착된 모든 이벤트 핸들러를 제거합니다
8066
- * @return {void}
8067
- */
8068
8113
  __proto.destroy = function () {
8069
- // TODO 모든 child flicking destroy
8114
+ this._sideFlicking.forEach(function (flicking) {
8115
+ flicking.destroy();
8116
+ });
8070
8117
  _super.prototype.destroy.call(this);
8071
8118
  };
8072
8119
  __proto._addComponentEvents = function () {
@@ -8074,110 +8121,110 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
8074
8121
  this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
8075
8122
  this.on(EVENTS.MOVE, this._onHorizontalMove);
8076
8123
  this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
8077
- this._sideFlicking.forEach(function (flicking) {
8124
+ this._sideFlicking.forEach(function (flicking, mainIndex) {
8078
8125
  flicking.on(EVENTS.HOLD_START, _this._onSideHoldStart);
8079
8126
  flicking.on(EVENTS.MOVE, _this._onSideMove);
8080
8127
  flicking.on(EVENTS.MOVE_END, _this._onSideMoveEnd);
8081
8128
  flicking.on(EVENTS.CHANGED, _this._onSideChanged);
8129
+ Object.keys(SIDE_EVENTS).forEach(function (name) {
8130
+ flicking.on(EVENTS[name], function (event) {
8131
+ _this.trigger(new ComponentEvent(SIDE_EVENTS[name], __assign({
8132
+ mainIndex: mainIndex
8133
+ }, event)));
8134
+ });
8135
+ });
8082
8136
  });
8083
8137
  };
8084
8138
  __proto._createSideState = function () {
8085
- var _this = this;
8086
- // data-index로 분류하기 전에 임시로 모든 children에 대해 side flicking으로 해보자.
8087
- // panels에 data-attributes가 붙어있을 때와 안 붙어있을 때를 다르게 처리
8088
- // 붙어있다면 가상의 viewport들을 index 갯수만큼 만들어줘야 한다
8089
8139
  var viewportEl = this.element;
8090
8140
  var cameraEl = this.camera.element;
8091
8141
  var panels = toArray(cameraEl.children);
8092
- var sideState = [];
8093
- var sidePanels = "";
8094
- // check data attribute exists
8095
- var groupKeys = [];
8096
- var groupPanels = {};
8097
- var sideCamera = document.createElement("div");
8098
- sideCamera.classList.add(CLASS.CAMERA);
8099
8142
  var isCrossStructure = getDataAttributes(viewportEl, "data-cross-").structure;
8143
+ var sideState = [];
8100
8144
  if (!isCrossStructure) {
8101
- viewportEl.setAttribute("data-cross-structure", "true");
8102
- panels.forEach(function (panel) {
8103
- var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
8104
- if (groupKey && !includes(groupKeys, groupKey)) {
8105
- groupKeys.push(groupKey);
8106
- groupPanels[groupKey] = [panel];
8107
- } else if (groupKey) {
8108
- groupPanels[groupKey].push(panel);
8109
- }
8110
- });
8145
+ var groupPanels = this._getGroupFromAttribute(panels);
8146
+ var groupKeys = Object.keys(groupPanels);
8111
8147
  if (groupKeys.length) {
8112
- sideState = groupKeys.reduce(function (state, key) {
8113
- var start = state.length ? +state[state.length - 1].end + 1 : 0;
8114
- var element = groupPanels[key].reduce(function (el, panel) {
8115
- sidePanels += panel.outerHTML;
8116
- el.innerHTML += panel.outerHTML;
8117
- return el;
8118
- }, document.createElement("div"));
8119
- return __spread(state, [{
8120
- key: key,
8121
- start: start,
8122
- end: start + groupPanels[key].length - 1,
8123
- element: element
8124
- }]);
8125
- }, []);
8148
+ sideState = this._getSideStateFromGroup(groupPanels);
8126
8149
  this.remove(0, this.panelCount - groupKeys.length);
8127
- sideState.forEach(function (_, i) {
8128
- var panel = _this.camera.children[i];
8129
- Array.from(panel.attributes).forEach(function (attribute) {
8130
- return panel.removeAttribute(attribute.name);
8131
- });
8132
- });
8133
8150
  } else {
8134
- sideState = panels.reduce(function (state, panel, i) {
8135
- var start = state.length ? +state[state.length - 1].end + 1 : 0;
8136
- sidePanels += panel.innerHTML;
8137
- return __spread(state, [{
8138
- key: i.toString(),
8139
- start: start,
8140
- end: start + panel.children.length - 1,
8141
- element: panel
8142
- }]);
8143
- }, []);
8151
+ sideState = this._getSideStateFromPanels(panels);
8144
8152
  }
8145
- sideCamera.innerHTML = sidePanels;
8146
- sideState.forEach(function (_, i) {
8147
- var panel = _this.camera.children[i];
8148
- [CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
8149
- if (!panel.classList.contains(className)) {
8150
- panel.classList.add(className);
8151
- }
8152
- });
8153
- panel.innerHTML = sideCamera.outerHTML;
8154
- });
8153
+ this._createCrossStructure(sideState);
8155
8154
  } else {
8156
- toArray(panels[0].children[0].children).forEach(function (panel) {
8157
- var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
8158
- if (groupKey && !includes(groupKeys, groupKey)) {
8159
- groupKeys.push(groupKey);
8160
- groupPanels[groupKey] = [panel];
8161
- } else if (groupKey) {
8162
- groupPanels[groupKey].push(panel);
8163
- }
8164
- });
8165
- sideState = groupKeys.reduce(function (state, key) {
8166
- var start = state.length ? +state[state.length - 1].end + 1 : 0;
8167
- var element = groupPanels[key].reduce(function (el, panel) {
8168
- el.innerHTML += panel.outerHTML;
8169
- return el;
8170
- }, document.createElement("div"));
8171
- return __spread(state, [{
8172
- key: key,
8173
- start: start,
8174
- end: start + groupPanels[key].length - 1,
8175
- element: element
8176
- }]);
8177
- }, []);
8155
+ sideState = this._getSideStateFromCrossStructure(panels);
8178
8156
  }
8157
+ void this.resize();
8179
8158
  return sideState;
8180
8159
  };
8160
+ __proto._createCrossStructure = function (sideState) {
8161
+ var _this = this;
8162
+ var sideCamera = document.createElement("div");
8163
+ var sidePanels = "";
8164
+ sideCamera.classList.add(CLASS.CAMERA);
8165
+ sideState.forEach(function (state, i) {
8166
+ var panel = _this.camera.children[i];
8167
+ sidePanels += state.element.innerHTML;
8168
+ Array.from(panel.attributes).forEach(function (attribute) {
8169
+ return panel.removeAttribute(attribute.name);
8170
+ });
8171
+ });
8172
+ sideCamera.innerHTML = sidePanels;
8173
+ sideState.forEach(function (_, i) {
8174
+ var panel = _this.camera.children[i];
8175
+ [CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
8176
+ if (!panel.classList.contains(className)) {
8177
+ panel.classList.add(className);
8178
+ }
8179
+ });
8180
+ panel.innerHTML = sideCamera.outerHTML;
8181
+ });
8182
+ this.element.setAttribute("data-cross-structure", "true");
8183
+ };
8184
+ __proto._getGroupFromAttribute = function (panels) {
8185
+ var groupKeys = [];
8186
+ var groupPanels = {};
8187
+ panels.forEach(function (panel) {
8188
+ var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
8189
+ if (groupKey && !includes(groupKeys, groupKey)) {
8190
+ groupKeys.push(groupKey);
8191
+ groupPanels[groupKey] = [panel];
8192
+ } else if (groupKey) {
8193
+ groupPanels[groupKey].push(panel);
8194
+ }
8195
+ });
8196
+ return groupPanels;
8197
+ };
8198
+ __proto._getSideStateFromGroup = function (groupPanels) {
8199
+ return Object.keys(groupPanels).reduce(function (state, key) {
8200
+ var start = state.length ? +state[state.length - 1].end + 1 : 0;
8201
+ var element = groupPanels[key].reduce(function (el, panel) {
8202
+ el.innerHTML += panel.outerHTML;
8203
+ return el;
8204
+ }, document.createElement("div"));
8205
+ return __spread(state, [{
8206
+ key: key,
8207
+ start: start,
8208
+ end: start + groupPanels[key].length - 1,
8209
+ element: element
8210
+ }]);
8211
+ }, []);
8212
+ };
8213
+ __proto._getSideStateFromPanels = function (panels) {
8214
+ return panels.reduce(function (state, panel, i) {
8215
+ var start = state.length ? +state[state.length - 1].end + 1 : 0;
8216
+ return __spread(state, [{
8217
+ key: i.toString(),
8218
+ start: start,
8219
+ end: start + panel.children.length - 1,
8220
+ element: panel
8221
+ }]);
8222
+ }, []);
8223
+ };
8224
+ __proto._getSideStateFromCrossStructure = function (panels) {
8225
+ var groupPanels = this._getGroupFromAttribute(panels);
8226
+ return this._getSideStateFromGroup(groupPanels);
8227
+ };
8181
8228
  __proto._createSideFlicking = function () {
8182
8229
  var _this = this;
8183
8230
  return this.sideState.map(function (state, i) {
@@ -8188,20 +8235,6 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
8188
8235
  }));
8189
8236
  });
8190
8237
  };
8191
- __proto._syncToCategory = function (index, outerIndex) {
8192
- var _this = this;
8193
- this.stopAnimation();
8194
- this._sideFlicking.forEach(function (child, i) {
8195
- var _a = _this._sideState[i],
8196
- start = _a.start,
8197
- end = _a.end;
8198
- if (start <= index && end >= index && outerIndex !== i) {
8199
- child.stopAnimation();
8200
- void child.moveTo(index, 0);
8201
- void _this.moveTo(i, 0);
8202
- }
8203
- });
8204
- };
8205
8238
  return CrossFlicking;
8206
8239
  }(Flicking);
8207
8240
 
@@ -8419,5 +8452,5 @@ var parseAlign = function (alignVal) {
8419
8452
  * egjs projects are licensed under the MIT license
8420
8453
  */
8421
8454
 
8422
- 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 };
8455
+ 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 };
8423
8456
  //# sourceMappingURL=flicking.esm.js.map