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