WordPress.org

Make WordPress Core

Changeset 32831


Ignore:
Timestamp:
06/18/2015 11:09:56 AM (6 years ago)
Author:
iseulde
Message:

TinyMCE: show inline toolbar after scroll/resize

Also:

  • Reduce the amount of callbacks.
  • Move everything under preinit (but prepend to the callback). The API shouldn't be availbale earlier, and some UI is not available yet, neither is editor.dom.
  • Hide the toolbar if the target is out of view.

See #32604.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

    r32818 r32831  
    444444     * This functionality will change in the next releases. Not recommended for use by plugins.
    445445     */
    446     ( function() {
     446    editor.on( 'preinit', function() {
    447447        var Factory = tinymce.ui.Factory,
    448448            settings = editor.settings,
    449449            activeToolbar,
    450450            currentSelection,
     451            timeout,
    451452            wpAdminbar = document.getElementById( 'wpadminbar' ),
    452             mceIframe, mceToolbar, mceStatusbar, wpStatusbar;
    453 
    454         editor.on( 'init', function() {
    455             mceIframe = document.getElementById( editor.id + '_ifr' );
    456             mceToolbar = tinymce.$( '.mce-toolbar-grp', editor.getContainer() )[0];
    457             mceStatusbar = tinymce.$( '.mce-statusbar', editor.getContainer() )[0];
     453            mceIframe = document.getElementById( editor.id + '_ifr' ),
     454            mceToolbar = tinymce.$( '.mce-toolbar-grp', editor.getContainer() )[0],
     455            mceStatusbar = tinymce.$( '.mce-statusbar', editor.getContainer() )[0],
     456            wpStatusbar;
    458457
    459458            if ( editor.id === 'content' ) {
    460459                wpStatusbar = document.getElementById( 'post-status-info' );
    461460            }
    462         } );
    463461
    464462        function create( buttons, bottom ) {
     
    587585
    588586            toolbar.bottom = bottom;
    589 
    590             function hide() {
    591                 toolbar.hide();
    592             }
    593587
    594588            function reposition() {
     
    618612                    top, left;
    619613
     614                if ( spaceTop >= editorHeight || spaceBottom >= editorHeight ) {
     615                    return this.hide();
     616                }
     617
    620618                if ( this.bottom ) {
    621619                    if ( spaceBottom >= spaceNeeded ) {
     
    678676            } );
    679677
    680             toolbar.on( 'remove', function() {
    681                 DOM.unbind( window, 'resize scroll', hide );
    682                 editor.dom.unbind( editor.getWin(), 'resize scroll', hide );
    683                 editor.off( 'blur hide', hide );
    684             } );
    685 
    686             editor.once( 'init', function() {
    687                 DOM.bind( window, 'resize scroll', hide );
    688                 editor.dom.bind( editor.getWin(), 'resize scroll', hide );
    689                 editor.on( 'blur hide', hide );
    690             } );
    691 
    692678            toolbar.reposition = reposition;
    693679            toolbar.hide().renderTo( document.body );
     
    736722        } );
    737723
    738         editor.on( 'hide', function() {
    739             activeToolbar = false;
    740         } );
     724        function hide( event ) {
     725            if ( activeToolbar ) {
     726                activeToolbar.hide();
     727
     728                if ( event.type === 'hide' ) {
     729                    activeToolbar = false;
     730                } else if ( event.type === 'resize' || event.type === 'scroll' ) {
     731                    clearTimeout( timeout );
     732
     733                    timeout = setTimeout( function() {
     734                        activeToolbar.show();
     735                    }, 250 );
     736                }
     737            }
     738        }
     739
     740        DOM.bind( window, 'resize scroll', hide );
     741        editor.dom.bind( editor.getWin(), 'resize scroll', hide );
     742        editor.on( 'blur hide', hide );
    741743
    742744        editor.wp = editor.wp || {};
    743745        editor.wp._createToolbar = create;
    744     }());
     746    }, true );
    745747
    746748    function noop() {}
Note: See TracChangeset for help on using the changeset viewer.