@egjs/flicking 3.9.1 → 3.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "3.9.1",
+	"version": "3.9.3",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",

package/src/Flicking.ts

@@ -30,6 +30,7 @@ import {
   SelectEvent,
   NeedPanelEvent,
   VisibleChangeEvent,
+  ContentLoadEvent,
   ContentErrorEvent,
   MoveTypeStringOption,
   ValueOf,
@@ -54,6 +55,7 @@ class Flicking extends Component<{
   select: SelectEvent;
   needPanel: NeedPanelEvent;
   visibleChange: VisibleChangeEvent;
+  contentLoad: ContentLoadEvent;
   contentError: ContentErrorEvent;
 }> {
   /**
@@ -871,12 +873,17 @@ class Flicking extends Component<{
     if (options.resizeOnContentsReady) {
       const contentsReadyChecker = new ImReady();
 
-      contentsReadyChecker.on("preReady", () => {
+      const onContentLoad = () => {
         this.resize();
-      });
+        this.trigger(EVENTS.CONTENT_LOAD, {
+          type: EVENTS.CONTENT_LOAD,
+        });
+      };
+
+      contentsReadyChecker.on("preReady", onContentLoad);
       contentsReadyChecker.on("readyElement", e => {
         if (e.hasLoading && e.isPreReadyOver) {
-          this.resize();
+          onContentLoad();
         }
       });
       contentsReadyChecker.on("error", e => {

package/src/components/PanelManager.ts

@@ -70,6 +70,7 @@ class PanelManager {
       max: newPanels.length - 1,
     };
     this.length = newPanels.filter(panel => Boolean(panel)).length;
+    this.chainAllPanels();
   }
 
   public has(index: number): boolean {
@@ -328,6 +329,10 @@ class PanelManager {
     const allPanelsCount = allPanels.length;
 
     if (allPanelsCount <= 1) {
+      if (allPanelsCount === 1) {
+        allPanels[0].prevSibling = null;
+        allPanels[0].nextSibling = null;
+      }
       return;
     }
 

package/src/components/Viewport.ts

@@ -1265,8 +1265,12 @@ export default class Viewport {
     // For each panels, clone itself while last panel's position + size is below viewport size
     const panels = panelManager.originalPanels();
     const reversedPanels = panels.concat().reverse();
-
     const sumOriginalPanelSize = lastPanel.getPosition() + lastPanel.getSize() - firstPanel.getPosition() + gap;
+
+    if (sumOriginalPanelSize <= 0) {
+      return;
+    }
+
     const relativeAnchorPosition = firstPanel.getRelativeAnchorPosition();
     const relativeHangerPosition = this.getRelativeHangerPosition();
 

package/src/consts.ts

@@ -95,6 +95,7 @@ export const EVENTS: EventType = {
   SELECT: "select",
   NEED_PANEL: "needPanel",
   VISIBLE_CHANGE: "visibleChange",
+  CONTENT_LOAD: "contentLoad",
   CONTENT_ERROR: "contentError",
 };
 

package/src/types.ts

@@ -311,6 +311,7 @@ export interface EventType {
   readonly SELECT: "select";
   readonly NEED_PANEL: "needPanel";
   readonly VISIBLE_CHANGE: "visibleChange";
+  readonly CONTENT_LOAD: "contentLoad";
   readonly CONTENT_ERROR: "contentError";
 }
 
@@ -467,6 +468,18 @@ export type VisibleChangeEvent = {
   };
 };
 
+/**
+ * Event triggered when each image/video element inside Flicking has loaded. This event is only triggered with `resizeOnContentsReady` option.
+ * @ko Flicking 내부의 이미지/비디오 엘리먼트들이 로드되었을 때마다 트리거되는 이벤트. `resizeOnContentsReady` 옵션이 활성화된 경우에만 트리거된다.
+ * @typedef
+ * @type object
+ * @memberof eg.Flicking
+ * @property {string} type Name of the event.<ko>이벤트명</ko>
+ */
+export type ContentLoadEvent = {
+  type: string;
+};
+
 /**
  * Event triggered each time the image/video element inside Flicking fails to load. This event is only triggered with `resizeOnContentsReady` option.
  * @ko Flicking 내부의 이미지/비디오 엘리먼트의 로드가 실패했을때마다 발생했을 때마다 트리거되는 이벤트. `resizeOnContentsReady` 옵션이 활성화된 경우에만 트리거된다.