Fixed #14375 - Add touch device support

primefaces · Dec 20, 2023 · 50b74d0 · 50b74d0
1 parent fa530a1
commit 50b74d0
Showing 1 changed file with 46 additions and 8 deletions.
diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts
@@ -451,6 +451,11 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
      * @group Props
      */
     @Input() ariaLabelledBy: string | undefined;
+    /**
+     * Press delay in touch devices as miliseconds.
+     * @group Props
+     */
+    @Input() pressDelay: number | undefined = 500;
     /**
      * Callback to invoke when overlay menu is shown.
      * @group Emits
@@ -484,6 +489,8 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
 
     documentTriggerListener: VoidListener;
 
+    touchEndListener: VoidListener;
+
     pageX: number;
 
     pageY: number;
@@ -510,6 +517,8 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
 
     _model: MenuItem[] | undefined;
 
+    pressTimer: any;
+
     get visibleItems() {
         const processedItem = this.activeItemPath().find((p) => p.key === this.focusedItemInfo().parentKey);
 
@@ -554,17 +563,31 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
         this.bindTriggerEventListener();
     }
 
+    isMobile() {
+        return DomHandler.isIOS() || DomHandler.isAndroid();
+    }
+
     bindTriggerEventListener() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.triggerEventListener) {
-                if (this.global) {
-                    this.triggerEventListener = this.renderer.listen(this.document, this.triggerEvent, (event) => {
-                        this.show(event);
-                    });
-                } else if (this.target) {
-                    this.triggerEventListener = this.renderer.listen(this.target, this.triggerEvent, (event) => {
-                        this.show(event);
-                    });
+                if (!this.isMobile()) {
+                    if (this.global) {
+                        this.triggerEventListener = this.renderer.listen(this.document, this.triggerEvent, (event) => {
+                            this.show(event);
+                        });
+                    } else if (this.target) {
+                        this.triggerEventListener = this.renderer.listen(this.target, this.triggerEvent, (event) => {
+                            this.show(event);
+                        });
+                    }
+                } else {
+                    if (this.global) {
+                        this.triggerEventListener = this.renderer.listen(this.document, 'touchstart', this.onTouchStart.bind(this));
+                        this.touchEndListener = this.renderer.listen(this.document, 'touchend', this.onTouchEnd.bind(this));
+                    } else if (this.target) {
+                        this.triggerEventListener = this.renderer.listen(this.target, 'touchstart', this.onTouchStart.bind(this));
+                        this.touchEndListener = this.renderer.listen(this.target, 'touchend', this.onTouchEnd.bind(this));
+                    }
                 }
             }
         }
@@ -950,6 +973,16 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
         this.onHide.emit();
     }
 
+    onTouchStart(event: MouseEvent) {
+        this.pressTimer = setTimeout(() => {
+            this.show(event);
+        }, this.pressDelay);
+    }
+
+    onTouchEnd() {
+        clearTimeout(this.pressTimer);
+    }
+
     hide() {
         this.visible.set(false);
         this.activeItemPath.set([]);
@@ -1134,6 +1167,11 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
             this.resizeListener();
             this.resizeListener = null;
         }
+
+        if (this.touchEndListener) {
+            this.touchEndListener();
+            this.touchEndListener = null;
+        }
     }
 
     unbindTriggerEventListener() {