@egjs/flicking 4.7.3 → 4.9.0

package/TODO.md

@@ -0,0 +1,3 @@
+## React 18 대응
+- [] updateoffset을 미루기
+  - render가 완료되기 전에 updateOffset이 3번 호출되었음

package/declaration/Flicking.d.ts

@@ -56,6 +56,7 @@ export interface FlickingOptions {
     iOSEdgeSwipeThreshold: number;
     preventClickOnDrag: boolean;
     disableOnInit: boolean;
+    changeOnHold: boolean;
     renderOnlyVisible: boolean;
     virtual: VirtualOptions | null;
     autoInit: boolean;
@@ -63,6 +64,7 @@ export interface FlickingOptions {
     useResizeObserver: boolean;
     resizeDebounce: number;
     maxResizeDebounce: number;
+    useFractionalSize: boolean;
     externalRenderer: ExternalRenderer | null;
     renderExternal: {
         renderer: new (options: RendererOptions) => ExternalRenderer;
@@ -102,12 +104,14 @@ declare class Flicking extends Component<FlickingEvents> {
     private _iOSEdgeSwipeThreshold;
     private _preventClickOnDrag;
     private _disableOnInit;
+    private _changeOnHold;
     private _renderOnlyVisible;
     private _autoInit;
     private _autoResize;
     private _useResizeObserver;
     private _resizeDebounce;
     private _maxResizeDebounce;
+    private _useFractionalSize;
     private _externalRenderer;
     private _renderExternal;
     private _initialized;
@@ -155,6 +159,7 @@ declare class Flicking extends Component<FlickingEvents> {
     get iOSEdgeSwipeThreshold(): FlickingOptions["iOSEdgeSwipeThreshold"];
     get preventClickOnDrag(): FlickingOptions["preventClickOnDrag"];
     get disableOnInit(): FlickingOptions["disableOnInit"];
+    get changeOnHold(): FlickingOptions["changeOnHold"];
     get renderOnlyVisible(): FlickingOptions["renderOnlyVisible"];
     get virtual(): VirtualManager;
     get autoInit(): boolean;
@@ -162,6 +167,7 @@ declare class Flicking extends Component<FlickingEvents> {
     get useResizeObserver(): FlickingOptions["useResizeObserver"];
     get resizeDebounce(): number;
     get maxResizeDebounce(): number;
+    get useFractionalSize(): boolean;
     get externalRenderer(): ExternalRenderer;
     get renderExternal(): {
         renderer: new (options: RendererOptions) => ExternalRenderer;
@@ -190,10 +196,11 @@ declare class Flicking extends Component<FlickingEvents> {
     set iOSEdgeSwipeThreshold(val: FlickingOptions["iOSEdgeSwipeThreshold"]);
     set preventClickOnDrag(val: FlickingOptions["preventClickOnDrag"]);
     set disableOnInit(val: FlickingOptions["disableOnInit"]);
+    set changeOnHold(val: FlickingOptions["changeOnHold"]);
     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, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, maxResizeDebounce, 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, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal }?: Partial<FlickingOptions>);
     init(): Promise<void>;
     destroy(): void;
     prev(duration?: number): Promise<void>;

package/declaration/core/Viewport.d.ts

@@ -1,4 +1,6 @@
+import Flicking from "../Flicking";
 declare class Viewport {
+    private _flicking;
     private _el;
     private _width;
     private _height;
@@ -13,7 +15,7 @@ declare class Viewport {
         top: number;
         bottom: number;
     };
-    constructor(el: HTMLElement);
+    constructor(flicking: Flicking, el: HTMLElement);
     setSize({ width, height }: Partial<{
         width: number | string;
         height: number | string;

package/declaration/utils.d.ts

@@ -35,4 +35,11 @@ export declare const setSize: (el: HTMLElement, { width, height }: Partial<{
 export declare const isBetween: (val: number, min: number, max: number) => boolean;
 export declare const circulateIndex: (index: number, max: number) => number;
 export declare const range: (end: number) => number[];
+export declare const getElementSize: ({ el, horizontal, useFractionalSize, useOffset, style }: {
+    el: HTMLElement;
+    horizontal: boolean;
+    useFractionalSize: boolean;
+    useOffset: boolean;
+    style: CSSStyleDeclaration;
+}) => number;
 export declare const setPrototypeOf: (o: any, proto: object) => any;

package/dist/flicking.esm.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.7.3
+version: 4.9.0
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
@@ -767,6 +767,29 @@ var range = function (end) {
 
   return arr;
 };
+var getElementSize = function (_a) {
+  var el = _a.el,
+      horizontal = _a.horizontal,
+      useFractionalSize = _a.useFractionalSize,
+      useOffset = _a.useOffset,
+      style = _a.style;
+
+  if (useFractionalSize) {
+    var baseSize = parseFloat(horizontal ? style.width : style.height);
+    var isBorderBoxSizing = style.boxSizing === "border-box";
+    var border = horizontal ? parseFloat(style.borderLeftWidth || "0") + parseFloat(style.borderRightWidth || "0") : parseFloat(style.borderTopWidth || "0") + parseFloat(style.borderBottomWidth || "0");
+
+    if (isBorderBoxSizing) {
+      return useOffset ? baseSize : baseSize - border;
+    } else {
+      var padding = horizontal ? parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0") : parseFloat(style.paddingTop || "0") + parseFloat(style.paddingBottom || "0");
+      return useOffset ? baseSize + padding + border : baseSize + padding;
+    }
+  } else {
+    var sizeStr = horizontal ? "Width" : "Height";
+    return useOffset ? el["offset" + sizeStr] : el["client" + sizeStr];
+  }
+};
 var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
   obj.__proto__ = proto;
   return obj;
@@ -781,7 +804,7 @@ var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
  * @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";
@@ -817,10 +840,6 @@ function (_super) {
   return FlickingError;
 }(Error);
 
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
 /**
  * A component that manages viewport size
  * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
@@ -832,7 +851,8 @@ function () {
   /**
    * @param el A viewport element<ko>뷰포트 엘리먼트</ko>
    */
-  function Viewport(el) {
+  function Viewport(flicking, el) {
+    this._flicking = flicking;
     this._el = el;
     this._width = 0;
     this._height = 0;
@@ -948,8 +968,21 @@ function () {
   __proto.resize = function () {
     var el = this._el;
     var elStyle = getStyle(el);
-    this._width = el.clientWidth;
-    this._height = el.clientHeight;
+    var useFractionalSize = this._flicking.useFractionalSize;
+    this._width = getElementSize({
+      el: el,
+      horizontal: true,
+      useFractionalSize: useFractionalSize,
+      useOffset: false,
+      style: elStyle
+    });
+    this._height = getElementSize({
+      el: el,
+      horizontal: false,
+      useFractionalSize: useFractionalSize,
+      useOffset: false,
+      style: elStyle
+    });
     this._padding = {
       left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,
       right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,
@@ -1940,8 +1973,15 @@ function (_super) {
     var flicking = ctx.flicking,
         axesEvent = ctx.axesEvent,
         transitTo = ctx.transitTo;
+    var targetPanel = this._targetPanel;
+    var control = flicking.control;
     this._delta = 0;
     flicking.control.updateInput();
+
+    if (flicking.changeOnHold && targetPanel) {
+      control.setActive(targetPanel, control.activePanel, axesEvent.isTrusted);
+    }
+
     var holdStartEvent = new ComponentEvent(EVENTS.HOLD_START, {
       axesEvent: axesEvent
     });
@@ -2148,7 +2188,9 @@ function () {
     };
 
     this._onAxesChange = function () {
-      _this._dragged = true;
+      var _a;
+
+      _this._dragged = !!((_a = _this._panInput) === null || _a === void 0 ? void 0 : _a.isEnabled());
     };
 
     this._preventClickWhenDragged = function (e) {
@@ -3111,7 +3153,7 @@ function (_super) {
     var camera = flicking.camera;
     var activeAnchor = camera.findActiveAnchor();
     var anchorAtCamera = camera.findNearestAnchor(camera.position);
-    var state = flicking.control.controller.state;
+    var state = this._controller.state;
 
     if (!activeAnchor || !anchorAtCamera) {
       return Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE));
@@ -3129,10 +3171,13 @@ function (_super) {
       targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
     } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
       // Move to the adjacent panel
-      targetAnchor = this._findAdjacentAnchor(posDelta, anchorAtCamera);
+      targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);
     } else {
       // Restore to active panel
-      targetAnchor = anchorAtCamera;
+      return this.moveToPanel(activeAnchor.panel, {
+        duration: duration,
+        axesEvent: axesEvent
+      });
     }
 
     this._triggerIndexChangeEvent(targetAnchor.panel, position, axesEvent);
@@ -3203,11 +3248,20 @@ function (_super) {
     }
   };
 
-  __proto._findAdjacentAnchor = function (posDelta, anchorAtCamera) {
+  __proto._findAdjacentAnchor = function (position, posDelta, anchorAtCamera) {
     var _a;
 
     var flicking = getFlickingAttached(this._flicking);
     var camera = flicking.camera;
+
+    if (camera.circularEnabled) {
+      var anchorIncludePosition = camera.findAnchorIncludePosition(position);
+
+      if (anchorIncludePosition && anchorIncludePosition.position !== anchorAtCamera.position) {
+        return anchorIncludePosition;
+      }
+    }
+
     var adjacentAnchor = (_a = posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) !== null && _a !== void 0 ? _a : anchorAtCamera;
     return adjacentAnchor;
   };
@@ -3553,6 +3607,7 @@ function (_super) {
     var axesRange = this._controller.range;
     var indexRange = this._indexRange;
     var cameraRange = camera.range;
+    var state = this._controller.state;
     var clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);
     var anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
 
@@ -3561,7 +3616,8 @@ function (_super) {
     }
 
     var prevPos = activePanel.position;
-    var isOverThreshold = Math.abs(position - prevPos) >= flicking.threshold;
+    var posDelta = flicking.animating ? state.delta : position - camera.position;
+    var isOverThreshold = Math.abs(posDelta) >= flicking.threshold;
     var adjacentAnchor = position > prevPos ? camera.getNextAnchor(anchorAtPosition) : camera.getPrevAnchor(anchorAtPosition);
     var targetPos;
     var targetPanel;
@@ -5966,7 +6022,8 @@ function () {
   __proto.resize = function (cached) {
     var el = this.element;
     var flicking = this._flicking;
-    var horizontal = flicking.horizontal;
+    var horizontal = flicking.horizontal,
+        useFractionalSize = flicking.useFractionalSize;
 
     if (cached) {
       this._size = cached.size;
@@ -5974,7 +6031,13 @@ function () {
       this._height = cached.height;
     } else {
       var elStyle = getStyle(el);
-      this._size = horizontal ? el.offsetWidth : el.offsetHeight;
+      this._size = getElementSize({
+        el: el,
+        horizontal: horizontal,
+        useFractionalSize: useFractionalSize,
+        useOffset: true,
+        style: elStyle
+      });
       this._margin = horizontal ? {
         prev: parseFloat(elStyle.marginLeft || "0"),
         next: parseFloat(elStyle.marginRight || "0")
@@ -5982,7 +6045,13 @@ function () {
         prev: parseFloat(elStyle.marginTop || "0"),
         next: parseFloat(elStyle.marginBottom || "0")
       };
-      this._height = horizontal ? el.offsetHeight : this._size;
+      this._height = horizontal ? getElementSize({
+        el: el,
+        horizontal: false,
+        useFractionalSize: useFractionalSize,
+        useOffset: true,
+        style: elStyle
+      }) : this._size;
     }
 
     this.updatePosition();
@@ -6662,24 +6731,28 @@ function (_super) {
         preventClickOnDrag = _0 === void 0 ? true : _0,
         _1 = _b.disableOnInit,
         disableOnInit = _1 === void 0 ? false : _1,
-        _2 = _b.renderOnlyVisible,
-        renderOnlyVisible = _2 === void 0 ? false : _2,
-        _3 = _b.virtual,
-        virtual = _3 === void 0 ? null : _3,
-        _4 = _b.autoInit,
-        autoInit = _4 === void 0 ? true : _4,
-        _5 = _b.autoResize,
-        autoResize = _5 === void 0 ? true : _5,
-        _6 = _b.useResizeObserver,
-        useResizeObserver = _6 === void 0 ? true : _6,
-        _7 = _b.resizeDebounce,
-        resizeDebounce = _7 === void 0 ? 0 : _7,
-        _8 = _b.maxResizeDebounce,
-        maxResizeDebounce = _8 === void 0 ? 100 : _8,
-        _9 = _b.externalRenderer,
-        externalRenderer = _9 === void 0 ? null : _9,
-        _10 = _b.renderExternal,
-        renderExternal = _10 === void 0 ? null : _10;
+        _2 = _b.changeOnHold,
+        changeOnHold = _2 === void 0 ? false : _2,
+        _3 = _b.renderOnlyVisible,
+        renderOnlyVisible = _3 === void 0 ? false : _3,
+        _4 = _b.virtual,
+        virtual = _4 === void 0 ? null : _4,
+        _5 = _b.autoInit,
+        autoInit = _5 === void 0 ? true : _5,
+        _6 = _b.autoResize,
+        autoResize = _6 === void 0 ? true : _6,
+        _7 = _b.useResizeObserver,
+        useResizeObserver = _7 === void 0 ? true : _7,
+        _8 = _b.resizeDebounce,
+        resizeDebounce = _8 === void 0 ? 0 : _8,
+        _9 = _b.maxResizeDebounce,
+        maxResizeDebounce = _9 === void 0 ? 100 : _9,
+        _10 = _b.useFractionalSize,
+        useFractionalSize = _10 === void 0 ? false : _10,
+        _11 = _b.externalRenderer,
+        externalRenderer = _11 === void 0 ? null : _11,
+        _12 = _b.renderExternal,
+        renderExternal = _12 === void 0 ? null : _12;
 
     var _this = _super.call(this) || this; // Internal states
 
@@ -6712,16 +6785,18 @@ function (_super) {
     _this._iOSEdgeSwipeThreshold = iOSEdgeSwipeThreshold;
     _this._preventClickOnDrag = preventClickOnDrag;
     _this._disableOnInit = disableOnInit;
+    _this._changeOnHold = changeOnHold;
     _this._renderOnlyVisible = renderOnlyVisible;
     _this._autoInit = autoInit;
     _this._autoResize = autoResize;
     _this._useResizeObserver = useResizeObserver;
     _this._resizeDebounce = resizeDebounce;
     _this._maxResizeDebounce = maxResizeDebounce;
+    _this._useFractionalSize = useFractionalSize;
     _this._externalRenderer = externalRenderer;
     _this._renderExternal = renderExternal; // Create core components
 
-    _this._viewport = new Viewport(getElement(root));
+    _this._viewport = new Viewport(_this, getElement(root));
     _this._autoResizer = new AutoResizer(_this);
     _this._renderer = _this._createRenderer();
     _this._camera = _this._createCamera();
@@ -7468,6 +7543,24 @@ function (_super) {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "changeOnHold", {
+    /**
+     * 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
+     */
+    get: function () {
+      return this._changeOnHold;
+    },
+    set: function (val) {
+      this._changeOnHold = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "renderOnlyVisible", {
     // PERFORMANCE
 
@@ -7616,6 +7709,23 @@ function (_super) {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "useFractionalSize", {
+    /**
+     * By enabling this, Flicking will calculate all internal size with CSS width computed with getComputedStyle.
+     * This can prevent 1px offset issue in some cases where panel size has the fractional part.
+     * All sizes will have the original size before CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform} is applied on the element.
+     * @ko 이 옵션을 활성화할 경우, Flicking은 내부의 모든 크기를 {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect getBoundingClientRect}를 이용하여 계산합니다.
+     * 이를 통해, 패널 크기에 소수점을 포함할 경우에 발생할 수 있는 일부 1px 오프셋 이슈를 해결 가능합니다.
+     * 모든 크기는 CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform}이 엘리먼트에 적용되기 이전의 크기를 사용할 것입니다.
+     * @type {boolean}
+     * @default false
+     */
+    get: function () {
+      return this._useFractionalSize;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "externalRenderer", {
     /**
      * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
@@ -8148,6 +8258,8 @@ function (_super) {
             camera.updateAlignPos();
             camera.updateRange();
             camera.updateAnchors();
+            camera.updateAdaptiveHeight();
+            camera.updateOffset();
             return [4
             /*yield*/
             , renderer.render()];
@@ -8425,7 +8537,7 @@ function (_super) {
    */
 
 
-  Flicking.VERSION = "4.7.3";
+  Flicking.VERSION = "4.9.0";
   return Flicking;
 }(Component);
 
@@ -8679,5 +8791,5 @@ var parseAlign = function (alignVal) {
  * egjs projects are licensed under the MIT license
  */
 
-export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCameraMode, CIRCULAR_FALLBACK, CLASS, Camera, CircularCameraMode, Control, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCameraMode, MOVE_TYPE, NormalRenderingStrategy, Panel, Renderer, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, getDefaultCameraTransform, getDirection, getElement, 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, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCameraMode, MOVE_TYPE, NormalRenderingStrategy, Panel, Renderer, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, 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 };
 //# sourceMappingURL=flicking.esm.js.map