@egjs/flicking 4.10.1 → 4.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.10.1",
+	"version": "4.10.3",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -141,7 +141,7 @@
 	"dependencies": {
 		"@egjs/axes": "^3.8.1",
 		"@egjs/component": "^3.0.1",
-		"@egjs/imready": "^1.1.3",
+		"@egjs/imready": "^1.3.1",
 		"@egjs/list-differ": "^1.0.0"
 	},
 	"husky": {

package/src/Flicking.ts

@@ -702,31 +702,132 @@ class Flicking extends Component<FlickingEvents> {
     this._align = val;
     this._renderer.align = val;
     this._camera.align = val;
+    void this.resize();
   }
 
   public set defaultIndex(val: FlickingOptions["defaultIndex"]) { this._defaultIndex = val; }
-  public set horizontal(val: FlickingOptions["horizontal"]) { this._horizontal = val; }
-  public set circular(val: FlickingOptions["circular"]) { this._circular = val; }
-  public set bound(val: FlickingOptions["bound"]) { this._bound = val; }
-  public set adaptive(val: FlickingOptions["adaptive"]) { this._adaptive = val; }
-  public set panelsPerView(val: FlickingOptions["panelsPerView"]) { this._panelsPerView = val; }
-  public set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]) { this._noPanelStyleOverride = val; }
-  public set resizeOnContentsReady(val: FlickingOptions["resizeOnContentsReady"]) { this._resizeOnContentsReady = val; }
-  public set nested(val: FlickingOptions["nested"]) { this._nested = val; }
+  public set horizontal(val: FlickingOptions["horizontal"]) {
+    this._horizontal = val;
+    this._control.controller.updateDirection();
+    void this.resize();
+  }
+
+  public set circular(val: FlickingOptions["circular"]) {
+    this._circular = val;
+    void this.resize();
+  }
+
+  public set bound(val: FlickingOptions["bound"]) {
+    this._bound = val;
+    void this.resize();
+  }
+
+  public set adaptive(val: FlickingOptions["adaptive"]) {
+    this._adaptive = val;
+    void this.resize();
+  }
+
+  public set panelsPerView(val: FlickingOptions["panelsPerView"]) {
+    this._panelsPerView = val;
+    void this.resize();
+  }
+
+  public set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]) {
+    this._noPanelStyleOverride = val;
+    void this.resize();
+  }
+
+  public set resizeOnContentsReady(val: FlickingOptions["resizeOnContentsReady"]) {
+    this._resizeOnContentsReady = val;
+    if (val) {
+      this._renderer.checkPanelContentsReady(this._renderer.panels);
+    }
+  }
+
+  public set nested(val: FlickingOptions["nested"]) {
+    this._nested = val;
+    const axes = this._control.controller.axes;
+
+    if (axes) {
+      axes.options.nested = val;
+    }
+  }
+
   // EVENTS
   public set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]) { this._needPanelThreshold = val; }
   public set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]) { this._preventEventsBeforeInit = val; }
   // ANIMATION
-  public set deceleration(val: FlickingOptions["deceleration"]) { this._deceleration = val; }
-  public set easing(val: FlickingOptions["easing"]) { this._easing = val; }
+  public set deceleration(val: FlickingOptions["deceleration"]) {
+    this._deceleration = val;
+    const axes = this._control.controller.axes;
+
+    if (axes) {
+      axes.options.deceleration = val;
+    }
+  }
+
+  public set easing(val: FlickingOptions["easing"]) {
+    this._easing = val;
+    const axes = this._control.controller.axes;
+
+    if (axes) {
+      axes.options.easing = val;
+    }
+  }
+
   public set duration(val: FlickingOptions["duration"]) { this._duration = val; }
   // INPUT
-  public set inputType(val: FlickingOptions["inputType"]) { this._inputType = val; }
-  public set moveType(val: FlickingOptions["moveType"]) { this._moveType = val; }
+  public set inputType(val: FlickingOptions["inputType"]) {
+    this._inputType = val;
+    const panInput = this._control.controller.panInput;
+
+    if (panInput) {
+      panInput.options.inputType = val;
+    }
+  }
+
+  public set moveType(val: FlickingOptions["moveType"]) {
+    this._moveType = val;
+
+    const prevControl = this._control;
+    const newControl = this._createControl();
+    const activePanel = prevControl.activePanel;
+    newControl.copy(prevControl);
+
+    const prevProgressInPanel = activePanel
+      ? this._camera.getProgressInPanel(activePanel)
+      : 0;
+
+    this._control = newControl;
+    this._control.updatePosition(prevProgressInPanel);
+    this._control.updateInput();
+  }
+
   public set threshold(val: FlickingOptions["threshold"]) { this._threshold = val; }
-  public set interruptable(val: FlickingOptions["interruptable"]) { this._interruptable = val; }
-  public set bounce(val: FlickingOptions["bounce"]) { this._bounce = val; }
-  public set iOSEdgeSwipeThreshold(val: FlickingOptions["iOSEdgeSwipeThreshold"]) { this._iOSEdgeSwipeThreshold = val; }
+  public set interruptable(val: FlickingOptions["interruptable"]) {
+    this._interruptable = val;
+
+    const axes = this._control.controller.axes;
+
+    if (axes) {
+      axes.options.interruptable = val;
+    }
+  }
+
+  public set bounce(val: FlickingOptions["bounce"]) {
+    this._bounce = val;
+    this._control.updateInput();
+  }
+
+  public set iOSEdgeSwipeThreshold(val: FlickingOptions["iOSEdgeSwipeThreshold"]) {
+    this._iOSEdgeSwipeThreshold = val;
+    const panInput = this._control.controller.panInput;
+
+    if (panInput) {
+      panInput.options.iOSEdgeSwipeThreshold = val;
+    }
+  }
+
   public set preventClickOnDrag(val: FlickingOptions["preventClickOnDrag"]) {
     const prevVal = this._preventClickOnDrag;
 
@@ -746,7 +847,11 @@ 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; }
+  public set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]) {
+    this._renderOnlyVisible = val;
+    void this._renderer.render();
+  }
+
   // OTHERS
   public set autoResize(val: FlickingOptions["autoResize"]) {
     this._autoResize = val;

package/src/camera/Camera.ts

@@ -450,9 +450,7 @@ class Camera {
     this._updateMode();
     this._range = this._mode.getRange();
 
-    if (this._circularEnabled) {
-      panels.forEach(panel => panel.updateCircularToggleDirection());
-    }
+    panels.forEach(panel => panel.updateCircularToggleDirection());
 
     return this;
   }
@@ -705,6 +703,7 @@ class Camera {
       this._mode = flicking.bound
         ? new BoundCameraMode(flicking)
         : new LinearCameraMode(flicking);
+      this._circularEnabled = false;
     }
   }
 

package/src/control/AxesController.ts

@@ -28,13 +28,21 @@ class AxesController {
   private _dragged: boolean;
 
   /**
-   * An {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} instance
-   * @ko {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes}의 인스턴스
-   * @type {Axes}
-   * @see https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html
+   * An {@link https://naver.github.io/egjs-axes/docs/api/Axes Axes} instance
+   * @ko {@link https://naver.github.io/egjs-axes/docs/api/Axes Axes}의 인스턴스
+   * @type {Axes | null}
+   * @see https://naver.github.io/egjs-axes/docs/api/Axes
    * @readonly
    */
   public get axes() { return this._axes; }
+  /**
+   * An {@link https://naver.github.io/egjs-axes/docs/api/PanInput PanInput} instance
+   * @ko {@link https://naver.github.io/egjs-axes/docs/api/PanInput PanInput}의 인스턴스
+   * @type {PanInput | null}
+   * @see https://naver.github.io/egjs-axes/docs/api/PanInput
+   * @readonly
+   */
+  public get panInput() { return this._panInput; }
   /**
    * @internal
    */
@@ -401,6 +409,17 @@ class AxesController {
     }
   }
 
+  public updateDirection() {
+    const flicking = getFlickingAttached(this._flicking);
+    const axes = this._axes!;
+    const panInput = this._panInput!;
+
+    axes.disconnect(panInput);
+    axes.connect(flicking.horizontal ? [AXES.POSITION_KEY, ""] : ["", AXES.POSITION_KEY], panInput);
+
+    panInput.options.scale = flicking.horizontal ? [-1, 0] : [0, -1];
+  }
+
   private _resetInternalValues() {
     this._flicking = null;
     this._axes = null;

package/src/control/Control.ts

@@ -336,6 +336,15 @@ abstract class Control {
     }
   }
 
+  /**
+   * @internal
+   */
+  public copy(control: Control) {
+    this._flicking = control._flicking;
+    this._activePanel = control._activePanel;
+    this._controller = control._controller;
+  }
+
   protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease) {
     const flicking = getFlickingAttached(this._flicking);
     const triggeringEvent = panel !== this._activePanel ? EVENTS.WILL_CHANGE : EVENTS.WILL_RESTORE;

package/src/core/panel/Panel.ts

@@ -254,7 +254,10 @@ class Panel {
   public get align() { return this._align; }
 
   // Options Setter
-  public set align(val: PanelOptions["align"]) { this._align = val; }
+  public set align(val: PanelOptions["align"]) {
+    this._align = val;
+    this._updateAlignPos();
+  }
 
   /**
    * @param {object} options An options object<ko>옵션 오브젝트</ko>
@@ -569,6 +572,7 @@ class Panel {
 
     if (!flicking.circularEnabled) {
       this._toggleDirection = DIRECTION.NONE;
+      this._togglePosition = 0;
       this._toggled = false;
       return this;
     }