@egjs/flicking 4.5.1 → 4.6.0

package/src/core/ResizeWatcher.ts

@@ -0,0 +1,133 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Component from "@egjs/component";
+
+import { isString } from "../utils";
+
+export interface ResizeWatherOptions {
+  resizeDebounce?: number;
+  maxResizeDebounce?: number;
+  useResizeObserver?: boolean;
+  useWindowResize?: boolean;
+  watchDirection?: "width" | "height" | "box" | false;
+  rectBox?: "border-box" | "content-box";
+}
+
+class ResizeWatcher {
+  private _container: HTMLElement;
+  private _rect = { width: 0, height: 0 };
+  private _resizeTimer = 0;
+  private _maxResizeDebounceTimer = 0;
+  private _emitter: Component<{ resize: void }>;
+  private _observer: ResizeObserver | null;
+  private _options!: Required<ResizeWatherOptions>;
+
+  public constructor(container: HTMLElement | string, options: ResizeWatherOptions = {}) {
+    this._options = {
+      resizeDebounce: 100,
+      maxResizeDebounce: 0,
+      useResizeObserver: false,
+      useWindowResize: true,
+      watchDirection: false,
+      rectBox: "content-box",
+      ...options
+    };
+
+    this._container = isString(container) ? document.querySelector<HTMLElement>(container)! : container;
+    this._init();
+  }
+
+  public getRect() {
+    return this._rect;
+  }
+
+  public setRect(rect: { width: number; height: number }) {
+    this._rect = { ...rect };
+  }
+
+  public resize() {
+    const container = this._container;
+
+    this.setRect(this._options.rectBox === "border-box" ? {
+      width: container.offsetWidth,
+      height: container.offsetHeight
+    } : {
+      width: container.clientWidth,
+      height: container.clientHeight
+    });
+  }
+
+  public listen(callback: () => void) {
+    this._emitter.on("resize", callback);
+    return this;
+  }
+
+  public destroy() {
+    this._observer?.disconnect();
+    if (this._options.useWindowResize) {
+      window.removeEventListener("reisze", this._onResize);
+    }
+  }
+
+  private _init() {
+    const container = this._container;
+    const options = this._options;
+
+    this._emitter = new Component();
+    if (options.useResizeObserver && !!window.ResizeObserver) {
+      this._observer = new window.ResizeObserver(this._scheduleResize);
+      this._observer.observe(container, {
+        box: options.rectBox
+      });
+    }
+    if (options.useWindowResize) {
+      window.addEventListener("resize", this._scheduleResize);
+    }
+    this.resize();
+  }
+
+  private _onResize = () => {
+    clearTimeout(this._resizeTimer);
+    clearTimeout(this._maxResizeDebounceTimer);
+
+    this._maxResizeDebounceTimer = 0;
+    this._resizeTimer = 0;
+
+    const watchDirection = this._options.watchDirection;
+    const prevRect = this._rect;
+    this.resize();
+    const rect = this._rect;
+    const isWatchWidth = watchDirection === "box" || watchDirection === "width";
+    const isWatchHeight = watchDirection === "box" || watchDirection === "height";
+    const isResize = !watchDirection
+      || (isWatchWidth && prevRect.width !== rect.width)
+      || (isWatchHeight && prevRect.height !== rect.height);
+
+    if (isResize) {
+      this._emitter.trigger("resize");
+    }
+  };
+
+  private _scheduleResize = () => {
+    const {
+      resizeDebounce,
+      maxResizeDebounce
+    } = this._options;
+
+
+    if (!this._maxResizeDebounceTimer && maxResizeDebounce >= resizeDebounce) {
+      this._maxResizeDebounceTimer = window.setTimeout(this._onResize, maxResizeDebounce);
+    }
+
+    if (this._resizeTimer) {
+      clearTimeout(this._resizeTimer);
+      this._resizeTimer = 0;
+    }
+
+    this._resizeTimer = window.setTimeout(this._onResize, resizeDebounce);
+  };
+}
+
+export default ResizeWatcher;

package/src/renderer/Renderer.ts

@@ -27,6 +27,7 @@ abstract class Renderer {
   // Internal States
   protected _flicking: Flicking | null;
   protected _panels: Panel[];
+  protected _rendering: boolean;
 
   // Options
   protected _align: NonNullable<RendererOptions["align"]>;
@@ -41,6 +42,14 @@ abstract class Renderer {
    * @see Panel
    */
   public get panels() { return this._panels; }
+  /**
+   * A boolean value indicating whether rendering is in progress
+   * @ko 현재 렌더링이 시작되어 끝나기 전까지의 상태인지의 여부
+   * @type {boolean}
+   * @readonly
+   * @internal
+   */
+  public get rendering() { return this._rendering; }
   /**
    * Count of panels
    * @ko 전체 패널의 개수
@@ -80,6 +89,7 @@ abstract class Renderer {
   }: RendererOptions) {
     this._flicking = null;
     this._panels = [];
+    this._rendering = false;
 
     // Bind options
     this._align = align;
@@ -182,10 +192,28 @@ abstract class Renderer {
     elements: any[];
     hasDOMInElements: boolean;
   }>): Panel[] {
+    const allPanelsInserted = this.batchInsertDefer(...items);
+
+    if (allPanelsInserted.length <= 0) return [];
+
+    this.updateAfterPanelChange(allPanelsInserted, []);
+
+    return allPanelsInserted;
+  }
+
+  /**
+   * Defers update
+   * camera position & others will be updated after calling updateAfterPanelChange
+   * @internal
+   */
+  public batchInsertDefer(...items: Array<{
+    index: number;
+    elements: any[];
+    hasDOMInElements: boolean;
+  }>) {
     const panels = this._panels;
     const flicking = getFlickingAttached(this._flicking);
 
-    const { control } = flicking;
     const prevFirstPanel = panels[0];
     const align = parsePanelAlign(this._align);
 
@@ -219,30 +247,6 @@ abstract class Renderer {
       return [...addedPanels, ...panelsInserted];
     }, []);
 
-    if (allPanelsInserted.length <= 0) return [];
-
-    // Update camera & control
-    this._updateCameraAndControl();
-
-    void this.render();
-
-    // Move to the first panel added if no panels existed
-    // FIXME: fix for animating case
-    if (allPanelsInserted.length > 0 && !control.animating) {
-      void control.moveToPanel(control.activePanel || allPanelsInserted[0], {
-        duration: 0
-      }).catch(() => void 0);
-    }
-
-    flicking.camera.updateOffset();
-
-    flicking.trigger(new ComponentEvent(EVENTS.PANEL_CHANGE, {
-      added: allPanelsInserted,
-      removed: []
-    }));
-
-    this.checkPanelContentsReady(allPanelsInserted);
-
     return allPanelsInserted;
   }
 
@@ -257,13 +261,35 @@ abstract class Renderer {
    * @param {boolean} [items.hasDOMInElements=1] Whether it contains actual DOM elements. If set to true, renderer will remove them from the camera element<ko>내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에서 제거합니다</ko>
    * @return An array of removed panels<ko>제거된 패널들의 배열</ko>
    */
-  public batchRemove(...items: Array<{ index: number; deleteCount: number; hasDOMInElements: boolean }>): Panel[] {
+  public batchRemove(...items: Array<{
+    index: number;
+    deleteCount: number;
+    hasDOMInElements: boolean;
+  }>): Panel[] {
+    const allPanelsRemoved = this.batchRemoveDefer(...items);
+
+    if (allPanelsRemoved.length <= 0) return [];
+
+    this.updateAfterPanelChange([], allPanelsRemoved);
+
+    return allPanelsRemoved;
+  }
+
+  /**
+   * Defers update
+   * camera position & others will be updated after calling updateAfterPanelChange
+   * @internal
+   */
+  public batchRemoveDefer(...items: Array<{
+    index: number;
+    deleteCount: number;
+    hasDOMInElements: boolean;
+  }>) {
     const panels = this._panels;
     const flicking = getFlickingAttached(this._flicking);
 
-    const { camera, control } = flicking;
+    const { control } = flicking;
     const activePanel = control.activePanel;
-    const activeIndex = control.activeIndex;
 
     const allPanelsRemoved = items.reduce((removed, item) => {
       const { index, deleteCount } = item;
@@ -294,35 +320,56 @@ abstract class Renderer {
       return [...removed, ...panelsRemoved];
     }, []);
 
+    return allPanelsRemoved;
+  }
+
+  /**
+   * @internal
+   */
+  public updateAfterPanelChange(panelsAdded: Panel[], panelsRemoved: Panel[]) {
+    const flicking = getFlickingAttached(this._flicking);
+    const { camera, control } = flicking;
+    const panels = this._panels;
+    const activePanel = control.activePanel;
+
     // Update camera & control
     this._updateCameraAndControl();
 
     void this.render();
 
-    // FIXME: fix for animating case
-    if (allPanelsRemoved.length > 0 && !control.animating) {
-      const targetPanel = includes(allPanelsRemoved, activePanel)
-        ? (panels[activeIndex] || panels[panels.length - 1])
-        : activePanel;
+    if (!activePanel || activePanel.removed) {
+      if (panels.length <= 0) {
+        // All panels removed
+        camera.lookAt(0);
+      } else {
+        let targetIndex = activePanel?.index ?? 0;
+        if (targetIndex > panels.length - 1) {
+          targetIndex = panels.length - 1;
+        }
 
-      if (targetPanel) {
-        void control.moveToPanel(targetPanel, {
+        void control.moveToPanel(panels[targetIndex], {
           duration: 0
         }).catch(() => void 0);
-      } else {
-        // All panels removed
-        camera.lookAt(0);
       }
+    } else {
+      void control.moveToPanel(control.activePanel!, {
+        duration: 0
+      }).catch(() => void 0);
     }
 
     flicking.camera.updateOffset();
 
-    flicking.trigger(new ComponentEvent(EVENTS.PANEL_CHANGE, {
-      added: [],
-      removed: allPanelsRemoved
-    }));
+    if (panelsAdded.length > 0 || panelsRemoved.length > 0) {
+      flicking.trigger(new ComponentEvent(EVENTS.PANEL_CHANGE, {
+        added: panelsAdded,
+        removed: panelsRemoved
+      }));
 
-    return allPanelsRemoved;
+      this.checkPanelContentsReady([
+        ...panelsAdded,
+        ...panelsRemoved
+      ]);
+    }
   }
 
   /**
@@ -367,6 +414,7 @@ abstract class Renderer {
       if (!flicking.initialized) return;
 
       camera.updateRange();
+      camera.updateOffset();
       camera.updateAnchors();
 
       if (control.animating) {
@@ -402,6 +450,7 @@ abstract class Renderer {
     const { camera, control } = flicking;
 
     camera.updateRange();
+    camera.updateOffset();
     camera.updateAnchors();
     camera.resetNeedPanelHistory();
     control.updateInput();

package/css/flicking.css

@@ -1,28 +0,0 @@
-.flicking-viewport {
-  position: relative;
-  overflow: hidden;
-}
-
-.flicking-camera {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: relative;
-  flex-direction: row;
-  z-index: 1;
-}
-.flicking-camera>* {
-  flex-shrink: 0;
-}
-
-.flicking-viewport.vertical {
-  display: inline-flex;
-}
-.flicking-viewport.vertical>.flicking-camera {
-  display: inline-flex;
-  flex-direction: column;
-}
-
-.flicking-viewport.flicking-hidden .flicking-camera > * {
-  visibility: hidden;
-}

package/dist/flicking-inline.css

@@ -1,2 +0,0 @@
-.flicking-viewport{position:relative;overflow:hidden}.flicking-viewport:not(.vertical){width:100%;height:100%}.flicking-camera{width:100%;height:100%;position:relative;z-index:1;white-space:nowrap;will-change:transform}.flicking-camera>*{display:inline-block;white-space:normal;vertical-align:top}.flicking-viewport.vertical,.flicking-viewport.vertical>.flicking-camera{display:inline-block}.flicking-viewport.vertical.middle>.flicking-camera>*{vertical-align:middle}.flicking-viewport.vertical.bottom>.flicking-camera>*{vertical-align:bottom}.flicking-viewport.vertical>.flicking-camera>*{display:block}.flicking-viewport.flicking-hidden>.flicking-camera>*{visibility:hidden}
-/*# sourceMappingURL=flicking-inline.css.map */

package/dist/flicking-inline.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["<input css 1>"],"names":[],"mappings":"AAAA,mBAAmB,iBAAiB,CAAC,eAAe,CAAC,kCAAkC,UAAU,CAAC,WAAW,CAAC,iBAAiB,UAAU,CAAC,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,mBAAmB,oBAAoB,CAAC,kBAAkB,CAAC,kBAAkB,CAAC,yEAAyE,oBAAoB,CAAC,sDAAsD,qBAAqB,CAAC,sDAAsD,qBAAqB,CAAC,+CAA+C,aAAa,CAAC,sDAAsD,iBAAiB","file":"flicking-inline.css","sourcesContent":[".flicking-viewport{position:relative;overflow:hidden}.flicking-viewport:not(.vertical){width:100%;height:100%}.flicking-camera{width:100%;height:100%;position:relative;z-index:1;white-space:nowrap;will-change:transform}.flicking-camera>*{display:inline-block;white-space:normal;vertical-align:top}.flicking-viewport.vertical,.flicking-viewport.vertical>.flicking-camera{display:inline-block}.flicking-viewport.vertical.middle>.flicking-camera>*{vertical-align:middle}.flicking-viewport.vertical.bottom>.flicking-camera>*{vertical-align:bottom}.flicking-viewport.vertical>.flicking-camera>*{display:block}.flicking-viewport.flicking-hidden>.flicking-camera>*{visibility:hidden}"]}

package/dist/flicking.css

@@ -1,2 +0,0 @@
-.flicking-viewport{position:relative;overflow: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}.flicking-camera>*{-ms-flex-negative:0;flex-shrink:0}.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}
-/*# sourceMappingURL=flicking.css.map */

package/dist/flicking.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["<input css 2>"],"names":[],"mappings":"AAAA,mBAAmB,iBAAiB,CAAC,eAAe,CAAC,iBAAiB,UAAU,CAAC,WAAW,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,YAAY,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,4BAA4B,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,SAAS,CAAC,mBAAmB,mBAAmB,CAAC,aAAa,CAAC,4BAA4B,0BAA0B,CAAC,0BAA0B,CAAC,mBAAmB,CAAC,6CAA6C,0BAA0B,CAAC,0BAA0B,CAAC,mBAAmB,CAAC,2BAA2B,CAAC,4BAA4B,CAAC,yBAAyB,CAAC,qBAAqB,CAAC,sDAAsD,iBAAiB","file":"flicking.css","sourcesContent":[".flicking-viewport{position:relative;overflow: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}.flicking-camera>*{-ms-flex-negative:0;flex-shrink:0}.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}"]}