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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.12.0-beta.11",
+	"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",

package/src/CrossFlicking.ts

@@ -61,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[];
@@ -82,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;
   }
@@ -155,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);
@@ -377,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/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;