@egjs/flicking 4.11.0 → 4.11.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.11.0",
+	"version": "4.11.2-beta.0",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.cjs.js",
 	"module": "dist/flicking.esm.js",
@@ -127,7 +127,7 @@
 		"rollup-plugin-prototype-minify": "^1.1.0",
 		"rollup-plugin-serve": "^1.1.0",
 		"rollup-plugin-terser": "^7.0.2",
-		"rollup-plugin-typescript2": "^0.30.0",
+		"rollup-plugin-typescript2": "^0.36.0",
 		"rollup-plugin-visualizer": "^4.2.1",
 		"sync-exec": "^0.6.2",
 		"ts-mock-imports": "^1.3.3",

package/src/Flicking.ts

@@ -1075,7 +1075,6 @@ class Flicking extends Component<FlickingEvents> {
 
     // Look at initial panel
     this._moveToInitialPanel();
-
     if (this._autoResize) {
       this._autoResizer.enable();
     }
@@ -1509,6 +1508,7 @@ class Flicking extends Component<FlickingEvents> {
     camera.updateRange();
     camera.updateAnchors();
     camera.updateAdaptiveHeight();
+    camera.updatePanelOrder();
     camera.updateOffset();
     await renderer.render();
 

package/src/camera/Camera.ts

@@ -9,8 +9,9 @@ import FlickingError from "../core/FlickingError";
 import Panel from "../core/panel/Panel";
 import AnchorPoint from "../core/AnchorPoint";
 import * as ERROR from "../const/error";
-import { ALIGN, CIRCULAR_FALLBACK, DIRECTION, EVENTS } from "../const/external";
-import { checkExistence, find, getFlickingAttached, getProgress, includes, parseAlign, toArray } from "../utils";
+import { ALIGN, CIRCULAR_FALLBACK, DIRECTION, EVENTS, ORDER } from "../const/external";
+import { checkExistence, find, getFlickingAttached, getProgress, getStyle, includes, parseAlign, toArray } from "../utils";
+import { ValueOf } from "../type/internal";
 
 import { CameraMode, BoundCameraMode, CircularCameraMode, LinearCameraMode } from "./mode";
 
@@ -40,6 +41,7 @@ class Camera {
   private _visiblePanels: Panel[];
   private _anchors: AnchorPoint[];
   private _needPanelTriggered: { prev: boolean; next: boolean };
+  private _panelOrder: ValueOf<typeof ORDER>;
 
   // Internal states getter
   /**
@@ -217,6 +219,14 @@ class Camera {
     }
   }
 
+  /**
+   * {@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
+   */
+  public get panelOrder() { return this._panelOrder; }
+
   // Options Getter
   /**
    * A value indicating where the {@link Camera#alignPosition alignPosition} should be located at inside the viewport element
@@ -257,6 +267,7 @@ class Camera {
     this._checkTranslateSupport();
 
     this._updateMode();
+    this.updatePanelOrder();
 
     return this;
   }
@@ -530,6 +541,28 @@ class Camera {
     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}
+   */
+  public updatePanelOrder(): this {
+    const flicking = getFlickingAttached(this._flicking);
+
+    if (!flicking.horizontal) return this;
+
+    const el = this._el;
+    const 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} 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다
@@ -556,7 +589,7 @@ class Camera {
     const actualPosition = this._position - this._alignPos - this._offset + this._circularOffset;
 
     el.style[this._transform] = flicking.horizontal
-      ? `translate(${-actualPosition}px)`
+      ? `translate(${this._panelOrder === ORDER.RTL ? actualPosition : -actualPosition}px)`
       : `translate(0, ${-actualPosition}px)`;
 
     return this;

package/src/const/external.ts

@@ -110,3 +110,15 @@ export const CIRCULAR_FALLBACK = {
   LINEAR: "linear",
   BOUND: "bound"
 } as const;
+
+/**
+ * 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"
+ */
+export const ORDER = {
+  LTR: "ltr",
+  RTL: "rtl"
+} as const;

package/src/control/AxesController.ts

@@ -8,6 +8,7 @@ import Flicking from "../Flicking";
 import FlickingError from "../core/FlickingError";
 import * as AXES from "../const/axes";
 import * as ERROR from "../const/error";
+import { ORDER } from "../const/external";
 import { getFlickingAttached, parseBounce } from "../utils";
 import { ControlParams } from "../type/external";
 
@@ -150,7 +151,7 @@ class AxesController {
       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
     });
 
@@ -403,7 +404,7 @@ class AxesController {
     axes.disconnect(panInput);
     axes.connect(flicking.horizontal ? [AXES.POSITION_KEY, ""] : ["", AXES.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];
   }
 
   private _resetInternalValues() {

package/src/control/Control.ts

@@ -23,6 +23,7 @@ abstract class Control {
   protected _flicking: Flicking | null;
   protected _controller: AxesController;
   protected _activePanel: Panel | null;
+  protected _nextPanel: Panel | null;
 
   /**
    * A controller that handles the {@link https://naver.github.io/egjs-axes/ @egjs/axes} events
@@ -317,6 +318,7 @@ abstract class Control {
     const flicking = getFlickingAttached(this._flicking);
 
     this._activePanel = newActivePanel;
+    this._nextPanel = null;
 
     flicking.camera.updateAdaptiveHeight();
 
@@ -357,6 +359,8 @@ abstract class Control {
       isTrusted: axesEvent?.isTrusted || false,
       direction: getDirection(activePanel?.position ?? camera.position, position)
     });
+
+    this._nextPanel = panel;
     flicking.trigger(event);
 
     if (event.isCanceled()) {

package/src/control/StrictControl.ts

@@ -190,7 +190,7 @@ class StrictControl extends Control {
   public moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
     const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
-    const activePanel = this._activePanel;
+    const currentPanel = this._nextPanel ?? this._activePanel;
     const axesRange = this._controller.range;
     const indexRange = this._indexRange;
     const cameraRange = camera.range;
@@ -199,11 +199,11 @@ class StrictControl extends Control {
     const clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);
     const anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
 
-    if (!anchorAtPosition || !activePanel) {
+    if (!anchorAtPosition || !currentPanel) {
       return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE));
     }
 
-    const prevPos = activePanel.position;
+    const prevPos = currentPanel.position;
     const posDelta = flicking.animating
       ? state.delta
       : position - camera.position;
@@ -233,7 +233,7 @@ class StrictControl extends Control {
 
       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;

package/src/utils.ts

@@ -313,15 +313,16 @@ export const getElementSize = ({
   useOffset: boolean;
   style: CSSStyleDeclaration;
 }): number => {
+  let size = 0;
   if (useFractionalSize) {
-    const baseSize = parseFloat(horizontal ? style.width : style.height);
+    const baseSize = parseFloat(horizontal ? style.width : style.height) || 0;
     const isBorderBoxSizing = style.boxSizing === "border-box";
     const border = horizontal
       ? parseFloat(style.borderLeftWidth || "0") + parseFloat(style.borderRightWidth || "0")
       : parseFloat(style.borderTopWidth || "0") + parseFloat(style.borderBottomWidth || "0");
 
     if (isBorderBoxSizing) {
-      return useOffset
+      size = useOffset
         ? baseSize
         : baseSize - border;
     } else {
@@ -329,17 +330,19 @@ export const getElementSize = ({
         ? parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0")
         : parseFloat(style.paddingTop || "0") + parseFloat(style.paddingBottom || "0");
 
-      return useOffset
+      size = useOffset
         ? baseSize + padding + border
         : baseSize + padding;
     }
   } else {
     const sizeStr = horizontal ? "Width" : "Height";
 
-    return useOffset
+    size = useOffset
       ? el[`offset${sizeStr}`]
       : el[`client${sizeStr}`];
   }
+
+  return Math.max(size, 0);
 };
 
 export const setPrototypeOf = Object.setPrototypeOf || ((obj, proto) => {