Make WordPress Core

Changeset 45620


Ignore:
Timestamp:
07/11/2019 06:17:46 PM (5 years ago)
Author:
azaozz
Message:

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

Fixes #44911.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js

    r45610 r45620  
    789789            mceToolbar,
    790790            mceStatusbar,
    791             wpStatusbar;
     791            wpStatusbar,
     792            cachedWinSize;
    792793
    793794            if ( container ) {
     
    11051106
    11061107        function hide( event ) {
     1108            var win;
     1109            var size;
     1110
    11071111            if ( activeToolbar ) {
    11081112                if ( activeToolbar.tempHide || event.type === 'hide' || event.type === 'blur' ) {
     
    11151119                    event.type === 'scroll'
    11161120                ) && ! activeToolbar.blockHide ) {
     1121                    // Showing a tooltip may trigger a `resize` event in Chromium browsers.
     1122                    // That results in a flicketing inline menu; tooltips are shown on hovering over a button,
     1123                    // which then hides the toolbar on `resize`, then it repeats as soon as the toolbar is shown again.
     1124                    if ( event.type === 'resize' || event.type === 'resizewindow' ) {
     1125                        win = editor.getWin();
     1126                        size = win.innerHeight + win.innerWidth;
     1127
     1128                        // Reset old cached size.
     1129                        if ( cachedWinSize && ( new Date() ).getTime() - cachedWinSize.timestamp > 2000 ) {
     1130                            cachedWinSize = null;
     1131                        }
     1132
     1133                        if ( cachedWinSize ) {
     1134                            if ( size && Math.abs( size - cachedWinSize.size ) < 2 ) {
     1135                                // `resize` fired but the window hasn't been resized. Bail.
     1136                                return;
     1137                            }
     1138                        } else {
     1139                            // First of a new series of `resize` events. Store the cached size and bail.
     1140                            cachedWinSize = {
     1141                                timestamp: ( new Date() ).getTime(),
     1142                                size: size,
     1143                            };
     1144
     1145                            return;
     1146                        }
     1147                    }
     1148
    11171149                    clearTimeout( timeout );
    11181150
     
    11371169            document.addEventListener( 'scroll', hide, true );
    11381170        } else {
    1139             editor.dom.bind( editor.getWin(), 'scroll', hide );
    1140 
    1141             // For full height iframe editor.
     1171            // Bind to the editor iframe and to the parent window.
     1172            editor.dom.bind( editor.getWin(), 'resize scroll', hide );
    11421173            editor.on( 'resizewindow scrollwindow', hide );
    11431174        }
     
    11461177            document.removeEventListener( 'scroll', hide, true );
    11471178            editor.off( 'resizewindow scrollwindow', hide );
    1148             editor.dom.unbind( editor.getWin(), 'scroll', hide );
     1179            editor.dom.unbind( editor.getWin(), 'resize scroll', hide );
    11491180        } );
    11501181
Note: See TracChangeset for help on using the changeset viewer.