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

package/dist/flicking.esm.js

@@ -4,11 +4,12 @@ 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
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
 import ImReady from '@egjs/imready';
+import { reactive, adaptReactive } from '@cfcs/core';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -667,7 +668,7 @@ var findIndex = function (array, checker) {
   }
   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
@@ -2796,9 +2797,12 @@ var Control = /*#__PURE__*/function () {
               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*/];
                 }
               });
@@ -4110,7 +4114,7 @@ var Camera = /*#__PURE__*/function () {
         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];
@@ -4118,7 +4122,7 @@ var Camera = /*#__PURE__*/function () {
         if (nextPosition < panelPos) {
           nextPosition += rangeDiff;
         }
-        return nearestPanel.index + getProgress(position, panelPos, nextPosition);
+        return nearestPanel.index + getProgress$1(position, panelPos, nextPosition);
       }
     },
     enumerable: false,
@@ -5461,10 +5465,10 @@ var Panel = /*#__PURE__*/function () {
       }
       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,
@@ -8098,7 +8102,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.13.2-beta.1";
+  Flicking.VERSION = "4.14.1-beta.0";
   return Flicking;
 }(Component);
 
@@ -8654,10 +8658,194 @@ var parseAlign = function (alignVal) {
   }
 };
 
+// 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 = 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 = adaptReactive(flickingReactiveAPIAdapter, function () {
+    return {
+      flicking: flicking,
+      options: options
+    };
+  });
+  obj.mounted();
+  var instance = obj.instance();
+  obj.init();
+  return instance;
+};
+
 /*
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
 
-export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCameraMode, CIRCULAR_FALLBACK, CLASS, Camera, CircularCameraMode, Control, CrossFlicking, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCameraMode, MOVE_DIRECTION, MOVE_TYPE, NormalRenderingStrategy, ORDER, Panel, Renderer, SIDE_EVENTS, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, camelize, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, getDataAttributes, getDefaultCameraTransform, getDirection, getElement, getElementSize, getFlickingAttached, getMinusCompensatedIndex, getProgress, getRenderingPanels, getStyle, includes, isBetween, isString, merge, parseAlign$1 as parseAlign, parseArithmeticExpression, parseArithmeticSize, parseBounce, parseCSSSizeValue, parseElement, parsePanelAlign, range, setPrototypeOf, setSize, sync, toArray, withFlickingMethods };
+export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCameraMode, CIRCULAR_FALLBACK, CLASS, Camera, CircularCameraMode, Control, CrossFlicking, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCameraMode, MOVE_DIRECTION, MOVE_TYPE, NormalRenderingStrategy, ORDER, Panel, Renderer, SIDE_EVENTS, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, camelize, checkExistence, circulateIndex, circulatePosition, clamp, connectFlickingReactiveAPI, Flicking as default, find, findIndex, findRight, flickingReactiveAPIAdapter, getDataAttributes, getDefaultCameraTransform, getDirection, getElement, getElementSize, getFlickingAttached, getMinusCompensatedIndex, getProgress$1 as getProgress, getRenderingPanels, getStyle, includes, isBetween, isString, merge, parseAlign$1 as parseAlign, parseArithmeticExpression, parseArithmeticSize, parseBounce, parseCSSSizeValue, parseElement, parsePanelAlign, range, setPrototypeOf, setSize, sync, toArray, withFlickingMethods };
 //# sourceMappingURL=flicking.esm.js.map