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

package/dist/flicking.css

@@ -0,0 +1,40 @@
+.flicking-viewport {
+  position: relative;
+  overflow: hidden;
+}
+.flicking-viewport.vertical {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+.flicking-viewport.vertical > .flicking-camera {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.flicking-viewport.flicking-hidden > .flicking-camera > * {
+  visibility: hidden;
+}
+
+.flicking-camera {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  will-change: transform;
+}
+.flicking-camera > * {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}

package/dist/flicking.esm.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.9
+version: 4.12.1-beta.1
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
@@ -677,6 +677,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;
@@ -1590,6 +1593,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 ComponentEvent(EVENTS.MOVE_START, {
       isTrusted: axesEvent.isTrusted,
@@ -5449,6 +5455,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);
@@ -7856,7 +7865,7 @@ var Flicking = /*#__PURE__*/function (_super) {
     var defaultPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
     if (!defaultPanel) return;
     var nearestAnchor = camera.findNearestAnchor(defaultPanel.position);
-    var initialPanel = nearestAnchor && defaultPanel.index !== nearestAnchor.panel.index ? nearestAnchor.panel : defaultPanel;
+    var initialPanel = nearestAnchor && defaultPanel.position !== nearestAnchor.panel.position && defaultPanel.index !== nearestAnchor.panel.index ? nearestAnchor.panel : defaultPanel;
     control.setActive(initialPanel, null, false);
     if (!nearestAnchor) {
       throw new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(initialPanel.position), CODE.POSITION_NOT_REACHABLE);
@@ -7910,7 +7919,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.12.0-beta.9";
+  Flicking.VERSION = "4.12.1-beta.1";
   return Flicking;
 }(Component);
 
@@ -7921,7 +7930,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);
@@ -7947,7 +7958,8 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
       if (!_this._disableSlideOnHold) {
         return;
       }
-      var threshold = draggable ? _this.dragThreshold && _this.dragThreshold >= 10 ? _this.dragThreshold : 10 : Infinity;
+      var dragThreshold = _this._originalDragThreshold;
+      var threshold = draggable ? dragThreshold && dragThreshold >= 10 ? dragThreshold : 10 : Infinity;
       if (direction === MOVE_DIRECTION.HORIZONTAL === _this.horizontal) {
         _this.dragThreshold = threshold;
       } else if (direction === MOVE_DIRECTION.VERTICAL === _this.horizontal) {
@@ -7978,6 +7990,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;
@@ -8037,6 +8052,7 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
     // Internal states
     _this._moveDirection = null;
     _this._nextIndex = 0;
+    _this._originalDragThreshold = _this.dragThreshold;
     // Bind options
     _this._sideOptions = sideOptions;
     _this._preserveIndex = preserveIndex;
@@ -8053,6 +8069,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;
@@ -8121,6 +8146,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);