@egjs/flicking 3.9.0 → 3.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "3.9.0",
+	"version": "3.9.2",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -22,11 +22,7 @@
 		"demo:deploy": "npm run build && npm run jsdoc && npm run demo:prebuild-version && gh-pages -d docs/build/ --add --remote upstream",
 		"release": "release-helper upstream",
 		"changelog": "node ./config/changelog.js",
-		"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
-		"packages": "npm run packages:update && npm run packages:build && npm run packages:publish",
-		"packages:update": "pvu --update=react-flicking,ngx-flicking/projects/ngx-flicking,vue-flicking",
-		"packages:build": "pvu --build=react-flicking,ngx-flicking,vue-flicking",
-		"packages:publish": "pvu --publish=react-flicking,ngx-flicking/dist/ngx-flicking,vue-flicking"
+		"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
 	},
 	"repository": {
 		"type": "git",

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/Viewport.ts

@@ -1265,14 +1265,18 @@ 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();
 
     const areaPrev = (relativeHangerPosition - relativeAnchorPosition) % sumOriginalPanelSize;
     let sizeSum = 0;
-    let panelAtLeftBoundary!: Panel;
+    let panelAtLeftBoundary: Panel | null = null;
     for (const panel of reversedPanels) {
       if (!panel) {
         continue;
@@ -1286,7 +1290,7 @@ export default class Viewport {
 
     const areaNext = (viewportSize - relativeHangerPosition + relativeAnchorPosition) % sumOriginalPanelSize;
     sizeSum = 0;
-    let panelAtRightBoundary!: Panel;
+    let panelAtRightBoundary: Panel | null = null;
     for (const panel of panels) {
       if (!panel) {
         continue;
@@ -1299,7 +1303,8 @@ export default class Viewport {
     }
 
     // Need one more set of clones on prev area of original panel 0
-    const needCloneOnPrev = panelAtLeftBoundary.getIndex() !== 0
+    const needCloneOnPrev = (panelAtLeftBoundary && panelAtRightBoundary)
+      && panelAtLeftBoundary.getIndex() !== 0
       && panelAtLeftBoundary.getIndex() <= panelAtRightBoundary.getIndex();
 
     // Visible count of panel 0 on first screen

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` 옵션이 활성화된 경우에만 트리거된다.