@egjs/flicking 4.7.3 → 4.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.7.3",
+	"version": "4.8.0",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -109,7 +109,7 @@
 		"html-to-react": "^1.4.5",
 		"http-serve": "^1.0.1",
 		"husky": "^1.3.1",
-		"jsdoc-to-mdx": "^1.0.5",
+		"jsdoc-to-mdx": "^1.1.2",
 		"karma-typescript-es6-transform": "^5.5.2",
 		"node-sass": "^7.0.1",
 		"npm-run-all": "^4.1.5",

package/src/Flicking.ts

@@ -78,6 +78,7 @@ export interface FlickingOptions {
   iOSEdgeSwipeThreshold: number;
   preventClickOnDrag: boolean;
   disableOnInit: boolean;
+  changeOnHold: boolean;
 
   // PERFORMANCE
   renderOnlyVisible: boolean;
@@ -154,6 +155,7 @@ class Flicking extends Component<FlickingEvents> {
   private _iOSEdgeSwipeThreshold: FlickingOptions["iOSEdgeSwipeThreshold"];
   private _preventClickOnDrag: FlickingOptions["preventClickOnDrag"];
   private _disableOnInit: FlickingOptions["disableOnInit"];
+  private _changeOnHold: FlickingOptions["changeOnHold"];
 
   private _renderOnlyVisible: FlickingOptions["renderOnlyVisible"];
 
@@ -570,6 +572,15 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    */
   public get disableOnInit() { return this._disableOnInit; }
+  /**
+   * Change active panel index on mouse/touch hold while animating.
+   * `index` of the `willChange`/`willRestore` event will be used as new index.
+   * @ko 애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
+   * `willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다.
+   * @type {boolean}
+   * @default false
+   */
+  public get changeOnHold() { return this._changeOnHold; }
   // PERFORMANCE
   /**
    * Whether to render visible panels only. This can dramatically increase performance when there're many panels
@@ -720,6 +731,7 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   public set disableOnInit(val: FlickingOptions["disableOnInit"]) { this._disableOnInit = val; }
+  public set changeOnHold(val: FlickingOptions["changeOnHold"]) { this._changeOnHold = val; }
   // PERFORMANCE
   public set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]) { this._renderOnlyVisible = val; }
   // OTHERS
@@ -794,6 +806,7 @@ class Flicking extends Component<FlickingEvents> {
     iOSEdgeSwipeThreshold = 30,
     preventClickOnDrag = true,
     disableOnInit = false,
+    changeOnHold = false,
     renderOnlyVisible = false,
     virtual = null,
     autoInit = true,
@@ -836,6 +849,7 @@ class Flicking extends Component<FlickingEvents> {
     this._iOSEdgeSwipeThreshold = iOSEdgeSwipeThreshold;
     this._preventClickOnDrag = preventClickOnDrag;
     this._disableOnInit = disableOnInit;
+    this._changeOnHold = changeOnHold;
     this._renderOnlyVisible = renderOnlyVisible;
     this._autoInit = autoInit;
     this._autoResize = autoResize;
@@ -1275,6 +1289,8 @@ class Flicking extends Component<FlickingEvents> {
     camera.updateAlignPos();
     camera.updateRange();
     camera.updateAnchors();
+    camera.updateAdaptiveHeight();
+    camera.updateOffset();
     await renderer.render();
 
     if (control.animating) {

package/src/control/SnapControl.ts

@@ -89,7 +89,7 @@ class SnapControl extends Control {
     const camera = flicking.camera;
     const activeAnchor = camera.findActiveAnchor();
     const anchorAtCamera = camera.findNearestAnchor(camera.position);
-    const state = flicking.control.controller.state;
+    const state = this._controller.state;
 
     if (!activeAnchor || !anchorAtCamera) {
       return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE));

package/src/control/StrictControl.ts

@@ -194,6 +194,7 @@ class StrictControl extends Control {
     const axesRange = this._controller.range;
     const indexRange = this._indexRange;
     const cameraRange = camera.range;
+    const state = this._controller.state;
 
     const clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);
     const anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
@@ -203,8 +204,11 @@ class StrictControl extends Control {
     }
 
     const prevPos = activePanel.position;
+    const posDelta = flicking.animating
+      ? state.delta
+      : position - camera.position;
 
-    const isOverThreshold = Math.abs(position - prevPos) >= flicking.threshold;
+    const isOverThreshold = Math.abs(posDelta) >= flicking.threshold;
     const adjacentAnchor = (position > prevPos)
       ? camera.getNextAnchor(anchorAtPosition)
       : camera.getPrevAnchor(anchorAtPosition);

package/src/control/states/AnimatingState.ts

@@ -32,10 +32,16 @@ class AnimatingState extends State {
 
   public onHold(ctx: Parameters<State["onHold"]>[0]): void {
     const { flicking, axesEvent, transitTo } = ctx;
+    const targetPanel = this._targetPanel;
+    const control = flicking.control;
 
     this._delta = 0;
     flicking.control.updateInput();
 
+    if (flicking.changeOnHold && targetPanel) {
+      control.setActive(targetPanel, control.activePanel, axesEvent.isTrusted);
+    }
+
     const holdStartEvent = new ComponentEvent(EVENTS.HOLD_START, { axesEvent });
     flicking.trigger(holdStartEvent);
 

package/src/core/FlickingError.ts

@@ -10,7 +10,7 @@ import { setPrototypeOf } from "../utils";
  * @ko Flicking 내부에서 알려진 오류 발생시 throw되는 에러
  * @property {number} code Error code<ko>에러 코드</ko>
  * @property {string} message Error message<ko>에러 메시지</ko>
- * @see {@link Constants.ERROR_CODE ERROR_CODE}
+ * @see {@link ERROR_CODE ERROR_CODE}
  * @example
  * ```ts
  * import Flicking, { FlickingError, ERROR_CODES } from "@egjs/flicking";