dragresize over iframe fix function concept (#3157)

Fixes stuttering of conversejs overlayed dragresize UI elements over the iframes on the parent page.

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)
 

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);
     }
 });