@egjs/flicking 4.14.1 → 4.14.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.14.1",
+	"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

@@ -345,7 +345,7 @@ class AxesController {
       return Promise.reject(new FlickingError(ERROR.MESSAGE.NOT_ATTACHED_TO_FLICKING, ERROR.CODE.NOT_ATTACHED_TO_FLICKING));
     }
 
-    const startPos = axes.get([AXES.POSITION_KEY])[AXES.POSITION_KEY];
+    const startPos = this.getCurrentPosition();
 
     if (startPos === position) {
       const flicking = getFlickingAttached(this._flicking);
@@ -396,6 +396,14 @@ class AxesController {
     });
   }
 
+  /**
+   * Returns the current axes position
+   * @ko 현재 axes의 position을 반환합니다.
+   */
+  public getCurrentPosition() {
+    return this._axes?.get([AXES.POSITION_KEY])[AXES.POSITION_KEY] ?? 0;
+  }
+
   public updateDirection() {
     const flicking = getFlickingAttached(this._flicking);
     const axes = this._axes!;

package/src/control/Control.ts

@@ -380,12 +380,19 @@ abstract class Control {
     axesEvent?: OnRelease;
   }) {
     const flicking = getFlickingAttached(this._flicking);
-    const animate = () => this._controller.animateTo(position, duration, axesEvent);
+
+    // 거리(1px 미만)가 매우 짧은 경우 duration이 늘어지는걸 방지하기 위해 0으로 바꿔 즉시 변경
+    let nextDuration = duration;
+
+    if (Math.abs(nextDuration - position) < flicking.animationThreshold) {
+      nextDuration = 0;
+    }
+    const animate = () => this._controller.animateTo(position, nextDuration, axesEvent);
     const state = this._controller.state;
 
     state.targetPanel = newActivePanel;
 
-    if (duration <= 0) {
+    if (nextDuration <= 0) {
       return animate();
     } else {
       return animate().then(async () => {

package/src/control/StrictControl.ts

@@ -220,8 +220,9 @@ class StrictControl extends Control {
     const firstAnchor = anchors[0];
     const lastAnchor = anchors[anchors.length - 1];
 
-    const shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
-    const shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
+    // position이 bounce으로 인하여 범위를 넘어가야 동작하도록 변경
+    const shouldBounceToFirst = position < cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
+    const shouldBounceToLast = position > cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
 
     const isAdjacent = adjacentAnchor && (indexRange.min <= indexRange.max
       ? isBetween(adjacentAnchor.index, indexRange.min, indexRange.max)

package/src/core/AutoResizer.ts

@@ -20,6 +20,9 @@ class AutoResizer {
     return this._enabled;
   }
 
+  /**
+   * @param flicking
+   */
   public constructor(flicking: Flicking) {
     this._flicking = flicking;
     this._enabled = false;

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;