@egjs/flicking 4.4.2 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.4.2",
+	"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",
@@ -22,7 +29,7 @@
 		"jsdoc:watch": "npm-watch jsdoc",
 		"docs:build": "jsdoc-to-mdx -c ./jsdoc-to-mdx.json",
 		"docs:version": "node ./config/docs-version-up",
-		"docs:release": "npm run docs:build && npm run docs:version && cd docs && npm run build && cd ..",
+		"docs:release": "npm run docs:build && npm run docs:version && npm run build --prefix docs",
 		"demo:prebuild-version": "cpx 'dist/**/*' docs/build/release/$npm_package_version/dist --clean",
 		"demo:prebuild-latest": "cpx 'dist/**/*' docs/build/release/latest/dist --clean",
 		"demo:deploy": "npm run docs:release && npm run build && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d docs/build/ --add --remote upstream",
@@ -79,10 +86,11 @@
 		"@rollup/plugin-replace": "^2.4.1",
 		"@types/fs-extra": "^9.0.11",
 		"@types/node": "^14.14.35",
+		"@types/resize-observer-browser": "^0.1.6",
 		"@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",
@@ -102,11 +110,13 @@
 		"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.4.1",
+		"pvu": "^0.6.1",
 		"rollup": "^2.41.5",
 		"rollup-plugin-livereload": "^1.3.0",
 		"rollup-plugin-postcss": "^3.1.3",
@@ -121,7 +131,7 @@
 		"tslib": "^2.1.0",
 		"tslint": "^5.12.1",
 		"ttypescript": "^1.5.12",
-		"typescript": "^4.2.3",
+		"typescript": "^3.9.10",
 		"typescript-transform-paths": "^2.2.3"
 	},
 	"dependencies": {

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

@@ -11,9 +11,9 @@ import { Panel } from "./core/panel";
 import { VanillaElementProvider } from "./core/panel/provider";
 import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
 import { Control, SnapControl, SnapControlOptions, FreeControl, StrictControl, FreeControlOptions, StrictControlOptions } from "./control";
-import { BoundCamera, Camera, CircularCamera, LinearCamera } from "./camera";
+import { Camera } from "./camera";
 import { Renderer, VanillaRenderer, ExternalRenderer, RendererOptions, NormalRenderingStrategy, VirtualRenderingStrategy } from "./renderer";
-import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION } from "./const/external";
+import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION, CIRCULAR_FALLBACK } from "./const/external";
 import * as ERROR from "./const/error";
 import { findIndex, getElement, includes, parseElement } from "./utils";
 import { HoldStartEvent, HoldEndEvent, MoveStartEvent, SelectEvent, MoveEvent, MoveEndEvent, WillChangeEvent, WillRestoreEvent, NeedPanelEvent, VisibleChangeEvent, ReachEdgeEvent, ReadyEvent, AfterResizeEvent, BeforeResizeEvent, ChangedEvent, RestoredEvent, PanelChangeEvent } from "./type/event";
@@ -52,18 +52,22 @@ export interface FlickingOptions {
   defaultIndex: number;
   horizontal: boolean;
   circular: boolean;
+  circularFallback: LiteralUnion<ValueOf<typeof CIRCULAR_FALLBACK>>;
   bound: boolean;
   adaptive: boolean;
   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>>;
@@ -73,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;
@@ -120,6 +129,7 @@ class Flicking extends Component<FlickingEvents> {
   private _defaultIndex: FlickingOptions["defaultIndex"];
   private _horizontal: FlickingOptions["horizontal"];
   private _circular: FlickingOptions["circular"];
+  private _circularFallback: FlickingOptions["circularFallback"];
   private _bound: FlickingOptions["bound"];
   private _adaptive: FlickingOptions["adaptive"];
   private _panelsPerView: FlickingOptions["panelsPerView"];
@@ -148,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"];
 
@@ -218,7 +230,7 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @readonly
    */
-  public get circularEnabled() { return this._camera.controlParams.circular; }
+  public get circularEnabled() { return this._camera.circularEnabled; }
   /**
    * Whether the `virtual` option is enabled.
    * The {@link Flicking#virtual virtual} option can't be enabled when  {@link Flicking#panelsPerView panelsPerView} is less or equal than zero.
@@ -348,6 +360,18 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    */
   public get circular() { return this._circular; }
+  /**
+   * Set panel control mode for the case when circular cannot be enabled.
+   * "linear" will set the view's range from the top of the first panel to the top of the last panel.
+   * "bound" will prevent the view from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel.
+   * @ko 순환 모드 사용 불가능시 사용할 패널 조작 범위 설정 방식을 변경합니다.
+   * "linear" 사용시 시점이 첫번째 엘리먼트 위에서부터 마지막 엘리먼트 위까지 움직일 수 있도록 설정합니다.
+   * "bound" 사용시 시점이 첫번째 엘리먼트와 마지막 엘리먼트의 끝과 끝 사이에서 움직일 수 있도록 설정합니다.
+   * @see CIRCULAR_FALLBACK
+   * @type {string}
+   * @default "linear"
+   */
+  public get circularFallback() { return this._circularFallback; }
   /**
    * Prevent the view(camera element) from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel
    * Only can be enabled when `circular=false`
@@ -599,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, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
@@ -718,6 +762,7 @@ class Flicking extends Component<FlickingEvents> {
     defaultIndex = 0,
     horizontal = true,
     circular = false,
+    circularFallback = CIRCULAR_FALLBACK.LINEAR,
     bound = false,
     adaptive = false,
     panelsPerView = -1,
@@ -741,6 +786,8 @@ class Flicking extends Component<FlickingEvents> {
     autoInit = true,
     autoResize = true,
     useResizeObserver = true,
+    resizeDebounce = 0,
+    maxResizeDebounce = 100,
     externalRenderer = null,
     renderExternal = null
   }: Partial<FlickingOptions> = {}) {
@@ -755,6 +802,7 @@ class Flicking extends Component<FlickingEvents> {
     this._defaultIndex = defaultIndex;
     this._horizontal = horizontal;
     this._circular = circular;
+    this._circularFallback = circularFallback;
     this._bound = bound;
     this._adaptive = adaptive;
     this._panelsPerView = panelsPerView;
@@ -778,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;
 
@@ -800,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;
@@ -812,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);
@@ -821,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();
@@ -837,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));
+    });
   }
 
   /**
@@ -1358,19 +1407,14 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   private _createCamera(): Camera {
-    const cameraOption = { align: this._align };
-
-    if (this._circular) {
-      if (this._bound) {
-        // eslint-disable-next-line no-console
-        console.warn("\"circular\" and \"bound\" option cannot be used together, ignoring bound.");
-      }
-      return new CircularCamera(cameraOption);
-    } else if (this._bound) {
-      return new BoundCamera(cameraOption);
-    } else {
-      return new LinearCamera(cameraOption);
+    if (this._circular && this._bound) {
+      // eslint-disable-next-line no-console
+      console.warn("\"circular\" and \"bound\" option cannot be used together, ignoring bound.");
     }
+
+    return new Camera(this, {
+      align: this._align
+    });
   }
 
   private _createRenderer(): Renderer {
@@ -1409,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
+    }));
   }
 }