@egjs/flicking 4.15.0 → 4.16.0-beta.1

package/package.json

@@ -1,163 +1,36 @@
 {
-	"name": "@egjs/flicking",
-	"version": "4.15.0",
-	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
-	"main": "dist/flicking.cjs.js",
-	"module": "dist/flicking.esm.js",
-	"sideEffects": [
-		"**/*.css",
-		"**/*.sass"
-	],
-	"es2015": "dist/flicking.esm.js",
-	"types": "declaration/index.d.ts",
-	"scripts": {
-		"start": "concurrently \"rollup -w --config ./rollup.config.dev.js\" \"http-serve\"",
-		"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": "sass sass/:dist/ --style=expanded --no-source-map && sass sass/flicking.sass dist/flicking.min.css --style=compressed --no-source-map && sass sass/flicking-inline.sass dist/flicking-inline.min.css --style=compressed --no-source-map",
-		"build:css-prefix": "postcss dist/*.css --replace --use autoprefixer --no-map",
-		"build:css-min": "postcss dist/*.css --ext .min.css --use postcss-clean -d dist/ --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",
-		"test": "npm run test --prefix test/unit",
-		"test:chrome": "npm run test:chrome --prefix test/unit",
-		"test:cfc": "npm run test --prefix test/cfc",
-		"lint": "eslint src/**/*.ts",
-		"lint:test": "eslint 'test/unit/**/*.ts'",
-		"jsdoc": "jsdoc -c jsdoc.json",
-		"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 && 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",
-		"demo:deploy-origin": "npm run docs:release && npm run build && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d docs/build/ --add --remote origin",
-		"release": "release-helper upstream",
-		"changelog": "node ./config/changelog.js",
-		"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
-		"packages": "npm run packages:update && npm run packages:build && npm run packages:publish",
-		"packages:update": "pvu --update=react-flicking,ngx-flicking/projects/ngx-flicking,vue-flicking,vue3-flicking,svelte-flicking",
-		"packages:build": "pvu --build=react-flicking,ngx-flicking,vue-flicking,vue3-flicking,svelte-flicking",
-		"packages:publish": "pvu --publish=react-flicking,ngx-flicking/dist/ngx-flicking,vue-flicking,vue3-flicking,svelte-flicking"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/naver/egjs-flicking"
-	},
-	"author": {
-		"name": "NAVER Corp."
-	},
-	"homepage": "https://naver.github.io/egjs-flicking/",
-	"bugs": {
-		"url": "https://github.com/naver/egjs-flicking/issues"
-	},
-	"license": "MIT",
-	"browserslist": [
-		"last 2 version",
-		"ie 9-11",
-		"not op_mini all"
-	],
-	"keywords": [
-		"carousel",
-		"flicking",
-		"slider",
-		"mouse",
-		"touch",
-		"desktop",
-		"mobile",
-		"react",
-		"vue",
-		"angular",
-		"preact",
-		"gallery",
-		"slideshow",
-		"swipe",
-		"egjs"
-	],
-	"devDependencies": {
-		"@babel/preset-env": "^7.16.0",
-		"@daybrush/jsdoc": "^0.3.10",
-		"@egjs/flicking-plugins": "^4.2.2",
-		"@egjs/release-helper": "0.0.3",
-		"@rollup/plugin-babel": "^5.3.0",
-		"@rollup/plugin-commonjs": "^11.1.0",
-		"@rollup/plugin-node-resolve": "^7.1.3",
-		"@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.8",
-		"babel-loader": "^8.2.2",
-		"babel-preset-env": "^1.7.0",
-		"concurrently": "^6.0.0",
-		"core-js": "^3.9.1",
-		"coveralls": "^3.0.2",
-		"cpx": "^1.5.0",
-		"egjs-jsdoc-template": "^1.4.4",
-		"eslint": "^7.22.0",
-		"eslint-plugin-import": "^2.22.1",
-		"eslint-plugin-jsdoc": "^30.7.9",
-		"eslint-plugin-prefer-arrow": "^1.2.3",
-		"fs-extra": "^7.0.1",
-		"gh-pages": "^2.0.1",
-		"hammer-simulator": "0.0.1",
-		"html-to-react": "^1.4.5",
-		"http-serve": "^1.0.1",
-		"husky": "^1.3.1",
-		"jsdoc-to-mdx": "^1.1.2",
-		"karma-typescript-es6-transform": "^5.5.2",
-		"npm-run-all": "^4.1.5",
-		"postcss-clean": "^1.2.2",
-		"postcss-cli": "^7.1.2",
-		"print-coveralls": "^1.2.2",
-		"print-sizes": "0.0.3",
-		"pvu": "^0.6.1",
-		"rollup": "^2.41.5",
-		"rollup-plugin-livereload": "^1.3.0",
-		"rollup-plugin-postcss": "^3.1.3",
-		"rollup-plugin-prototype-minify": "^1.1.0",
-		"rollup-plugin-serve": "^1.1.0",
-		"rollup-plugin-terser": "^7.0.2",
-		"rollup-plugin-typescript2": "^0.36.0",
-		"rollup-plugin-visualizer": "^4.2.1",
-		"sass": "^1.79.3",
-		"sync-exec": "^0.6.2",
-		"ts-mock-imports": "^1.3.3",
-		"tsconfig-paths-webpack-plugin": "^3.5.1",
-		"tslib": "^2.1.0",
-		"tslint": "^5.12.1",
-		"ttypescript": "^1.5.12",
-		"typescript": "^3.9.10",
-		"typescript-transform-paths": "^2.2.3"
-	},
-	"dependencies": {
-		"@cfcs/core": "^0.1.0",
-		"@egjs/axes": "^3.9.1",
-		"@egjs/component": "^3.0.1",
-		"@egjs/imready": "^1.3.1",
-		"@egjs/list-differ": "^1.0.1"
-	},
-	"husky": {
-		"hooks": {
-			"commit-msg": "node config/validate-commit-msg.js",
-			"pre-push": "npm run lint"
-		}
-	},
-	"watch": {
-		"jsdoc": {
-			"patterns": [
-				"src"
-			],
-			"extensions": "ts",
-			"runOnChangeOnly": false
-		}
-	}
-}
+  "name": "@egjs/flicking",
+  "version": "4.16.0-beta.1",
+  "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
+  "main": "dist/flicking.cjs.js",
+  "module": "dist/flicking.esm.js",
+  "es2015": "dist/flicking.esm.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@cfcs/core": "^0.1.0",
+    "@egjs/axes": "^3.9.1",
+    "@egjs/component": "^3.0.2",
+    "@egjs/imready": "^1.1.1",
+    "@egjs/list-differ": "^1.0.1"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.sass"
+  ],
+  "scripts": {
+    "dev": "vite --config vite.dev.config.ts",
+    "dev:preview": "vite --config vite.dev.config.ts --mode production",
+    "build": "run-s build:bundle build:css build:declaration printsizes",
+    "build:bundle": "rm -rf ./dist && run-s build:bundle:common build:bundle:umd",
+    "build:bundle:common": "vite build",
+    "build:bundle:umd": "concurrently \"VITE_BUILD_FORMAT=umd vite build\" \"VITE_BUILD_FORMAT=umd VITE_MINIFY=true vite build\" \"VITE_BUILD_FORMAT=umd VITE_RESOLVE=true vite build\" \"VITE_BUILD_FORMAT=umd VITE_RESOLVE=true VITE_MINIFY=true vite build\"",
+    "build:css": "run-s build:css-clear build:sass build:css-prefix build:css-min",
+    "build:css-clear": "rm -rf ./dist/*.css",
+    "build:sass": "sass sass/:dist/ --style=expanded --no-source-map && sass sass/flicking.sass dist/flicking.min.css --style=compressed --no-source-map && sass sass/flicking-inline.sass dist/flicking-inline.min.css --style=compressed --no-source-map",
+    "build:css-prefix": "postcss dist/*.css --replace --use autoprefixer --no-map",
+    "build:css-min": "postcss dist/*.css --ext .min.css --use postcss-clean -d dist/ --no-map",
+    "build:declaration": "tsc -p tsconfig.declaration.json",
+    "css": "postcss css/*.css --use autoprefixer postcss-clean -d dist/ -m",
+    "printsizes": "print-sizes ./dist --exclude=\\.map"
+  }
+}

package/src/CrossFlicking.ts

@@ -4,10 +4,11 @@
  */
 import { ComponentEvent } from "@egjs/component";
 import { EventKey } from "@egjs/component/declaration/types";
-
-import Flicking, { FlickingEvents, FlickingOptions } from "./Flicking";
+import { CLASS, MOVE_DIRECTION } from "./constants/values";
+import { EVENTS } from "./event/names";
 import {
   ChangedEvent,
+  FlickingEvents,
   HoldEndEvent,
   HoldStartEvent,
   MoveEndEvent,
@@ -16,9 +17,9 @@ import {
   RestoredEvent,
   WillChangeEvent,
   WillRestoreEvent
-} from "./type/event";
-import { LiteralUnion, ValueOf } from "./type/internal";
-import { CLASS, EVENTS, MOVE_DIRECTION } from "./const/external";
+} from "./event/types";
+import Flicking, { FlickingOptions } from "./Flicking";
+import { LiteralUnion, ValueOf } from "./types/internal";
 import { getDataAttributes, includes, toArray } from "./utils";
 
 export const SIDE_EVENTS = {
@@ -69,6 +70,11 @@ export interface CrossFlickingWillChangeEvent extends WillChangeEvent {
   sideIndex?: number;
 }
 
+/**
+ * A preset for cross-directional carousel that combines horizontal and vertical Flicking instances
+ * @since 4.12.0
+ * @public
+ */
 export class CrossFlicking extends Flicking {
   // Core components
   private _sideFlicking: Flicking[];
@@ -99,13 +105,21 @@ export class CrossFlicking extends Flicking {
   }
 
   // Options Getter
-  public get sideOptions() { return this._sideOptions; }
+  public get sideOptions() {
+    return this._sideOptions;
+  }
 
-  public get preserveIndex() { return this._preserveIndex; }
+  public get preserveIndex() {
+    return this._preserveIndex;
+  }
 
-  public get disableSlideOnHold() { return this._disableSlideOnHold; }
+  public get disableSlideOnHold() {
+    return this._disableSlideOnHold;
+  }
 
-  public get disableIndexSync() { return this._disableIndexSync; }
+  public get disableIndexSync() {
+    return this._disableIndexSync;
+  }
 
   // Options Setter
   public set sideOptions(val: CrossFlickingOptions["sideOptions"]) {
@@ -124,17 +138,9 @@ export class CrossFlicking extends Flicking {
     this._disableIndexSync = val;
   }
 
-  public constructor(
-    root: HTMLElement | string,
-    options: Partial<CrossFlickingOptions>
-  ) {
+  public constructor(root: HTMLElement | string, options: Partial<CrossFlickingOptions>) {
     super(root, options);
-    const {
-      sideOptions = {},
-      preserveIndex = true,
-      disableSlideOnHold = true,
-      disableIndexSync = false
-    } = options;
+    const { sideOptions = {}, preserveIndex = true, disableSlideOnHold = true, disableIndexSync = false } = options;
 
     // Internal states
     this._moveDirection = null;
@@ -157,7 +163,7 @@ export class CrossFlicking extends Flicking {
   }
 
   public destroy(): void {
-    this._sideFlicking.forEach((flicking) => {
+    this._sideFlicking.forEach(flicking => {
       flicking.destroy();
     });
     super.destroy();
@@ -167,7 +173,7 @@ export class CrossFlicking extends Flicking {
     this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
     this.on(EVENTS.MOVE, this._onHorizontalMove);
     this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
-    [EVENTS.CHANGED, EVENTS.WILL_CHANGE].forEach((event) => {
+    [EVENTS.CHANGED, EVENTS.WILL_CHANGE].forEach(event => {
       this.on(event, this._addSideIndex);
     });
 
@@ -178,7 +184,7 @@ export class CrossFlicking extends Flicking {
       flicking.on(EVENTS.CHANGED, this._onSideChanged);
 
       Object.keys(SIDE_EVENTS).forEach((name: EventKey<FlickingEvents>) => {
-        flicking.on(EVENTS[name], (event) => {
+        flicking.on(EVENTS[name], event => {
           this.trigger(
             new ComponentEvent(SIDE_EVENTS[name], {
               mainIndex,
@@ -194,10 +200,7 @@ export class CrossFlicking extends Flicking {
     const viewportEl = this.element;
     const cameraEl = this.camera.element;
     const panels = toArray(cameraEl.children) as HTMLElement[];
-    const isCrossStructure = getDataAttributes(
-      viewportEl,
-      "data-cross-"
-    ).structure;
+    const isCrossStructure = getDataAttributes(viewportEl, "data-cross-").structure;
     let sideState: SideState[] = [];
 
     if (!isCrossStructure) {
@@ -229,16 +232,14 @@ export class CrossFlicking extends Flicking {
     sideState.forEach((state, i) => {
       const panel = this.camera.children[i];
       sidePanels += state.element.innerHTML;
-      Array.from(panel.attributes).forEach((attribute) =>
-        panel.removeAttribute(attribute.name)
-      );
+      Array.from(panel.attributes).forEach(attribute => panel.removeAttribute(attribute.name));
     });
 
     sideCamera.innerHTML = sidePanels;
 
     sideState.forEach((_, i) => {
       const panel = this.camera.children[i];
-      [CLASS.VIEWPORT, CLASS.VERTICAL].forEach((className) => {
+      [CLASS.VIEWPORT, CLASS.VERTICAL].forEach(className => {
         if (!panel.classList.contains(className)) {
           panel.classList.add(className);
         }
@@ -249,13 +250,11 @@ export class CrossFlicking extends Flicking {
     this.element.setAttribute("data-cross-structure", "true");
   }
 
-  private _getGroupFromAttribute(
-    panels: HTMLElement[]
-  ): Record<string, HTMLElement[]> {
+  private _getGroupFromAttribute(panels: HTMLElement[]): Record<string, HTMLElement[]> {
     const groupKeys: string[] = [];
     const groupPanels: Record<string, HTMLElement[]> = {};
 
-    panels.forEach((panel) => {
+    panels.forEach(panel => {
       const groupKey = getDataAttributes(panel, "data-cross-").groupkey;
       if (groupKey && !includes(groupKeys, groupKey)) {
         groupKeys.push(groupKey);
@@ -268,49 +267,38 @@ export class CrossFlicking extends Flicking {
     return groupPanels;
   }
 
-  private _getSideStateFromGroup(
-    groupPanels: Record<string, HTMLElement[]>
-  ): SideState[] {
-    return Object.keys(groupPanels).reduce(
-      (state: SideState[], key: string) => {
-        const start = state.length ? +state[state.length - 1].end + 1 : 0;
-        const element = groupPanels[key].reduce(
-          (el: HTMLElement, panel: HTMLElement) => {
-            el.innerHTML += panel.outerHTML;
-            return el;
-          },
-          document.createElement("div")
-        );
-        return [
-          ...state,
-          {
-            key,
-            start,
-            end: start + groupPanels[key].length - 1,
-            element: element
-          }
-        ];
-      },
-      []
-    );
+  private _getSideStateFromGroup(groupPanels: Record<string, HTMLElement[]>): SideState[] {
+    return Object.keys(groupPanels).reduce((state: SideState[], key: string) => {
+      const start = state.length ? +state[state.length - 1].end + 1 : 0;
+      const element = groupPanels[key].reduce((el: HTMLElement, panel: HTMLElement) => {
+        el.innerHTML += panel.outerHTML;
+        return el;
+      }, document.createElement("div"));
+      return [
+        ...state,
+        {
+          key,
+          start,
+          end: start + groupPanels[key].length - 1,
+          element: element
+        }
+      ];
+    }, []);
   }
 
   private _getSideStateFromPanels(panels: HTMLElement[]): SideState[] {
-    return panels.reduce(
-      (state: SideState[], panel: HTMLElement, i: number) => {
-        const start = state.length ? +state[state.length - 1].end + 1 : 0;
-        return [
-          ...state,
-          {
-            key: i.toString(),
-            start,
-            end: start + panel.children.length - 1,
-            element: panel
-          }
-        ];
-      },
-      []
-    );
+    return panels.reduce((state: SideState[], panel: HTMLElement, i: number) => {
+      const start = state.length ? +state[state.length - 1].end + 1 : 0;
+      return [
+        ...state,
+        {
+          key: i.toString(),
+          start,
+          end: start + panel.children.length - 1,
+          element: panel
+        }
+      ];
+    }, []);
   }
 
   private _getSideStateFromCrossStructure(panels: HTMLElement[]): SideState[] {
@@ -346,25 +334,18 @@ export class CrossFlicking extends Flicking {
     });
   };
 
-  private _setDraggable = (
-    direction: ValueOf<typeof MOVE_DIRECTION>,
-    draggable: boolean
-  ): void => {
+  private _setDraggable = (direction: ValueOf<typeof MOVE_DIRECTION>, draggable: boolean): void => {
     if (!this._disableSlideOnHold) {
       return;
     }
 
     const dragThreshold = this._originalDragThreshold;
-    const threshold = draggable
-      ? dragThreshold && dragThreshold >= 10
-        ? dragThreshold
-        : 10
-      : Infinity;
+    const threshold = draggable ? (dragThreshold && dragThreshold >= 10 ? dragThreshold : 10) : Infinity;
 
     if ((direction === MOVE_DIRECTION.HORIZONTAL) === this.horizontal) {
       this.dragThreshold = threshold;
     } else if ((direction === MOVE_DIRECTION.VERTICAL) === this.horizontal) {
-      this._sideFlicking.forEach((child) => {
+      this._sideFlicking.forEach(child => {
         child.dragThreshold = threshold;
       });
     }
@@ -412,10 +393,7 @@ export class CrossFlicking extends Flicking {
     const visiblePanels = this.visiblePanels;
 
     if (visiblePanels.length > 1) {
-      this._nextIndex =
-        e.direction === "NEXT"
-          ? visiblePanels[1].index
-          : visiblePanels[0].index;
+      this._nextIndex = e.direction === "NEXT" ? visiblePanels[1].index : visiblePanels[0].index;
     } else {
       this._nextIndex = visiblePanels[0].index;
     }
@@ -427,10 +405,7 @@ export class CrossFlicking extends Flicking {
     requestAnimationFrame(() => this._setPreviousSideIndex());
 
     if (e.isTrusted) {
-      this._syncToCategory(
-        this._sideFlicking[this._nextIndex].index,
-        this._nextIndex
-      );
+      this._syncToCategory(this._sideFlicking[this._nextIndex].index, this._nextIndex);
     }
   };
 
@@ -454,10 +429,7 @@ export class CrossFlicking extends Flicking {
   private _onSideChanged = (e: ChangedEvent): void => {
     // If this.visiblePanels.length >= 2, it means that horizontal flicking is being dragged.
     // In this case, syncToCategory in _onHorizontalMoveEnd will fire after moving finishes, so we don't fire it here.
-    if (
-      this.visiblePanels.length < 2 &&
-      this._sideFlicking[this.index] === e.currentTarget
-    ) {
+    if (this.visiblePanels.length < 2 && this._sideFlicking[this.index] === e.currentTarget) {
       this._syncToCategory(e.index, this.index);
     }
   };