@egjs/flicking 4.10.8 → 4.11.1

package/package.json

@@ -1,8 +1,8 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.10.8",
+	"version": "4.11.1",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
-	"main": "dist/flicking.js",
+	"main": "dist/flicking.cjs.js",
 	"module": "dist/flicking.esm.js",
 	"sideEffects": [
 		"**/*.css",
@@ -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",
@@ -139,7 +139,7 @@
 		"typescript-transform-paths": "^2.2.3"
 	},
 	"dependencies": {
-		"@egjs/axes": "^3.8.5",
+		"@egjs/axes": "^3.9.0",
 		"@egjs/component": "^3.0.1",
 		"@egjs/imready": "^1.3.1",
 		"@egjs/list-differ": "^1.0.1"

package/rollup.config.js

@@ -46,6 +46,12 @@ export default buildHelper([
     format: "esm",
     external,
     exports: "named"
+  },
+  {
+    input: "./src/index.cjs.ts",
+    output: "./dist/flicking.cjs.js",
+    format: "cjs",
+    exports: "named",
   }
 ]);
 

package/src/Flicking.ts

@@ -77,6 +77,7 @@ export interface FlickingOptions {
   bounce: number | string | [number | string, number | string];
   iOSEdgeSwipeThreshold: number;
   preventClickOnDrag: boolean;
+  preventDefaultOnDrag: boolean;
   disableOnInit: boolean;
   changeOnHold: boolean;
 
@@ -155,6 +156,7 @@ class Flicking extends Component<FlickingEvents> {
   private _bounce: FlickingOptions["bounce"];
   private _iOSEdgeSwipeThreshold: FlickingOptions["iOSEdgeSwipeThreshold"];
   private _preventClickOnDrag: FlickingOptions["preventClickOnDrag"];
+  private _preventDefaultOnDrag: FlickingOptions["preventDefaultOnDrag"];
   private _disableOnInit: FlickingOptions["disableOnInit"];
   private _changeOnHold: FlickingOptions["changeOnHold"];
 
@@ -589,6 +591,14 @@ class Flicking extends Component<FlickingEvents> {
    * @see {@link https://naver.github.io/egjs-flicking/Options#preventclickondrag preventClickOnDrag ( Options )}
    */
   public get preventClickOnDrag() { return this._preventClickOnDrag; }
+  /**
+   * Whether to use the {@link https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault preventDefault} when the user starts dragging
+   * @ko 사용자가 드래그를 시작할 때 {@link https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault preventDefault} 실행 여부
+   * @type {boolean}
+   * @default false
+   * @see {@link https://naver.github.io/egjs-flicking/Options#preventDefaultOnDrag preventDefaultOnDrag ( Options )}
+   */
+  public get preventDefaultOnDrag() { return this._preventDefaultOnDrag; }
   /**
    * Automatically call {@link Flicking#disableInput disableInput()} on initialization
    * @ko Flicking init시에 {@link Flicking#disableInput disableInput()}을 바로 호출합니다
@@ -875,6 +885,15 @@ class Flicking extends Component<FlickingEvents> {
     this._preventClickOnDrag = val;
   }
 
+  public set preventDefaultOnDrag(val: FlickingOptions["preventDefaultOnDrag"]) {
+    this._preventDefaultOnDrag = val;
+    const panInput = this._control.controller.panInput;
+
+    if (panInput) {
+      panInput.options.preventDefaultOnDrag = val;
+    }
+  }
+
   public set disableOnInit(val: FlickingOptions["disableOnInit"]) { this._disableOnInit = val; }
   public set changeOnHold(val: FlickingOptions["changeOnHold"]) { this._changeOnHold = val; }
   // PERFORMANCE
@@ -954,6 +973,7 @@ class Flicking extends Component<FlickingEvents> {
     bounce = "20%",
     iOSEdgeSwipeThreshold = 30,
     preventClickOnDrag = true,
+    preventDefaultOnDrag = false,
     disableOnInit = false,
     changeOnHold = false,
     renderOnlyVisible = false,
@@ -998,6 +1018,7 @@ class Flicking extends Component<FlickingEvents> {
     this._bounce = bounce;
     this._iOSEdgeSwipeThreshold = iOSEdgeSwipeThreshold;
     this._preventClickOnDrag = preventClickOnDrag;
+    this._preventDefaultOnDrag = preventDefaultOnDrag;
     this._disableOnInit = disableOnInit;
     this._changeOnHold = changeOnHold;
     this._renderOnlyVisible = renderOnlyVisible;
@@ -1054,7 +1075,6 @@ class Flicking extends Component<FlickingEvents> {
 
     // Look at initial panel
     this._moveToInitialPanel();
-
     if (this._autoResize) {
       this._autoResizer.enable();
     }
@@ -1488,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";
 
@@ -149,7 +150,8 @@ class AxesController {
       inputType: flicking.inputType,
       threshold: 1,
       iOSEdgeSwipeThreshold: flicking.iOSEdgeSwipeThreshold,
-      scale: flicking.horizontal ? [-1, 0] : [0, -1],
+      preventDefaultOnDrag: flicking.preventDefaultOnDrag,
+      scale: flicking.horizontal ? [flicking.camera.panelOrder === ORDER.RTL ? 1 : -1, 0] : [0, -1],
       releaseOnScroll: true
     });
 
@@ -402,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/index.cjs.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking, * as modules from "./index";
+
+for (const name in modules) {
+  (Flicking as any)[name] = (modules as any)[name];
+}
+
+declare const module: any;
+module.exports = Flicking;
+export default Flicking;
+export * from "./index";

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) => {