@egjs/flicking 4.14.2-beta.1 → 4.14.2-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/flicking.js CHANGED
@@ -4,7 +4,7 @@ name: @egjs/flicking
4
4
  license: MIT
5
5
  author: NAVER Corp.
6
6
  repository: https://github.com/naver/egjs-flicking
7
- version: 4.14.2-beta.1
7
+ version: 4.14.2-beta.2
8
8
  */
9
9
  (function (global, factory) {
10
10
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@egjs/axes'), require('@egjs/imready'), require('@cfcs/core')) :
@@ -5210,8 +5210,8 @@ version: 4.14.2-beta.1
5210
5210
  __proto._afterRender = function () {
5211
5211
  var flicking = getFlickingAttached(this._flicking);
5212
5212
  flicking.camera.applyTransform();
5213
- if (flicking.useCSSOrderProperty) {
5214
- // useCSSOrderProperty를 사용하는 경우 DOM은 변화가 없지만 대신 CSS Order가 추가 된다.
5213
+ if (flicking.useCSSOrder) {
5214
+ // useCSSOrder를 사용하는 경우 DOM은 변화가 없지만 대신 CSS Order가 추가 된다.
5215
5215
  var panels_1 = flicking.panels;
5216
5216
  this._strategy.getRenderingIndexesByOrder(flicking).forEach(function (domIndex, index) {
5217
5217
  panels_1[domIndex].element.style.order = "" + index;
@@ -5260,8 +5260,8 @@ version: 4.14.2-beta.1
5260
5260
  var cameraEl = flicking.camera.element;
5261
5261
  // We're using reversed panels here as last panel should be the last element of camera element
5262
5262
  var reversedElements = [];
5263
- if (flicking.useCSSOrderProperty) {
5264
- // useCSSOrderProperty를 사용하는 경우 원본 그대로 렌더링
5263
+ if (flicking.useCSSOrder) {
5264
+ // useCSSOrder를 사용하는 경우 원본 그대로 렌더링
5265
5265
  reversedElements = this.getRenderedPanels().map(function (panel) {
5266
5266
  return panel.element;
5267
5267
  }).reverse();
@@ -6347,9 +6347,10 @@ version: 4.14.2-beta.1
6347
6347
  optimizeSizeUpdate = _16 === void 0 ? false : _16,
6348
6348
  _17 = _b.animationThreshold,
6349
6349
  animationThreshold = _17 === void 0 ? 0.5 : _17,
6350
- _18 = _b.useCSSOrderProperty,
6351
- useCSSOrderProperty = _18 === void 0 ? false : _18;
6350
+ _18 = _b.useCSSOrder,
6351
+ useCSSOrder = _18 === void 0 ? false : _18;
6352
6352
  var _this = _super.call(this) || this;
6353
+ _this._scheduleResize = false;
6353
6354
  // Internal states
6354
6355
  _this._initialized = false;
6355
6356
  _this._plugins = [];
@@ -6395,7 +6396,7 @@ version: 4.14.2-beta.1
6395
6396
  _this._renderExternal = renderExternal;
6396
6397
  _this._optimizeSizeUpdate = optimizeSizeUpdate;
6397
6398
  _this._animationThreshold = animationThreshold;
6398
- _this._useCSSOrderProperty = useCSSOrderProperty;
6399
+ _this._useCSSOrder = useCSSOrder;
6399
6400
  // Create core components
6400
6401
  _this._viewport = new Viewport(_this, getElement(root));
6401
6402
  _this._autoResizer = new AutoResizer(_this);
@@ -7124,22 +7125,23 @@ version: 4.14.2-beta.1
7124
7125
  enumerable: false,
7125
7126
  configurable: true
7126
7127
  });
7127
- Object.defineProperty(__proto, "useCSSOrderProperty", {
7128
+ Object.defineProperty(__proto, "useCSSOrder", {
7128
7129
  /**
7129
- * When `circular` is used, the DOM order changes depending on the position. Using `useCSSOrderProperty` does not change the DOM order, but the `order` CSS property changes the order on the screen.
7130
+ * Using `useCSSOrder` does not change the DOM order, but the `order` CSS property changes the order on the screen. (When `circular` is used, the DOM order changes depending on the position.)
7130
7131
  * When using `iframe`, you can prevent reloading when the DOM order changes.
7131
- * @ko `circular`를 사용한 경우 위치에 따라 DOM의 순서가 변경된다. `useCSSOrderProperty`를 사용하면 DOM의 순서는 변경되지 않지만 `order` css가 설정되면서 화면상 순서가 바뀐다.
7132
+ * In svelte, CSS order is always used.
7133
+ * @ko `useCSSOrder`를 사용하면 DOM의 순서는 변경되지 않지만 `order` css가 설정되면서 화면상 순서가 바뀐다. (`circular`를 사용한 경우 위치에 따라 DOM의 순서가 변경된다.)
7132
7134
  * `iframe`을 사용하는 경우 DOM의 순서가 변경되면서 reload가 되는 것을 막을 수 있다.
7135
+ * svelte에서는 css order를 무조건 사용한다.
7133
7136
  * @type {boolean}
7134
- * @requires `circular`
7135
7137
  * @default false
7136
- * @see {@link https://naver.github.io/egjs-flicking/Options#useCSSOrderProperty animationThreshold ( Options )}
7138
+ * @see {@link https://naver.github.io/egjs-flicking/Options#useCSSOrder useCSSOrder ( Options )}
7137
7139
  */
7138
7140
  get: function () {
7139
- return this._useCSSOrderProperty;
7141
+ return this._useCSSOrder;
7140
7142
  },
7141
7143
  set: function (val) {
7142
- this._useCSSOrderProperty = val;
7144
+ this._useCSSOrder = val;
7143
7145
  },
7144
7146
  enumerable: false,
7145
7147
  configurable: true
@@ -7626,7 +7628,9 @@ version: 4.14.2-beta.1
7626
7628
  this._plugins.forEach(function (plugin) {
7627
7629
  return plugin.destroy();
7628
7630
  });
7631
+ this._scheduleResize = false;
7629
7632
  this._initialized = false;
7633
+ this._isResizing = false;
7630
7634
  };
7631
7635
  /**
7632
7636
  * Move to the previous panel (current index - 1)
@@ -7991,7 +7995,7 @@ version: 4.14.2-beta.1
7991
7995
  * @method
7992
7996
  * @fires Flicking#beforeResize
7993
7997
  * @fires Flicking#afterResize
7994
- * @return {this}
7998
+ * @return {boolean}
7995
7999
  */
7996
8000
  __proto.resize = function () {
7997
8001
  return __awaiter(this, void 0, void 0, function () {
@@ -7999,7 +8003,16 @@ version: 4.14.2-beta.1
7999
8003
  return __generator(this, function (_a) {
8000
8004
  switch (_a.label) {
8001
8005
  case 0:
8002
- if (this._isResizing) return [2 /*return*/];
8006
+ if (!this._initialized) {
8007
+ return [2 /*return*/];
8008
+ }
8009
+
8010
+ if (this._isResizing) {
8011
+ this._scheduleResize = true;
8012
+ return [2 /*return*/];
8013
+ }
8014
+
8015
+ this._scheduleResize = false;
8003
8016
  this._isResizing = true;
8004
8017
  viewport = this._viewport;
8005
8018
  renderer = this._renderer;
@@ -8065,6 +8078,9 @@ version: 4.14.2-beta.1
8065
8078
  element: viewport.element
8066
8079
  }));
8067
8080
  this._isResizing = false;
8081
+ if (this._scheduleResize) {
8082
+ this.resize();
8083
+ }
8068
8084
  return [2 /*return*/];
8069
8085
  }
8070
8086
  });
@@ -8284,7 +8300,7 @@ version: 4.14.2-beta.1
8284
8300
  * Flicking.VERSION; // ex) 4.0.0
8285
8301
  * ```
8286
8302
  */
8287
- Flicking.VERSION = "4.14.2-beta.1";
8303
+ Flicking.VERSION = "4.14.2-beta.2";
8288
8304
  return Flicking;
8289
8305
  }(Component);
8290
8306
 
@@ -8826,8 +8842,8 @@ version: 4.14.2-beta.1
8826
8842
  var renderingPanels = flicking.panels.filter(function (panel) {
8827
8843
  return !removedPanels[panel.index];
8828
8844
  });
8829
- if (!flicking.useCSSOrderProperty) {
8830
- // useCSSOrderProperty를 사용하게 되는 경우 sort를 하지 않는다.
8845
+ if (!flicking.useCSSOrder) {
8846
+ // useCSSOrder를 사용하게 되는 경우 sort를 하지 않는다.
8831
8847
  renderingPanels.sort(function (panel1, panel2) {
8832
8848
  return panel1.position + panel1.offset - (panel2.position + panel2.offset);
8833
8849
  });