@egjs/flicking 4.12.1-beta.3 → 4.12.1-beta.4

package/declaration/Flicking.d.ts

@@ -120,7 +120,6 @@ declare class Flicking extends Component<FlickingEvents> {
     private _renderExternal;
     private _initialized;
     private _plugins;
-    private _isResizing;
     get control(): Control;
     get camera(): Camera;
     get renderer(): Renderer;
@@ -209,7 +208,7 @@ declare class Flicking extends Component<FlickingEvents> {
     set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]);
     set autoResize(val: FlickingOptions["autoResize"]);
     set useResizeObserver(val: FlickingOptions["useResizeObserver"]);
-    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, dragThreshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, preventDefaultOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal, }?: Partial<FlickingOptions>);
+    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, dragThreshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, preventDefaultOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal }?: Partial<FlickingOptions>);
     init(): Promise<void>;
     destroy(): void;
     prev(duration?: number): Promise<void>;
@@ -220,7 +219,7 @@ declare class Flicking extends Component<FlickingEvents> {
     getPanel(index: number): Panel | null;
     enableInput(): this;
     disableInput(): this;
-    getStatus({ index, position, includePanelHTML, visiblePanelsOnly, }?: Partial<{
+    getStatus({ index, position, includePanelHTML, visiblePanelsOnly }?: Partial<{
         index: boolean;
         position: boolean;
         includePanelHTML: boolean;

package/declaration/control/Control.d.ts

@@ -40,6 +40,6 @@ declare abstract class Control {
         newActivePanel: Panel;
         axesEvent?: OnRelease;
     }): Promise<void>;
-    private _getPosition;
+    protected _getPosition(panel: Panel, direction?: ValueOf<typeof DIRECTION>): number;
 }
 export default Control;

package/dist/flicking.cjs.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.12.2-beta.0
+version: 4.12.1-beta.4
 */
 'use strict';
 
@@ -949,25 +949,10 @@ var Viewport = /*#__PURE__*/function () {
 var AutoResizer = /*#__PURE__*/function () {
   function AutoResizer(flicking) {
     var _this = this;
-    this._onResize = function (entries) {
+    this._onResize = function () {
       var flicking = _this._flicking;
       var resizeDebounce = flicking.resizeDebounce;
       var maxResizeDebounce = flicking.maxResizeDebounce;
-      if (entries.length) {
-        var resizeEntryInfo = entries[0].contentRect;
-        var beforeSize = {
-          width: flicking.viewport.width,
-          height: flicking.viewport.height
-        };
-        var afterSize = {
-          width: resizeEntryInfo.width,
-          height: resizeEntryInfo.height
-        };
-        // resize 이벤트가 발생했으나 이전과 width, height의 변화가 없다면 이후 로직을 진행하지 않는다.
-        if (beforeSize.height === afterSize.height && beforeSize.width === afterSize.width) {
-          return;
-        }
-      }
       if (resizeDebounce <= 0) {
         void flicking.resize();
       } else {
@@ -993,12 +978,12 @@ var AutoResizer = /*#__PURE__*/function () {
     // eslint-disable-next-line @typescript-eslint/member-ordering
     this._skipFirstResize = function () {
       var isFirstResize = true;
-      return function (entries) {
+      return function () {
         if (isFirstResize) {
           isFirstResize = false;
           return;
         }
-        _this._onResize(entries);
+        _this._onResize();
       };
     }();
     this._flicking = flicking;
@@ -1016,7 +1001,6 @@ var AutoResizer = /*#__PURE__*/function () {
     configurable: true
   });
   __proto.enable = function () {
-    var _this = this;
     var flicking = this._flicking;
     var viewport = flicking.viewport;
     if (this._enabled) {
@@ -1024,32 +1008,23 @@ var AutoResizer = /*#__PURE__*/function () {
     }
     if (flicking.useResizeObserver && !!window.ResizeObserver) {
       var viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
-      var resizeObserver = viewportSizeNot0 ? new ResizeObserver(function (entries) {
-        return _this._skipFirstResize(entries);
-      }) : new ResizeObserver(function (entries) {
-        return _this._onResize(entries);
-      });
+      var resizeObserver = viewportSizeNot0 ? new ResizeObserver(this._skipFirstResize) : new ResizeObserver(this._onResize);
       resizeObserver.observe(flicking.viewport.element);
       this._resizeObserver = resizeObserver;
     } else {
-      window.addEventListener("resize", function () {
-        return _this._onResize([]);
-      });
+      window.addEventListener("resize", this._onResize);
     }
     this._enabled = true;
     return this;
   };
   __proto.disable = function () {
-    var _this = this;
     if (!this._enabled) return this;
     var resizeObserver = this._resizeObserver;
     if (resizeObserver) {
       resizeObserver.disconnect();
       this._resizeObserver = null;
     } else {
-      window.removeEventListener("resize", function () {
-        return _this._onResize([]);
-      });
+      window.removeEventListener("resize", this._onResize);
     }
     this._enabled = false;
     return this;
@@ -2940,7 +2915,7 @@ var SnapControl = /*#__PURE__*/function (_super) {
     if (snapDelta >= snapThreshold && snapDelta > 0) {
       // Move to anchor at position
       targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
-    } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
+    } else if (absPosDelta >= flicking.threshold && absPosDelta > 0 && anchorAtCamera === activeAnchor) {
       // Move to the adjacent panel
       targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);
     } else {
@@ -2950,11 +2925,14 @@ var SnapControl = /*#__PURE__*/function (_super) {
         axesEvent: axesEvent
       });
     }
-    this._triggerIndexChangeEvent(targetAnchor.panel, position, axesEvent);
+    var nextPanel = targetAnchor.panel;
+    var direction = posDelta === 0 || activeAnchor === targetAnchor ? DIRECTION.NONE : posDelta > 0 ? DIRECTION.NEXT : DIRECTION.PREV;
+    var nextPosition = this._getPosition(nextPanel, direction);
+    this._triggerIndexChangeEvent(nextPanel, position, axesEvent);
     return this._animateToPosition({
-      position: camera.clampToReachablePosition(targetAnchor.position),
+      position: camera.clampToReachablePosition(nextPosition),
       duration: duration,
-      newActivePanel: targetAnchor.panel,
+      newActivePanel: nextPanel,
       axesEvent: axesEvent
     });
   };
@@ -2964,12 +2942,13 @@ var SnapControl = /*#__PURE__*/function (_super) {
     var count = this._count;
     var currentPos = camera.position;
     var clampedPosition = camera.clampToReachablePosition(position);
+    var nearestAnchor = camera.findNearestAnchor(clampedPosition);
     var anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
-    if (!anchorAtCamera || !anchorAtPosition) {
+    if (!anchorAtCamera || !anchorAtPosition || !nearestAnchor) {
       throw new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE);
     }
     if (!isFinite(count)) {
-      return anchorAtPosition;
+      return nearestAnchor;
     }
     var panelCount = flicking.panelCount;
     var anchors = camera.anchorPoints;
@@ -6136,7 +6115,6 @@ var Flicking = /*#__PURE__*/function (_super) {
     // Internal states
     _this._initialized = false;
     _this._plugins = [];
-    _this._isResizing = false;
     // Bind options
     _this._align = align;
     _this._defaultIndex = defaultIndex;
@@ -7676,8 +7654,6 @@ var Flicking = /*#__PURE__*/function (_super) {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
-            if (this._isResizing) return [2 /*return*/];
-            this._isResizing = true;
             viewport = this._viewport;
             renderer = this._renderer;
             camera = this._camera;
@@ -7730,7 +7706,6 @@ var Flicking = /*#__PURE__*/function (_super) {
               sizeChanged: sizeChanged,
               element: viewport.element
             }));
-            this._isResizing = false;
             return [2 /*return*/];
         }
       });
@@ -7858,7 +7833,7 @@ var Flicking = /*#__PURE__*/function (_super) {
   __proto._createCamera = function () {
     if (this._circular && this._bound) {
       // eslint-disable-next-line no-console
-      console.warn('"circular" and "bound" option cannot be used together, ignoring bound.');
+      console.warn("\"circular\" and \"bound\" option cannot be used together, ignoring bound.");
     }
     return new Camera(this, {
       align: this._align
@@ -7868,7 +7843,7 @@ var Flicking = /*#__PURE__*/function (_super) {
     var externalRenderer = this._externalRenderer;
     if (this._virtual && this._panelsPerView <= 0) {
       // eslint-disable-next-line no-console
-      console.warn('"virtual" and "panelsPerView" option should be used together, ignoring virtual.');
+      console.warn("\"virtual\" and \"panelsPerView\" option should be used together, ignoring virtual.");
     }
     return externalRenderer ? externalRenderer : this._renderExternal ? this._createExternalRenderer() : this._createVanillaRenderer();
   };
@@ -7950,7 +7925,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.12.2-beta.0";
+  Flicking.VERSION = "4.12.1-beta.4";
   return Flicking;
 }(Component);