fix: fix broken layout when direction rtl is applied (#836)

* fix: fix broken layout when direction rtl is applied

* fix: fix broken docs link

* feat: update panel order when resize

* test: add tests for rtl direction

* refactor: use updatePanelOrder as a camera method

* refactor: change the location of const declaration

* feat: use updatePanelOrder when resize is called

package.json

@@ -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",

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();
 

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;

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;