@egjs/flicking 4.14.1 → 4.14.2-beta.1

package/declaration/Flicking.d.ts

@@ -53,6 +53,8 @@ export interface FlickingOptions {
     moveType: ValueOf<typeof MOVE_TYPE> | MoveTypeOptions<ValueOf<typeof MOVE_TYPE>>;
     threshold: number;
     dragThreshold: number;
+    animationThreshold: number;
+    useCSSOrderProperty: boolean;
     interruptable: boolean;
     bounce: number | string | [number | string, number | string];
     iOSEdgeSwipeThreshold: number;
@@ -105,6 +107,8 @@ declare class Flicking extends Component<FlickingEvents> {
     private _moveType;
     private _threshold;
     private _dragThreshold;
+    private _animationThreshold;
+    private _useCSSOrderProperty;
     private _interruptable;
     private _bounce;
     private _iOSEdgeSwipeThreshold;
@@ -166,6 +170,8 @@ declare class Flicking extends Component<FlickingEvents> {
     get moveType(): FlickingOptions["moveType"];
     get threshold(): FlickingOptions["threshold"];
     get dragThreshold(): FlickingOptions["dragThreshold"];
+    get animationThreshold(): FlickingOptions["animationThreshold"];
+    get useCSSOrderProperty(): FlickingOptions["useCSSOrderProperty"];
     get interruptable(): FlickingOptions["interruptable"];
     get bounce(): FlickingOptions["bounce"];
     get iOSEdgeSwipeThreshold(): FlickingOptions["iOSEdgeSwipeThreshold"];
@@ -207,6 +213,8 @@ declare class Flicking extends Component<FlickingEvents> {
     set moveType(val: FlickingOptions["moveType"]);
     set threshold(val: FlickingOptions["threshold"]);
     set dragThreshold(val: FlickingOptions["dragThreshold"]);
+    set animationThreshold(val: FlickingOptions["animationThreshold"]);
+    set useCSSOrderProperty(val: FlickingOptions["useCSSOrderProperty"]);
     set interruptable(val: FlickingOptions["interruptable"]);
     set bounce(val: FlickingOptions["bounce"]);
     set iOSEdgeSwipeThreshold(val: FlickingOptions["iOSEdgeSwipeThreshold"]);
@@ -219,7 +227,7 @@ declare class Flicking extends Component<FlickingEvents> {
     set useResizeObserver(val: FlickingOptions["useResizeObserver"]);
     set observePanelResize(val: FlickingOptions["observePanelResize"]);
     set optimizeSizeUpdate(val: FlickingOptions["optimizeSizeUpdate"]);
-    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, dragThreshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, preventDefaultOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, observePanelResize, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal, optimizeSizeUpdate }?: Partial<FlickingOptions>);
+    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, dragThreshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, preventDefaultOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, observePanelResize, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal, optimizeSizeUpdate, animationThreshold, useCSSOrderProperty, }?: Partial<FlickingOptions>);
     init(): Promise<void>;
     destroy(): void;
     prev(duration?: number): Promise<void>;

package/declaration/control/AxesController.d.ts

@@ -35,6 +35,7 @@ declare class AxesController {
     addPreventClickHandler(): this;
     removePreventClickHandler(): this;
     animateTo(position: number, duration: number, axesEvent?: OnRelease): Promise<void>;
+    getCurrentPosition(): number;
     updateDirection(): void;
     private _resetInternalValues;
     private _onAxesHold;

package/declaration/renderer/Renderer.d.ts

@@ -25,6 +25,7 @@ declare abstract class Renderer {
     destroy(): void;
     getPanel(index: number): Panel | null;
     forceRenderAllPanels(): Promise<void>;
+    getRenderedPanels(): Panel[];
     updatePanelSize(): this;
     batchInsert(...items: Array<{
         index: number;

package/dist/flicking.cjs.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.14.1
+version: 4.14.2-beta.1
 */
 'use strict';
 
@@ -27,7 +27,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 var extendStatics = function (d, b) {
   extendStatics = Object.setPrototypeOf || {
@@ -97,8 +97,12 @@ function __generator(thisArg, body) {
     f,
     y,
     t,
-    g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-  return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
     return this;
   }), g;
   function verb(n) {
@@ -955,6 +959,9 @@ var Viewport = /*#__PURE__*/function () {
  * @ko autoResize 옵션을 사용할 때 크기 변화를 감지하고 Flicking의 resize를 호출하는 컴포넌트
  */
 var AutoResizer = /*#__PURE__*/function () {
+  /**
+   * @param flicking
+   */
   function AutoResizer(flicking) {
     var _this = this;
     this._onResizeWrapper = function () {
@@ -2397,7 +2404,7 @@ var AxesController = /*#__PURE__*/function () {
     if (!axes) {
       return Promise.reject(new FlickingError(MESSAGE.NOT_ATTACHED_TO_FLICKING, CODE.NOT_ATTACHED_TO_FLICKING));
     }
-    var startPos = axes.get([POSITION_KEY])[POSITION_KEY];
+    var startPos = this.getCurrentPosition();
     if (startPos === position) {
       var flicking = getFlickingAttached(this._flicking);
       flicking.camera.lookAt(position);
@@ -2441,6 +2448,14 @@ var AxesController = /*#__PURE__*/function () {
       animate();
     });
   };
+  /**
+   * Returns the current axes position
+   * @ko 현재 axes의 position을 반환합니다.
+   */
+  __proto.getCurrentPosition = function () {
+    var _a, _b;
+    return (_b = (_a = this._axes) === null || _a === void 0 ? void 0 : _a.get([POSITION_KEY])[POSITION_KEY]) !== null && _b !== void 0 ? _b : 0;
+  };
   __proto.updateDirection = function () {
     var flicking = getFlickingAttached(this._flicking);
     var axes = this._axes;
@@ -2778,16 +2793,20 @@ var Control = /*#__PURE__*/function () {
       newActivePanel = _a.newActivePanel,
       axesEvent = _a.axesEvent;
     return __awaiter(this, void 0, void 0, function () {
-      var flicking, animate, state;
+      var flicking, nextDuration, animate, state;
       var _this = this;
       return __generator(this, function (_b) {
         flicking = getFlickingAttached(this._flicking);
+        nextDuration = duration;
+        if (Math.abs(nextDuration - position) < flicking.animationThreshold) {
+          nextDuration = 0;
+        }
         animate = function () {
-          return _this._controller.animateTo(position, duration, axesEvent);
+          return _this._controller.animateTo(position, nextDuration, axesEvent);
         };
         state = this._controller.state;
         state.targetPanel = newActivePanel;
-        if (duration <= 0) {
+        if (nextDuration <= 0) {
           return [2 /*return*/, animate()];
         } else {
           return [2 /*return*/, animate().then(function () {
@@ -2813,6 +2832,7 @@ var Control = /*#__PURE__*/function () {
       });
     });
   };
+
   __proto._getPosition = function (panel, direction) {
     if (direction === void 0) {
       direction = DIRECTION.NONE;
@@ -3378,8 +3398,9 @@ var StrictControl = /*#__PURE__*/function (_super) {
     var anchors = camera.anchorPoints;
     var firstAnchor = anchors[0];
     var lastAnchor = anchors[anchors.length - 1];
-    var shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
-    var shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
+    // position이 bounce으로 인하여 범위를 넘어가야 동작하도록 변경
+    var shouldBounceToFirst = position < cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
+    var shouldBounceToLast = position > cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
     var isAdjacent = adjacentAnchor && (indexRange.min <= indexRange.max ? isBetween(adjacentAnchor.index, indexRange.min, indexRange.max) : adjacentAnchor.index >= indexRange.min || adjacentAnchor.index <= indexRange.max);
     if (shouldBounceToFirst || shouldBounceToLast) {
       // In bounce area
@@ -4737,6 +4758,17 @@ var Renderer = /*#__PURE__*/function () {
     });
     return Promise.resolve();
   };
+  /**
+   * Return Rendered Panels
+   * @ko 렌더링이 된 패널을 반환합니다.
+   * @return {Panel[]}
+   */
+  __proto.getRenderedPanels = function () {
+    var flicking = getFlickingAttached(this._flicking);
+    return flicking.renderer.panels.filter(function (panel) {
+      return panel.rendered;
+    });
+  };
   /**
    * Update all panel sizes
    * @ko 모든 패널의 크기를 업데이트합니다
@@ -5097,6 +5129,13 @@ var Renderer = /*#__PURE__*/function () {
   __proto._afterRender = function () {
     var flicking = getFlickingAttached(this._flicking);
     flicking.camera.applyTransform();
+    if (flicking.useCSSOrderProperty) {
+      // useCSSOrderProperty를 사용하는 경우 DOM은 변화가 없지만 대신 CSS Order가 추가 된다.
+      var panels_1 = flicking.panels;
+      this._strategy.getRenderingIndexesByOrder(flicking).forEach(function (domIndex, index) {
+        panels_1[domIndex].element.style.order = "" + index;
+      });
+    }
   };
   return Renderer;
 }();
@@ -5125,6 +5164,7 @@ var VanillaRenderer = /*#__PURE__*/function (_super) {
       });
     });
   };
+
   __proto._collectPanels = function () {
     var flicking = getFlickingAttached(this._flicking);
     var camera = flicking.camera;
@@ -5138,7 +5178,15 @@ var VanillaRenderer = /*#__PURE__*/function (_super) {
     var flicking = getFlickingAttached(this._flicking);
     var cameraEl = flicking.camera.element;
     // We're using reversed panels here as last panel should be the last element of camera element
-    var reversedElements = this._strategy.getRenderingElementsByOrder(flicking).reverse();
+    var reversedElements = [];
+    if (flicking.useCSSOrderProperty) {
+      // useCSSOrderProperty를 사용하는 경우 원본 그대로 렌더링
+      reversedElements = this.getRenderedPanels().map(function (panel) {
+        return panel.element;
+      }).reverse();
+    } else {
+      reversedElements = this._strategy.getRenderingElementsByOrder(flicking).reverse();
+    }
     reversedElements.forEach(function (el, idx) {
       var nextEl = reversedElements[idx - 1] ? reversedElements[idx - 1] : null;
       if (el.nextElementSibling !== nextEl) {
@@ -6201,7 +6249,11 @@ var Flicking = /*#__PURE__*/function (_super) {
       _15 = _b.renderExternal,
       renderExternal = _15 === void 0 ? null : _15,
       _16 = _b.optimizeSizeUpdate,
-      optimizeSizeUpdate = _16 === void 0 ? false : _16;
+      optimizeSizeUpdate = _16 === void 0 ? false : _16,
+      _17 = _b.animationThreshold,
+      animationThreshold = _17 === void 0 ? 0.5 : _17,
+      _18 = _b.useCSSOrderProperty,
+      useCSSOrderProperty = _18 === void 0 ? false : _18;
     var _this = _super.call(this) || this;
     // Internal states
     _this._initialized = false;
@@ -6247,6 +6299,8 @@ var Flicking = /*#__PURE__*/function (_super) {
     _this._externalRenderer = externalRenderer;
     _this._renderExternal = renderExternal;
     _this._optimizeSizeUpdate = optimizeSizeUpdate;
+    _this._animationThreshold = animationThreshold;
+    _this._useCSSOrderProperty = useCSSOrderProperty;
     // Create core components
     _this._viewport = new Viewport(_this, getElement(root));
     _this._autoResizer = new AutoResizer(_this);
@@ -6958,6 +7012,43 @@ var Flicking = /*#__PURE__*/function (_super) {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "animationThreshold", {
+    /**
+     * The minimum distance for animation to proceed. If the distance to be moved is less than `animationThreshold`, the movement proceeds immediately without animation (duration: 0).
+     * @ko animation이 진행되기 위한 최소한의 거리. 이동하려는 거리가 `animationThreshold`보다 적으면 애니메이션 없이(duration: 0) 즉시 이동한다.
+     * @type {number}
+     * @default 0.5
+     * @see {@link https://naver.github.io/egjs-flicking/Options#animationThreshold animationThreshold ( Options )}
+     */
+    get: function () {
+      return this._animationThreshold;
+    },
+    set: function (val) {
+      this._animationThreshold = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "useCSSOrderProperty", {
+    /**
+     * 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.
+     * When using `iframe`, you can prevent reloading when the DOM order changes.
+     * @ko `circular`를 사용한 경우 위치에 따라 DOM의 순서가 변경된다. `useCSSOrderProperty`를 사용하면 DOM의 순서는 변경되지 않지만 `order` css가 설정되면서 화면상 순서가 바뀐다.
+     * `iframe`을 사용하는 경우 DOM의 순서가 변경되면서 reload가 되는 것을 막을 수 있다.
+     * @type {boolean}
+     * @requires `circular`
+     * @default false
+     * @see {@link https://naver.github.io/egjs-flicking/Options#useCSSOrderProperty animationThreshold ( Options )}
+     */
+    get: function () {
+      return this._useCSSOrderProperty;
+    },
+    set: function (val) {
+      this._useCSSOrderProperty = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "interruptable", {
     /**
      * Set animation to be interruptable by click/touch.
@@ -7846,6 +7937,7 @@ var Flicking = /*#__PURE__*/function (_super) {
             if (!this._initialized) {
               return [2 /*return*/];
             }
+
             renderer.updatePanelSize();
             camera.updateAlignPos();
             camera.updateRange();
@@ -7859,6 +7951,7 @@ var Flicking = /*#__PURE__*/function (_super) {
             if (!this._initialized) {
               return [2 /*return*/];
             }
+
             if (control.animating) ; else {
               control.updatePosition(prevProgressInPanel);
               control.updateInput();
@@ -8096,7 +8189,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.14.1";
+  Flicking.VERSION = "4.14.2-beta.1";
   return Flicking;
 }(Component);
 
@@ -8612,13 +8705,16 @@ var getRenderingPanels = (function (flicking, diffResult) {
     map[prev] = current;
     return map;
   }, {});
-  return __spread(flicking.panels.filter(function (panel) {
+  var renderingPanels = flicking.panels.filter(function (panel) {
     return !removedPanels[panel.index];
-  })
-  // Sort panels by position
-  .sort(function (panel1, panel2) {
-    return panel1.position + panel1.offset - (panel2.position + panel2.offset);
-  }).map(function (panel) {
+  });
+  if (!flicking.useCSSOrderProperty) {
+    // useCSSOrderProperty를 사용하게 되는 경우 sort를 하지 않는다.
+    renderingPanels.sort(function (panel1, panel2) {
+      return panel1.position + panel1.offset - (panel2.position + panel2.offset);
+    });
+  }
+  return __spread(renderingPanels.map(function (panel) {
     return diffResult.list[maintainedMap[panel.index]];
   }), diffResult.added.map(function (idx) {
     return diffResult.list[idx];