@egjs/flicking 4.6.2 → 4.7.1

package/README.md

@@ -7,7 +7,7 @@
   <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/flicking.svg?style=flat-square&color=007acc&label=version&logo=NPM" alt="version" /></a>
   <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img alt="npm bundle size (scoped)" src="https://img.shields.io/bundlephobia/minzip/@egjs/flicking.svg?style=flat-square&label=%F0%9F%92%BE%20gzipped&color=007acc" /></a>
   <a href="https://coveralls.io/github/naver/egjs-flicking?branch=master&style=flat-square" target="_blank"><img alt="Coveralls github" src="https://img.shields.io/coveralls/github/naver/egjs-flicking.svg?style=flat-square&label=%E2%9C%85%20coverage" /></a>
-  <a href="https://deepscan.io/dashboard#view=project&tid=3998&pid=5802&bid=46086"><img src="https://deepscan.io/api/teams/3998/projects/5802/branches/46086/badge/grade.svg" alt="DeepScan grade" /></a>
+  <a href="https://deepscan.io/dashboard#view=project&tid=3998&pid=5802&bid=46086"><img src="https://flat.badgen.net/deepscan/grade/team/3998/project/5802/branch/46086" alt="DeepScan grade" /></a>
 </p>
 <p align="center" style="line-height: 2;">
   <a href="https://github.com/naver/egjs-flicking/graphs/commit-activity">

package/declaration/Flicking.d.ts

@@ -42,6 +42,7 @@ export interface FlickingOptions {
     panelsPerView: number;
     noPanelStyleOverride: boolean;
     resizeOnContentsReady: boolean;
+    nested: boolean;
     needPanelThreshold: number;
     preventEventsBeforeInit: boolean;
     deceleration: number;
@@ -87,6 +88,7 @@ declare class Flicking extends Component<FlickingEvents> {
     private _noPanelStyleOverride;
     private _resizeOnContentsReady;
     private _virtual;
+    private _nested;
     private _needPanelThreshold;
     private _preventEventsBeforeInit;
     private _deceleration;
@@ -139,6 +141,7 @@ declare class Flicking extends Component<FlickingEvents> {
     get panelsPerView(): FlickingOptions["panelsPerView"];
     get noPanelStyleOverride(): FlickingOptions["noPanelStyleOverride"];
     get resizeOnContentsReady(): FlickingOptions["resizeOnContentsReady"];
+    get nested(): FlickingOptions["nested"];
     get needPanelThreshold(): FlickingOptions["needPanelThreshold"];
     get preventEventsBeforeInit(): FlickingOptions["preventEventsBeforeInit"];
     get deceleration(): FlickingOptions["deceleration"];
@@ -173,6 +176,7 @@ declare class Flicking extends Component<FlickingEvents> {
     set panelsPerView(val: FlickingOptions["panelsPerView"]);
     set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]);
     set resizeOnContentsReady(val: FlickingOptions["resizeOnContentsReady"]);
+    set nested(val: FlickingOptions["nested"]);
     set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]);
     set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]);
     set deceleration(val: FlickingOptions["deceleration"]);
@@ -189,7 +193,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, 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, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, maxResizeDebounce, externalRenderer, renderExternal }?: Partial<FlickingOptions>);
     init(): Promise<void>;
     destroy(): void;
     prev(duration?: number): Promise<void>;

package/declaration/camera/mode/CameraMode.d.ts

@@ -11,6 +11,7 @@ declare abstract class CameraMode {
     };
     getAnchors(): AnchorPoint[];
     findAnchorIncludePosition(position: number): AnchorPoint | null;
+    findNearestAnchor(position: number): AnchorPoint | null;
     clampToReachablePosition(position: number): number;
     getCircularOffset(): number;
     canReach(panel: Panel): boolean;

package/declaration/camera/mode/CircularCameraMode.d.ts

@@ -8,6 +8,7 @@ declare class CircularCameraMode extends CameraMode {
         max: number;
     };
     getAnchors(): AnchorPoint[];
+    findNearestAnchor(position: number): AnchorPoint | null;
     findAnchorIncludePosition(position: number): AnchorPoint | null;
     getCircularOffset(): number;
     clampToReachablePosition(position: number): number;

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.6.2
+version: 4.7.1
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
@@ -2261,7 +2261,7 @@ function () {
     get: function () {
       var _a, _b;
 
-      return (_b = (_a = this._panInput) === null || _a === void 0 ? void 0 : _a.isEnable()) !== null && _b !== void 0 ? _b : false;
+      return (_b = (_a = this._panInput) === null || _a === void 0 ? void 0 : _a.isEnabled()) !== null && _b !== void 0 ? _b : false;
     },
     enumerable: false,
     configurable: true
@@ -2332,6 +2332,7 @@ function () {
     }, _a), {
       deceleration: flicking.deceleration,
       interruptable: flicking.interruptable,
+      nested: flicking.nested,
       easing: flicking.easing
     });
     this._panInput = new PanInput(flicking.viewport.element, {
@@ -2428,7 +2429,7 @@ function () {
     axis.circular = [controlParams.circular, controlParams.circular];
     axis.range = [controlParams.range.min, controlParams.range.max];
     axis.bounce = parseBounce(flicking.bounce, camera.size);
-    axes.axm.set((_a = {}, _a[POSITION_KEY] = controlParams.position, _a));
+    axes.axisManager.set((_a = {}, _a[POSITION_KEY] = controlParams.position, _a));
     return this;
   };
   /**
@@ -2544,7 +2545,7 @@ function () {
       var camera = flicking.camera;
       animate();
       var newPos = flicking.circularEnabled ? circulatePosition(position, camera.range.min, camera.range.max) : position;
-      axes.axm.set((_a = {}, _a[POSITION_KEY] = newPos, _a));
+      axes.axisManager.set((_a = {}, _a[POSITION_KEY] = newPos, _a));
       return Promise.resolve();
     } else {
       return new Promise(function (resolve, reject) {
@@ -3569,6 +3570,7 @@ function (_super) {
     var lastAnchor = anchors[anchors.length - 1];
     var shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
     var shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
+    var isAdjacent = adjacentAnchor && (indexRange.min <= indexRange.max ? isBetween(adjacentAnchor.index, indexRange.min, indexRange.max) : adjacentAnchor.index >= indexRange.min || adjacentAnchor.index <= indexRange.max);
 
     if (shouldBounceToFirst || shouldBounceToLast) {
       // In bounce area
@@ -3579,7 +3581,7 @@ function (_super) {
       // Move to anchor at position
       targetPanel = anchorAtPosition.panel;
       targetPos = anchorAtPosition.position;
-    } else if (isOverThreshold && adjacentAnchor && isBetween(adjacentAnchor.index, indexRange.min, indexRange.max)) {
+    } else if (isOverThreshold && isAdjacent) {
       // Move to adjacent anchor
       targetPanel = adjacentAnchor.panel;
       targetPos = adjacentAnchor.position;
@@ -3645,6 +3647,27 @@ function () {
     }, null);
   };
 
+  __proto.findNearestAnchor = function (position) {
+    var anchors = this._flicking.camera.anchorPoints;
+    if (anchors.length <= 0) return null;
+    var prevDist = Infinity;
+
+    for (var anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
+      var anchor = anchors[anchorIdx];
+      var dist = Math.abs(anchor.position - position);
+
+      if (dist > prevDist) {
+        // Return previous anchor
+        return anchors[anchorIdx - 1];
+      }
+
+      prevDist = dist;
+    } // Return last anchor
+
+
+    return anchors[anchors.length - 1];
+  };
+
   __proto.clampToReachablePosition = function (position) {
     var camera = this._flicking.camera;
     var range = camera.range;
@@ -3774,6 +3797,28 @@ function (_super) {
     });
   };
 
+  __proto.findNearestAnchor = function (position) {
+    var camera = this._flicking.camera;
+    var anchors = camera.anchorPoints;
+    if (anchors.length <= 0) return null;
+    var camRange = camera.range;
+    var minDist = Infinity;
+    var minDistIndex = -1;
+
+    for (var anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
+      var anchor = anchors[anchorIdx];
+      var dist = Math.min(Math.abs(anchor.position - position), Math.abs(anchor.position - camRange.min + camRange.max - position), Math.abs(position - camRange.min + camRange.max - anchor.position));
+
+      if (dist < minDist) {
+        minDist = dist;
+        minDistIndex = anchorIdx;
+      }
+    } // Return last anchor
+
+
+    return anchors[minDistIndex];
+  };
+
   __proto.findAnchorIncludePosition = function (position) {
     var camera = this._flicking.camera;
     var range = camera.range;
@@ -4542,24 +4587,7 @@ function () {
 
 
   __proto.findNearestAnchor = function (position) {
-    var anchors = this._anchors;
-    if (anchors.length <= 0) return null;
-    var prevDist = Infinity;
-
-    for (var anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
-      var anchor = anchors[anchorIdx];
-      var dist = Math.abs(anchor.position - position);
-
-      if (dist > prevDist) {
-        // Return previous anchor
-        return anchors[anchorIdx - 1];
-      }
-
-      prevDist = dist;
-    } // Return last anchor
-
-
-    return anchors[anchors.length - 1];
+    return this._mode.findNearestAnchor(position);
   };
   /**
    * Return {@link AnchorPoint} that matches {@link Flicking#currentPanel}
@@ -5294,7 +5322,7 @@ function () {
     if (!resizeOnContentsReady || flicking.virtualEnabled) return;
 
     var hasContents = function (panel) {
-      return !!panel.element.querySelector("img, video");
+      return panel.element && !!panel.element.querySelector("img, video");
     };
 
     checkingPanels = checkingPanels.filter(function (panel) {
@@ -6604,52 +6632,54 @@ function (_super) {
         noPanelStyleOverride = _l === void 0 ? false : _l,
         _m = _b.resizeOnContentsReady,
         resizeOnContentsReady = _m === void 0 ? false : _m,
-        _o = _b.needPanelThreshold,
-        needPanelThreshold = _o === void 0 ? 0 : _o,
-        _p = _b.preventEventsBeforeInit,
-        preventEventsBeforeInit = _p === void 0 ? true : _p,
-        _q = _b.deceleration,
-        deceleration = _q === void 0 ? 0.0075 : _q,
-        _r = _b.duration,
-        duration = _r === void 0 ? 500 : _r,
-        _s = _b.easing,
-        easing = _s === void 0 ? function (x) {
+        _o = _b.nested,
+        nested = _o === void 0 ? false : _o,
+        _p = _b.needPanelThreshold,
+        needPanelThreshold = _p === void 0 ? 0 : _p,
+        _q = _b.preventEventsBeforeInit,
+        preventEventsBeforeInit = _q === void 0 ? true : _q,
+        _r = _b.deceleration,
+        deceleration = _r === void 0 ? 0.0075 : _r,
+        _s = _b.duration,
+        duration = _s === void 0 ? 500 : _s,
+        _t = _b.easing,
+        easing = _t === void 0 ? function (x) {
       return 1 - Math.pow(1 - x, 3);
-    } : _s,
-        _t = _b.inputType,
-        inputType = _t === void 0 ? ["mouse", "touch"] : _t,
-        _u = _b.moveType,
-        moveType = _u === void 0 ? "snap" : _u,
-        _v = _b.threshold,
-        threshold = _v === void 0 ? 40 : _v,
-        _w = _b.interruptable,
-        interruptable = _w === void 0 ? true : _w,
-        _x = _b.bounce,
-        bounce = _x === void 0 ? "20%" : _x,
-        _y = _b.iOSEdgeSwipeThreshold,
-        iOSEdgeSwipeThreshold = _y === void 0 ? 30 : _y,
-        _z = _b.preventClickOnDrag,
-        preventClickOnDrag = _z === void 0 ? true : _z,
-        _0 = _b.disableOnInit,
-        disableOnInit = _0 === void 0 ? false : _0,
-        _1 = _b.renderOnlyVisible,
-        renderOnlyVisible = _1 === void 0 ? false : _1,
-        _2 = _b.virtual,
-        virtual = _2 === void 0 ? null : _2,
-        _3 = _b.autoInit,
-        autoInit = _3 === void 0 ? true : _3,
-        _4 = _b.autoResize,
-        autoResize = _4 === void 0 ? true : _4,
-        _5 = _b.useResizeObserver,
-        useResizeObserver = _5 === void 0 ? true : _5,
-        _6 = _b.resizeDebounce,
-        resizeDebounce = _6 === void 0 ? 0 : _6,
-        _7 = _b.maxResizeDebounce,
-        maxResizeDebounce = _7 === void 0 ? 100 : _7,
-        _8 = _b.externalRenderer,
-        externalRenderer = _8 === void 0 ? null : _8,
-        _9 = _b.renderExternal,
-        renderExternal = _9 === void 0 ? null : _9;
+    } : _t,
+        _u = _b.inputType,
+        inputType = _u === void 0 ? ["mouse", "touch"] : _u,
+        _v = _b.moveType,
+        moveType = _v === void 0 ? "snap" : _v,
+        _w = _b.threshold,
+        threshold = _w === void 0 ? 40 : _w,
+        _x = _b.interruptable,
+        interruptable = _x === void 0 ? true : _x,
+        _y = _b.bounce,
+        bounce = _y === void 0 ? "20%" : _y,
+        _z = _b.iOSEdgeSwipeThreshold,
+        iOSEdgeSwipeThreshold = _z === void 0 ? 30 : _z,
+        _0 = _b.preventClickOnDrag,
+        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;
 
     var _this = _super.call(this) || this; // Internal states
 
@@ -6667,6 +6697,7 @@ function (_super) {
     _this._panelsPerView = panelsPerView;
     _this._noPanelStyleOverride = noPanelStyleOverride;
     _this._resizeOnContentsReady = resizeOnContentsReady;
+    _this._nested = nested;
     _this._virtual = virtual;
     _this._needPanelThreshold = needPanelThreshold;
     _this._preventEventsBeforeInit = preventEventsBeforeInit;
@@ -7140,6 +7171,24 @@ function (_super) {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "nested", {
+    /**
+     * If you enable this option on child Flicking when the Flicking is placed inside the Flicking, the parent Flicking will move in the same direction after the child Flicking reaches the first/last panel.
+     * If the parent Flicking and child Flicking have different horizontal option, you do not need to set this option.
+     * @ko Flicking 내부에 Flicking이 배치될 때 하위 Flicking에서 이 옵션을 활성화하면 하위 Flicking이 첫/마지막 패널에 도달한 뒤부터 같은 방향으로 상위 Flicking이 움직입니다.
+     * 만약 상위 Flicking과 하위 Flicking이 서로 다른 horizontal 옵션을 가지고 있다면 이 옵션을 설정할 필요가 없습니다.
+     * @type {boolean}
+     * @default false
+     */
+    get: function () {
+      return this._nested;
+    },
+    set: function (val) {
+      this._nested = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "needPanelThreshold", {
     // EVENTS
 
@@ -8376,7 +8425,7 @@ function (_super) {
    */
 
 
-  Flicking.VERSION = "4.6.2";
+  Flicking.VERSION = "4.7.1";
   return Flicking;
 }(Component);