@egjs/flicking 4.14.2-beta.2 → 4.16.0-beta.0

package/src/renderer/strategy/NormalRenderingStrategy.ts

@@ -2,10 +2,11 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import Flicking from "../../Flicking";
+
+import { DIRECTION } from "../../constants/values";
 import Panel, { PanelOptions } from "../../core/panel/Panel";
 import ElementProvider from "../../core/panel/provider/ElementProvider";
-import { DIRECTION } from "../../const/external";
+import Flicking from "../../Flicking";
 import { parsePanelAlign } from "../../utils";
 
 import RenderingStrategy from "./RenderingStrategy";
@@ -14,11 +15,11 @@ export interface NormalRenderingStrategyOptions {
   providerCtor: new (...args: any) => ElementProvider;
 }
 
-
 class NormalRenderingStrategy implements RenderingStrategy {
   private _providerCtor: NormalRenderingStrategyOptions["providerCtor"];
 
-  public constructor({ providerCtor }: NormalRenderingStrategyOptions) {
+  public constructor(options: NormalRenderingStrategyOptions) {
+    const { providerCtor } = options;
     this._providerCtor = providerCtor;
   }
 
@@ -49,37 +50,40 @@ class NormalRenderingStrategy implements RenderingStrategy {
     }
   }
 
-  public collectPanels(
-    flicking: Flicking,
-    elements: any[]
-  ) {
+  public collectPanels(flicking: Flicking, elements: any[]) {
     const align = parsePanelAlign(flicking.renderer.align);
 
-    return elements.map((el, index) => new Panel({
-      index,
-      elementProvider: new this._providerCtor(el),
-      align,
-      flicking
-    }));
+    return elements.map(
+      (el, index) =>
+        new Panel({
+          index,
+          elementProvider: new this._providerCtor(el),
+          align,
+          flicking
+        })
+    );
   }
 
-  public createPanel(
-    element: any,
-    options: Omit<PanelOptions, "elementProvider">
-  ) {
+  public createPanel(element: any, options: Omit<PanelOptions, "elementProvider">) {
     return new Panel({
       ...options,
       elementProvider: new this._providerCtor(element)
     });
   }
 
-  public updatePanelSizes(flicking: Flicking, size: Partial<{
-    width: number | string;
-    height: number | string;
-  }>) {
+  public updatePanelSizes(
+    flicking: Flicking,
+    size: Partial<{
+      width: number | string;
+      height: number | string;
+    }>
+  ) {
     flicking.panels.forEach(panel => panel.setSize(size));
   }
 
+  /**
+   * @internal
+   */
   private _showOnlyVisiblePanels(flicking: Flicking) {
     const panels = flicking.renderer.panels;
     const camera = flicking.camera;

package/src/renderer/strategy/RenderingStrategy.ts

@@ -2,8 +2,9 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import Flicking from "../../Flicking";
+
 import Panel, { PanelOptions } from "../../core/panel/Panel";
+import Flicking from "../../Flicking";
 
 /**
  * @internal

package/src/renderer/strategy/VirtualRenderingStrategy.ts

@@ -2,10 +2,11 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import Flicking from "../../Flicking";
+
 import { PanelOptions } from "../../core/panel/Panel";
-import VirtualPanel from "../../core/panel/VirtualPanel";
 import VirtualElementProvider from "../../core/panel/provider/VirtualElementProvider";
+import VirtualPanel from "../../core/panel/VirtualPanel";
+import Flicking from "../../Flicking";
 import { parsePanelAlign, range, setSize } from "../../utils";
 
 import RenderingStrategy from "./RenderingStrategy";
@@ -37,7 +38,7 @@ class VirtualRenderingStrategy implements RenderingStrategy {
     const visiblePanels = [...flicking.visiblePanels]
       .filter(panel => panel.rendered)
       .sort((panel1, panel2) => {
-        return (panel1.position + panel1.offset) - (panel2.position + panel2.offset);
+        return panel1.position + panel1.offset - (panel2.position + panel2.offset);
       }) as VirtualPanel[];
 
     if (visiblePanels.length <= 0) return virtualManager.elements.map((_, idx) => idx);
@@ -81,12 +82,15 @@ class VirtualRenderingStrategy implements RenderingStrategy {
   public collectPanels(flicking: Flicking) {
     const align = parsePanelAlign(flicking.renderer.align);
 
-    return range(flicking.virtual.initialPanelCount).map(index => new VirtualPanel({
-      index,
-      elementProvider: new VirtualElementProvider(flicking),
-      align,
-      flicking
-    }));
+    return range(flicking.virtual.initialPanelCount).map(
+      index =>
+        new VirtualPanel({
+          index,
+          elementProvider: new VirtualElementProvider(flicking),
+          align,
+          flicking
+        })
+    );
   }
 
   public createPanel(_el: any, options: PanelOptions) {
@@ -96,10 +100,13 @@ class VirtualRenderingStrategy implements RenderingStrategy {
     });
   }
 
-  public updatePanelSizes(flicking: Flicking, size: Partial<{
-    width: number | string;
-    height: number | string;
-  }>) {
+  public updatePanelSizes(
+    flicking: Flicking,
+    size: Partial<{
+      width: number | string;
+      height: number | string;
+    }>
+  ) {
     flicking.virtual.elements.forEach(el => {
       setSize(el.nativeElement, size);
     });

package/src/renderer/strategy/index.ts

@@ -2,16 +2,11 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import RenderingStrategy from "./RenderingStrategy";
+
 import NormalRenderingStrategy, { NormalRenderingStrategyOptions } from "./NormalRenderingStrategy";
+import RenderingStrategy from "./RenderingStrategy";
 import VirtualRenderingStrategy from "./VirtualRenderingStrategy";
 
-export {
-  NormalRenderingStrategy,
-  VirtualRenderingStrategy
-};
+export { NormalRenderingStrategy, VirtualRenderingStrategy };
 
-export type {
-  RenderingStrategy,
-  NormalRenderingStrategyOptions
-};
+export type { RenderingStrategy, NormalRenderingStrategyOptions };

package/src/types/external.ts

@@ -0,0 +1,72 @@
+import { MOVE_TYPE } from "../constants/values";
+import { FreeControlOptions, SnapControlOptions, StrictControlOptions } from "../control";
+import Flicking from "../Flicking";
+
+import { ValueOf } from "./internal";
+
+/**
+ * HTML `string` of single/mutiple HTMLElement, or an instance of `HTMLElement`
+ */
+export type ElementLike = string | HTMLElement;
+
+/**
+ * Flicking Plugin
+ */
+export interface Plugin {
+  /** Initialize the plugin */
+  init(flicking: Flicking): void;
+  /** Destroy plugin and detach all events binded */
+  destroy(): void;
+  /** Update plugin to match current Flicking's status */
+  update(flicking: Flicking): void;
+}
+
+/**
+ * Flicking Status returned by {@link Flicking.getStatus}
+ */
+export interface Status {
+  /** An index of the active panel */
+  index?: number;
+  /** A info to restore camera {@link Camera.position | position} */
+  position?: {
+    /** An index of the panel camera is located at */
+    panel: number;
+    /** A progress of the camera position inside the panel */
+    progressInPanel: number;
+  };
+  /** An offset to visible panel's original index. This value is available only when `visiblePanelsOnly` is `true` */
+  visibleOffset?: number;
+  /** A data array of panels */
+  panels: Array<{
+    /** An index of the panel */
+    index: number;
+    /** An `outerHTML` of the panel element */
+    html?: string;
+  }>;
+}
+
+/* eslint-disable @typescript-eslint/indent */
+export type MoveTypeOptions<T extends ValueOf<typeof MOVE_TYPE>> = T extends typeof MOVE_TYPE.SNAP
+  ? [T] | [T, Partial<SnapControlOptions>]
+  : T extends typeof MOVE_TYPE.FREE_SCROLL
+    ? [T] | [T, Partial<FreeControlOptions>]
+    : T extends typeof MOVE_TYPE.STRICT
+      ? [T] | [T, Partial<StrictControlOptions>]
+      : [T];
+/* eslint-enable */
+
+/**
+ * A current parameters of the Camera for updating {@link AxesController}
+ * @readonly
+ */
+export interface ControlParams {
+  /** A moveable range for Camera */
+  range: {
+    min: number;
+    max: number;
+  };
+  /** Current camera position */
+  position: number;
+  /** A Boolean indicating whether the {@link Flicking.circular | circular} option is enabled */
+  circular: boolean;
+}

package/src/{type → types}/internal.ts

@@ -3,7 +3,7 @@
  * egjs projects are licensed under the MIT license
  */
 export type ValueOf<T> = T[keyof T];
-export type LiteralUnion<T extends U, U = string> = T | (Pick<U, never> & {_?: never});
+export type LiteralUnion<T extends U, U = string> = T | (Pick<U, never> & { _?: never });
 
 export interface ArrayLike<T> {
   [index: number]: T;
@@ -20,7 +20,4 @@ export type MergeObject<T, U> = {
     : T[K];
 };
 
-export type Merged<From, To> =
-  Unique<From, To>
-  & Unique<To, From>
-  & MergeObject<From, To>;
+export type Merged<From, To> = Unique<From, To> & Unique<To, From> & MergeObject<From, To>;

package/src/types/params.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+
+/**
+ * Parameters for setting element size
+ * @public
+ */
+export interface SetSizeParams {
+  /** CSS string or number(in px) */
+  width?: number | string;
+  /** CSS string or number(in px) */
+  height?: number | string;
+}

package/src/utils.ts

@@ -2,12 +2,13 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
+
+import { ALIGN, DIRECTION } from "./constants/values";
+import * as ERROR from "./error/codes";
+import FlickingError from "./error/FlickingError";
 import Flicking, { FlickingOptions } from "./Flicking";
-import FlickingError from "./core/FlickingError";
-import * as ERROR from "./const/error";
-import { ALIGN, DIRECTION } from "./const/external";
-import { LiteralUnion, Merged, ValueOf } from "./type/internal";
-import { ElementLike } from "./type/external";
+import { ElementLike } from "./types/external";
+import { LiteralUnion, Merged, ValueOf } from "./types/internal";
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const merge = <From extends object, To extends object>(target: From, ...sources: To[]): Merged<From, To> => {
@@ -112,8 +113,10 @@ export const parseArithmeticSize = (cssValue: number | string, base: number): nu
   return parsed.percentage * base + parsed.absolute;
 };
 
-export const parseArithmeticExpression = (cssValue: number | string): { percentage: number; absolute: number } | null => {
-  const cssRegex = /(?:(\+|\-)\s*)?(\d+(?:\.\d+)?(%|px)?)/g;
+export const parseArithmeticExpression = (
+  cssValue: number | string
+): { percentage: number; absolute: number } | null => {
+  const cssRegex = /(?:(\+|-)\s*)?(\d+(?:\.\d+)?(%|px)?)/g;
 
   if (typeof cssValue === "number") {
     return { percentage: 0, absolute: cssValue };
@@ -161,11 +164,10 @@ export const parseArithmeticExpression = (cssValue: number | string): { percenta
   return parsed;
 };
 
-export const parseCSSSizeValue = (val: string | number): string => isString(val) ? val : `${val}px`;
+export const parseCSSSizeValue = (val: string | number): string => (isString(val) ? val : `${val}px`);
 
-export const parsePanelAlign = (align: FlickingOptions["align"]) => typeof align === "object"
-  ? (align as { panel: string | number }).panel
-  : align;
+export const parsePanelAlign = (align: FlickingOptions["align"]) =>
+  typeof align === "object" ? (align as { panel: string | number }).panel : align;
 
 export const getDirection = (start: number, end: number): ValueOf<typeof DIRECTION> => {
   if (start === end) return DIRECTION.NONE;
@@ -183,7 +185,7 @@ export const parseElement = (element: ElementLike | ElementLike[]): HTMLElement[
       const tempDiv = document.createElement("div");
       tempDiv.innerHTML = el;
 
-      elements.push(...toArray(tempDiv.children) as HTMLElement[]);
+      elements.push(...(toArray(tempDiv.children) as HTMLElement[]));
       while (tempDiv.firstChild) {
         tempDiv.removeChild(tempDiv.firstChild);
       }
@@ -197,7 +199,8 @@ export const parseElement = (element: ElementLike | ElementLike[]): HTMLElement[
   return elements;
 };
 
-export const getMinusCompensatedIndex = (idx: number, max: number) => idx < 0 ? clamp(idx + max, 0, max) : clamp(idx, 0, max);
+export const getMinusCompensatedIndex = (idx: number, max: number) =>
+  idx < 0 ? clamp(idx + max, 0, max) : clamp(idx, 0, max);
 
 export const includes = <T>(array: T[], target: any): target is T => {
   for (const val of array) {
@@ -260,13 +263,19 @@ export const getStyle = (el: HTMLElement): CSSStyleDeclaration => {
   if (!el) {
     return {} as CSSStyleDeclaration;
   }
-  return window.getComputedStyle(el) || (el as any).currentStyle as CSSStyleDeclaration;
+  return window.getComputedStyle(el) || ((el as any).currentStyle as CSSStyleDeclaration);
 };
 
-export const setSize = (el: HTMLElement, { width, height }: Partial<{
-  width: number | string;
-  height: number | string;
-}>) => {
+export const setSize = (
+  el: HTMLElement,
+  {
+    width,
+    height
+  }: Partial<{
+    width: number | string;
+    height: number | string;
+  }>
+) => {
   if (!el) {
     return;
   }
@@ -293,7 +302,7 @@ export const circulateIndex = (index: number, max: number): number => {
   if (index >= max) {
     return index % max;
   } else if (index < 0) {
-    return getMinusCompensatedIndex((index + 1) % max - 1, max);
+    return getMinusCompensatedIndex(((index + 1) % max) - 1, max);
   } else {
     return index;
   }
@@ -331,33 +340,29 @@ export const getElementSize = ({
       : parseFloat(style.borderTopWidth || "0") + parseFloat(style.borderBottomWidth || "0");
 
     if (isBorderBoxSizing) {
-      size = useOffset
-        ? baseSize
-        : baseSize - border;
+      size = useOffset ? baseSize : baseSize - border;
     } else {
       const padding = horizontal
         ? parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0")
         : parseFloat(style.paddingTop || "0") + parseFloat(style.paddingBottom || "0");
 
-      size = useOffset
-        ? baseSize + padding + border
-        : baseSize + padding;
+      size = useOffset ? baseSize + padding + border : baseSize + padding;
     }
   } else {
     const sizeStr = horizontal ? "Width" : "Height";
 
-    size = useOffset
-      ? el[`offset${sizeStr}`]
-      : el[`client${sizeStr}`];
+    size = useOffset ? el[`offset${sizeStr}`] : el[`client${sizeStr}`];
   }
 
   return Math.max(size, 0);
 };
 
-export const setPrototypeOf = Object.setPrototypeOf || ((obj, proto) => {
-  obj.__proto__ = proto;
-  return obj;
-});
+export const setPrototypeOf =
+  Object.setPrototypeOf ||
+  ((obj, proto) => {
+    obj.__proto__ = proto;
+    return obj;
+  });
 
 export const camelize = (str: string): string => {
   return str.replace(/[\s-_]([a-z])/g, (all, letter) => letter.toUpperCase());

package/CONTRIBUTING.md

@@ -1,59 +0,0 @@
-# How to contribute to egjs-flicking
-egjs-flicking is opened to everyone and we're welcoming for any kind of contribution.
-We believe that our project can grow with your interests helping others' necessities.
-
-## Style Guide
-
-egjs-flicking has several style guidelines to follow.
-Before your start, please read attentively below instructions.
-
-### Linting and Code Conventions
-We adopted [ESLint](http://eslint.org/) to maintain our code quality. The [rules](https://github.com/naver/eslint-config-naver/tree/master/rules) are modified version based on [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript).
-All rules are described at [.eslintrc](.eslintrc) file.
-
-### Commit Log Guidelines
-egjs-flicking use commit logs in many different purposes (like creating CHANGELOG, ease history searching, etc.).
-To not break, you'll be forced to follow our commit log guidelines.
-Before your commit/push, make sure following our commit log guidelines.
-
-The outline is as below:
-```
-<type>(<module>): <subject>
-<BLANK LINE>
-<body>
-<BLANK LINE>
-<footer>
-```
-
-- **Types**
-  - **feat**: A new feature
-  - **fix**: A bug fix
-  - **docs**: Documentation only changes
-  - **style**: Changes that do not affect the meaning of the code. Such as white-space, formatting, missing semi-colons, etc... It also possible to change JSHint, JSCS rules of the code.
-  - **refactor**: A code change that neither fixes a bug nor adds a feature
-  - **test**: Adding missing tests. Changing tests.
-  - **demo**: Adding missing demos. Changing demos.
-  - **chore**: Changes to the build process or tools and libraries such as documentation generation
-
-[See More Commit Log Guidelines](https://github.com/naver/egjs/wiki/Commit-Log-Guidelines)
-
-## How to submit Pull Requests
-Steps to submit your pull request:
-
-1. Fork `egjs-flicking` on your repository
-2. Create new branch from your egjs master branch (and be sure always to be up-to-date)
-3. Before starting a local development, `npm run docs:build` in the root directory to generate API documents.
-4. Do your work
-5. Create test code for your work (when is possible)
-6. Run `npm run lint` for linting and Code Conventions (update until without any error or warnings)
-7. Run test code by `npm run test OR npm run test:chrome`.
-   Make sure tests are all passed at least in Chrome(latest desktop version)
-8. Write commit log following convention and push to your repository branch.
-9. Create a new PR from your branch to egjs-flicking.
-10. Wait for reviews.
-    When your contribution is well enough to be accepted, then will be merged to our branch.
-11. All done!
-
-
-## License
-By contributing to egjs-flicking, you're agreeing that your contributions will be licensed under its [MIT](https://opensource.org/licenses/MIT) license.

package/NOTICE

@@ -1,31 +0,0 @@
-egjs-flicking
-Copyright 2015 NAVER Corp.
-
-This project contains subcomponents with separate copyright notices and license terms.
-Your use of the source code for these subcomponents is subject to the terms and conditions of the following licenses.
-
-=====
-
-AngularJS from https://github.com/angular/angular.js
-
-=====
-
-Copyright (c) 2010-2015 Google, Inc. http://angularjs.org
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

package/core-packages-link.js

@@ -1,75 +0,0 @@
-/* eslint-disable */
-
-/**
- * 프레임워크 컴포넌트를 디버깅할 때 코어 바닐라 로직을 수정하면서 확인할 필요가 있을 때,
- * 이 스크립트를 이용하면 바닐라 로직 수정사항이 프레임워크 컴포넌트 로컬 데모환경에도 반영된다.
- * 다만, 바닐라 로직 수정 이후 리액트 데모에 핫 모듈 리로딩까지는 되지 않는다. 
- * 따라서 수정 사항들을 추가적으로 반영해주려면 바닐라를 다시 빌드해야 한다. 링크는 다시 하지 않아도 된다.
- *
- * 인자로 프레임워크 컴포넌트 패키지의 루트 디렉토리를 제공하면 된다.
- * 인자를 제공하지 않으면 packages 하위의 전체 프레임워크 패키지에 대해 링크를 시도한다.
- *
- * 사용 예시: node core-package-link.js react-flicking
- * 
- * 
- * 개발 흐름: 
- * 1. 이 스크립트를 실행
- * 2. 바닐라 로직 수정 후 빌드 수행
- * 3. 프레임워크 컴포넌트의 데모를 실행 (바닐라 로직 변경사항이 반영됨)
- * 4. 바닐라 로직 추가 수정 후 빌드 수행
- * 5. 프레임워크 컴포넌트의 데모를 새로고침 (바닐라 로직 변경사항이 반영됨)
- *   - 원래는 새로고침만 하면 되야 하지만 타입 에러가 발생하는 경우가 있어 데모를 중지하고 다시 실행해야 할 수도 있다.
- * 
- * 
- */
-
-
-
-function run(cmd, cwd = process.cwd()) {
-  console.log(`\n▶️ Running: ${cmd} (in ${cwd})`);
-  execSync(cmd, { stdio: "inherit", cwd });
-}
-
-const { execSync } = require("child_process");
-const path = require("path");
-const fs = require("fs");
-
-const frameworks = [
-  "ngx-flicking",
-  "preact-flicking",
-  "react-flicking",
-  "vue-flicking",
-  "vue3-flicking",
-  "svelte-flicking",
-];
-
-const args = process.argv.slice(2);
-const targetDir = args[0];
-
-if (!targetDir) {
-  console.log(
-    "❗️ 디렉토리명을 인자로 입력하지 않았습니다. 전체 프레임워크에 대해 링크를 시도합니다."
-  );
-  run("npm run build");
-  run("npm link");
-  frameworks.forEach((target) => {
-    const fullPath = path.resolve(process.cwd(), "packages", target);
-    if (!fs.existsSync(fullPath)) {
-      console.error(`❌ 디렉토리 없음: ${fullPath}`);
-      process.exit(1);
-    }
-    run(`npm link '@egjs/flicking'`, fullPath);
-  });
-} else {
-  const fullPath = path.resolve(process.cwd(), "packages", targetDir);
-  if (!fs.existsSync(fullPath)) {
-    console.error(`❌ 디렉토리 없음: ${fullPath}`);
-    process.exit(1);
-  }
-
-  run("npm run build");
-  run("npm link");
-  run(`npm link '@egjs/flicking'`, fullPath);
-}
-
-