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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.12.0-beta.9",
+	"version": "4.12.1-beta.0",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.cjs.js",
 	"module": "dist/flicking.esm.js",
@@ -12,13 +12,12 @@
 	"types": "declaration/index.d.ts",
 	"scripts": {
 		"start": "concurrently \"rollup -w --config ./rollup.config.dev.js\" \"http-serve\"",
-		"build": "run-s build:bundle build:declaration printsizes",
-    "build-react": "run-s build:bundle build:declaration && pvu --build=react-flicking",
+		"build": "run-s build:bundle build:declaration build:css printsizes",
 		"build:bundle": "rm -rf ./dist && rollup -c",
 		"build:declaration": "rm -rf ./declaration && tsc -p tsconfig.declaration.json",
 		"build:css": "run-s build:css-clear build:sass build:css-prefix build:css-min",
 		"build:css-clear": "rm -rf ./dist/*.css",
-		"build:sass": "node-sass sass/ -o dist/ -x --output-style expanded",
+		"build:sass": "sass sass/:dist/ --style=expanded --no-source-map && sass sass/flicking.sass dist/flicking.min.css --style=compressed --no-source-map && sass sass/flicking-inline.sass dist/flicking-inline.min.css --style=compressed --no-source-map",
 		"build:css-prefix": "postcss dist/*.css --replace --use autoprefixer --no-map",
 		"build:css-min": "postcss dist/*.css --ext .min.css --use postcss-clean -d dist/ --no-map",
 		"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
@@ -115,7 +114,6 @@
 		"husky": "^1.3.1",
 		"jsdoc-to-mdx": "^1.1.2",
 		"karma-typescript-es6-transform": "^5.5.2",
-		"node-sass": "^7.0.1",
 		"npm-run-all": "^4.1.5",
 		"postcss-clean": "^1.2.2",
 		"postcss-cli": "^7.1.2",
@@ -130,6 +128,7 @@
 		"rollup-plugin-terser": "^7.0.2",
 		"rollup-plugin-typescript2": "^0.36.0",
 		"rollup-plugin-visualizer": "^4.2.1",
+		"sass": "^1.79.3",
 		"sync-exec": "^0.6.2",
 		"ts-mock-imports": "^1.3.3",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
@@ -140,7 +139,7 @@
 		"typescript-transform-paths": "^2.2.3"
 	},
 	"dependencies": {
-		"@egjs/axes": "^3.9.0",
+		"@egjs/axes": "^3.9.1",
 		"@egjs/component": "^3.0.1",
 		"@egjs/imready": "^1.3.1",
 		"@egjs/list-differ": "^1.0.1"

package/src/CrossFlicking.ts

@@ -13,7 +13,9 @@ import {
   MoveEndEvent,
   MoveEvent,
   MoveStartEvent,
-  WillChangeEvent
+  RestoredEvent,
+  WillChangeEvent,
+  WillRestoreEvent
 } from "./type/event";
 import { LiteralUnion, ValueOf } from "./type/internal";
 import { CLASS, EVENTS, MOVE_DIRECTION } from "./const/external";
@@ -26,7 +28,9 @@ export const SIDE_EVENTS = {
   MOVE: "sideMove",
   MOVE_END: "sideMoveEnd",
   WILL_CHANGE: "sideWillChange",
-  CHANGED: "sideChanged"
+  CHANGED: "sideChanged",
+  WILL_RESTORE: "sideWillRestore",
+  RESTORED: "sideRestored"
 } as const;
 
 export type CrossFlickingEvent<T> = { mainIndex: number } & T;
@@ -39,6 +43,8 @@ export interface CrossFlickingEvents extends FlickingEvents {
   [SIDE_EVENTS.MOVE_END]: CrossFlickingEvent<MoveEndEvent>;
   [SIDE_EVENTS.WILL_CHANGE]: CrossFlickingEvent<WillChangeEvent>;
   [SIDE_EVENTS.CHANGED]: CrossFlickingEvent<ChangedEvent>;
+  [SIDE_EVENTS.WILL_RESTORE]: CrossFlickingEvent<WillRestoreEvent>;
+  [SIDE_EVENTS.RESTORED]: CrossFlickingEvent<RestoredEvent>;
 }
 
 export interface CrossFlickingOptions extends FlickingOptions {
@@ -55,6 +61,14 @@ export interface SideState {
   element: HTMLElement;
 }
 
+export interface CrossFlickingChangedEvent extends ChangedEvent {
+  sideIndex?: number;
+}
+
+export interface CrossFlickingWillChangeEvent extends WillChangeEvent {
+  sideIndex?: number;
+}
+
 export class CrossFlicking extends Flicking {
   // Core components
   private _sideFlicking: Flicking[];
@@ -68,6 +82,7 @@ export class CrossFlicking extends Flicking {
   // Internal State
   private _sideState: SideState[];
   private _moveDirection: LiteralUnion<ValueOf<typeof MOVE_DIRECTION>> | null;
+  private _originalDragThreshold: number;
   private _nextIndex: number;
 
   // Components
@@ -75,6 +90,10 @@ export class CrossFlicking extends Flicking {
     return this._sideFlicking;
   }
 
+  public get sideIndex() {
+    return this._sideFlicking.map(i => i.index);
+  }
+
   public get sideState() {
     return this._sideState;
   }
@@ -120,6 +139,7 @@ export class CrossFlicking extends Flicking {
     // Internal states
     this._moveDirection = null;
     this._nextIndex = 0;
+    this._originalDragThreshold = this.dragThreshold;
 
     // Bind options
     this._sideOptions = sideOptions;
@@ -147,6 +167,9 @@ export class CrossFlicking extends Flicking {
     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((event) => {
+      this.on(event, this._addSideIndex);
+    });
 
     this._sideFlicking.forEach((flicking, mainIndex) => {
       flicking.on(EVENTS.HOLD_START, this._onSideHoldStart);
@@ -331,9 +354,10 @@ export class CrossFlicking extends Flicking {
       return;
     }
 
+    const dragThreshold = this._originalDragThreshold;
     const threshold = draggable
-      ? this.dragThreshold && this.dragThreshold >= 10
-        ? this.dragThreshold
+      ? dragThreshold && dragThreshold >= 10
+        ? dragThreshold
         : 10
       : Infinity;
 
@@ -368,6 +392,10 @@ export class CrossFlicking extends Flicking {
     });
   };
 
+  private _addSideIndex = (e: ChangedEvent | WillChangeEvent): void => {
+    (e as CrossFlickingChangedEvent | CrossFlickingWillChangeEvent).sideIndex = this._sideFlicking[e.index].index;
+  };
+
   private _onHorizontalHoldStart = (): void => {
     this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
     this._moveDirection = null;

package/src/Flicking.ts

@@ -1739,7 +1739,7 @@ class Flicking extends Component<FlickingEvents> {
     if (!defaultPanel) return;
 
     const nearestAnchor = camera.findNearestAnchor(defaultPanel.position);
-    const initialPanel = (nearestAnchor && defaultPanel.index !== nearestAnchor.panel.index) ? nearestAnchor.panel : defaultPanel;
+    const initialPanel = (nearestAnchor && defaultPanel.position !== nearestAnchor.panel.position && defaultPanel.index !== nearestAnchor.panel.index) ? nearestAnchor.panel : defaultPanel;
     control.setActive(initialPanel, null, false);
 
     if (!nearestAnchor) {

package/src/control/SnapControl.ts

@@ -109,8 +109,9 @@ class SnapControl extends Control {
     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
@@ -205,6 +206,7 @@ class SnapControl extends Control {
       }
     }
 
+ //   console.log("_findAdjacentAnchor", position, posDelta, anchorAtCamera)
     const adjacentAnchor = (posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) ?? anchorAtCamera;
 
     return adjacentAnchor;

package/src/control/states/HoldingState.ts

@@ -39,6 +39,10 @@ class HoldingState extends State {
 
     const inputEvent = axesEvent.inputEvent as { offsetX: number; offsetY: number };
 
+    if (!inputEvent) {
+      return;
+    }
+
     const offset = flicking.horizontal
       ? inputEvent.offsetX
       : inputEvent.offsetY;

package/src/core/panel/Panel.ts

@@ -321,6 +321,10 @@ class Panel {
       useFractionalSize
     } = flicking;
 
+    if (!el) {
+      return this;
+    }
+
     if (cached) {
       this._size = cached.size;
       this._margin = { ...cached.margin };

package/src/utils.ts

@@ -262,6 +262,10 @@ export const setSize = (el: HTMLElement, { width, height }: Partial<{
   width: number | string;
   height: number | string;
 }>) => {
+  if (!el) {
+    return;
+  }
+
   if (width != null) {
     if (isString(width)) {
       el.style.width = width;