From c3c666e5683ca41010ab97742f3d1eb2b14e476e Mon Sep 17 00:00:00 2001
From: drlight17 <37434652+drlight17@users.noreply.github.com>
Date: Fri, 3 Mar 2023 13:52:24 +0300
Subject: [PATCH] dragresize over iframe fix function concept (#3157)

Fixes stuttering of conversejs overlayed dragresize UI elements over the iframes on the parent page.
---
 CHANGES.md                      |  1 +
 src/plugins/dragresize/index.js | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/CHANGES.md b/CHANGES.md
index ff9ab0949..f15fbf882 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -7,6 +7,7 @@
 - Fix `autojoin` checkbox state in MUC bookmark form
 - Remove call to `api.confirm` in `@converse/headless`
 - Generate TypeScript declaration files into `dist/types`
+- #3156: Add function to prevent drag stutter effect over iframes when resize is called in overlay mode
 
 ## 10.1.2 (2023-02-17)
 
diff --git a/src/plugins/dragresize/index.js b/src/plugins/dragresize/index.js
index aab53a9a4..990a5604d 100644
--- a/src/plugins/dragresize/index.js
+++ b/src/plugins/dragresize/index.js
@@ -67,8 +67,31 @@ converse.plugins.add('converse-dragresize', {
             document.removeEventListener('mouseup', onMouseUp);
         }
 
+        /**
+         * This function registers mousedown and mouseup events hadlers to 
+         * all iframes in the DOM when converse UI resizing events are called
+         * to prevent mouse drag stutter effect which is bad user experience.
+         * @function dragresizeOverIframeHandler
+         * @param {Object} e - dragging node element.
+         */
+        function dragresizeOverIframeHandler (e) {
+          const iframes = document.getElementsByTagName('iframe');
+          for (let iframe of iframes) {
+            e.addEventListener('mousedown', () => {
+                iframe.style.pointerEvents  = 'none';
+            }, { once: true });
+            
+            e.addEventListener('mouseup', () => {
+                iframe.style.pointerEvents  = 'initial';
+            }, { once: true });
+          }
+        }
+        
         api.listen.on('registeredGlobalEventHandlers', registerGlobalEventHandlers);
         api.listen.on('unregisteredGlobalEventHandlers', unregisterGlobalEventHandlers);
         api.listen.on('beforeShowingChatView', view => view.initDragResize().setDimensions());
+        api.listen.on('startDiagonalResize', dragresizeOverIframeHandler);
+        api.listen.on('startHorizontalResize', dragresizeOverIframeHandler);
+        api.listen.on('startVerticalResize', dragresizeOverIframeHandler);
     }
 });