Changeset 45620 for trunk

Timestamp:

07/11/2019 06:17:46 PM (7 years ago)

Author:

azaozz

Message:

TinyMCE: fix flickering inline toolbar when showing a tooltip. Take two.

Fixes #44911.

File:

• trunk/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js (modified) (5 diffs)

trunk/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js

@@ -789 +789 @@
                         mceToolbar,
                         mceStatusbar,
-                        wpStatusbar;
+                        wpStatusbar,
+                        cachedWinSize;
 
                         if ( container ) {
@@ -1105 +1106 @@
 
                 function hide( event ) {
+                        var win;
+                        var size;
+
                         if ( activeToolbar ) {
                                 if ( activeToolbar.tempHide || event.type === 'hide' || event.type === 'blur' ) {
@@ -1115 +1119 @@
                                         event.type === 'scroll'
                                 ) && ! activeToolbar.blockHide ) {
+                                        // Showing a tooltip may trigger a `resize` event in Chromium browsers.
+                                        // That results in a flicketing inline menu; tooltips are shown on hovering over a button,
+                                        // which then hides the toolbar on `resize`, then it repeats as soon as the toolbar is shown again.
+                                        if ( event.type === 'resize' || event.type === 'resizewindow' ) {
+                                                win = editor.getWin();
+                                                size = win.innerHeight + win.innerWidth;
+
+                                                // Reset old cached size.
+                                                if ( cachedWinSize && ( new Date() ).getTime() - cachedWinSize.timestamp > 2000 ) {
+                                                        cachedWinSize = null;
+                                                }
+
+                                                if ( cachedWinSize ) {
+                                                        if ( size && Math.abs( size - cachedWinSize.size ) < 2 ) {
+                                                                // `resize` fired but the window hasn't been resized. Bail.
+                                                                return;
+                                                        }
+                                                } else {
+                                                        // First of a new series of `resize` events. Store the cached size and bail.
+                                                        cachedWinSize = {
+                                                                timestamp: ( new Date() ).getTime(),
+                                                                size: size,
+                                                        };
+
+                                                        return;
+                                                }
+                                        }
+
                                         clearTimeout( timeout );
 
@@ -1137 +1169 @@
                         document.addEventListener( 'scroll', hide, true );
                 } else {
-                        editor.dom.bind( editor.getWin(), 'scroll', hide );
-
-                        // For full height iframe editor.
+                        // Bind to the editor iframe and to the parent window.
+                        editor.dom.bind( editor.getWin(), 'resize scroll', hide );
                         editor.on( 'resizewindow scrollwindow', hide );
                 }
@@ -1146 +1177 @@
                         document.removeEventListener( 'scroll', hide, true );
                         editor.off( 'resizewindow scrollwindow', hide );
-                        editor.dom.unbind( editor.getWin(), 'scroll', hide );
+                        editor.dom.unbind( editor.getWin(), 'resize scroll', hide );
                 } );