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

package/package.json

@@ -1,106 +1,50 @@
 {
-	"name": "@egjs/flicking-plugins",
-	"version": "4.8.0-beta.1",
-	"description": "Ready-to-use plugins for @egjs/flicking",
-	"module": "./dist/plugins.esm.js",
-	"main": "./dist/plugins.js",
-	"types": "./declaration/index.d.ts",
-	"sideEffects": false,
-	"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",
-		"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
-		"printsizes": "print-sizes ./dist --exclude=\\.map",
-		"css": "node config/build-css",
-		"lint": "eslint 'src/**/*.ts'",
-		"release": "release-helper",
-		"test": "karma start",
-		"test:chrome": "karma start --chrome",
-		"coverage": "karma start --coverage && print-coveralls --sort=desc",
-		"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
-		"demo:build": "npm run build && cpx 'dist/**/*' demo/release/latest/dist --clean",
-		"demo:prebuild-version": "cpx 'dist/**/*' demo/release/$npm_package_version/dist --clean",
-		"demo:prebuild-latest": "cpx 'dist/**/*' demo/release/latest/dist --clean",
-		"demo:predeploy": "npm run build && npm run demo:prebuild-version && npm run demo:prebuild-latest",
-		"demo:deploy": "npm run demo:predeploy && gh-pages -a -d demo/ --remote upstream"
-	},
-	"keywords": [
-		"flicking",
-		"slide",
-		"swipe",
-		"css",
-		"parallax",
-		"fade",
-		"autoplay",
-		"snap",
-		"flick",
-		"egjs",
-		"eg"
-	],
-	"author": {
-		"name": "NAVER Corp."
-	},
-	"namespace": {
-		"eg": "eg"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/naver/egjs-flicking-plugins"
-	},
-	"homepage": "https://github.com/naver/egjs-flicking-plugins",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/naver/egjs-flicking-plugins/issues"
-	},
-	"browserslist": [
-		"last 2 version",
-		"ie 9-11",
-		"not op_mini all"
-	],
-	"peerDependencies": {
-		"@egjs/flicking": "^4.11.3"
-	},
-	"devDependencies": {
-		"@egjs/build-helper": "0.0.5",
-		"@egjs/flicking": "^4.11.3",
-		"@egjs/release-helper": "0.0.3",
-		"@types/chai": "^4.0.10",
-		"@types/karma-chai": "^0.1.1",
-		"@types/mocha": "^5.2.5",
-		"@types/node": "^14.0.27",
-		"@types/sinon": "^7.0.3",
-		"@typescript-eslint/eslint-plugin": "^4.22.0",
-		"@typescript-eslint/eslint-plugin-tslint": "^4.22.0",
-		"@typescript-eslint/parser": "^4.22.0",
-		"autoprefixer": "^9.8.6",
-		"bulma": "^0.9.2",
-		"chai": "^4.2.0",
-		"concurrently": "^6.2.0",
-		"coveralls": "^3.1.0",
-		"cpx": "^1.5.0",
-		"eslint": "^7.25.0",
-		"eslint-plugin-import": "^2.22.1",
-		"eslint-plugin-jsdoc": "^33.0.0",
-		"eslint-plugin-prefer-arrow": "^1.2.3",
-		"gh-pages": "^2.0.1",
-		"hammer-simulator": "^0.0.1",
-		"http-serve": "^1.0.1",
-		"karma": "^3.1.4",
-		"karma-chai": "^0.1.0",
-		"karma-chrome-launcher": "^2.2.0",
-		"karma-mocha": "^1.3.0",
-		"karma-mocha-reporter": "^2.2.5",
-		"karma-sinon": "^1.0.5",
-		"karma-typescript-egjs": "^4.0.0",
-		"karma-viewport": "^1.0.4",
-		"mocha": "^5.2.0",
-		"postcss-clean": "^1.2.2",
-		"postcss-js": "^3.0.3",
-		"print-coveralls": "^1.2.2",
-		"print-sizes": "^0.1.0",
-		"sinon": "^7.2.3",
-		"tslib": "^2.3.0",
-		"tslint": "^5.13.1",
-		"typescript": "^4.2.3"
-	}
-}
+  "name": "@egjs/flicking-plugins",
+  "version": "4.8.1-beta.0",
+  "description": "Ready-to-use plugins for @egjs/flicking",
+  "module": "./dist/plugins.esm.js",
+  "main": "./dist/plugins.js",
+  "types": "./declaration/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "keywords": [
+    "flicking",
+    "plugins",
+    "carousel",
+    "slide",
+    "swipe",
+    "parallax",
+    "fade",
+    "autoplay",
+    "egjs"
+  ],
+  "author": {
+    "name": "NAVER Corp."
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/naver/egjs-flicking",
+    "directory": "packages/flicking-plugins"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@egjs/flicking": "^4.1.0"
+  },
+  "devDependencies": {
+    "@egjs/flicking": "~4.16.1-beta.0"
+  },
+  "scripts": {
+    "dev": "vite --config vite.dev.config.ts",
+    "dev:preview": "vite --config vite.dev.config.ts --mode production",
+    "start": "vite build --watch",
+    "build": "run-s build:bundle build:css build:declaration printsizes",
+    "build:bundle": "rm -rf ./dist && concurrently \"vite build\" \"VITE_BUILD_FORMAT=umd vite build\" \"VITE_BUILD_FORMAT=umd-min vite build\"",
+    "build:css": "run-s build:css-process build:css-bundle",
+    "build:css-process": "node ../../config/build-plugins-css.js",
+    "build:css-bundle": "cat dist/arrow.css dist/pagination.css > dist/flicking-plugins.css && postcss dist/flicking-plugins.css --use postcss-clean --no-map --output dist/flicking-plugins.min.css",
+    "build:declaration": "tsc -p tsconfig.declaration.json",
+    "printsizes": "print-sizes ./dist --exclude=\\.map",
+    "lint": "biome check src/"
+  }
+}

package/src/Arrow.ts

@@ -1,30 +1,53 @@
-import Flicking, { EVENTS, FlickingError, Plugin, WillChangeEvent } from "@egjs/flicking";
-
-import { BROWSER } from "./event";
+import Flicking, { EVENTS, FlickingError, Plugin } from "@egjs/flicking";
 import { ARROW } from "./const";
+import { BROWSER } from "./event";
 import { addClass, getElement, removeClass } from "./utils";
 
-interface ArrowOptions {
+/**
+ * Options for the {@link Arrow} plugin
+ */
+export interface ArrowOptions {
+  /**
+   * The parent element to search for arrow elements. If `null`, the Flicking element is used
+   * @defaultValue null
+   */
   parentEl: HTMLElement | null;
+  /**
+   * CSS selector for the "previous" arrow element
+   * @defaultValue ".flicking-arrow-prev"
+   */
   prevElSelector: string;
+  /**
+   * CSS selector for the "next" arrow element
+   * @defaultValue ".flicking-arrow-next"
+   */
   nextElSelector: string;
+  /**
+   * CSS class added to an arrow element when it is disabled (at the start/end of non-circular Flicking)
+   * @defaultValue "flicking-arrow-disabled"
+   */
   disabledClass: string;
+  /**
+   * Number of panels to move when an arrow is clicked
+   * @defaultValue 1
+   */
   moveCount: number;
+  /**
+   * Whether to move by viewport size instead of panel count
+   * @defaultValue false
+   */
   moveByViewportSize: boolean;
-  interruptable: boolean;
 }
 
 /**
- * A plugin to easily create prev/right arrow button of Flicking
- * @ko 이전/다음 버튼을 쉽게 만들 수 있는 플러그인
- * @memberof Flicking.Plugins
+ * A plugin to easily create prev/next arrow buttons for Flicking
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/arrow | Demo: Arrow}
  */
 class Arrow implements Plugin {
   /* Internal Values */
   private _flicking: Flicking | null = null;
   private _prevEl: HTMLElement;
   private _nextEl: HTMLElement;
-  private _nextIndex: number;
 
   /* Options */
   private _parentEl: ArrowOptions["parentEl"];
@@ -33,45 +56,98 @@ class Arrow implements Plugin {
   private _disabledClass: ArrowOptions["disabledClass"];
   private _moveCount: ArrowOptions["moveCount"];
   private _moveByViewportSize: ArrowOptions["moveByViewportSize"];
-  private _interruptable: ArrowOptions["interruptable"];
-
-  public get prevEl() { return this._prevEl; }
-  public get nextEl() { return this._nextEl; }
-
-  public get parentEl() { return this._parentEl; }
-  public get prevElSelector() { return this._prevElSelector; }
-  public get nextElSelector() { return this._nextElSelector; }
-  public get disabledClass() { return this._disabledClass; }
-  public get moveCount() { return this._moveCount; }
-  public get moveByViewportSize() { return this._moveByViewportSize; }
-  public get interruptable() { return this._interruptable; }
-
-  public set parentEl(val: ArrowOptions["parentEl"]) { this._parentEl = val; }
-  public set prevElSelector(val: ArrowOptions["prevElSelector"]) { this._prevElSelector = val; }
-  public set nextElSelector(val: ArrowOptions["nextElSelector"]) { this._nextElSelector = val; }
-  public set disabledClass(val: ArrowOptions["disabledClass"]) { this._disabledClass = val; }
-  public set moveCount(val: ArrowOptions["moveCount"]) { this._moveCount = val; }
-  public set moveByViewportSize(val: ArrowOptions["moveByViewportSize"]) { this._moveByViewportSize = val; }
-  public set interruptable(val: ArrowOptions["interruptable"]) { this._interruptable = val; }
-
-  public constructor({
-    parentEl = null,
-    prevElSelector = ARROW.PREV_SELECTOR,
-    nextElSelector = ARROW.NEXT_SELECTOR,
-    disabledClass = ARROW.DISABLED_CLASS,
-    moveCount = 1,
-    moveByViewportSize = false,
-    interruptable = false
-  }: Partial<ArrowOptions> = {}) {
+
+  /** The "previous" arrow HTMLElement
+   * @readonly
+   */
+  public get prevEl() {
+    return this._prevEl;
+  }
+  /** The "next" arrow HTMLElement
+   * @readonly
+   */
+  public get nextEl() {
+    return this._nextEl;
+  }
+
+  /** Current value of the {@link ArrowOptions.parentEl | parentEl} option. */
+  public get parentEl() {
+    return this._parentEl;
+  }
+  /** Current value of the {@link ArrowOptions.prevElSelector | prevElSelector} option. */
+  public get prevElSelector() {
+    return this._prevElSelector;
+  }
+  /** Current value of the {@link ArrowOptions.nextElSelector | nextElSelector} option. */
+  public get nextElSelector() {
+    return this._nextElSelector;
+  }
+  /** Current value of the {@link ArrowOptions.disabledClass | disabledClass} option. */
+  public get disabledClass() {
+    return this._disabledClass;
+  }
+  /** Current value of the {@link ArrowOptions.moveCount | moveCount} option. */
+  public get moveCount() {
+    return this._moveCount;
+  }
+  /** Current value of the {@link ArrowOptions.moveByViewportSize | moveByViewportSize} option. */
+  public get moveByViewportSize() {
+    return this._moveByViewportSize;
+  }
+
+  /** Sets {@link ArrowOptions.parentEl | parentEl}. */
+  public set parentEl(val: ArrowOptions["parentEl"]) {
+    this._parentEl = val;
+  }
+  /** Sets {@link ArrowOptions.prevElSelector | prevElSelector}. */
+  public set prevElSelector(val: ArrowOptions["prevElSelector"]) {
+    this._prevElSelector = val;
+  }
+  /** Sets {@link ArrowOptions.nextElSelector | nextElSelector}. */
+  public set nextElSelector(val: ArrowOptions["nextElSelector"]) {
+    this._nextElSelector = val;
+  }
+  /** Sets {@link ArrowOptions.disabledClass | disabledClass}. */
+  public set disabledClass(val: ArrowOptions["disabledClass"]) {
+    this._disabledClass = val;
+  }
+  /** Sets {@link ArrowOptions.moveCount | moveCount}. */
+  public set moveCount(val: ArrowOptions["moveCount"]) {
+    this._moveCount = val;
+  }
+  /** Sets {@link ArrowOptions.moveByViewportSize | moveByViewportSize}. */
+  public set moveByViewportSize(val: ArrowOptions["moveByViewportSize"]) {
+    this._moveByViewportSize = val;
+  }
+
+  /**
+   * @param options - Options for the Arrow instance
+   * @example
+   * ```ts
+   * flicking.addPlugins(new Arrow({ parentEl: null, prevElSelector: ".flicking-arrow-prev", nextElSelector: ".flicking-arrow-next" }));
+   * ```
+   */
+  public constructor(options: Partial<ArrowOptions> = {}) {
+    const {
+      parentEl = null,
+      prevElSelector = ARROW.PREV_SELECTOR,
+      nextElSelector = ARROW.NEXT_SELECTOR,
+      disabledClass = ARROW.DISABLED_CLASS,
+      moveCount = 1,
+      moveByViewportSize = false
+    } = options;
+
     this._parentEl = parentEl;
     this._prevElSelector = prevElSelector;
     this._nextElSelector = nextElSelector;
     this._disabledClass = disabledClass;
     this._moveCount = moveCount;
     this._moveByViewportSize = moveByViewportSize;
-    this._interruptable = interruptable;
   }
 
+  /** Initialize the plugin and attach arrow 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();
@@ -80,7 +156,6 @@ class Arrow implements Plugin {
     this._flicking = flicking;
 
     flicking.on(EVENTS.MOVE, this._onAnimation);
-    flicking.on(EVENTS.WILL_CHANGE, this._onWillChange);
 
     const parentEl = this._parentEl ? this._parentEl : flicking.element;
     const prevEl = getElement(this._prevElSelector, parentEl, "Arrow");
@@ -100,6 +175,7 @@ class Arrow implements Plugin {
     this.update();
   }
 
+  /** Destroy the plugin and remove all arrow event listeners. */
   public destroy(): void {
     const flicking = this._flicking;
 
@@ -108,7 +184,6 @@ class Arrow implements Plugin {
     }
 
     flicking.off(EVENTS.MOVE, this._onAnimation);
-    flicking.off(EVENTS.WILL_CHANGE, this._onWillChange);
 
     const prevEl = this._prevEl;
     const nextEl = this._nextEl;
@@ -123,6 +198,7 @@ class Arrow implements Plugin {
     this._flicking = null;
   }
 
+  /** Update the arrow disabled/enabled state based on the current camera position. */
   public update(): void {
     this._updateClass(this._flicking!.camera.position);
   }
@@ -133,76 +209,59 @@ class Arrow implements Plugin {
 
   private _onPrevClick = () => {
     const flicking = this._flicking!;
-    const index = flicking.animating ? this._nextIndex : flicking.index;
-    const currentPanel = flicking.animating ? flicking.panels[this._nextIndex] : flicking.currentPanel;
     const camera = flicking.camera;
     const anchorPoints = camera.anchorPoints;
 
-    if ((flicking.animating && !this.interruptable) || anchorPoints.length <= 0) return;
-
-    if (flicking.animating) {
-      flicking.stopAnimation();
-    }
+    if (flicking.animating || anchorPoints.length <= 0) return;
 
     const firstAnchor = anchorPoints[0];
     const moveCount = this._moveCount;
 
     if (this._moveByViewportSize) {
-      flicking.control.moveToPosition(camera.position - camera.size, flicking.duration)
-        .catch(this._onCatch);
+      flicking.control.moveToPosition(camera.position - camera.size, flicking.duration).catch(this._onCatch);
     } else {
       if (flicking.circularEnabled) {
-        let targetPanel = currentPanel;
+        let targetPanel = flicking.currentPanel;
 
         for (let i = 0; i < moveCount; i++) {
           targetPanel = targetPanel.prev()!;
         }
 
         targetPanel.focus().catch(this._onCatch);
-      } else if (index > firstAnchor.panel.index) {
-        flicking.moveTo(Math.max(index - moveCount, firstAnchor.panel.index))
-          .catch(this._onCatch);
+      } else if (flicking.index > firstAnchor.panel.index) {
+        flicking.moveTo(Math.max(flicking.index - moveCount, firstAnchor.panel.index)).catch(this._onCatch);
       } else if (camera.position > camera.range.min) {
-        flicking.moveTo(index)
-          .catch(this._onCatch);
+        flicking.moveTo(flicking.index).catch(this._onCatch);
       }
     }
   };
 
   private _onNextClick = () => {
     const flicking = this._flicking!;
-    const index = flicking.animating ? this._nextIndex : flicking.index;
-    const currentPanel = flicking.animating ? flicking.panels[this._nextIndex] : flicking.currentPanel;
+
     const camera = flicking.camera;
     const anchorPoints = camera.anchorPoints;
 
-    if ((flicking.animating && !this.interruptable) || anchorPoints.length <= 0) return;
-
-    if (flicking.animating) {
-      flicking.stopAnimation();
-    }
+    if (flicking.animating || anchorPoints.length <= 0) return;
 
     const lastAnchor = anchorPoints[anchorPoints.length - 1];
     const moveCount = this._moveCount;
 
     if (this._moveByViewportSize) {
-      flicking.control.moveToPosition(camera.position + camera.size, flicking.duration)
-        .catch(this._onCatch);
+      flicking.control.moveToPosition(camera.position + camera.size, flicking.duration).catch(this._onCatch);
     } else {
       if (flicking.circularEnabled) {
-        let targetPanel = currentPanel;
+        let targetPanel = flicking.currentPanel;
 
         for (let i = 0; i < moveCount; i++) {
           targetPanel = targetPanel.next()!;
         }
 
         targetPanel.focus().catch(this._onCatch);
-      } else if (index < lastAnchor.panel.index) {
-        flicking.moveTo(Math.min(index + moveCount, lastAnchor.panel.index))
-          .catch(this._onCatch);
+      } else if (flicking.index < lastAnchor.panel.index) {
+        flicking.moveTo(Math.min(flicking.index + moveCount, lastAnchor.panel.index)).catch(this._onCatch);
       } else if (camera.position > camera.range.min) {
-        flicking.moveTo(index)
-          .catch(this._onCatch);
+        flicking.moveTo(flicking.index).catch(this._onCatch);
       }
     }
   };
@@ -219,10 +278,6 @@ class Arrow implements Plugin {
     }
   };
 
-  private _onWillChange = (e: WillChangeEvent) => {
-    this._nextIndex = e.index;
-  };
-
   private _updateClass(pos: number) {
     const flicking = this._flicking!;
     const disabledClass = this._disabledClass;
@@ -230,12 +285,8 @@ class Arrow implements Plugin {
     const nextEl = this._nextEl;
     const cameraRange = flicking.camera.range;
 
-    const stopAtPrevEdge = flicking.circularEnabled
-      ? false
-      : pos <= cameraRange.min;
-    const stopAtNextEdge = flicking.circularEnabled
-      ? false
-      : pos >= cameraRange.max;
+    const stopAtPrevEdge = flicking.circularEnabled ? false : pos <= cameraRange.min;
+    const stopAtNextEdge = flicking.circularEnabled ? false : pos >= cameraRange.max;
 
     if (stopAtPrevEdge) {
       addClass(prevEl, disabledClass);