@egjs/flicking 4.12.0-beta.10 → 4.12.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.12.0-beta.10",
+	"version": "4.12.0-beta.12",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.cjs.js",
 	"module": "dist/flicking.esm.js",
@@ -12,7 +12,7 @@
 	"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": "run-s build:bundle build:declaration build:css printsizes",
     "build-react": "run-s build:bundle build:declaration && pvu --build=react-flicking",
 		"build:bundle": "rm -rf ./dist && rollup -c",
 		"build:declaration": "rm -rf ./declaration && tsc -p tsconfig.declaration.json",
@@ -115,7 +115,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 +129,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 +140,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[];
@@ -76,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;
   }
@@ -149,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);
@@ -371,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/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;