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

package/declaration/CrossFlicking.d.ts

@@ -1,5 +1,5 @@
 import Flicking, { FlickingEvents, FlickingOptions } from "./Flicking";
-import { ChangedEvent, HoldEndEvent, HoldStartEvent, MoveEndEvent, MoveEvent, MoveStartEvent, WillChangeEvent } from "./type/event";
+import { ChangedEvent, HoldEndEvent, HoldStartEvent, MoveEndEvent, MoveEvent, MoveStartEvent, RestoredEvent, WillChangeEvent, WillRestoreEvent } from "./type/event";
 export declare const SIDE_EVENTS: {
     readonly HOLD_START: "sideHoldStart";
     readonly HOLD_END: "sideHoldEnd";
@@ -8,6 +8,8 @@ export declare const SIDE_EVENTS: {
     readonly MOVE_END: "sideMoveEnd";
     readonly WILL_CHANGE: "sideWillChange";
     readonly CHANGED: "sideChanged";
+    readonly WILL_RESTORE: "sideWillRestore";
+    readonly RESTORED: "sideRestored";
 };
 export declare type CrossFlickingEvent<T> = {
     mainIndex: number;
@@ -20,6 +22,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 {
     sideOptions: Partial<FlickingOptions> | undefined;
@@ -33,6 +37,12 @@ export interface SideState {
     end: number;
     element: HTMLElement;
 }
+export interface CrossFlickingChangedEvent extends ChangedEvent {
+    sideIndex?: number;
+}
+export interface CrossFlickingWillChangeEvent extends WillChangeEvent {
+    sideIndex?: number;
+}
 export declare class CrossFlicking extends Flicking {
     private _sideFlicking;
     private _sideOptions;
@@ -44,6 +54,7 @@ export declare class CrossFlicking extends Flicking {
     private _originalDragThreshold;
     private _nextIndex;
     get sideFlicking(): Flicking[];
+    get sideIndex(): number[];
     get sideState(): SideState[];
     get sideOptions(): CrossFlickingOptions["sideOptions"];
     get preserveIndex(): CrossFlickingOptions["preserveIndex"];
@@ -67,6 +78,7 @@ export declare class CrossFlicking extends Flicking {
     private _syncToCategory;
     private _setDraggable;
     private _setPreviousSideIndex;
+    private _addSideIndex;
     private _onHorizontalHoldStart;
     private _onHorizontalMove;
     private _onHorizontalMoveEnd;

package/dist/flicking-inline.css

@@ -0,0 +1,45 @@
+.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.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.10
+version: 4.12.0-beta.12
 */
 '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,
@@ -5451,6 +5457,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);
@@ -7912,7 +7921,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.12.0-beta.10";
+  Flicking.VERSION = "4.12.0-beta.12";
   return Flicking;
 }(Component);
 
@@ -7923,7 +7932,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);
@@ -7981,6 +7992,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;
@@ -8057,6 +8071,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;
@@ -8125,6 +8148,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);