@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/declaration/Flicking.d.ts +6 -5
- package/dist/flicking.cjs.js +36 -20
- package/dist/flicking.cjs.js.map +1 -1
- package/dist/flicking.esm.js +36 -20
- package/dist/flicking.esm.js.map +1 -1
- package/dist/flicking.js +36 -20
- package/dist/flicking.js.map +1 -1
- package/dist/flicking.min.js +2 -2
- package/dist/flicking.min.js.map +1 -1
- package/dist/flicking.pkgd.js +36 -20
- package/dist/flicking.pkgd.js.map +1 -1
- package/dist/flicking.pkgd.min.js +2 -2
- package/dist/flicking.pkgd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/Flicking.ts +33 -17
- package/src/cfc/getRenderingPanels.ts +2 -2
- package/src/renderer/Renderer.ts +2 -2
- package/src/renderer/VanillaRenderer.ts +2 -2
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.
|
|
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.
|
|
5214
|
-
//
|
|
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.
|
|
5264
|
-
//
|
|
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.
|
|
6351
|
-
|
|
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.
|
|
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, "
|
|
7128
|
+
Object.defineProperty(__proto, "useCSSOrder", {
|
|
7128
7129
|
/**
|
|
7129
|
-
*
|
|
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
|
-
*
|
|
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#
|
|
7138
|
+
* @see {@link https://naver.github.io/egjs-flicking/Options#useCSSOrder useCSSOrder ( Options )}
|
|
7137
7139
|
*/
|
|
7138
7140
|
get: function () {
|
|
7139
|
-
return this.
|
|
7141
|
+
return this._useCSSOrder;
|
|
7140
7142
|
},
|
|
7141
7143
|
set: function (val) {
|
|
7142
|
-
this.
|
|
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 {
|
|
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.
|
|
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.
|
|
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.
|
|
8830
|
-
//
|
|
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
|
});
|