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

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.10
8
8
  */
9
9
  import Component, { ComponentEvent } from '@egjs/component';
10
10
  import Axes, { PanInput } from '@egjs/axes';
@@ -385,6 +385,8 @@ var MOVE_TYPE = {
385
385
  STRICT: "strict"
386
386
  };
387
387
  var CLASS = {
388
+ VIEWPORT: "flicking-viewport",
389
+ CAMERA: "flicking-camera",
388
390
  VERTICAL: "vertical",
389
391
  HIDDEN: "flicking-hidden",
390
392
  DEFAULT_VIRTUAL: "flicking-panel"
@@ -736,6 +738,26 @@ var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
736
738
  obj.__proto__ = proto;
737
739
  return obj;
738
740
  };
741
+ var camelize = function (str) {
742
+ return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
743
+ return letter.toUpperCase();
744
+ });
745
+ };
746
+ var getDataAttributes = function (element, attributePrefix) {
747
+ var dataAttributes = {};
748
+ var attributes = element.attributes;
749
+ var length = attributes.length;
750
+ for (var i = 0; i < length; ++i) {
751
+ var attribute = attributes[i];
752
+ var name_1 = attribute.name,
753
+ value = attribute.value;
754
+ if (name_1.indexOf(attributePrefix) === -1) {
755
+ continue;
756
+ }
757
+ dataAttributes[camelize(name_1.replace(attributePrefix, ""))] = value;
758
+ }
759
+ return dataAttributes;
760
+ };
739
761
 
740
762
  /*
741
763
  * Copyright (c) 2015 NAVER Corp.
@@ -3722,6 +3744,7 @@ var Camera = /*#__PURE__*/function () {
3722
3744
  var _this = this;
3723
3745
  var _b = (_a === void 0 ? {} : _a).align,
3724
3746
  align = _b === void 0 ? ALIGN.CENTER : _b;
3747
+ this._lookedOffset = 0;
3725
3748
  this._checkTranslateSupport = function () {
3726
3749
  var e_1, _a;
3727
3750
  var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
@@ -4081,6 +4104,8 @@ var Camera = /*#__PURE__*/function () {
4081
4104
  */
4082
4105
  __proto.lookAt = function (pos) {
4083
4106
  var _this = this;
4107
+ var prevOffset = this._offset;
4108
+ var isChangedOffset = this._lookedOffset !== prevOffset;
4084
4109
  var flicking = getFlickingAttached(this._flicking);
4085
4110
  var prevPos = this._position;
4086
4111
  this._position = pos;
@@ -4091,7 +4116,12 @@ var Camera = /*#__PURE__*/function () {
4091
4116
  if (toggled) {
4092
4117
  void flicking.renderer.render().then(function () {
4093
4118
  _this.updateOffset();
4119
+ _this._lookedOffset = _this._offset;
4094
4120
  });
4121
+ } else if (isChangedOffset) {
4122
+ // sync offset for renderOnlyVisible on resize
4123
+ this.updateOffset();
4124
+ this._lookedOffset = this._offset;
4095
4125
  } else {
4096
4126
  this.applyTransform();
4097
4127
  }
@@ -4266,8 +4296,8 @@ var Camera = /*#__PURE__*/function () {
4266
4296
  return this;
4267
4297
  };
4268
4298
  /**
4269
- * Update Viewport's height to active panel's height
4270
- * @ko 현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
4299
+ * Update Viewport's height to visible panel's max height
4300
+ * @ko 현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
4271
4301
  * @throws {FlickingError}
4272
4302
  * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
4273
4303
  * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
@@ -4277,9 +4307,17 @@ var Camera = /*#__PURE__*/function () {
4277
4307
  __proto.updateAdaptiveHeight = function () {
4278
4308
  var flicking = getFlickingAttached(this._flicking);
4279
4309
  var activePanel = flicking.control.activePanel;
4280
- 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
+ })));
4281
4319
  flicking.viewport.setSize({
4282
- height: activePanel.height
4320
+ height: maxHeight
4283
4321
  });
4284
4322
  };
4285
4323
  /**
@@ -4350,6 +4388,7 @@ var Camera = /*#__PURE__*/function () {
4350
4388
  };
4351
4389
  __proto._resetInternalValues = function () {
4352
4390
  this._position = 0;
4391
+ this._lookedOffset = 0;
4353
4392
  this._alignPos = 0;
4354
4393
  this._offset = 0;
4355
4394
  this._circularOffset = 0;
@@ -7871,180 +7910,332 @@ var Flicking = /*#__PURE__*/function (_super) {
7871
7910
  * Flicking.VERSION; // ex) 4.0.0
7872
7911
  * ```
7873
7912
  */
7874
- Flicking.VERSION = "4.12.0-beta.1";
7913
+ Flicking.VERSION = "4.12.0-beta.10";
7875
7914
  return Flicking;
7876
7915
  }(Component);
7877
7916
 
7878
- /*
7879
- * Copyright (c) 2015 NAVER Corp.
7880
- * egjs projects are licensed under the MIT license
7881
- */
7882
- /**
7883
- * @extends Component
7884
- * @support {"ie": "9+(with polyfill)", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "4.X+"}
7885
- * @requires {@link https://github.com/naver/egjs-component|@egjs/component}
7886
- * @requires {@link https://github.com/naver/egjs-axes|@egjs/axes}
7887
- */
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
+ };
7888
7926
  var CrossFlicking = /*#__PURE__*/function (_super) {
7889
7927
  __extends(CrossFlicking, _super);
7890
- // Options Setter
7891
- // UI / LAYOUT
7892
- // public set align(val: FlickingOptions["align"]) {
7893
- // this._align = val;
7894
- // }
7895
- function CrossFlicking(root, _a) {
7896
- var _b = (_a === void 0 ? {} : _a).verticalOptions,
7897
- verticalOptions = _b === void 0 ? undefined : _b;
7898
- var _this = _super.call(this, root) || this;
7928
+ function CrossFlicking(root, options) {
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 dragThreshold = _this._originalDragThreshold;
7951
+ var threshold = draggable ? dragThreshold && dragThreshold >= 10 ? dragThreshold : 10 : Infinity;
7952
+ if (direction === MOVE_DIRECTION.HORIZONTAL === _this.horizontal) {
7953
+ _this.dragThreshold = threshold;
7954
+ } else if (direction === MOVE_DIRECTION.VERTICAL === _this.horizontal) {
7955
+ _this._sideFlicking.forEach(function (child) {
7956
+ child.dragThreshold = threshold;
7957
+ });
7958
+ }
7959
+ };
7960
+ _this._setPreviousSideIndex = function () {
7961
+ _this._sideFlicking.forEach(function (child, i) {
7962
+ var _a = _this._sideState[i],
7963
+ start = _a.start,
7964
+ end = _a.end;
7965
+ if (_this._preserveIndex) {
7966
+ if (_this._nextIndex !== i) {
7967
+ if (child.index < start) {
7968
+ child.stopAnimation();
7969
+ void child.moveTo(start, 0);
7970
+ } else if (child.index > end) {
7971
+ child.stopAnimation();
7972
+ void child.moveTo(end, 0);
7973
+ }
7974
+ }
7975
+ } else {
7976
+ if (_this._nextIndex !== i) {
7977
+ void child.moveTo(start, 0);
7978
+ }
7979
+ }
7980
+ });
7981
+ };
7899
7982
  _this._onHorizontalHoldStart = function () {
7900
- _this.dragThreshold = 10;
7983
+ _this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
7901
7984
  _this._moveDirection = null;
7902
7985
  };
7903
7986
  _this._onHorizontalMove = function (e) {
7904
7987
  if (e.isTrusted && !_this._moveDirection) {
7905
- _this._verticalFlicking.forEach(function (child) {
7906
- child.dragThreshold = Infinity;
7907
- });
7988
+ _this._setDraggable(MOVE_DIRECTION.VERTICAL, false);
7908
7989
  _this._moveDirection = MOVE_DIRECTION.HORIZONTAL;
7909
7990
  }
7910
7991
  };
7911
7992
  _this._onHorizontalMoveEnd = function (e) {
7912
7993
  var visiblePanels = _this.visiblePanels;
7913
- _this._verticalFlicking.forEach(function (child) {
7914
- child.dragThreshold = 10;
7915
- });
7916
- _this._moveDirection = null;
7917
7994
  if (visiblePanels.length > 1) {
7918
7995
  _this._nextIndex = e.direction === "NEXT" ? visiblePanels[1].index : visiblePanels[0].index;
7919
7996
  } else {
7920
7997
  _this._nextIndex = visiblePanels[0].index;
7921
7998
  }
7922
- _this._verticalFlicking.forEach(function (child, i) {
7923
- if (_this._nextIndex !== i) {
7924
- var _a = _this._verticalState[i],
7925
- start = _a.start,
7926
- end = _a.end;
7927
- if (child.index < start) {
7928
- child.stopAnimation();
7929
- void child.moveTo(start, 0);
7930
- } else if (child.index > end) {
7931
- child.stopAnimation();
7932
- void child.moveTo(end, 0);
7933
- }
7934
- }
7999
+ _this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
8000
+ _this._moveDirection = null;
8001
+ // _syncToCategory에서 완전히 가로 이동이 이루어지기 전에 세로 방향 index가 변하는 경우가 있어 requestAnimationFrame 처리
8002
+ requestAnimationFrame(function () {
8003
+ return _this._setPreviousSideIndex();
7935
8004
  });
7936
8005
  if (e.isTrusted) {
7937
- _this._syncToCategory(_this._verticalFlicking[_this._nextIndex].index, _this._nextIndex);
8006
+ _this._syncToCategory(_this._sideFlicking[_this._nextIndex].index, _this._nextIndex);
7938
8007
  }
7939
8008
  };
7940
- _this._onVerticalHoldStart = function () {
7941
- _this._verticalFlicking.forEach(function (child) {
7942
- child.dragThreshold = 10;
7943
- });
8009
+ _this._onSideHoldStart = function () {
8010
+ _this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
7944
8011
  _this._moveDirection = null;
7945
8012
  };
7946
- _this._onVerticalMove = function (e) {
8013
+ _this._onSideMove = function (e) {
7947
8014
  if (e.isTrusted && !_this._moveDirection) {
7948
- _this.dragThreshold = Infinity;
8015
+ _this._setDraggable(MOVE_DIRECTION.HORIZONTAL, false);
7949
8016
  _this._moveDirection = MOVE_DIRECTION.VERTICAL;
7950
8017
  }
7951
8018
  };
7952
- _this._onVerticalMoveEnd = function () {
7953
- _this.dragThreshold = 10;
8019
+ _this._onSideMoveEnd = function () {
8020
+ _this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
7954
8021
  _this._moveDirection = null;
7955
8022
  };
7956
- _this._onVerticalChanged = function (e) {
7957
- // this.visiblePanels.length 2보다 크다면 가로 방향 Flicking이 조작 중이라는 것을 의미합니다.
7958
- // 경우 가로 방향 Flicking의 이동이 완전히 끝난 _onHorizontalMoveEnd 에서 syncToCategory할 것이므로 여기서는 하지 않습니다.
7959
- if (_this.visiblePanels.length < 2 && _this._verticalFlicking[_this.index] === e.currentTarget) {
8023
+ _this._onSideChanged = function (e) {
8024
+ // If this.visiblePanels.length >= 2, it means that horizontal flicking is being dragged.
8025
+ // In this case, syncToCategory in _onHorizontalMoveEnd will fire after moving finishes, so we don't fire it here.
8026
+ if (_this.visiblePanels.length < 2 && _this._sideFlicking[_this.index] === e.currentTarget) {
7960
8027
  _this._syncToCategory(e.index, _this.index);
7961
8028
  }
7962
8029
  };
8030
+ var _a = options.sideOptions,
8031
+ sideOptions = _a === void 0 ? {} : _a,
8032
+ _b = options.preserveIndex,
8033
+ preserveIndex = _b === void 0 ? true : _b,
8034
+ _c = options.disableSlideOnHold,
8035
+ disableSlideOnHold = _c === void 0 ? true : _c,
8036
+ _d = options.disableIndexSync,
8037
+ disableIndexSync = _d === void 0 ? false : _d;
7963
8038
  // Internal states
7964
- _this._verticalState = [];
7965
8039
  _this._moveDirection = null;
7966
8040
  _this._nextIndex = 0;
8041
+ _this._originalDragThreshold = _this.dragThreshold;
7967
8042
  // Bind options
7968
- _this._verticalOptions = verticalOptions;
8043
+ _this._sideOptions = sideOptions;
8044
+ _this._preserveIndex = preserveIndex;
8045
+ _this._disableSlideOnHold = disableSlideOnHold;
8046
+ _this._disableIndexSync = disableIndexSync;
7969
8047
  return _this;
7970
- // Create core components
7971
- // this._viewport = new Viewport(this, getElement(root));
7972
8048
  }
7973
8049
  var __proto = CrossFlicking.prototype;
7974
- Object.defineProperty(__proto, "verticalOptions", {
8050
+ Object.defineProperty(__proto, "sideFlicking", {
7975
8051
  // Components
7976
- /**
7977
- * Change active panel index on mouse/touch hold while animating.
7978
- * `index` of the `willChange`/`willRestore` event will be used as new index.
7979
- * @ko 애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
7980
- * `willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다.
7981
- * @type {FlickingOptions}
7982
- * @default undefined
7983
- * @see {@link https://naver.github.io/egjs-flicking/Options#changeonhold changeOnHold ( Options )}
7984
- */
7985
8052
  get: function () {
7986
- return this._verticalOptions;
8053
+ return this._sideFlicking;
8054
+ },
8055
+ enumerable: false,
8056
+ configurable: true
8057
+ });
8058
+ Object.defineProperty(__proto, "sideState", {
8059
+ get: function () {
8060
+ return this._sideState;
8061
+ },
8062
+ enumerable: false,
8063
+ configurable: true
8064
+ });
8065
+ Object.defineProperty(__proto, "sideOptions", {
8066
+ // Options Getter
8067
+ get: function () {
8068
+ return this._sideOptions;
8069
+ },
8070
+ // Options Setter
8071
+ set: function (val) {
8072
+ this._sideOptions = val;
8073
+ },
8074
+ enumerable: false,
8075
+ configurable: true
8076
+ });
8077
+ Object.defineProperty(__proto, "preserveIndex", {
8078
+ get: function () {
8079
+ return this._preserveIndex;
8080
+ },
8081
+ set: function (val) {
8082
+ this._preserveIndex = val;
8083
+ },
8084
+ enumerable: false,
8085
+ configurable: true
8086
+ });
8087
+ Object.defineProperty(__proto, "disableSlideOnHold", {
8088
+ get: function () {
8089
+ return this._disableSlideOnHold;
8090
+ },
8091
+ set: function (val) {
8092
+ this._disableSlideOnHold = val;
8093
+ },
8094
+ enumerable: false,
8095
+ configurable: true
8096
+ });
8097
+ Object.defineProperty(__proto, "disableIndexSync", {
8098
+ get: function () {
8099
+ return this._disableIndexSync;
8100
+ },
8101
+ set: function (val) {
8102
+ this._disableIndexSync = val;
7987
8103
  },
7988
8104
  enumerable: false,
7989
8105
  configurable: true
7990
8106
  });
7991
- /**
7992
- * Initialize Flicking and move to the default index
7993
- * This is automatically called on Flicking's constructor when `autoInit` is true(default)
7994
- * @ko Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
7995
- * 이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
7996
- * @fires Flicking#ready
7997
- * @return {Promise<void>}
7998
- */
7999
8107
  __proto.init = function () {
8000
8108
  var _this = this;
8001
8109
  return _super.prototype.init.call(this).then(function () {
8002
- // data-index로 분류하기 전에 임시로 모든 children에 대해 vertical flicking으로 해보자.
8003
- // camera.children들에 대해 갯수 세기
8004
- var verticalPanels = "";
8005
- _this._verticalState = _this.camera.children.reduce(function (state, child) {
8006
- var start = state.length ? +state[state.length - 1].end + 1 : 0;
8007
- verticalPanels += child.children[0].innerHTML;
8008
- return __spread(state, [{
8009
- start: start,
8010
- end: start + child.children[0].children.length - 1,
8011
- element: child
8012
- }]);
8013
- }, []);
8014
- _this.camera.children.forEach(function (child) {
8015
- child.children[0].innerHTML = verticalPanels;
8110
+ _this._sideState = _this._createSideState();
8111
+ _this._sideFlicking = _this._createSideFlicking();
8112
+ _this._addComponentEvents();
8113
+ });
8114
+ };
8115
+ __proto.destroy = function () {
8116
+ this._sideFlicking.forEach(function (flicking) {
8117
+ flicking.destroy();
8118
+ });
8119
+ _super.prototype.destroy.call(this);
8120
+ };
8121
+ __proto._addComponentEvents = function () {
8122
+ var _this = this;
8123
+ this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
8124
+ this.on(EVENTS.MOVE, this._onHorizontalMove);
8125
+ this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
8126
+ this._sideFlicking.forEach(function (flicking, mainIndex) {
8127
+ flicking.on(EVENTS.HOLD_START, _this._onSideHoldStart);
8128
+ flicking.on(EVENTS.MOVE, _this._onSideMove);
8129
+ flicking.on(EVENTS.MOVE_END, _this._onSideMoveEnd);
8130
+ flicking.on(EVENTS.CHANGED, _this._onSideChanged);
8131
+ Object.keys(SIDE_EVENTS).forEach(function (name) {
8132
+ flicking.on(EVENTS[name], function (event) {
8133
+ _this.trigger(new ComponentEvent(SIDE_EVENTS[name], __assign({
8134
+ mainIndex: mainIndex
8135
+ }, event)));
8136
+ });
8016
8137
  });
8017
- _this._verticalFlicking = _this.camera.children.map(function (child, i) {
8018
- return new Flicking(child, __assign(__assign({}, _this.verticalOptions), {
8019
- horizontal: false,
8020
- panelsPerView: 1,
8021
- defaultIndex: _this._verticalState[i].start
8022
- }));
8138
+ });
8139
+ };
8140
+ __proto._createSideState = function () {
8141
+ var viewportEl = this.element;
8142
+ var cameraEl = this.camera.element;
8143
+ var panels = toArray(cameraEl.children);
8144
+ var isCrossStructure = getDataAttributes(viewportEl, "data-cross-").structure;
8145
+ var sideState = [];
8146
+ if (!isCrossStructure) {
8147
+ var groupPanels = this._getGroupFromAttribute(panels);
8148
+ var groupKeys = Object.keys(groupPanels);
8149
+ if (groupKeys.length) {
8150
+ sideState = this._getSideStateFromGroup(groupPanels);
8151
+ this.remove(0, this.panelCount - groupKeys.length);
8152
+ } else {
8153
+ sideState = this._getSideStateFromPanels(panels);
8154
+ }
8155
+ this._createCrossStructure(sideState);
8156
+ } else {
8157
+ sideState = this._getSideStateFromCrossStructure(panels);
8158
+ }
8159
+ void this.resize();
8160
+ return sideState;
8161
+ };
8162
+ __proto._createCrossStructure = function (sideState) {
8163
+ var _this = this;
8164
+ var sideCamera = document.createElement("div");
8165
+ var sidePanels = "";
8166
+ sideCamera.classList.add(CLASS.CAMERA);
8167
+ sideState.forEach(function (state, i) {
8168
+ var panel = _this.camera.children[i];
8169
+ sidePanels += state.element.innerHTML;
8170
+ Array.from(panel.attributes).forEach(function (attribute) {
8171
+ return panel.removeAttribute(attribute.name);
8023
8172
  });
8024
- _this.on(EVENTS.HOLD_START, _this._onHorizontalHoldStart);
8025
- _this.on(EVENTS.MOVE, _this._onHorizontalMove);
8026
- _this.on(EVENTS.MOVE_END, _this._onHorizontalMoveEnd);
8027
- _this._verticalFlicking.forEach(function (child) {
8028
- child.on(EVENTS.HOLD_START, _this._onVerticalHoldStart);
8029
- child.on(EVENTS.MOVE, _this._onVerticalMove);
8030
- child.on(EVENTS.MOVE_END, _this._onVerticalMoveEnd);
8031
- child.on(EVENTS.CHANGED, _this._onVerticalChanged);
8173
+ });
8174
+ sideCamera.innerHTML = sidePanels;
8175
+ sideState.forEach(function (_, i) {
8176
+ var panel = _this.camera.children[i];
8177
+ [CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
8178
+ if (!panel.classList.contains(className)) {
8179
+ panel.classList.add(className);
8180
+ }
8032
8181
  });
8182
+ panel.innerHTML = sideCamera.outerHTML;
8033
8183
  });
8184
+ this.element.setAttribute("data-cross-structure", "true");
8034
8185
  };
8035
- __proto._syncToCategory = function (index, outerIndex) {
8036
- var _this = this;
8037
- this.stopAnimation();
8038
- this._verticalFlicking.forEach(function (child, i) {
8039
- var _a = _this._verticalState[i],
8040
- start = _a.start,
8041
- end = _a.end;
8042
- if (start <= index && end >= index && outerIndex !== i) {
8043
- child.stopAnimation();
8044
- void child.moveTo(index, 0);
8045
- void _this.moveTo(i, 0);
8186
+ __proto._getGroupFromAttribute = function (panels) {
8187
+ var groupKeys = [];
8188
+ var groupPanels = {};
8189
+ panels.forEach(function (panel) {
8190
+ var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
8191
+ if (groupKey && !includes(groupKeys, groupKey)) {
8192
+ groupKeys.push(groupKey);
8193
+ groupPanels[groupKey] = [panel];
8194
+ } else if (groupKey) {
8195
+ groupPanels[groupKey].push(panel);
8046
8196
  }
8047
8197
  });
8198
+ return groupPanels;
8199
+ };
8200
+ __proto._getSideStateFromGroup = function (groupPanels) {
8201
+ return Object.keys(groupPanels).reduce(function (state, key) {
8202
+ var start = state.length ? +state[state.length - 1].end + 1 : 0;
8203
+ var element = groupPanels[key].reduce(function (el, panel) {
8204
+ el.innerHTML += panel.outerHTML;
8205
+ return el;
8206
+ }, document.createElement("div"));
8207
+ return __spread(state, [{
8208
+ key: key,
8209
+ start: start,
8210
+ end: start + groupPanels[key].length - 1,
8211
+ element: element
8212
+ }]);
8213
+ }, []);
8214
+ };
8215
+ __proto._getSideStateFromPanels = function (panels) {
8216
+ return panels.reduce(function (state, panel, i) {
8217
+ var start = state.length ? +state[state.length - 1].end + 1 : 0;
8218
+ return __spread(state, [{
8219
+ key: i.toString(),
8220
+ start: start,
8221
+ end: start + panel.children.length - 1,
8222
+ element: panel
8223
+ }]);
8224
+ }, []);
8225
+ };
8226
+ __proto._getSideStateFromCrossStructure = function (panels) {
8227
+ var groupPanels = this._getGroupFromAttribute(panels);
8228
+ return this._getSideStateFromGroup(groupPanels);
8229
+ };
8230
+ __proto._createSideFlicking = function () {
8231
+ var _this = this;
8232
+ return this.sideState.map(function (state, i) {
8233
+ return new Flicking(_this.camera.children[i], __assign(__assign({}, _this.sideOptions), {
8234
+ horizontal: false,
8235
+ panelsPerView: 1,
8236
+ defaultIndex: state.start
8237
+ }));
8238
+ });
8048
8239
  };
8049
8240
  return CrossFlicking;
8050
8241
  }(Flicking);
@@ -8263,5 +8454,5 @@ var parseAlign = function (alignVal) {
8263
8454
  * egjs projects are licensed under the MIT license
8264
8455
  */
8265
8456
 
8266
- 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, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, 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 };
8457
+ 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 };
8267
8458
  //# sourceMappingURL=flicking.esm.js.map