feat: add sideIndex to changed, willchange event

Author: malangfox

src/CrossFlicking.ts

@@ -61,6 +61,14 @@ export interface SideState {
   element: HTMLElement;
 }
 
+interface CrossFlickingChangedEvent extends ChangedEvent {
+  sideIndex?: number;
+}
+
+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;