@egjs/flicking-plugins 4.7.2-beta.1 → 4.7.2-beta.10

package/src/pagination/Pagination.ts

@@ -2,28 +2,70 @@ import Flicking, { EVENTS, Plugin } from "@egjs/flicking";
 
 import { PAGINATION } from "../const";
 import ScrollContext from "../type";
-
-import Renderer from "./renderer/Renderer";
 import BulletRenderer from "./renderer/BulletRenderer";
 import FractionRenderer from "./renderer/FractionRenderer";
+import Renderer from "./renderer/Renderer";
 import ScrollBulletRenderer from "./renderer/ScrollBulletRenderer";
 
+/**
+ * Options for the {@link Pagination} plugin
+ */
 export interface PaginationOptions {
+  /**
+   * The parent element to search for the pagination wrapper. If `null`, the Flicking element is used
+   * @defaultValue null
+   */
   parentEl: HTMLElement | null;
+  /**
+   * CSS selector for the pagination wrapper element
+   * @defaultValue ".flicking-pagination"
+   */
   selector: string;
+  /**
+   * Pagination display type
+   * @defaultValue "bullet"
+   */
   type: "bullet" | "fraction" | "scroll";
+  /**
+   * CSS class prefix for pagination elements
+   * @defaultValue "flicking-pagination"
+   */
   classPrefix: string;
+  /**
+   * Maximum number of bullet indicators displayed at once (only for `"scroll"` type)
+   * @defaultValue 5
+   */
   bulletCount: number;
+  /**
+   * Custom render function for each bullet element
+   */
   renderBullet: (className: string, index: number) => string;
+  /**
+   * Custom render function for the fraction display
+   */
   renderFraction: (currentClass: string, totalClass: string) => string;
+  /**
+   * Custom render function for the active bullet element. If `null`, the default bullet is used
+   * @defaultValue null
+   */
   renderActiveBullet: ((className: string, index: number) => string) | null;
+  /**
+   * Format function for the current index in fraction type
+   */
   fractionCurrentFormat: (index: number) => string;
+  /**
+   * Format function for the total count in fraction type
+   */
   fractionTotalFormat: (total: number) => string;
+  /**
+   * Callback invoked when the scroll pagination index changes
+   */
   scrollOnChange: (index: number, ctx: ScrollContext) => any;
 }
 
 /**
- * @memberof Flicking.Plugins
+ * A plugin to add pagination indicators (bullets, fractions, or scrollable bullets) to Flicking
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/pagination | Demo: Pagination}
  */
 class Pagination implements Plugin {
   /* Internal Values */
@@ -44,43 +86,119 @@ class Pagination implements Plugin {
   private _fractionTotalFormat: PaginationOptions["fractionTotalFormat"];
   private _scrollOnChange: PaginationOptions["scrollOnChange"];
 
-  public get parentEl() { return this._parentEl; }
-  public get selector() { return this._selector; }
-  public get type() { return this._type; }
-  public get classPrefix() { return this._classPrefix; }
-  public get bulletCount() { return this._bulletCount; }
-  public get renderBullet() { return this._renderBullet; }
-  public get renderActiveBullet() { return this._renderActiveBullet; }
-  public get renderFraction() { return this._renderFraction; }
-  public get fractionCurrentFormat() { return this._fractionCurrentFormat; }
-  public get fractionTotalFormat() { return this._fractionTotalFormat; }
-  public get scrollOnChange() { return this._scrollOnChange; }
-
-  public set parentEl(val: PaginationOptions["parentEl"]) { this._parentEl = val; }
-  public set selector(val: PaginationOptions["selector"]) { this._selector = val; }
-  public set type(val: PaginationOptions["type"]) { this._type = val; }
-  public set bulletWrapperclassPrefixClass(val: PaginationOptions["classPrefix"]) { this._classPrefix = val; }
-  public set bulletCount(val: PaginationOptions["bulletCount"]) { this._bulletCount = val; }
-  public set renderBullet(val: PaginationOptions["renderBullet"]) { this._renderBullet = val; }
-  public set renderActiveBullet(val: PaginationOptions["renderActiveBullet"]) { this._renderActiveBullet = val; }
-  public set renderFraction(val: PaginationOptions["renderFraction"]) { this._renderFraction = val; }
-  public set fractionCurrentFormat(val: PaginationOptions["fractionCurrentFormat"]) { this._fractionCurrentFormat = val; }
-  public set fractionTotalFormat(val: PaginationOptions["fractionTotalFormat"]) { this._fractionTotalFormat = val; }
-  public set scrollOnChange(val: PaginationOptions["scrollOnChange"]) { this._scrollOnChange = val; }
-
-  public constructor({
-    parentEl = null,
-    selector = PAGINATION.SELECTOR,
-    type = PAGINATION.TYPE.BULLET,
-    classPrefix = PAGINATION.PREFIX,
-    bulletCount = 5,
-    renderBullet = (className: string) => `<span class="${className}"></span>`,
-    renderActiveBullet = null,
-    renderFraction = (currentClass: string, totalClass: string) => `<span class="${currentClass}"></span>/<span class="${totalClass}"></span>`,
-    fractionCurrentFormat = (index: number) => index.toString(),
-    fractionTotalFormat = (index: number) => index.toString(),
-    scrollOnChange = (index: number, ctx: ScrollContext) => ctx.moveTo(index)
-  }: Partial<PaginationOptions> = {}) {
+  /** Current value of the {@link PaginationOptions.parentEl | parentEl} option. */
+  public get parentEl() {
+    return this._parentEl;
+  }
+  /** Current value of the {@link PaginationOptions.selector | selector} option. */
+  public get selector() {
+    return this._selector;
+  }
+  /** Current value of the {@link PaginationOptions.type | type} option. */
+  public get type() {
+    return this._type;
+  }
+  /** Current value of the {@link PaginationOptions.classPrefix | classPrefix} option. */
+  public get classPrefix() {
+    return this._classPrefix;
+  }
+  /** Current value of the {@link PaginationOptions.bulletCount | bulletCount} option. */
+  public get bulletCount() {
+    return this._bulletCount;
+  }
+  /** Current value of the {@link PaginationOptions.renderBullet | renderBullet} option. */
+  public get renderBullet() {
+    return this._renderBullet;
+  }
+  /** Current value of the {@link PaginationOptions.renderActiveBullet | renderActiveBullet} option. */
+  public get renderActiveBullet() {
+    return this._renderActiveBullet;
+  }
+  /** Current value of the {@link PaginationOptions.renderFraction | renderFraction} option. */
+  public get renderFraction() {
+    return this._renderFraction;
+  }
+  /** Current value of the {@link PaginationOptions.fractionCurrentFormat | fractionCurrentFormat} option. */
+  public get fractionCurrentFormat() {
+    return this._fractionCurrentFormat;
+  }
+  /** Current value of the {@link PaginationOptions.fractionTotalFormat | fractionTotalFormat} option. */
+  public get fractionTotalFormat() {
+    return this._fractionTotalFormat;
+  }
+  /** Current value of the {@link PaginationOptions.scrollOnChange | scrollOnChange} option. */
+  public get scrollOnChange() {
+    return this._scrollOnChange;
+  }
+
+  /** Sets {@link PaginationOptions.parentEl | parentEl}. */
+  public set parentEl(val: PaginationOptions["parentEl"]) {
+    this._parentEl = val;
+  }
+  /** Sets {@link PaginationOptions.selector | selector}. */
+  public set selector(val: PaginationOptions["selector"]) {
+    this._selector = val;
+  }
+  /** Sets {@link PaginationOptions.type | type}. */
+  public set type(val: PaginationOptions["type"]) {
+    this._type = val;
+  }
+  /** Sets {@link PaginationOptions.classPrefix | classPrefix}. */
+  public set bulletWrapperclassPrefixClass(val: PaginationOptions["classPrefix"]) {
+    this._classPrefix = val;
+  }
+  /** Sets {@link PaginationOptions.bulletCount | bulletCount}. */
+  public set bulletCount(val: PaginationOptions["bulletCount"]) {
+    this._bulletCount = val;
+  }
+  /** Sets {@link PaginationOptions.renderBullet | renderBullet}. */
+  public set renderBullet(val: PaginationOptions["renderBullet"]) {
+    this._renderBullet = val;
+  }
+  /** Sets {@link PaginationOptions.renderActiveBullet | renderActiveBullet}. */
+  public set renderActiveBullet(val: PaginationOptions["renderActiveBullet"]) {
+    this._renderActiveBullet = val;
+  }
+  /** Sets {@link PaginationOptions.renderFraction | renderFraction}. */
+  public set renderFraction(val: PaginationOptions["renderFraction"]) {
+    this._renderFraction = val;
+  }
+  /** Sets {@link PaginationOptions.fractionCurrentFormat | fractionCurrentFormat}. */
+  public set fractionCurrentFormat(val: PaginationOptions["fractionCurrentFormat"]) {
+    this._fractionCurrentFormat = val;
+  }
+  /** Sets {@link PaginationOptions.fractionTotalFormat | fractionTotalFormat}. */
+  public set fractionTotalFormat(val: PaginationOptions["fractionTotalFormat"]) {
+    this._fractionTotalFormat = val;
+  }
+  /** Sets {@link PaginationOptions.scrollOnChange | scrollOnChange}. */
+  public set scrollOnChange(val: PaginationOptions["scrollOnChange"]) {
+    this._scrollOnChange = val;
+  }
+
+  /**
+   * @param options - Options for the Pagination instance
+   * @example
+   * ```ts
+   * flicking.addPlugins(new Pagination({ type: "bullet", selector: ".flicking-pagination" }));
+   * ```
+   */
+  public constructor(options: Partial<PaginationOptions> = {}) {
+    const {
+      parentEl = null,
+      selector = PAGINATION.SELECTOR,
+      type = PAGINATION.TYPE.BULLET,
+      classPrefix = PAGINATION.PREFIX,
+      bulletCount = 5,
+      renderBullet = (className: string) => `<span class="${className}"></span>`,
+      renderActiveBullet = null,
+      renderFraction = (currentClass: string, totalClass: string) =>
+        `<span class="${currentClass}"></span>/<span class="${totalClass}"></span>`,
+      fractionCurrentFormat = (index: number) => index.toString(),
+      fractionTotalFormat = (index: number) => index.toString(),
+      scrollOnChange = (index: number, ctx: ScrollContext) => ctx.moveTo(index)
+    } = options;
+
     this._parentEl = parentEl;
     this._selector = selector;
     this._type = type;
@@ -94,6 +212,9 @@ class Pagination implements Plugin {
     this._scrollOnChange = scrollOnChange;
   }
 
+  /** Initialize the plugin, create the pagination renderer, and attach event listeners to the Flicking instance.
+   * @param flicking - The Flicking instance to attach this plugin to
+   */
   public init(flicking: Flicking): void {
     if (this._flicking) {
       this.destroy();
@@ -120,6 +241,7 @@ class Pagination implements Plugin {
     this.update();
   }
 
+  /** Destroy the plugin, remove all event listeners, and clean up pagination DOM elements. */
   public destroy(): void {
     const flicking = this._flicking;
 
@@ -136,6 +258,7 @@ class Pagination implements Plugin {
     this._flicking = null;
   }
 
+  /** Re-render the pagination indicators to reflect the current panel state. */
   public update = (): void => {
     this._removeAllChilds();
     this._renderer.render();

package/src/pagination/index.ts

@@ -1,9 +1,5 @@
 import Pagination, { PaginationOptions } from "./Pagination";
 
-export {
-  Pagination
-};
+export { Pagination };
 
-export type {
-  PaginationOptions
-};
+export type { PaginationOptions };

package/src/pagination/renderer/BulletRenderer.ts

@@ -83,10 +83,7 @@ class BulletRenderer extends Renderer {
     if (renderActiveBullet) {
       const prevBullet = bullets[prevIndex];
       if (prevBullet) {
-        const newBullet = this._createBulletFromString(
-          renderBullet(bulletClass, prevIndex),
-          prevIndex
-        );
+        const newBullet = this._createBulletFromString(renderBullet(bulletClass, prevIndex), prevIndex);
         prevBullet.parentElement!.replaceChild(newBullet, prevBullet);
         bullets[prevIndex] = newBullet;
       }

package/src/pagination/renderer/FractionRenderer.ts

@@ -33,9 +33,7 @@ class FractionRenderer extends Renderer {
     const pagination = this._pagination;
 
     const anchorPoints = flicking.camera.anchorPoints;
-    const currentIndex = anchorPoints.length > 0
-      ? index - anchorPoints[0].panel.index + 1
-      : 0;
+    const currentIndex = anchorPoints.length > 0 ? index - anchorPoints[0].panel.index + 1 : 0;
     const anchorCount = anchorPoints.length;
 
     if (currentIndex === this._prevIndex && anchorCount === this._prevTotal) return;

package/src/pagination/renderer/Renderer.ts

@@ -14,11 +14,9 @@ abstract class Renderer {
   protected _pagination: Pagination;
   protected _wrapper: HTMLElement;
 
-  public constructor({
-    flicking,
-    pagination,
-    wrapper
-  }: RendererOptions) {
+  public constructor(options: RendererOptions) {
+    const { flicking, pagination, wrapper } = options;
+
     this._flicking = flicking;
     this._pagination = pagination;
     this._wrapper = wrapper;
@@ -46,16 +44,19 @@ abstract class Renderer {
       e.stopPropagation();
     });
 
-    bullet.addEventListener(BROWSER.TOUCH_START, e => {
-      e.stopPropagation();
-    }, { passive: true });
+    bullet.addEventListener(
+      BROWSER.TOUCH_START,
+      e => {
+        e.stopPropagation();
+      },
+      { passive: true }
+    );
 
     bullet.addEventListener(BROWSER.CLICK, () => {
-      this._flicking.moveTo(panelIndex)
-        .catch(err => {
-          if (err instanceof FlickingError) return;
-          throw err;
-        });
+      this._flicking.moveTo(panelIndex).catch(err => {
+        if (err instanceof FlickingError) return;
+        throw err;
+      });
     });
   }
 }

package/src/pagination/renderer/ScrollBulletRenderer.ts

@@ -37,9 +37,7 @@ class ScrollBulletRenderer extends Renderer {
     addClass(wrapper, dynamicWrapperClass);
     wrapper.appendChild(sliderEl);
 
-    sliderEl.innerHTML = anchorPoints
-      .map((_, index) => renderBullet(bulletClass, index))
-      .join("\n");
+    sliderEl.innerHTML = anchorPoints.map((_, index) => renderBullet(bulletClass, index)).join("\n");
 
     const bullets = [].slice.call(sliderEl.children) as HTMLElement[];
 
@@ -50,7 +48,8 @@ class ScrollBulletRenderer extends Renderer {
     if (bullets.length <= 0) return;
 
     const bulletStyle = getComputedStyle(bullets[0]);
-    const bulletSize = bullets[0].clientWidth + parseFloat(bulletStyle.marginLeft) + parseFloat(bulletStyle.marginRight);
+    const bulletSize =
+      bullets[0].clientWidth + parseFloat(bulletStyle.marginLeft) + parseFloat(bulletStyle.marginRight);
 
     wrapper.style.width = `${bulletSize * pagination.bulletCount}px`;
 
@@ -93,20 +92,14 @@ class ScrollBulletRenderer extends Renderer {
     if (renderActiveBullet) {
       const prevBullet = bullets[prevIndex];
       if (prevBullet) {
-        const newBullet = this._createBulletFromString(
-          renderBullet(bulletClass, prevIndex),
-          prevIndex
-        );
+        const newBullet = this._createBulletFromString(renderBullet(bulletClass, prevIndex), prevIndex);
         prevBullet.parentElement!.replaceChild(newBullet, prevBullet);
         bullets[prevIndex] = newBullet;
       }
 
       const activeBullet = bullets[activeIndex];
       if (activeBullet) {
-        const newActiveBullet = this._createBulletFromString(
-          renderActiveBullet(bulletClass, activeIndex),
-          activeIndex
-        );
+        const newActiveBullet = this._createBulletFromString(renderActiveBullet(bulletClass, activeIndex), activeIndex);
 
         activeBullet.parentElement!.replaceChild(newActiveBullet, activeBullet);
         bullets[activeIndex] = newActiveBullet;

package/CONTRIBUTING

@@ -1,58 +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. Do your work
-4. Create test code for your work (when is possible)
-5. Run `npm run lint` for linting and Code Conventions (update until without any error or warnings)
-6. 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/rollup.config.dev.js

@@ -1,17 +0,0 @@
-const buildHelper = require("@egjs/build-helper");
-const external = {
-	"@egjs/flicking": "Flicking"
-}
-const name = "Flicking.Plugins";
-
-export default buildHelper([
-  {
-    name,
-    input: "./src/index.ts",
-    output: "./dist/plugins.js",
-    format: "umd",
-    external,
-    exports: "named"
-  }
-]);
-

package/rollup.config.js

@@ -1,33 +0,0 @@
-const buildHelper = require("@egjs/build-helper");
-const external = {
-	"@egjs/flicking": "Flicking"
-}
-const name = "Flicking.Plugins";
-
-export default buildHelper([
-		{
-      name,
-			input: "./src/index.ts",
-      output: "./dist/plugins.js",
-      format: "umd",
-			external,
-			exports: "named"
-    },
-    {
-      name,
-			input: "./src/index.ts",
-      output: "./dist/plugins.min.js",
-      format: "umd",
-      uglify: true,
-			external,
-			exports: "named"
-    },
-    {
-      input: "./src/index.ts",
-      output: "./dist/plugins.esm.js",
-      format: "esm",
-      external,
-      exports: "named"
-    }
-]);
-

package/tsconfig.declaration.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig",
-  "compilerOptions": {
-    "removeComments": true,
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "declarationDir": "declaration",
-    "strictNullChecks": false,
-  }
-}

package/tsconfig.eslint.json

@@ -1,8 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": [
-    "./**/*.ts",
-    "./**/*.js",
-    "./**/.*.js"
-  ]
-}

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "./outjs/",
-    "sourceMap": true,
-    "module": "es2015",
-    "target": "es5",
-    "strictNullChecks": true,
-    "moduleResolution": "node",
-    "lib": [
-      "es2015",
-      "dom"
-    ],
-  },
-  "include": [
-    "./src/**/*.ts"
-  ]
-}

package/tsconfig.test.json

@@ -1,21 +0,0 @@
-{
-  "extends": "./tsconfig",
-  "compilerOptions": {
-    "module": "commonjs",
-    "noImplicitAny": false,
-    "strictNullChecks": false,
-    "noUnusedLocals": false,
-    "experimentalDecorators": true,
-    "types": [
-      "karma-chai",
-      "mocha",
-    ]
-  },
-  "include": [
-    "./src/**/*.ts",
-    "./test/**/*.ts"
-  ],
-  "exclude": [
-    "./node_modules/**/*.ts"
-  ]
-}