@egjs/flicking 4.5.1 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.5.1",
+	"version": "4.6.0",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -9,7 +9,14 @@
 	"types": "declaration/index.d.ts",
 	"scripts": {
 		"start": "concurrently \"rollup -w --config ./rollup.config.dev.js\" \"http-serve\"",
-		"build": "rm -rf ./dist ./declaration && rollup -c && npm run declaration && npm run css && npm run printsizes",
+		"build": "run-s build:bundle build:declaration build:css printsizes",
+		"build:bundle": "rm -rf ./dist && rollup -c",
+		"build:declaration": "rm -rf ./declaration && tsc -p tsconfig.declaration.json",
+		"build:css": "run-s build:css-clear build:sass build:css-prefix build:css-min",
+		"build:css-clear": "rm -rf ./dist/css",
+		"build:sass": "node-sass sass/ -o dist/css/ -x --output-style expanded",
+		"build:css-prefix": "postcss dist/css/*.css --replace --use autoprefixer --no-map",
+		"build:css-min": "postcss dist/css/*.css --ext .min.css --use postcss-clean -d dist/css/ --no-map",
 		"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
 		"css": "postcss css/*.css --use autoprefixer postcss-clean -d dist/ -m",
 		"printsizes": "print-sizes ./dist --exclude=\\.map",
@@ -83,7 +90,7 @@
 		"@typescript-eslint/eslint-plugin": "^4.18.0",
 		"@typescript-eslint/eslint-plugin-tslint": "^4.18.0",
 		"@typescript-eslint/parser": "^4.18.0",
-		"autoprefixer": "^9.8.5",
+		"autoprefixer": "^9.8.8",
 		"babel-loader": "^8.2.2",
 		"babel-preset-env": "^1.7.0",
 		"concurrently": "^6.0.0",
@@ -103,8 +110,10 @@
 		"husky": "^1.3.1",
 		"jsdoc-to-mdx": "^1.0.5",
 		"karma-typescript-es6-transform": "^5.5.2",
+		"node-sass": "^7.0.1",
+		"npm-run-all": "^4.1.5",
 		"postcss-clean": "^1.2.2",
-		"postcss-cli": "^7.1.1",
+		"postcss-cli": "^7.1.2",
 		"print-coveralls": "^1.2.2",
 		"print-sizes": "0.0.3",
 		"pvu": "^0.6.1",

package/sass/flicking-inline.sass

@@ -0,0 +1,30 @@
+.flicking-viewport
+  position: relative
+  overflow: hidden
+  &:not(.vertical)
+    width: 100%
+    height: 100%
+  &.vertical,
+  &.vertical>.flicking-camera
+    display: inline-block
+  &.vertical
+    &.middle>.flicking-camera>*
+      vertical-align: middle
+    &.bottom>.flicking-camera>*
+      vertical-align: bottom
+    >.flicking-camera>*
+      display: block
+  &.flicking-hidden>.flicking-camera>*
+    visibility: hidden
+
+.flicking-camera
+  width: 100%
+  height: 100%
+  position: relative
+  z-index: 1
+  white-space: nowrap
+  will-change: transform
+  >*
+    display: inline-block
+    white-space: normal
+    vertical-align: top

package/sass/flicking.sass

@@ -0,0 +1,23 @@
+.flicking-viewport
+  position: relative
+  overflow: hidden
+  &.vertical
+    display: inline-flex
+    >.flicking-camera
+      display: inline-flex
+      flex-direction: column
+  &.flicking-hidden
+    >.flicking-camera
+      >*
+        visibility: hidden
+
+.flicking-camera
+  width: 100%
+  height: 100%
+  display: flex
+  position: relative
+  flex-direction: row
+  z-index: 1
+  will-change: transform
+  >*
+    flex-shrink: 0

package/src/Flicking.ts

@@ -58,13 +58,16 @@ export interface FlickingOptions {
   panelsPerView: number;
   noPanelStyleOverride: boolean;
   resizeOnContentsReady: boolean;
+
   // EVENT
   needPanelThreshold: number;
   preventEventsBeforeInit: boolean;
+
   // ANIMATION
   deceleration: number;
   duration: number;
   easing: (x: number) => number;
+
   // INPUT
   inputType: string[];
   moveType: ValueOf<typeof MOVE_TYPE> | MoveTypeOptions<ValueOf<typeof MOVE_TYPE>>;
@@ -74,14 +77,19 @@ export interface FlickingOptions {
   iOSEdgeSwipeThreshold: number;
   preventClickOnDrag: boolean;
   disableOnInit: boolean;
+
   // PERFORMANCE
   renderOnlyVisible: boolean;
   virtual: VirtualOptions | null;
+
   // OTHERS
   autoInit: boolean;
   autoResize: boolean;
   useResizeObserver: boolean;
+  resizeDebounce: number;
+  maxResizeDebounce: number;
   externalRenderer: ExternalRenderer | null;
+
   // @deprecated
   renderExternal: {
     renderer: new (options: RendererOptions) => ExternalRenderer;
@@ -150,6 +158,8 @@ class Flicking extends Component<FlickingEvents> {
   private _autoInit: FlickingOptions["autoInit"];
   private _autoResize: FlickingOptions["autoResize"];
   private _useResizeObserver: FlickingOptions["useResizeObserver"];
+  private _resizeDebounce: FlickingOptions["resizeDebounce"];
+  private _maxResizeDebounce: FlickingOptions["maxResizeDebounce"];
   private _externalRenderer: FlickingOptions["externalRenderer"];
   private _renderExternal: FlickingOptions["renderExternal"];
 
@@ -613,6 +623,26 @@ class Flicking extends Component<FlickingEvents> {
    * @default true
    */
   public get useResizeObserver() { return this._useResizeObserver; }
+  /**
+   * Delays size recalculation from `autoResize` by the given time in milisecond.
+   * If the size is changed again while being delayed, it cancels the previous one and delays from the beginning again.
+   * This can increase performance by preventing `resize` being called too often.
+   * @ko `autoResize` 설정시에 호출되는 크기 재계산을 주어진 시간(단위: ms)만큼 지연시킵니다.
+   * 지연시키는 도중 크기가 다시 변경되었을 경우, 이전 것을 취소하고 주어진 시간만큼 다시 지연시킵니다.
+   * 이를 통해 `resize`가 너무 많이 호출되는 것을 방지하여 성능을 향상시킬 수 있습니다.
+   * @type {number}
+   * @default 0
+   */
+  public get resizeDebounce() { return this._resizeDebounce; }
+  /**
+   * The maximum time for size recalculation delay when using `resizeDebounce`, in milisecond.
+   * This guarantees that size recalculation is performed at least once every (n)ms.
+   * @ko `resizeDebounce` 사용시에 크기 재계산이 지연되는 최대 시간을 지정합니다. (단위: ms)
+   * 이를 통해, 적어도 (n)ms에 한번은 크기 재계산을 수행하는 것을 보장할 수 있습니다.
+   * @type {number}
+   * @default 100
+   */
+  public get maxResizeDebounce() { return this._maxResizeDebounce; }
   /**
    * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
    * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
@@ -756,6 +786,8 @@ class Flicking extends Component<FlickingEvents> {
     autoInit = true,
     autoResize = true,
     useResizeObserver = true,
+    resizeDebounce = 0,
+    maxResizeDebounce = 100,
     externalRenderer = null,
     renderExternal = null
   }: Partial<FlickingOptions> = {}) {
@@ -794,6 +826,8 @@ class Flicking extends Component<FlickingEvents> {
     this._autoInit = autoInit;
     this._autoResize = autoResize;
     this._useResizeObserver = useResizeObserver;
+    this._resizeDebounce = resizeDebounce;
+    this._maxResizeDebounce = maxResizeDebounce;
     this._externalRenderer = externalRenderer;
     this._renderExternal = renderExternal;
 
@@ -816,10 +850,10 @@ class Flicking extends Component<FlickingEvents> {
    * @ko Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
    * 이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
    * @fires Flicking#ready
-   * @return {this}
+   * @return {Promise<void>}
    */
-  public async init(): Promise<void> {
-    if (this._initialized) return;
+  public init(): Promise<void> {
+    if (this._initialized) return Promise.resolve();
 
     const camera = this._camera;
     const renderer = this._renderer;
@@ -828,7 +862,7 @@ class Flicking extends Component<FlickingEvents> {
     const originalTrigger = this.trigger;
     const preventEventsBeforeInit = this._preventEventsBeforeInit;
 
-    camera.init(this);
+    camera.init();
     virtualManager.init();
     renderer.init(this);
     control.init(this);
@@ -837,10 +871,10 @@ class Flicking extends Component<FlickingEvents> {
       this.trigger = () => this;
     }
 
-    await this.resize();
+    this._initialResize();
 
     // Look at initial panel
-    await this._moveToInitialPanel();
+    this._moveToInitialPanel();
 
     if (this._autoResize) {
       this._autoResizer.enable();
@@ -853,16 +887,15 @@ class Flicking extends Component<FlickingEvents> {
     }
     renderer.checkPanelContentsReady(renderer.panels);
 
-    this._plugins.forEach(plugin => plugin.init(this));
-
-    // Done initializing & emit ready event
-    this._initialized = true;
-    if (preventEventsBeforeInit) {
-      this.trigger = originalTrigger;
-    }
-    this.trigger(new ComponentEvent(EVENTS.READY));
-
-    return;
+    return renderer.render().then(() => {
+      // Done initializing & emit ready event
+      this._plugins.forEach(plugin => plugin.init(this));
+      this._initialized = true;
+      if (preventEventsBeforeInit) {
+        this.trigger = originalTrigger;
+      }
+      this.trigger(new ComponentEvent(EVENTS.READY));
+    });
   }
 
   /**
@@ -1379,7 +1412,7 @@ class Flicking extends Component<FlickingEvents> {
       console.warn("\"circular\" and \"bound\" option cannot be used together, ignoring bound.");
     }
 
-    return new Camera({
+    return new Camera(this, {
       align: this._align
     });
   }
@@ -1420,18 +1453,66 @@ class Flicking extends Component<FlickingEvents> {
     });
   }
 
-  private async _moveToInitialPanel(): Promise<void> {
+  private _moveToInitialPanel(): void {
     const renderer = this._renderer;
     const control = this._control;
+    const camera = this._camera;
     const initialPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
 
     if (!initialPanel) return;
 
+    const nearestAnchor = camera.findNearestAnchor(initialPanel.position);
     control.setActive(initialPanel, null, false);
 
-    return control.moveToPanel(initialPanel, {
-      duration: 0
-    });
+    if (!nearestAnchor) {
+      throw new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(initialPanel.position), ERROR.CODE.POSITION_NOT_REACHABLE);
+    }
+
+    let position = initialPanel.position;
+
+    if (!camera.canReach(initialPanel)) {
+      position = nearestAnchor.position;
+    }
+
+    camera.lookAt(position);
+    control.updateInput();
+    camera.updateOffset();
+  }
+
+  private _initialResize() {
+    const viewport = this._viewport;
+    const renderer = this._renderer;
+    const camera = this._camera;
+    const control = this._control;
+
+    this.trigger(new ComponentEvent(EVENTS.BEFORE_RESIZE, {
+      width: 0,
+      height: 0,
+      element: viewport.element
+    }));
+
+    viewport.resize();
+    renderer.updatePanelSize();
+    camera.updateAlignPos();
+    camera.updateRange();
+    camera.updateAnchors();
+    camera.updateOffset();
+    control.updateInput();
+
+    const newWidth = viewport.width;
+    const newHeight = viewport.height;
+    const sizeChanged = newWidth !== 0 || newHeight !== 0;
+
+    this.trigger(new ComponentEvent(EVENTS.AFTER_RESIZE, {
+      width: viewport.width,
+      height: viewport.height,
+      prev: {
+        width: 0,
+        height: 0
+      },
+      sizeChanged,
+      element: viewport.element
+    }));
   }
 }
 

package/src/camera/Camera.ts

@@ -27,7 +27,7 @@ class Camera {
   private _align: FlickingOptions["align"];
 
   // Internal states
-  private _flicking: Flicking | null;
+  private _flicking: Flicking;
   private _mode: CameraMode;
   private _el: HTMLElement;
   private _transform: string;
@@ -231,10 +231,10 @@ class Camera {
   }
 
   /** */
-  public constructor({
+  public constructor(flicking: Flicking, {
     align = ALIGN.CENTER
   }: Partial<CameraOptions> = {}) {
-    this._flicking = null;
+    this._flicking = flicking;
     this._resetInternalValues();
 
     // Options
@@ -244,17 +244,13 @@ class Camera {
   /**
    * Initialize Camera
    * @ko Camera를 초기화합니다
-   * @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
-   * @chainable
    * @throws {FlickingError}
    * {@link ERROR_CODE VAL_MUST_NOT_NULL} If the camera element(`.flicking-camera`) does not exist inside viewport element
    * <ko>{@link ERROR_CODE VAL_MUST_NOT_NULL} 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우</ko>
    * @return {this}
    */
-  public init(flicking: Flicking): this {
-    this._flicking = flicking;
-
-    const viewportEl = flicking.viewport.element;
+  public init(): this {
+    const viewportEl = this._flicking.viewport.element;
 
     checkExistence(viewportEl.firstElementChild, "First element child of the viewport element");
     this._el = viewportEl.firstElementChild as HTMLElement;
@@ -271,7 +267,6 @@ class Camera {
    * @return {void}
    */
   public destroy(): this {
-    this._flicking = null;
     this._resetInternalValues();
     return this;
   }
@@ -294,12 +289,13 @@ class Camera {
     this._refreshVisiblePanels();
     this._checkNeedPanel();
     this._checkReachEnd(prevPos, pos);
-    this.applyTransform();
 
     if (toggled) {
       void flicking.renderer.render().then(() => {
         this.updateOffset();
       });
+    } else {
+      this.applyTransform();
     }
   }
 
@@ -476,8 +472,6 @@ class Camera {
       panels.forEach(panel => panel.updateCircularToggleDirection());
     }
 
-    this.updateOffset();
-
     return this;
   }
 
@@ -570,12 +564,14 @@ class Camera {
   /**
    * Apply "transform" style with the current position to camera element
    * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
-   * @chainable
    * @return {this}
    */
   public applyTransform(): this {
     const el = this._el;
     const flicking = getFlickingAttached(this._flicking);
+    const renderer = flicking.renderer;
+
+    if (renderer.rendering) return this;
 
     const actualPosition = this._position - this._alignPos - this._offset + this._circularOffset;
 

package/src/cfc/sync.ts

@@ -2,12 +2,16 @@ import { DiffResult } from "@egjs/list-differ";
 
 import Flicking from "../Flicking";
 import Renderer from "../renderer/Renderer";
+import Panel from "../core/panel/Panel";
 
 export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]) => {
   const renderer = flicking.renderer;
   const panels = renderer.panels;
   const prevList = [...diffResult.prevList];
 
+  const added: Panel[] = [];
+  const removed: Panel[] = [];
+
   if (diffResult.removed.length > 0) {
     let endIdx = -1;
     let prevIdx = -1;
@@ -18,7 +22,7 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
       }
 
       if (prevIdx >= 0 && removedIdx !== prevIdx - 1) {
-        batchRemove(renderer, prevIdx, endIdx + 1);
+        removed.push(...batchRemove(renderer, prevIdx, endIdx + 1));
 
         endIdx = removedIdx;
         prevIdx = removedIdx;
@@ -29,30 +33,30 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
       prevList.splice(removedIdx, 1);
     });
 
-    batchRemove(renderer, prevIdx, endIdx + 1);
+    removed.push(...batchRemove(renderer, prevIdx, endIdx + 1));
   }
 
-  diffResult.ordered.forEach(([prevIdx, newIdx]) => {
-    const prevPanel = panels[prevIdx];
-    const indexDiff = newIdx - prevIdx;
-
-    if (indexDiff > 0) {
-      const middlePanels = panels.slice(prevIdx + 1, newIdx + 1);
-
-      prevPanel.increaseIndex(indexDiff);
-      middlePanels.forEach(panel => panel.decreaseIndex(1));
-    } else {
-      const middlePanels = panels.slice(newIdx, prevIdx);
-
-      prevPanel.decreaseIndex(-indexDiff);
-      middlePanels.forEach(panel => panel.increaseIndex(1));
-    }
-    // Update position
-    prevPanel.resize();
+  diffResult.ordered.forEach(([from, to]) => {
+    const prevPanel = panels.splice(from, 1)[0];
+    panels.splice(to, 0, prevPanel);
   });
 
   if (diffResult.ordered.length > 0) {
+    panels.forEach((panel, idx) => {
+      const indexDiff = idx - panel.index;
+
+      if (indexDiff > 0) {
+        panel.increaseIndex(indexDiff);
+      } else {
+        panel.decreaseIndex(-indexDiff);
+      }
+    });
+
     panels.sort((panel1, panel2) => panel1.index - panel2.index);
+
+    panels.forEach(panel => {
+      panel.updatePosition();
+    });
   }
 
   if (diffResult.added.length > 0) {
@@ -67,7 +71,7 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
       }
 
       if (prevIdx >= 0 && addedIdx !== prevIdx + 1) {
-        batchInsert(renderer, diffResult, addedElements, startIdx, idx + 1);
+        added.push(...batchInsert(renderer, diffResult, addedElements, startIdx, idx + 1));
 
         startIdx = -1;
         prevIdx = -1;
@@ -77,13 +81,15 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
     });
 
     if (startIdx >= 0) {
-      batchInsert(renderer, diffResult, addedElements, startIdx);
+      added.push(...batchInsert(renderer, diffResult, addedElements, startIdx));
     }
   }
+
+  renderer.updateAfterPanelChange(added, removed);
 };
 
 const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, addedElements: any[], startIdx: number, endIdx?: number) => {
-  renderer.batchInsert(
+  return renderer.batchInsertDefer(
     ...diffResult.added.slice(startIdx, endIdx).map((index, elIdx) => ({ index, elements: [addedElements[elIdx]], hasDOMInElements: false }))
   );
 };
@@ -91,6 +97,6 @@ const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, addedEleme
 const batchRemove = (renderer: Renderer, startIdx: number, endIdx?: number) => {
   const removed = renderer.panels.slice(startIdx, endIdx);
 
-  renderer.batchRemove({ index: startIdx, deleteCount: removed.length, hasDOMInElements: false });
+  return renderer.batchRemoveDefer({ index: startIdx, deleteCount: removed.length, hasDOMInElements: false });
 };
 

package/src/cfc/withFlickingMethods.ts

@@ -19,7 +19,7 @@ import Flicking from "../Flicking";
  */
 const withFlickingMethods = (prototype: any, flickingName: string) => {
   [Component.prototype, Flicking.prototype].forEach(proto => {
-    Object.getOwnPropertyNames(proto).filter(name => !prototype[name] && !name.startsWith("_") && name !== "constructor")
+    Object.getOwnPropertyNames(proto).filter(name => !prototype[name] && name.indexOf("_") !== 0 && name !== "constructor")
       .forEach((name: string) => {
         const descriptor = Object.getOwnPropertyDescriptor(proto, name)!;
 

package/src/core/AutoResizer.ts

@@ -8,6 +8,8 @@ class AutoResizer {
   private _flicking: Flicking;
   private _enabled: boolean;
   private _resizeObserver: ResizeObserver | null;
+  private _resizeTimer: number;
+  private _maxResizeDebounceTimer: number;
 
   public get enabled() { return this._enabled; }
 
@@ -15,6 +17,8 @@ class AutoResizer {
     this._flicking = flicking;
     this._enabled = false;
     this._resizeObserver = null;
+    this._resizeTimer = -1;
+    this._maxResizeDebounceTimer = -1;
   }
 
   public enable(): this {
@@ -61,6 +65,35 @@ class AutoResizer {
   }
 
   private _onResize = () => {
+    const flicking = this._flicking;
+    const resizeDebounce = flicking.resizeDebounce;
+    const maxResizeDebounce = flicking.maxResizeDebounce;
+
+    if (resizeDebounce <= 0) {
+      void flicking.resize();
+    } else {
+      if (this._maxResizeDebounceTimer <= 0) {
+        if (maxResizeDebounce > 0 && maxResizeDebounce >= resizeDebounce) {
+          this._maxResizeDebounceTimer = window.setTimeout(this._doScheduledResize, maxResizeDebounce);
+        }
+      }
+
+      if (this._resizeTimer > 0) {
+        clearTimeout(this._resizeTimer);
+        this._resizeTimer = 0;
+      }
+
+      this._resizeTimer = window.setTimeout(this._doScheduledResize, resizeDebounce);
+    }
+  };
+
+  private _doScheduledResize = () => {
+    clearTimeout(this._resizeTimer);
+    clearTimeout(this._maxResizeDebounceTimer);
+
+    this._maxResizeDebounceTimer = -1;
+    this._resizeTimer = -1;
+
     void this._flicking.resize();
   };