@egjs/flicking-plugins 4.8.0-beta.1 → 4.8.1-beta.0

package/src/Sync.ts

@@ -1,64 +1,105 @@
+import type { MoveEndEvent, MoveEvent, MoveStartEvent, Plugin, SelectEvent, WillChangeEvent } from "@egjs/flicking";
 import Flicking, { clamp, EVENTS } from "@egjs/flicking";
-import type { MoveEndEvent, MoveEvent, MoveStartEvent, Plugin, WillChangeEvent, SelectEvent } from "@egjs/flicking";
 
 import { SYNC } from "./const";
 import { addClass, removeClass } from "./utils";
 
 /**
- * @property {string} [type="camera"] Types of methods to synchronize between Flickings. "camera" will sync by camera position, and "index" will sync by panel index
- * @property {SychronizableFlickingOptions} [synchronizedFlickingOptions=[]]	Detailed options for syncing Flickings.
+ * Options for the {@link Sync} plugin
  */
 export interface SyncOptions {
+  /**
+   * Method to synchronize between Flickings. `"camera"` syncs by camera position, `"index"` syncs by panel index
+   * @defaultValue "camera"
+   */
   type: typeof SYNC.TYPE.CAMERA | typeof SYNC.TYPE.INDEX;
+  /**
+   * Detailed options for each Flicking instance to synchronize
+   * @defaultValue []
+   */
   synchronizedFlickingOptions: SychronizableFlickingOptions[];
 }
 
 /**
- * @property {Flicking} flicking An instance of Flicking to sync
- * @property {boolean} [isClickable=false] By enabling this option, clicking the given Flicking's panel will change the given & other Flicking's index
- * @property {boolean} [isSlidable=false] By enabling this option, the given Flicking's scroll with mouse/touch input will change other Flicking's index. Only available for the index type
- * @property {string | undefined} [activeClass=undefined] An extra class for the panels when selected
+ * Per-instance synchronization options used in {@link SyncOptions.synchronizedFlickingOptions}
  */
 export interface SychronizableFlickingOptions {
+  /**
+   * The Flicking instance to synchronize
+   */
   flicking: Flicking;
+  /**
+   * Whether clicking this Flicking's panel changes the index of all synced Flickings
+   * @defaultValue false
+   */
   isClickable?: boolean;
+  /**
+   * Whether mouse/touch scroll on this Flicking changes other Flickings' index. Only available for the `"index"` type
+   * @defaultValue false
+   */
   isSlidable?: boolean;
+  /**
+   * CSS class added to the active (selected) panel
+   * @defaultValue undefined
+   */
   activeClass?: string;
 }
 
 /**
- * Plugin for synchronizing multiple flickings
- * @ko 다양한 형태로 Flicking들이 같이 움직이게 할 수 있습니다.
- * @memberof Flicking.Plugins
+ * Plugin for synchronizing multiple Flicking instances
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/sync | Demo: Sync}
  */
 class Sync implements Plugin {
   /* Internal Values */
   private _flicking: Flicking | null = null;
+  private _disabledIndex: number[] = [];
 
   /* Options */
   private _type: SyncOptions["type"];
   private _synchronizedFlickingOptions: SyncOptions["synchronizedFlickingOptions"];
 
-  public get type() { return this._type; }
-  public get synchronizedFlickingOptions() { return this._synchronizedFlickingOptions; }
+  /** Current value of the {@link SyncOptions.type | type} option. */
+  public get type() {
+    return this._type;
+  }
+  /** Current value of the {@link SyncOptions.synchronizedFlickingOptions | synchronizedFlickingOptions} option. */
+  public get synchronizedFlickingOptions() {
+    return this._synchronizedFlickingOptions;
+  }
 
+  /** Sets {@link SyncOptions.type | type}. */
   public set type(val: SyncOptions["type"]) {
     this._type = val;
   }
 
+  /** Sets {@link SyncOptions.synchronizedFlickingOptions | synchronizedFlickingOptions}. */
   public set synchronizedFlickingOptions(val: SyncOptions["synchronizedFlickingOptions"]) {
     this._synchronizedFlickingOptions = val;
   }
 
-  /** */
-  public constructor({
-    type = SYNC.TYPE.CAMERA,
-    synchronizedFlickingOptions = []
-  }: Partial<SyncOptions> = {}) {
+  /**
+   * @param options - Options for the Sync instance
+   * @example
+   * ```ts
+   * flicking.addPlugins(new Sync({
+   *   type: "camera",
+   *   synchronizedFlickingOptions: [
+   *     { flicking: flicking1 },
+   *     { flicking: flicking2, isClickable: true }
+   *   ]
+   * }));
+   * ```
+   */
+  public constructor(options: Partial<SyncOptions> = {}) {
+    const { type = SYNC.TYPE.CAMERA, synchronizedFlickingOptions = [] } = options;
+
     this._type = type;
     this._synchronizedFlickingOptions = synchronizedFlickingOptions;
   }
 
+  /** Initialize the plugin and set up synchronization event listeners between Flicking instances.
+   * @param flicking - The Flicking instance to attach this plugin to
+   */
   public init(flicking: Flicking): void {
     const synced = this._synchronizedFlickingOptions;
 
@@ -77,6 +118,7 @@ class Sync implements Plugin {
     });
   }
 
+  /** Destroy the plugin and remove all synchronization event listeners. */
   public destroy(): void {
     const flicking = this._flicking;
 
@@ -89,6 +131,7 @@ class Sync implements Plugin {
     this._flicking = null;
   }
 
+  /** Update the active class state for all synchronized Flicking instances. */
   public update(): void {
     this._synchronizedFlickingOptions.forEach(options => {
       this._updateClass(options, options.flicking.index);
@@ -173,19 +216,20 @@ class Sync implements Plugin {
   };
 
   private _onMoveStart = (e: MoveStartEvent): void => {
-    this._synchronizedFlickingOptions.forEach(({ flicking }) => {
-      if (flicking !== e.currentTarget) {
+    this._disabledIndex = [];
+    this._synchronizedFlickingOptions.forEach(({ flicking }, i) => {
+      if (flicking !== e.currentTarget && flicking.control.controller.enabled) {
+        this._disabledIndex.push(i);
         flicking.disableInput();
       }
     });
   };
 
   private _onMoveEnd = (e: MoveEndEvent): void => {
-    this._synchronizedFlickingOptions.forEach(({ flicking }) => {
-      if (flicking !== e.currentTarget) {
-        flicking.enableInput();
-        flicking.control.updateInput();
-      }
+    this._disabledIndex.forEach(i => {
+      const flicking = this._synchronizedFlickingOptions[i].flicking;
+      flicking.enableInput();
+      flicking.control.updateInput();
     });
   };
 
@@ -224,7 +268,7 @@ class Sync implements Plugin {
     if (!activeClass) return;
 
     flicking.panels.forEach(panel => {
-      if (panel.index === index)  {
+      if (panel.index === index) {
         addClass(panel.element, activeClass);
       } else {
         removeClass(panel.element, activeClass);

package/src/index.ts

@@ -1,30 +1,17 @@
-/**
- * @namespace Flicking
- */
-/**
- * @namespace Flicking.Plugins
- */
-import Parallax from "./Parallax";
-import Fade from "./Fade";
-import AutoPlay from "./AutoPlay";
 import Arrow from "./Arrow";
-import Sync, { SyncOptions, SychronizableFlickingOptions } from "./Sync";
+import AutoPlay from "./AutoPlay";
+import Fade from "./Fade";
+import Parallax from "./Parallax";
 import Perspective from "./Perspective";
+import Sync, { SychronizableFlickingOptions, SyncOptions } from "./Sync";
 
 export * from "./pagination";
 
-export {
-  Parallax,
-  Fade,
-  AutoPlay,
-  Arrow,
-  Sync,
-  Perspective
-};
+export { Parallax, Fade, AutoPlay, Arrow, Sync, Perspective };
 
-export type {
-  SyncOptions,
-  SychronizableFlickingOptions
-};
+export type { SyncOptions, SychronizableFlickingOptions };
 
+export type { ArrowOptions } from "./Arrow";
+export type { AutoPlayOptions } from "./AutoPlay";
 export * from "./const";
+export type { PerspectiveOptions } from "./Perspective";

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.