@egjs/flicking 4.14.2-beta.0 → 4.14.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.14.2-beta.0",
+	"version": "4.14.2-beta.1",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.cjs.js",
 	"module": "dist/flicking.esm.js",

package/src/Flicking.ts

@@ -118,6 +118,8 @@ export interface FlickingOptions {
   | MoveTypeOptions<ValueOf<typeof MOVE_TYPE>>;
   threshold: number;
   dragThreshold: number;
+  animationThreshold: number;
+  useCSSOrderProperty: boolean;
   interruptable: boolean;
   bounce: number | string | [number | string, number | string];
   iOSEdgeSwipeThreshold: number;
@@ -200,6 +202,9 @@ class Flicking extends Component<FlickingEvents> {
   private _moveType: FlickingOptions["moveType"];
   private _threshold: FlickingOptions["threshold"];
   private _dragThreshold: FlickingOptions["dragThreshold"];
+  private _animationThreshold: FlickingOptions["animationThreshold"];
+  private _useCSSOrderProperty: FlickingOptions["useCSSOrderProperty"];
+
   private _interruptable: FlickingOptions["interruptable"];
   private _bounce: FlickingOptions["bounce"];
   private _iOSEdgeSwipeThreshold: FlickingOptions["iOSEdgeSwipeThreshold"];
@@ -703,6 +708,29 @@ class Flicking extends Component<FlickingEvents> {
   public get dragThreshold() {
     return this._dragThreshold;
   }
+  /**
+   * 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 )}
+   */
+  public get animationThreshold() {
+    return this._animationThreshold;
+  }
+  /**
+   * 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 )}
+   */
+  public get useCSSOrderProperty() {
+    return this._useCSSOrderProperty;
+  }
 
   /**
    * Set animation to be interruptable by click/touch.
@@ -1117,6 +1145,12 @@ class Flicking extends Component<FlickingEvents> {
       panInput.options.threshold = val;
     }
   }
+  public set animationThreshold(val: FlickingOptions["animationThreshold"]) {
+    this._animationThreshold = val;
+  }
+  public set useCSSOrderProperty(val: FlickingOptions["useCSSOrderProperty"]) {
+    this._useCSSOrderProperty = val;
+  }
 
   public set interruptable(val: FlickingOptions["interruptable"]) {
     this._interruptable = val;
@@ -1291,7 +1325,9 @@ class Flicking extends Component<FlickingEvents> {
     useFractionalSize = false,
     externalRenderer = null,
     renderExternal = null,
-    optimizeSizeUpdate = false
+    optimizeSizeUpdate = false,
+    animationThreshold = 0.5,
+    useCSSOrderProperty = false,
   }: Partial<FlickingOptions> = {}) {
     super();
 
@@ -1340,6 +1376,8 @@ class Flicking extends Component<FlickingEvents> {
     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));

package/src/cfc/getRenderingPanels.ts

@@ -12,13 +12,17 @@ export default <T>(flicking: Flicking, diffResult: DiffResult<T>) => {
     map[prev] = current;
     return map;
   }, {});
+  const renderingPanels = flicking.panels
+      .filter(panel => !removedPanels[panel.index]);
+
+
+  if (!flicking.useCSSOrderProperty) {
+    // useCSSOrderProperty를 사용하게 되는 경우 sort를 하지 않는다.
+    renderingPanels.sort((panel1, panel2) => (panel1.position + panel1.offset) - (panel2.position + panel2.offset));
+  }
 
   return [
-    ...flicking.panels
-      .filter(panel => !removedPanels[panel.index])
-      // Sort panels by position
-      .sort((panel1, panel2) => (panel1.position + panel1.offset) - (panel2.position + panel2.offset))
-      .map(panel => diffResult.list[maintainedMap[panel.index]]),
+    ...renderingPanels.map(panel => diffResult.list[maintainedMap[panel.index]]),
     ...diffResult.added.map(idx => diffResult.list[idx])
   ];
 };

package/src/control/AxesController.ts

@@ -397,8 +397,8 @@ class AxesController {
   }
 
   /**
-   * 현재
-   * @returns 
+   * Returns the current axes position
+   * @ko 현재 axes의 position을 반환합니다.
    */
   public getCurrentPosition() {
     return this._axes?.get([AXES.POSITION_KEY])[AXES.POSITION_KEY] ?? 0;

package/src/control/Control.ts

@@ -384,7 +384,7 @@ abstract class Control {
     // 거리(1px 미만)가 매우 짧은 경우 duration이 늘어지는걸 방지하기 위해 0으로 바꿔 즉시 변경
     let nextDuration = duration;
 
-    if (Math.abs(nextDuration - position) < 0.5) {
+    if (Math.abs(nextDuration - position) < flicking.animationThreshold) {
       nextDuration = 0;
     }
     const animate = () => this._controller.animateTo(position, nextDuration, axesEvent);

package/src/renderer/Renderer.ts

@@ -152,6 +152,17 @@ abstract class Renderer {
     return Promise.resolve();
   }
 
+  /**
+   * Return Rendered Panels
+   * @ko 렌더링이 된 패널을 반환합니다.
+   * @return {Panel[]}
+   */
+  public getRenderedPanels() {
+    const flicking = getFlickingAttached(this._flicking);
+
+    return flicking.renderer.panels.filter(panel => panel.rendered);
+  }
+
   /**
    * Update all panel sizes
    * @ko 모든 패널의 크기를 업데이트합니다
@@ -554,6 +565,15 @@ abstract class Renderer {
     const flicking = getFlickingAttached(this._flicking);
 
     flicking.camera.applyTransform();
+
+    if (flicking.useCSSOrderProperty) {
+      // useCSSOrderProperty를 사용하는 경우 DOM은 변화가 없지만 대신 CSS Order가 추가 된다.
+      const panels = flicking.panels;
+
+      this._strategy.getRenderingIndexesByOrder(flicking).forEach((domIndex, index) => {
+        panels[domIndex].element.style.order = `${index}`;
+      });
+    }
   }
 }
 

package/src/renderer/VanillaRenderer.ts

@@ -40,9 +40,17 @@ class VanillaRenderer extends Renderer {
     const cameraEl = flicking.camera.element;
 
     // We're using reversed panels here as last panel should be the last element of camera element
-    const reversedElements = this._strategy
-      .getRenderingElementsByOrder(flicking)
-      .reverse();
+
+    let reversedElements: HTMLElement[] = [];
+
+    if (flicking.useCSSOrderProperty) {
+      // useCSSOrderProperty를 사용하는 경우 원본 그대로 렌더링
+      reversedElements = this.getRenderedPanels().map(panel => panel.element).reverse();
+    } else {
+      reversedElements = this._strategy
+        .getRenderingElementsByOrder(flicking)
+        .reverse();
+    }
 
     reversedElements.forEach((el, idx) => {
       const nextEl = reversedElements[idx - 1] ? reversedElements[idx - 1] : null;