@egjs/flicking 4.13.2-beta.1 → 4.14.1-beta.0

package/dist/flicking.js

@@ -4,13 +4,13 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.13.2-beta.1
+version: 4.14.1-beta.0
 */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@egjs/axes'), require('@egjs/imready')) :
-    typeof define === 'function' && define.amd ? define(['@egjs/component', '@egjs/axes', '@egjs/imready'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Flicking = factory(global.eg.Component, global.eg.Axes, global.eg.ImReady));
-})(this, (function (Component, Axes, ImReady) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@egjs/axes'), require('@egjs/imready'), require('@cfcs/core')) :
+    typeof define === 'function' && define.amd ? define(['@egjs/component', '@egjs/axes', '@egjs/imready', '@cfcs/core'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Flicking = factory(global.eg.Component, global.eg.Axes, global.eg.ImReady, global.core));
+})(this, (function (Component, Axes, ImReady, core) { 'use strict';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -682,7 +682,7 @@ version: 4.13.2-beta.1
       }
       return -1;
     };
-    var getProgress = function (pos, prev, next) {
+    var getProgress$1 = function (pos, prev, next) {
       return (pos - prev) / (next - prev);
     };
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
@@ -803,7 +803,7 @@ version: 4.13.2-beta.1
         find: find,
         findRight: findRight,
         findIndex: findIndex,
-        getProgress: getProgress,
+        getProgress: getProgress$1,
         getStyle: getStyle,
         setSize: setSize,
         isBetween: isBetween,
@@ -2846,9 +2846,12 @@ version: 4.13.2-beta.1
                   return __generator(this, function (_a) {
                     switch (_a.label) {
                       case 0:
+                        if (!flicking.initialized) return [3 /*break*/, 2];
                         return [4 /*yield*/, flicking.renderer.render()];
                       case 1:
                         _a.sent();
+                        _a.label = 2;
+                      case 2:
                         return [2 /*return*/];
                     }
                   });
@@ -4181,7 +4184,7 @@ version: 4.13.2-beta.1
             if (prevPosition > panelPos) {
               prevPosition -= rangeDiff;
             }
-            return nearestPanel.index - 1 + getProgress(position, prevPosition, panelPos);
+            return nearestPanel.index - 1 + getProgress$1(position, prevPosition, panelPos);
           } else {
             var nextPanel = nearestPanel.next();
             var nextPosition = nextPanel ? nextPanel.position + nextPanel.offset : nextRange + bounceSize[1];
@@ -4189,7 +4192,7 @@ version: 4.13.2-beta.1
             if (nextPosition < panelPos) {
               nextPosition += rangeDiff;
             }
-            return nearestPanel.index + getProgress(position, panelPos, nextPosition);
+            return nearestPanel.index + getProgress$1(position, panelPos, nextPosition);
           }
         },
         enumerable: false,
@@ -5545,10 +5548,10 @@ version: 4.13.2-beta.1
           }
           if (camPos < position) {
             var disappearPosNext = position + (camera.size - camera.alignPosition) + alignPosition;
-            return -getProgress(camPos, position, disappearPosNext);
+            return -getProgress$1(camPos, position, disappearPosNext);
           } else {
             var disappearPosPrev = position - (camera.alignPosition + this._size - alignPosition);
-            return 1 - getProgress(camPos, disappearPosPrev, position);
+            return 1 - getProgress$1(camPos, disappearPosPrev, position);
           }
         },
         enumerable: false,
@@ -8196,7 +8199,7 @@ version: 4.13.2-beta.1
        * Flicking.VERSION;  // ex) 4.0.0
        * ```
        */
-      Flicking.VERSION = "4.13.2-beta.1";
+      Flicking.VERSION = "4.14.1-beta.0";
       return Flicking;
     }(Component);
 
@@ -8783,6 +8786,196 @@ version: 4.13.2-beta.1
         getDefaultCameraTransform: getDefaultCameraTransform
     };
 
+    // Check if Flicking has reached the first panel
+    var getIsReachStart = function (flicking) {
+      return !flicking.circular && flicking.index === 0;
+    };
+    // Check if Flicking has reached the last panel
+    var getIsReachEnd = function (flicking) {
+      return !flicking.circular && flicking.index === flicking.panelCount - 1;
+    };
+    // Get the total number of panels
+    var getTotalPanelCount = function (flicking) {
+      return flicking.panelCount;
+    };
+    // Get the current active panel index
+    var getCurrentPanelIndex = function (flicking) {
+      return flicking.index;
+    };
+    // Calculate the overall scroll progress percentage based on the current camera position
+    var getProgress = function (flicking) {
+      var cam = flicking.camera;
+      var progressRatio = (cam.position - cam.range.min) / (cam.range.max - cam.range.min);
+      var percent = Math.min(Math.max(progressRatio, 0), 1) * 100;
+      return percent;
+    };
+    // Calculate the progress between panels including decimal values
+    var getIndexProgress = function (flicking) {
+      var cam = flicking.camera;
+      var anchorPoints = cam.anchorPoints;
+      var length = anchorPoints.length;
+      var cameraPosition = cam.position;
+      var isCircular = flicking.circularEnabled;
+      var indexProgress = 0;
+      var _a = cam.range,
+        min = _a.min,
+        max = _a.max;
+      var firstAnchorPoint = anchorPoints[0];
+      var lastAnchorPoint = anchorPoints[length - 1];
+      var distanceLastToFirst = max - lastAnchorPoint.position + (firstAnchorPoint.position - min);
+      anchorPoints.some(function (anchorPoint, index) {
+        var anchorPosition = anchorPoint.position;
+        var nextAnchorPoint = anchorPoints[index + 1];
+        if (index === 0 && cameraPosition <= anchorPosition) {
+          if (isCircular) {
+            indexProgress = (cameraPosition - anchorPosition) / distanceLastToFirst;
+          } else {
+            indexProgress = (cameraPosition - anchorPosition) / anchorPoint.panel.size;
+          }
+        } else if (index === length - 1 && cameraPosition >= anchorPosition) {
+          if (isCircular) {
+            indexProgress = index + (cameraPosition - anchorPosition) / distanceLastToFirst;
+          } else {
+            indexProgress = index + (cameraPosition - anchorPosition) / anchorPoint.panel.size;
+          }
+        } else if (nextAnchorPoint && anchorPosition <= cameraPosition && cameraPosition <= nextAnchorPoint.position) {
+          indexProgress = index + (cameraPosition - anchorPosition) / (nextAnchorPoint.position - anchorPosition);
+        } else {
+          return false;
+        }
+        return true;
+      });
+      return indexProgress;
+    };
+    /**
+     * Internal reactive API adapter for Flicking that manages state and event listeners
+     * This adapter is used internally by framework-specific packages (react-flicking, vue-flicking, etc.)
+     * to provide reactive API support. Users rarely need to use this directly.
+     * @ko Flicking의 상태와 이벤트 리스너를 관리하는 내부 반응형 API 어댑터
+     * 이 어댑터는 react-flicking, vue-flicking 등의 프레임워크별 패키지에서 내부적으로 사용되어
+     * 반응형 API 지원을 제공합니다. 사용자가 직접 사용할 일은 거의 없습니다.
+     * @param onInit - Callback when reactive object is initialized<ko>반응형 객체가 초기화될 때 호출되는 콜백</ko>
+     * @param onDestroy - Callback when reactive object is destroyed<ko>반응형 객체가 파괴될 때 호출되는 콜백</ko>
+     * @param setMethods - Function to set available methods<ko>사용 가능한 메서드를 설정하는 함수</ko>
+     * @returns Reactive object with Flicking state and methods<ko>Flicking 상태와 메서드를 포함한 반응형 객체</ko>
+     */
+    var flickingReactiveAPIAdapter = function (_a) {
+      var _b, _c, _d;
+      var onInit = _a.onInit,
+        onDestroy = _a.onDestroy,
+        setMethods = _a.setMethods,
+        getProps = _a.getProps;
+      var flicking;
+      // Move to a specific panel index
+      var moveTo = function (i) {
+        if (flicking == null) {
+          return Promise.reject(new Error("Flicking instance is not available"));
+        }
+        if (flicking === null || flicking === void 0 ? void 0 : flicking.animating) {
+          return Promise.resolve();
+        }
+        return flicking.moveTo(i);
+      };
+      setMethods(["moveTo"]);
+      var options = getProps().options;
+      // options를 고려하지 않고 초기값을 설정해도 동작에는 아무런 문제가 없으나, 이 시점의 초기값과 컴포넌트 init 단계에서의 초기값이 다르면 화면 리렌더링이 발생할 수 있으므로
+      // 이렇게 미리 옵션을 통해서 예측할 수 있는 부분들은 맞춰둔다.
+      var reactiveObj = core.reactive({
+        isReachStart: (options === null || options === void 0 ? void 0 : options.defaultIndex) ? (options === null || options === void 0 ? void 0 : options.defaultIndex) === 0 : true,
+        isReachEnd: (options === null || options === void 0 ? void 0 : options.totalPanelCount) && (options === null || options === void 0 ? void 0 : options.defaultIndex) ? options.defaultIndex === options.totalPanelCount - 1 : false,
+        totalPanelCount: (_b = options === null || options === void 0 ? void 0 : options.totalPanelCount) !== null && _b !== void 0 ? _b : 0,
+        currentPanelIndex: (_c = options === null || options === void 0 ? void 0 : options.defaultIndex) !== null && _c !== void 0 ? _c : 0,
+        progress: 0,
+        indexProgress: (_d = options === null || options === void 0 ? void 0 : options.defaultIndex) !== null && _d !== void 0 ? _d : 0,
+        moveTo: moveTo
+      });
+      // Update state when panel changes
+      var onChanged = function () {
+        if (flicking === undefined) return;
+        reactiveObj.isReachStart = getIsReachStart(flicking);
+        reactiveObj.isReachEnd = getIsReachEnd(flicking);
+        reactiveObj.currentPanelIndex = getCurrentPanelIndex(flicking);
+      };
+      // Update state when panel count changes
+      var onPanelChange = function () {
+        if (flicking === undefined) return;
+        onChanged();
+        reactiveObj.totalPanelCount = getTotalPanelCount(flicking);
+      };
+      // Update progress when camera moves
+      var onMove = function () {
+        if (flicking === undefined) return;
+        reactiveObj.progress = getProgress(flicking);
+        reactiveObj.indexProgress = getIndexProgress(flicking);
+      };
+      onInit(function (inst, data) {
+        flicking = data.flicking;
+        if (flicking === undefined) return;
+        reactiveObj.isReachStart = getIsReachStart(flicking);
+        reactiveObj.isReachEnd = getIsReachEnd(flicking);
+        reactiveObj.currentPanelIndex = getCurrentPanelIndex(flicking);
+        reactiveObj.progress = getProgress(flicking);
+        reactiveObj.totalPanelCount = getTotalPanelCount(flicking);
+        flicking === null || flicking === void 0 ? void 0 : flicking.on("changed", onChanged);
+        flicking === null || flicking === void 0 ? void 0 : flicking.on("panelChange", onPanelChange);
+        flicking === null || flicking === void 0 ? void 0 : flicking.on("move", onMove);
+      });
+      onDestroy(function () {
+        flicking === null || flicking === void 0 ? void 0 : flicking.off("changed", onChanged);
+        flicking === null || flicking === void 0 ? void 0 : flicking.off("panelChange", onPanelChange);
+        flicking === null || flicking === void 0 ? void 0 : flicking.off("move", onMove);
+      });
+      return reactiveObj;
+    };
+    /**
+     * Connect Flicking instance to reactive API
+     * @ko Flicking 인스턴스를 반응형 API에 연결합니다
+     * @param {Flicking} flicking - Flicking instance to connect<ko>연결할 Flicking 인스턴스</ko>
+     * @param {FlickingReactiveAPIOptions} [options] - Flicking options<ko>Flicking 옵션</ko>
+     * @returns {FlickingReactiveObject} Reactive object with Flicking state and methods<ko>Flicking 상태와 메서드를 포함한 반응형 객체</ko>
+     * @example
+     * ```js
+     * import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";
+     *
+     * const flicking = new Flicking("#el");
+     * const reactiveObj = connectFlickingReactiveAPI(flicking);
+     *
+     * // Access reactive state
+     * console.log("Current panel:", reactiveObj.currentPanelIndex);
+     * console.log("Progress:", reactiveObj.progress + "%");
+     * console.log("Is at start:", reactiveObj.isReachStart);
+     * console.log("Is at end:", reactiveObj.isReachEnd);
+     * console.log("Total panels:", reactiveObj.totalPanelCount);
+     * console.log("Index progress:", reactiveObj.indexProgress);
+     *
+     * // Subscribe to state changes
+     * reactiveObj.subscribe("currentPanelIndex", (nextValue) => {
+     *   console.log("Panel changed to:", nextValue);
+     * });
+     *
+     * // Use reactive methods
+     * reactiveObj.moveTo(2); // Move to third panel
+     * ```
+     */
+    var connectFlickingReactiveAPI = function (flicking, options) {
+      var obj = core.adaptReactive(flickingReactiveAPIAdapter, function () {
+        return {
+          flicking: flicking,
+          options: options
+        };
+      });
+      obj.mounted();
+      var instance = obj.instance();
+      obj.init();
+      return instance;
+    };
+
+    var FlickingReactiveAPI = {
+        __proto__: null,
+        flickingReactiveAPIAdapter: flickingReactiveAPIAdapter,
+        connectFlickingReactiveAPI: connectFlickingReactiveAPI
+    };
+
     /*
      * Copyright (c) 2015 NAVER Corp.
      * egjs projects are licensed under the MIT license
@@ -8795,6 +8988,7 @@ version: 4.13.2-beta.1
     merge(Flicking, CFC);
     merge(Flicking, Utils);
     merge(Flicking, CrossFlicking$1);
+    merge(Flicking, FlickingReactiveAPI);
 
     return Flicking;