@egjs/flicking 4.12.0-beta.9 → 4.12.1-beta.0

package/declaration/utils.d.ts

@@ -1,47 +1,47 @@
-import Flicking, { FlickingOptions } from "./Flicking";
-import { ALIGN, DIRECTION } from "./const/external";
-import { LiteralUnion, Merged, ValueOf } from "./type/internal";
-import { ElementLike } from "./type/external";
-export declare const merge: <From extends object, To extends object>(target: From, ...sources: To[]) => Merged<From, To>;
-export declare const getElement: (el: HTMLElement | string | null, parent?: HTMLElement) => HTMLElement;
-export declare const checkExistence: (value: any, nameOnErrMsg: string) => void;
-export declare const clamp: (x: number, min: number, max: number) => number;
-export declare const getFlickingAttached: (val: Flicking | null) => Flicking;
-export declare const toArray: <T>(iterable: ArrayLike<T>) => T[];
-export declare const parseAlign: (align: LiteralUnion<ValueOf<typeof ALIGN>> | number, size: number) => number;
-export declare const parseBounce: (bounce: FlickingOptions["bounce"], size: number) => number[];
-export declare const parseArithmeticSize: (cssValue: number | string, base: number) => number | null;
-export declare const parseArithmeticExpression: (cssValue: number | string) => {
-    percentage: number;
-    absolute: number;
-} | null;
-export declare const parseCSSSizeValue: (val: string | number) => string;
-export declare const parsePanelAlign: (align: FlickingOptions["align"]) => string | number;
-export declare const getDirection: (start: number, end: number) => ValueOf<typeof DIRECTION>;
-export declare const parseElement: (element: ElementLike | ElementLike[]) => HTMLElement[];
-export declare const getMinusCompensatedIndex: (idx: number, max: number) => number;
-export declare const includes: <T>(array: T[], target: any) => target is T;
-export declare const isString: (val: any) => val is string;
-export declare const circulatePosition: (pos: number, min: number, max: number) => number;
-export declare const find: <T>(array: T[], checker: (val: T) => boolean) => T;
-export declare const findRight: <T>(array: T[], checker: (val: T) => boolean) => T;
-export declare const findIndex: <T>(array: T[], checker: (val: T) => boolean) => number;
-export declare const getProgress: (pos: number, prev: number, next: number) => number;
-export declare const getStyle: (el: HTMLElement) => CSSStyleDeclaration;
-export declare const setSize: (el: HTMLElement, { width, height }: Partial<{
-    width: number | string;
-    height: number | string;
-}>) => void;
-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;
-export declare const camelize: (str: string) => string;
-export declare const getDataAttributes: (element: HTMLElement, attributePrefix: string) => Record<string, string>;
+import Flicking, { FlickingOptions } from "./Flicking";
+import { ALIGN, DIRECTION } from "./const/external";
+import { LiteralUnion, Merged, ValueOf } from "./type/internal";
+import { ElementLike } from "./type/external";
+export declare const merge: <From extends object, To extends object>(target: From, ...sources: To[]) => Merged<From, To>;
+export declare const getElement: (el: HTMLElement | string | null, parent?: HTMLElement) => HTMLElement;
+export declare const checkExistence: (value: any, nameOnErrMsg: string) => void;
+export declare const clamp: (x: number, min: number, max: number) => number;
+export declare const getFlickingAttached: (val: Flicking | null) => Flicking;
+export declare const toArray: <T>(iterable: ArrayLike<T>) => T[];
+export declare const parseAlign: (align: LiteralUnion<ValueOf<typeof ALIGN>> | number, size: number) => number;
+export declare const parseBounce: (bounce: FlickingOptions["bounce"], size: number) => number[];
+export declare const parseArithmeticSize: (cssValue: number | string, base: number) => number | null;
+export declare const parseArithmeticExpression: (cssValue: number | string) => {
+    percentage: number;
+    absolute: number;
+} | null;
+export declare const parseCSSSizeValue: (val: string | number) => string;
+export declare const parsePanelAlign: (align: FlickingOptions["align"]) => string | number;
+export declare const getDirection: (start: number, end: number) => ValueOf<typeof DIRECTION>;
+export declare const parseElement: (element: ElementLike | ElementLike[]) => HTMLElement[];
+export declare const getMinusCompensatedIndex: (idx: number, max: number) => number;
+export declare const includes: <T>(array: T[], target: any) => target is T;
+export declare const isString: (val: any) => val is string;
+export declare const circulatePosition: (pos: number, min: number, max: number) => number;
+export declare const find: <T>(array: T[], checker: (val: T) => boolean) => T;
+export declare const findRight: <T>(array: T[], checker: (val: T) => boolean) => T;
+export declare const findIndex: <T>(array: T[], checker: (val: T) => boolean) => number;
+export declare const getProgress: (pos: number, prev: number, next: number) => number;
+export declare const getStyle: (el: HTMLElement) => CSSStyleDeclaration;
+export declare const setSize: (el: HTMLElement, { width, height }: Partial<{
+    width: number | string;
+    height: number | string;
+}>) => void;
+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;
+export declare const camelize: (str: string) => string;
+export declare const getDataAttributes: (element: HTMLElement, attributePrefix: string) => Record<string, string>;

package/dist/flicking-inline.css

@@ -0,0 +1,37 @@
+.flicking-viewport {
+  position: relative;
+  overflow: hidden;
+}
+.flicking-viewport:not(.vertical) {
+  width: 100%;
+  height: 100%;
+}
+.flicking-viewport.vertical, .flicking-viewport.vertical > .flicking-camera {
+  display: inline-block;
+}
+.flicking-viewport.vertical.middle > .flicking-camera > * {
+  vertical-align: middle;
+}
+.flicking-viewport.vertical.bottom > .flicking-camera > * {
+  vertical-align: bottom;
+}
+.flicking-viewport.vertical > .flicking-camera > * {
+  display: block;
+}
+.flicking-viewport.flicking-hidden > .flicking-camera > * {
+  visibility: hidden;
+}
+
+.flicking-camera {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  white-space: nowrap;
+  will-change: transform;
+}
+.flicking-camera > * {
+  display: inline-block;
+  white-space: normal;
+  vertical-align: top;
+}

package/dist/flicking-inline.min.css

@@ -0,0 +1 @@
+.flicking-viewport{position:relative;overflow:hidden}.flicking-viewport:not(.vertical){width:100%;height:100%}.flicking-viewport.vertical,.flicking-viewport.vertical>.flicking-camera{display:inline-block}.flicking-viewport.vertical.middle>.flicking-camera>*{vertical-align:middle}.flicking-viewport.vertical.bottom>.flicking-camera>*{vertical-align:bottom}.flicking-viewport.vertical>.flicking-camera>*{display:block}.flicking-viewport.flicking-hidden>.flicking-camera>*{visibility:hidden}.flicking-camera{width:100%;height:100%;position:relative;z-index:1;white-space:nowrap;will-change:transform}.flicking-camera>*{display:inline-block;white-space:normal;vertical-align:top}

package/dist/flicking-inline.min.min.css

@@ -0,0 +1 @@
+.flicking-viewport{position:relative;overflow:hidden}.flicking-viewport:not(.vertical){width:100%;height:100%}.flicking-viewport.vertical,.flicking-viewport.vertical>.flicking-camera{display:inline-block}.flicking-viewport.vertical.middle>.flicking-camera>*{vertical-align:middle}.flicking-viewport.vertical.bottom>.flicking-camera>*{vertical-align:bottom}.flicking-viewport.vertical>.flicking-camera>*{display:block}.flicking-viewport.flicking-hidden>.flicking-camera>*{visibility:hidden}.flicking-camera{width:100%;height:100%;position:relative;z-index:1;white-space:nowrap;will-change:transform}.flicking-camera>*{display:inline-block;white-space:normal;vertical-align:top}

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.0-beta.9
+version: 4.12.1-beta.0
 */
 'use strict';
 
@@ -679,6 +679,9 @@ var getStyle = function (el) {
 var setSize = function (el, _a) {
   var width = _a.width,
     height = _a.height;
+  if (!el) {
+    return;
+  }
   if (width != null) {
     if (isString(width)) {
       el.style.width = width;
@@ -1592,6 +1595,9 @@ var HoldingState = /*#__PURE__*/function (_super) {
       axesEvent = ctx.axesEvent,
       transitTo = ctx.transitTo;
     var inputEvent = axesEvent.inputEvent;
+    if (!inputEvent) {
+      return;
+    }
     var offset = flicking.horizontal ? inputEvent.offsetX : inputEvent.offsetY;
     var moveStartEvent = new Component.ComponentEvent(EVENTS.MOVE_START, {
       isTrusted: axesEvent.isTrusted,
@@ -2909,8 +2915,9 @@ 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
+      //  console.log("moveToPosition anchorAtCamera activeAnchor absPosDelta", camera.position, anchorAtCamera, activeAnchor, absPosDelta, snapThreshold)
       targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);
     } else {
       // Fallback to nearest panel from current camera
@@ -2985,6 +2992,7 @@ var SnapControl = /*#__PURE__*/function (_super) {
         return anchorIncludePosition;
       }
     }
+    //   console.log("_findAdjacentAnchor", position, posDelta, anchorAtCamera)
     var adjacentAnchor = (_a = posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) !== null && _a !== void 0 ? _a : anchorAtCamera;
     return adjacentAnchor;
   };
@@ -5451,6 +5459,9 @@ var Panel = /*#__PURE__*/function () {
     var flicking = this._flicking;
     var horizontal = flicking.horizontal,
       useFractionalSize = flicking.useFractionalSize;
+    if (!el) {
+      return this;
+    }
     if (cached) {
       this._size = cached.size;
       this._margin = __assign({}, cached.margin);
@@ -7858,7 +7869,7 @@ var Flicking = /*#__PURE__*/function (_super) {
     var defaultPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
     if (!defaultPanel) return;
     var nearestAnchor = camera.findNearestAnchor(defaultPanel.position);
-    var initialPanel = nearestAnchor && defaultPanel.index !== nearestAnchor.panel.index ? nearestAnchor.panel : defaultPanel;
+    var initialPanel = nearestAnchor && defaultPanel.position !== nearestAnchor.panel.position && defaultPanel.index !== nearestAnchor.panel.index ? nearestAnchor.panel : defaultPanel;
     control.setActive(initialPanel, null, false);
     if (!nearestAnchor) {
       throw new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(initialPanel.position), CODE.POSITION_NOT_REACHABLE);
@@ -7912,7 +7923,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.12.0-beta.9";
+  Flicking.VERSION = "4.12.1-beta.0";
   return Flicking;
 }(Component);
 
@@ -7923,7 +7934,9 @@ var SIDE_EVENTS = {
   MOVE: "sideMove",
   MOVE_END: "sideMoveEnd",
   WILL_CHANGE: "sideWillChange",
-  CHANGED: "sideChanged"
+  CHANGED: "sideChanged",
+  WILL_RESTORE: "sideWillRestore",
+  RESTORED: "sideRestored"
 };
 var CrossFlicking = /*#__PURE__*/function (_super) {
   __extends(CrossFlicking, _super);
@@ -7949,7 +7962,8 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
       if (!_this._disableSlideOnHold) {
         return;
       }
-      var threshold = draggable ? _this.dragThreshold && _this.dragThreshold >= 10 ? _this.dragThreshold : 10 : Infinity;
+      var dragThreshold = _this._originalDragThreshold;
+      var threshold = draggable ? dragThreshold && dragThreshold >= 10 ? dragThreshold : 10 : Infinity;
       if (direction === MOVE_DIRECTION.HORIZONTAL === _this.horizontal) {
         _this.dragThreshold = threshold;
       } else if (direction === MOVE_DIRECTION.VERTICAL === _this.horizontal) {
@@ -7980,6 +7994,9 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
         }
       });
     };
+    _this._addSideIndex = function (e) {
+      e.sideIndex = _this._sideFlicking[e.index].index;
+    };
     _this._onHorizontalHoldStart = function () {
       _this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
       _this._moveDirection = null;
@@ -8039,6 +8056,7 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
     // Internal states
     _this._moveDirection = null;
     _this._nextIndex = 0;
+    _this._originalDragThreshold = _this.dragThreshold;
     // Bind options
     _this._sideOptions = sideOptions;
     _this._preserveIndex = preserveIndex;
@@ -8055,6 +8073,15 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "sideIndex", {
+    get: function () {
+      return this._sideFlicking.map(function (i) {
+        return i.index;
+      });
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "sideState", {
     get: function () {
       return this._sideState;
@@ -8123,6 +8150,9 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
     this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
     this.on(EVENTS.MOVE, this._onHorizontalMove);
     this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
+    [EVENTS.CHANGED, EVENTS.WILL_CHANGE].forEach(function (event) {
+      _this.on(event, _this._addSideIndex);
+    });
     this._sideFlicking.forEach(function (flicking, mainIndex) {
       flicking.on(EVENTS.HOLD_START, _this._onSideHoldStart);
       flicking.on(EVENTS.MOVE, _this._onSideMove);