feat: add preventDefaultOnDrag option (#820)

* feat: add preventDefaultOnDrag option * test: update unit test * fix: fix googleAnalytics id
naver · Aug 2, 2023 · 5a52956 · 5a52956
1 parent d4016b3
commit 5a52956
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 10 deletions.
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -179,7 +179,7 @@ module.exports = {
           ]
         },
         googleAnalytics: {
-          trackingID: "UA-70842526-17",
+          trackingID: "G-LWLTCXMENE",
           anonymizeIP: true
         }
       }

diff --git a/jsdoc.json b/jsdoc.json
@@ -28,7 +28,7 @@
     },
     "applicationName": "Flicking",
     "disqus": "egjs",
-    "googleAnalytics": "UA-70842526-17",
+    "googleAnalytics": "G-LWLTCXMENE",
     "openGraph": {
       "title": "Flicking - API",
       "type": "website",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -139,7 +139,7 @@
 		"typescript-transform-paths": "^2.2.3"
 	},
 	"dependencies": {
-		"@egjs/axes": "^3.8.5",
+		"@egjs/axes": "^3.9.0",
 		"@egjs/component": "^3.0.1",
 		"@egjs/imready": "^1.3.1",
 		"@egjs/list-differ": "^1.0.1"

diff --git a/src/Flicking.ts b/src/Flicking.ts
@@ -77,6 +77,7 @@ export interface FlickingOptions {
   bounce: number | string | [number | string, number | string];
   iOSEdgeSwipeThreshold: number;
   preventClickOnDrag: boolean;
+  preventDefaultOnDrag: boolean;
   disableOnInit: boolean;
   changeOnHold: boolean;
 
@@ -155,6 +156,7 @@ class Flicking extends Component<FlickingEvents> {
   private _bounce: FlickingOptions["bounce"];
   private _iOSEdgeSwipeThreshold: FlickingOptions["iOSEdgeSwipeThreshold"];
   private _preventClickOnDrag: FlickingOptions["preventClickOnDrag"];
+  private _preventDefaultOnDrag: FlickingOptions["preventDefaultOnDrag"];
   private _disableOnInit: FlickingOptions["disableOnInit"];
   private _changeOnHold: FlickingOptions["changeOnHold"];
 
@@ -589,6 +591,14 @@ class Flicking extends Component<FlickingEvents> {
    * @see {@link https://naver.github.io/egjs-flicking/Options#preventclickondrag preventClickOnDrag ( Options )}
    */
   public get preventClickOnDrag() { return this._preventClickOnDrag; }
+  /**
+   * Whether to use the {@link https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault preventDefault} when the user starts dragging
+   * @ko 사용자가 드래그를 시작할 때 {@link https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault preventDefault} 실행 여부
+   * @type {boolean}
+   * @default false
+   * @see {@link https://naver.github.io/egjs-flicking/Options#preventDefaultOnDrag preventDefaultOnDrag ( Options )}
+   */
+  public get preventDefaultOnDrag() { return this._preventDefaultOnDrag; }
   /**
    * Automatically call {@link Flicking#disableInput disableInput()} on initialization
    * @ko Flicking init시에 {@link Flicking#disableInput disableInput()}을 바로 호출합니다
@@ -875,6 +885,15 @@ class Flicking extends Component<FlickingEvents> {
     this._preventClickOnDrag = val;
   }
 
+  public set preventDefaultOnDrag(val: FlickingOptions["preventDefaultOnDrag"]) {
+    this._preventDefaultOnDrag = val;
+    const panInput = this._control.controller.panInput;
+
+    if (panInput) {
+      panInput.options.preventDefaultOnDrag = val;
+    }
+  }
+
   public set disableOnInit(val: FlickingOptions["disableOnInit"]) { this._disableOnInit = val; }
   public set changeOnHold(val: FlickingOptions["changeOnHold"]) { this._changeOnHold = val; }
   // PERFORMANCE
@@ -954,6 +973,7 @@ class Flicking extends Component<FlickingEvents> {
     bounce = "20%",
     iOSEdgeSwipeThreshold = 30,
     preventClickOnDrag = true,
+    preventDefaultOnDrag = false,
     disableOnInit = false,
     changeOnHold = false,
     renderOnlyVisible = false,
@@ -998,6 +1018,7 @@ class Flicking extends Component<FlickingEvents> {
     this._bounce = bounce;
     this._iOSEdgeSwipeThreshold = iOSEdgeSwipeThreshold;
     this._preventClickOnDrag = preventClickOnDrag;
+    this._preventDefaultOnDrag = preventDefaultOnDrag;
     this._disableOnInit = disableOnInit;
     this._changeOnHold = changeOnHold;
     this._renderOnlyVisible = renderOnlyVisible;

diff --git a/src/control/AxesController.ts b/src/control/AxesController.ts
@@ -149,6 +149,7 @@ class AxesController {
       inputType: flicking.inputType,
       threshold: 1,
       iOSEdgeSwipeThreshold: flicking.iOSEdgeSwipeThreshold,
+      preventDefaultOnDrag: flicking.preventDefaultOnDrag,
       scale: flicking.horizontal ? [-1, 0] : [0, -1],
       releaseOnScroll: true
     });

diff --git a/test/unit/Flicking.spec.ts b/test/unit/Flicking.spec.ts
@@ -985,6 +985,36 @@ describe("Flicking", () => {
       });
     });
 
+    describe("preventDefaultOnDrag", () => {
+      it("should check preventDefault is applied if preventDefaultOnDrag is true", async () => {
+        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { preventDefaultOnDrag: true });
+        const viewport = flicking.viewport;
+
+        // Given
+        const mouseDown = new MouseEvent("mousedown", { buttons: 1, cancelable: true });
+
+        // When
+        viewport.element.dispatchEvent(mouseDown);
+
+        // Then
+        expect(mouseDown.defaultPrevented).to.be.true;
+      });
+
+      it("should check preventDefault is not applied if preventDefaultOnDrag is false", async () => {
+        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { preventDefaultOnDrag: false });
+        const viewport = flicking.viewport;
+
+        // Given
+        const mouseDown = new MouseEvent("mousedown", { buttons: 1, cancelable: true });
+
+        // When
+        viewport.element.dispatchEvent(mouseDown);
+
+        // Then
+        expect(mouseDown.defaultPrevented).to.be.false;
+      });
+    });
+
     describe("changeOnHold", () => {
       it("should be false by default", async () => {
         const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);