@egjs/flicking 3.8.3 → 3.9.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "3.8.3",
+	"version": "3.9.2-beta.0",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -8,7 +8,7 @@
 	"es2015": "dist/flicking.esm.js",
 	"types": "declaration/index.d.ts",
 	"scripts": {
-		"start": "rollup -c -w",
+		"start": "rollup -w -c rollup.config.development.js",
 		"build": "rm -rf ./dist ./declaration && rollup -c && npm run declaration && npm run printsizes",
 		"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
 		"printsizes": "print-sizes ./dist --exclude=\\.map",
@@ -18,18 +18,11 @@
 		"lint": "tslint -c tslint.json 'src/**/*.ts'",
 		"jsdoc": "rm -rf ./doc && jsdoc -c jsdoc.json",
 		"demo:build": "npm run build && cpx 'dist/**/*' demo/release/latest/dist --clean",
-		"demo:prebuild-version": "cpx 'dist/**/*' demo/release/$npm_package_version/dist --clean && cpx 'doc/**/*' demo/release/$npm_package_version/doc --clean",
-		"demo:prebuild-latest": "cpx 'dist/**/*' demo/release/latest/dist --clean && cpx 'doc/**/*' demo/release/latest/doc --clean",
-		"demo:origin": "npm run build && npm run jsdoc && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d demo/",
-		"demo:deploy": "npm run build && npm run jsdoc && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d demo/ --add --remote upstream",
-		"demo:setup": "cpx 'node_modules/@egjs/common-demo/**/*' 'demo/' && rm demo/package.json",
+		"demo:prebuild-version": "cpx 'dist/**/*' docs/build/release/$npm_package_version/dist --clean",
+		"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",
@@ -54,6 +47,7 @@
 		"@types/karma-chai": "^0.1.1",
 		"@types/mocha": "^5.2.5",
 		"@types/node": "^14.0.27",
+		"@types/resize-observer-browser": "^0.1.6",
 		"@types/sinon": "^7.0.3",
 		"chai": "^4.2.0",
 		"chalk": "^2.4.2",
@@ -76,6 +70,8 @@
 		"print-coveralls": "^1.2.2",
 		"print-sizes": "0.0.3",
 		"pvu": "^0.4.1",
+		"rollup-plugin-livereload": "^2.0.5",
+		"rollup-plugin-serve": "^1.1.0",
 		"sinon": "^7.2.3",
 		"sync-exec": "^0.6.2",
 		"ts-mock-imports": "^1.2.2",

package/rollup.config.development.js

@@ -0,0 +1,26 @@
+import buildHelper from "@egjs/build-helper";
+import serve from "rollup-plugin-serve";
+import livereload from "rollup-plugin-livereload";
+
+const name = "eg.Flicking";
+
+export default buildHelper([
+  {
+    name,
+    input: "./src/index.umd.ts",
+    output: "./test/manual/lib/flicking.pkgd.js",
+    format: "umd",
+    resolve: true,
+    plugins: [
+      serve({
+        open: true,
+        openPage: "/html/default.html",
+        contentBase: "test/manual"
+      }),
+      livereload({
+        watch: "./test/manual/lib/flicking.pkgd.js"
+      }),
+    ]
+  }
+]);
+

package/src/Flicking.ts

@@ -5,8 +5,10 @@
 
 import Component from "@egjs/component";
 import ImReady from "@egjs/imready";
+import { DiffResult } from "@egjs/list-differ";
 import Viewport from "./components/Viewport";
 import Panel from "./components/Panel";
+import AutoResizer from "./components/AutoResizer";
 
 import { merge, getProgress, parseElement, isString, counter, findIndex } from "./utils";
 import { DEFAULT_OPTIONS, EVENTS, DIRECTION, AXES_EVENTS, STATE_TYPE, DEFAULT_MOVE_TYPE_OPTIONS } from "./consts";
@@ -32,8 +34,6 @@ import {
   MoveTypeStringOption,
   ValueOf,
 } from "./types";
-// import { sendEvent } from "./ga/ga";
-import { DiffResult } from "@egjs/list-differ";
 
 /**
  * @memberof eg
@@ -98,6 +98,7 @@ class Flicking extends Component<{
 
   private wrapper: HTMLElement;
   private viewport: Viewport;
+  private autoResizer: AutoResizer;
   private contentsReadyChecker: ImReady | null = null;
 
   private eventContext: FlickingContext;
@@ -135,6 +136,7 @@ class Flicking extends Component<{
    * @param {boolean} [options.isConstantSize=false] Whether all panels have a constant size that won't be changed after resize. Enabling this option can increase performance while recalculating panel size.<ko>모든 패널의 크기가 불변인지의 여부. 이 옵션을 'true'로 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.</ko>
    * @param {boolean} [options.renderExternal=false] Whether to use external rendering. It will delegate DOM manipulation and can synchronize the rendered state by calling `sync()` method. You can use this option to use in frameworks like React, Vue, Angular, which has its states and rendering methods.<ko>외부 렌더링을 사용할 지의 여부. 이 옵션을 사용시 렌더링을 외부에 위임할 수 있고, `sync()`를 호출하여 그 상태를 동기화할 수 있다. 이 옵션을 사용하여, React, Vue, Angular 등 자체적인 상태와 렌더링 방법을 갖는 프레임워크에 대응할 수 있다.</ko>
    * @param {boolean} [options.resizeOnContentsReady=false] Whether to resize the Flicking after the image/video elements inside viewport are ready.<br/>Use this property to prevent wrong Flicking layout caused by dynamic image / video sizes.<ko>Flicking 내부의 이미지 / 비디오 엘리먼트들이 전부 로드되었을 때 Flicking의 크기를 재계산하기 위한 옵션.<br/>이미지 / 비디오 크기가 고정 크기가 아닐 경우 사용하여 레이아웃이 잘못되는 것을 방지할 수 있다.</ko>
+   * @param {boolean} [options.useResizeObserver=true] Whether to listen {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}'s event instead of Window's {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} event when using the `autoResize` option<ko>autoResize 옵션 사용시 {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}의 이벤트를 Window객체의 {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} 이벤트 대신 수신할지 여부를 설정합니다</ko>
    * @param {boolean} [options.collectStatistics=true] Whether to collect statistics on how you are using `Flicking`. These statistical data do not contain any personal information and are used only as a basis for the development of a user-friendly product.<ko>어떻게 `Flicking`을 사용하고 있는지에 대한 통계 수집 여부를 나타낸다. 이 통계자료는 개인정보를 포함하고 있지 않으며 오직 사용자 친화적인 제품으로 발전시키기 위한 근거자료로서 활용한다.</ko>
    */
   constructor(
@@ -169,16 +171,10 @@ class Flicking extends Component<{
 
     // Make viewport instance with panel container element
     this.viewport = new Viewport(this, this.options, this.triggerEvent);
+    this.autoResizer = new AutoResizer(this);
+
     this.listenInput();
     this.listenResize();
-
-    // if (this.options.collectStatistics) {
-    //   sendEvent(
-    //     "usage",
-    //     "options",
-    //     options,
-    //   );
-    // }
   }
 
   /**
@@ -506,10 +502,7 @@ class Flicking extends Component<{
   public destroy(option: Partial<DestroyOption> = {}): void {
     this.off();
 
-    if (this.options.autoResize) {
-      window.removeEventListener("resize", this.resize);
-    }
-
+    this.autoResizer.disable();
     this.viewport.destroy(option);
     this.contentsReadyChecker?.destroy();
 
@@ -769,7 +762,10 @@ class Flicking extends Component<{
     }
     panelManager.replacePanels(newPanels, newClones);
 
-    if (!currentPanel && newPanels.length > 0) {
+    const currentPanelIndex = currentPanel?.getIndex() ?? -1;
+    const currentPanelIsRemoved = findIndex(removed, index => index === currentPanelIndex) >= 0;
+
+    if ((!currentPanel || currentPanelIsRemoved) && newPanels.length > 0) {
       viewport.setCurrentPanel(newPanels[0]);
     } else if (newPanels.length <= 0) {
       viewport.setCurrentPanel(undefined);
@@ -869,7 +865,7 @@ class Flicking extends Component<{
     const options = this.options;
 
     if (options.autoResize) {
-      window.addEventListener("resize", this.resize);
+      this.autoResizer.enable();
     }
 
     if (options.resizeOnContentsReady) {

package/src/components/AutoResizer.ts

@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../Flicking";
+
+class AutoResizer {
+  private flicking: Flicking;
+  private enabled: boolean;
+  private resizeObserver: ResizeObserver | null;
+
+  private skipFirstResize = (() => {
+    let isFirstResize = true;
+
+    return (() => {
+      if (isFirstResize) {
+        isFirstResize = false;
+        return;
+      }
+      this.onResize();
+    });
+  })();
+
+  public constructor(flicking: Flicking) {
+    this.flicking = flicking;
+    this.enabled = false;
+    this.resizeObserver = null;
+  }
+
+  public enable(): this {
+    const flicking = this.flicking;
+
+    if (this.enabled) {
+      this.disable();
+    }
+
+    if (flicking.options.useResizeObserver && !!window.ResizeObserver) {
+      const flickingEl = flicking.getElement();
+      const viewportSizeNot0 = flickingEl.clientWidth !== 0 || flickingEl.clientHeight !== 0;
+
+      const resizeObserver = viewportSizeNot0
+        ? new ResizeObserver(this.skipFirstResize)
+        : new ResizeObserver(this.onResize);
+
+      resizeObserver.observe(flickingEl);
+
+      this.resizeObserver = resizeObserver;
+    } else {
+      window.addEventListener("resize", this.onResize);
+    }
+
+    this.enabled = true;
+
+    return this;
+  }
+
+  public disable(): this {
+    if (!this.enabled) {
+      return this;
+    }
+
+    const resizeObserver = this.resizeObserver;
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      this.resizeObserver = null;
+    } else {
+      window.removeEventListener("resize", this.onResize);
+    }
+
+    this.enabled = false;
+
+    return this;
+  }
+
+  private onResize = () => {
+    this.flicking.resize();
+  }
+}
+
+export default AutoResizer;

package/src/components/Viewport.ts

@@ -394,6 +394,12 @@ export default class Viewport {
       this.panInput.destroy();
       this.panInput = null;
 
+      // Refresh Axes instance
+      this.axes.destroy();
+      this.setAxesInstance();
+      this.updateScrollArea();
+      this.updateAxesPosition(this.state.position);
+
       this.stateMachine.transitTo(STATE_TYPE.IDLE);
     }
   }
@@ -1089,6 +1095,7 @@ export default class Viewport {
     this.applyCSSValue();
     this.setMoveType();
     this.setAxesInstance();
+    this.createPanInput();
     this.refreshPanels();
     this.setDefaultPanel();
     this.resize();
@@ -1215,8 +1222,6 @@ export default class Viewport {
       deceleration: options.deceleration,
       interruptable: true,
     });
-
-    this.createPanInput();
   }
 
   private refreshPanels(): void {
@@ -1260,14 +1265,16 @@ 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;
@@ -1281,7 +1288,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;
@@ -1294,7 +1301,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

@@ -65,6 +65,7 @@ export const DEFAULT_OPTIONS: Readonly<FlickingOptions> = {
   resizeOnContentsReady: false,
   iOSEdgeSwipeThreshold: 30,
   collectStatistics: true,
+  useResizeObserver: true,
 };
 
 export const DEFAULT_VIEWPORT_CSS = {

package/src/types.ts

@@ -87,6 +87,7 @@ export interface FlickingOptions {
   iOSEdgeSwipeThreshold: number;
   resizeOnContentsReady: boolean;
   collectStatistics: boolean;
+  useResizeObserver: boolean;
 }
 
 export type MoveTypeObjectOption = MoveTypeSnapOption | MoveTypeFreeScrollOption;

package/src/utils.ts

@@ -169,7 +169,7 @@ export function getProgress(pos: number, range: number[]) {
 export function findIndex<T>(iterable: T[], callback: (el: T) => boolean): number {
   for (let i = 0; i < iterable.length; i += 1) {
     const element = iterable[i];
-    if (element && callback(element)) {
+    if (element != null && callback(element)) {
       return i;
     }
   }

package/tsconfig.test.json

@@ -9,6 +9,7 @@
     "types": [
       "karma-chai",
       "mocha",
+      "resize-observer-browser"
     ]
   },
   "include": [