@egjs/flicking 4.11.3-beta.3 → 4.11.3

package/declaration/camera/Camera.d.ts

@@ -1,6 +1,7 @@
 import Flicking, { FlickingOptions } from "../Flicking";
 import Panel from "../core/panel/Panel";
 import AnchorPoint from "../core/AnchorPoint";
+import { ValueOf } from "../type/internal";
 import { CameraMode } from "./mode";
 export interface CameraOptions {
     align: FlickingOptions["align"];
@@ -20,6 +21,7 @@ declare class Camera {
     private _visiblePanels;
     private _anchors;
     private _needPanelTriggered;
+    private _panelOrder;
     get element(): HTMLElement;
     get children(): HTMLElement[];
     get position(): number;
@@ -49,6 +51,10 @@ declare class Camera {
     get atEdge(): boolean;
     get size(): number;
     get progress(): number;
+    get panelOrder(): ValueOf<{
+        readonly LTR: "ltr";
+        readonly RTL: "rtl";
+    }>;
     get align(): FlickingOptions["align"];
     set align(val: FlickingOptions["align"]);
     constructor(flicking: Flicking, { align }?: Partial<CameraOptions>);
@@ -69,6 +75,7 @@ declare class Camera {
     updateAnchors(): this;
     updateAdaptiveHeight(): void;
     updateOffset(): this;
+    updatePanelOrder(): this;
     resetNeedPanelHistory(): this;
     applyTransform(): this;
     private _resetInternalValues;

package/declaration/const/external.d.ts

@@ -42,3 +42,7 @@ export declare const CIRCULAR_FALLBACK: {
     readonly LINEAR: "linear";
     readonly BOUND: "bound";
 };
+export declare const ORDER: {
+    readonly LTR: "ltr";
+    readonly RTL: "rtl";
+};

package/declaration/control/Control.d.ts

@@ -8,6 +8,7 @@ declare abstract class Control {
     protected _flicking: Flicking | null;
     protected _controller: AxesController;
     protected _activePanel: Panel | null;
+    protected _nextPanel: Panel | null;
     get controller(): AxesController;
     get activeIndex(): number;
     get activePanel(): Panel;
@@ -32,7 +33,7 @@ declare abstract class Control {
     }): Promise<void>;
     setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean): void;
     copy(control: Control): void;
-    protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease): void;
+    protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease, direction?: ValueOf<typeof DIRECTION>): void;
     protected _animateToPosition({ position, duration, newActivePanel, axesEvent }: {
         position: number;
         duration: 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.11.0-snapshot
+version: 4.11.3
 */
 'use strict';
 
@@ -12,7 +12,7 @@ var Component = require('@egjs/component');
 var Axes = require('@egjs/axes');
 var ImReady = require('@egjs/imready');
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -26,7 +26,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 */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 var extendStatics = function (d, b) {
   extendStatics = Object.setPrototypeOf || {
@@ -111,7 +111,7 @@ function __generator(thisArg, body) {
   }
   function step(op) {
     if (f) throw new TypeError("Generator is already executing.");
-    while (_) try {
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
       if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
       if (y = 0, t) op = [op[0] & 2, t.value];
       switch (op[0]) {
@@ -215,6 +215,10 @@ function __spread() {
   for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
   return ar;
 }
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 /*
  * Copyright (c) 2015 NAVER Corp.
@@ -398,6 +402,17 @@ var CIRCULAR_FALLBACK = {
   LINEAR: "linear",
   BOUND: "bound"
 };
+/**
+ * An object for identifying {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS property applied to the camera element(`.flicking-camera`)
+ * @ko 카메라 엘리먼트(`.flicking-camera`)에 적용된 {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS 속성을 구분하기 위한 객체
+ * @type {object}
+ * @property {string} LTR "ltr"
+ * @property {string} RTL "rtl"
+ */
+var ORDER = {
+  LTR: "ltr",
+  RTL: "rtl"
+};
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 var merge = function (target) {
@@ -691,20 +706,22 @@ var getElementSize = function (_a) {
     useFractionalSize = _a.useFractionalSize,
     useOffset = _a.useOffset,
     style = _a.style;
+  var size = 0;
   if (useFractionalSize) {
-    var baseSize = parseFloat(horizontal ? style.width : style.height);
+    var baseSize = parseFloat(horizontal ? style.width : style.height) || 0;
     var isBorderBoxSizing = style.boxSizing === "border-box";
     var border = horizontal ? parseFloat(style.borderLeftWidth || "0") + parseFloat(style.borderRightWidth || "0") : parseFloat(style.borderTopWidth || "0") + parseFloat(style.borderBottomWidth || "0");
     if (isBorderBoxSizing) {
-      return useOffset ? baseSize : baseSize - border;
+      size = useOffset ? baseSize : baseSize - border;
     } else {
       var padding = horizontal ? parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0") : parseFloat(style.paddingTop || "0") + parseFloat(style.paddingBottom || "0");
-      return useOffset ? baseSize + padding + border : baseSize + padding;
+      size = useOffset ? baseSize + padding + border : baseSize + padding;
     }
   } else {
     var sizeStr = horizontal ? "Width" : "Height";
-    return useOffset ? el["offset" + sizeStr] : el["client" + sizeStr];
+    size = useOffset ? el["offset" + sizeStr] : el["client" + sizeStr];
   }
+  return Math.max(size, 0);
 };
 var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
   obj.__proto__ = proto;
@@ -2088,7 +2105,7 @@ var AxesController = /*#__PURE__*/function () {
       threshold: 1,
       iOSEdgeSwipeThreshold: flicking.iOSEdgeSwipeThreshold,
       preventDefaultOnDrag: flicking.preventDefaultOnDrag,
-      scale: flicking.horizontal ? [-1, 0] : [0, -1],
+      scale: flicking.horizontal ? [flicking.camera.panelOrder === ORDER.RTL ? 1 : -1, 0] : [0, -1],
       releaseOnScroll: true
     });
     var axes = this._axes;
@@ -2313,7 +2330,7 @@ var AxesController = /*#__PURE__*/function () {
     var panInput = this._panInput;
     axes.disconnect(panInput);
     axes.connect(flicking.horizontal ? [POSITION_KEY, ""] : ["", POSITION_KEY], panInput);
-    panInput.options.scale = flicking.horizontal ? [-1, 0] : [0, -1];
+    panInput.options.scale = flicking.horizontal ? [flicking.camera.panelOrder === ORDER.RTL ? 1 : -1, 0] : [0, -1];
   };
   __proto._resetInternalValues = function () {
     this._flicking = null;
@@ -2578,7 +2595,7 @@ var Control = /*#__PURE__*/function () {
       var position;
       return __generator(this, function (_c) {
         position = this._getPosition(panel, direction);
-        this._triggerIndexChangeEvent(panel, panel.position, axesEvent);
+        this._triggerIndexChangeEvent(panel, panel.position, axesEvent, direction);
         return [2 /*return*/, this._animateToPosition({
           position: position,
           duration: duration,
@@ -2595,6 +2612,7 @@ var Control = /*#__PURE__*/function () {
     var _a;
     var flicking = getFlickingAttached(this._flicking);
     this._activePanel = newActivePanel;
+    this._nextPanel = null;
     flicking.camera.updateAdaptiveHeight();
     if (newActivePanel !== prevActivePanel) {
       flicking.trigger(new Component.ComponentEvent(EVENTS.CHANGED, {
@@ -2619,7 +2637,7 @@ var Control = /*#__PURE__*/function () {
     this._activePanel = control._activePanel;
     this._controller = control._controller;
   };
-  __proto._triggerIndexChangeEvent = function (panel, position, axesEvent) {
+  __proto._triggerIndexChangeEvent = function (panel, position, axesEvent, direction) {
     var _a;
     var flicking = getFlickingAttached(this._flicking);
     var triggeringEvent = panel !== this._activePanel ? EVENTS.WILL_CHANGE : EVENTS.WILL_RESTORE;
@@ -2629,8 +2647,9 @@ var Control = /*#__PURE__*/function () {
       index: panel.index,
       panel: panel,
       isTrusted: (axesEvent === null || axesEvent === void 0 ? void 0 : axesEvent.isTrusted) || false,
-      direction: getDirection((_a = activePanel === null || activePanel === void 0 ? void 0 : activePanel.position) !== null && _a !== void 0 ? _a : camera.position, position)
+      direction: direction !== null && direction !== void 0 ? direction : getDirection((_a = activePanel === null || activePanel === void 0 ? void 0 : activePanel.position) !== null && _a !== void 0 ? _a : camera.position, position)
     });
+    this._nextPanel = panel;
     flicking.trigger(event);
     if (event.isCanceled()) {
       throw new FlickingError(MESSAGE.STOP_CALLED_BY_USER, CODE.STOP_CALLED_BY_USER);
@@ -2849,7 +2868,7 @@ var SnapControl = /*#__PURE__*/function (_super) {
     if (!activeAnchor || !anchorAtCamera) {
       return Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE));
     }
-    var snapThreshold = this._calcSnapThreshold(position, activeAnchor);
+    var snapThreshold = this._calcSnapThreshold(flicking.threshold, position, activeAnchor);
     var posDelta = flicking.animating ? state.delta : position - camera.position;
     var absPosDelta = Math.abs(posDelta);
     var snapDelta = axesEvent && axesEvent.delta[POSITION_KEY] !== 0 ? Math.abs(axesEvent.delta[POSITION_KEY]) : absPosDelta;
@@ -2936,7 +2955,7 @@ var SnapControl = /*#__PURE__*/function (_super) {
     var adjacentAnchor = (_a = posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) !== null && _a !== void 0 ? _a : anchorAtCamera;
     return adjacentAnchor;
   };
-  __proto._calcSnapThreshold = function (position, activeAnchor) {
+  __proto._calcSnapThreshold = function (threshold, position, activeAnchor) {
     var isNextDirection = position > activeAnchor.position;
     var panel = activeAnchor.panel;
     var panelSize = panel.size;
@@ -2947,7 +2966,7 @@ var SnapControl = /*#__PURE__*/function (_super) {
      * |<------>|<------------>|
      * [        |<-Anchor      ]
      */
-    return isNextDirection ? panelSize - alignPos + panel.margin.next : alignPos + panel.margin.prev;
+    return Math.max(threshold, isNextDirection ? panelSize - alignPos + panel.margin.next : alignPos + panel.margin.prev);
   };
   return SnapControl;
 }(Control);
@@ -3218,19 +3237,20 @@ var StrictControl = /*#__PURE__*/function (_super) {
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
   __proto.moveToPosition = function (position, duration, axesEvent) {
+    var _a;
     var flicking = getFlickingAttached(this._flicking);
     var camera = flicking.camera;
-    var activePanel = this._activePanel;
+    var currentPanel = (_a = this._nextPanel) !== null && _a !== void 0 ? _a : this._activePanel;
     var axesRange = this._controller.range;
     var indexRange = this._indexRange;
     var cameraRange = camera.range;
     var state = this._controller.state;
     var clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);
     var anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
-    if (!anchorAtPosition || !activePanel) {
+    if (!anchorAtPosition || !currentPanel) {
       return Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE));
     }
-    var prevPos = activePanel.position;
+    var prevPos = currentPanel.position;
     var posDelta = flicking.animating ? state.delta : position - camera.position;
     var isOverThreshold = Math.abs(posDelta) >= flicking.threshold;
     var adjacentAnchor = position > prevPos ? camera.getNextAnchor(anchorAtPosition) : camera.getPrevAnchor(anchorAtPosition);
@@ -3247,7 +3267,7 @@ var StrictControl = /*#__PURE__*/function (_super) {
       var targetAnchor = position < cameraRange.min ? firstAnchor : lastAnchor;
       targetPanel = targetAnchor.panel;
       targetPos = targetAnchor.position;
-    } else if (isOverThreshold && anchorAtPosition.position !== activePanel.position) {
+    } else if (isOverThreshold && anchorAtPosition.position !== currentPanel.position) {
       // Move to anchor at position
       targetPanel = anchorAtPosition.panel;
       targetPos = anchorAtPosition.position;
@@ -3985,6 +4005,19 @@ var Camera = /*#__PURE__*/function () {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "panelOrder", {
+    /**
+     * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS property applied to the camera element(`.flicking-camera`)
+     * @ko 카메라 엘리먼트(`.flicking-camera`)에 적용된 {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS 속성
+     * @type {string}
+     * @readonly
+     */
+    get: function () {
+      return this._panelOrder;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "align", {
     // Options Getter
     /**
@@ -4016,6 +4049,7 @@ var Camera = /*#__PURE__*/function () {
     this._el = viewportEl.firstElementChild;
     this._checkTranslateSupport();
     this._updateMode();
+    this.updatePanelOrder();
     return this;
   };
   /**
@@ -4137,11 +4171,13 @@ var Camera = /*#__PURE__*/function () {
    * @return {AnchorPoint | null}
    */
   __proto.findActiveAnchor = function () {
+    var _a;
     var flicking = getFlickingAttached(this._flicking);
-    var activeIndex = flicking.control.activeIndex;
-    return find(this._anchors, function (anchor) {
-      return anchor.panel.index === activeIndex;
-    });
+    var activePanel = flicking.control.activePanel;
+    if (!activePanel) return null;
+    return (_a = find(this._anchors, function (anchor) {
+      return anchor.panel.index === activePanel.index;
+    })) !== null && _a !== void 0 ? _a : this.findNearestAnchor(activePanel.position);
   };
   /**
    * Clamp the given position between camera's range
@@ -4258,6 +4294,24 @@ var Camera = /*#__PURE__*/function () {
     this.applyTransform();
     return this;
   };
+  /**
+   * Update direction to match the {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS property applied to the camera element
+   * @ko 카메라 엘리먼트에 적용된 {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS 속성에 맞게 방향을 업데이트합니다
+   * @return {this}
+   */
+  __proto.updatePanelOrder = function () {
+    var flicking = getFlickingAttached(this._flicking);
+    if (!flicking.horizontal) return this;
+    var el = this._el;
+    var direction = getStyle(el).direction;
+    if (direction !== this._panelOrder) {
+      this._panelOrder = direction === ORDER.RTL ? ORDER.RTL : ORDER.LTR;
+      if (flicking.initialized) {
+        flicking.control.controller.updateDirection();
+      }
+    }
+    return this;
+  };
   /**
    * Reset the history of {@link Flicking#event:needPanel needPanel} events so it can be triggered again
    * @ko 발생한 {@link Flicking#event:needPanel needPanel} 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다
@@ -4282,7 +4336,7 @@ var Camera = /*#__PURE__*/function () {
     var renderer = flicking.renderer;
     if (renderer.rendering || !flicking.initialized) return this;
     var actualPosition = this._position - this._alignPos - this._offset + this._circularOffset;
-    el.style[this._transform] = flicking.horizontal ? "translate(" + -actualPosition + "px)" : "translate(0, " + -actualPosition + "px)";
+    el.style[this._transform] = flicking.horizontal ? "translate(" + (this._panelOrder === ORDER.RTL ? actualPosition : -actualPosition) + "px)" : "translate(0, " + -actualPosition + "px)";
     return this;
   };
   __proto._resetInternalValues = function () {
@@ -7530,15 +7584,24 @@ var Flicking = /*#__PURE__*/function (_super) {
             return [4 /*yield*/, renderer.forceRenderAllPanels()];
           case 1:
             _a.sent(); // Render all panel elements, to update sizes
+            if (!this._initialized) {
+              return [2 /*return*/];
+            }
+
             renderer.updatePanelSize();
             camera.updateAlignPos();
             camera.updateRange();
             camera.updateAnchors();
             camera.updateAdaptiveHeight();
+            camera.updatePanelOrder();
             camera.updateOffset();
             return [4 /*yield*/, renderer.render()];
           case 2:
             _a.sent();
+            if (!this._initialized) {
+              return [2 /*return*/];
+            }
+
             if (control.animating) ; else {
               control.updatePosition(prevProgressInPanel);
               control.updateInput();
@@ -7775,7 +7838,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.11.0-snapshot";
+  Flicking.VERSION = "4.11.3";
   return Flicking;
 }(Component);
 
@@ -8032,6 +8095,7 @@ var modules = {
     MOVE_TYPE: MOVE_TYPE,
     CLASS: CLASS,
     CIRCULAR_FALLBACK: CIRCULAR_FALLBACK,
+    ORDER: ORDER,
     withFlickingMethods: withFlickingMethods,
     sync: sync,
     getRenderingPanels: getRenderingPanels,
@@ -8099,6 +8163,7 @@ exports.IdleState = IdleState;
 exports.LinearCameraMode = LinearCameraMode;
 exports.MOVE_TYPE = MOVE_TYPE;
 exports.NormalRenderingStrategy = NormalRenderingStrategy;
+exports.ORDER = ORDER;
 exports.Panel = Panel;
 exports.Renderer = Renderer;
 exports.SnapControl = SnapControl;