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.


Built from https://develop.svn.wordpress.org/trunk@32831


git-svn-id: http://core.svn.wordpress.org/trunk@32802 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/tinymce/plugins/wordpress/plugin.js

@@ -443,23 +443,21 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 	 * Experimental: create a floating toolbar.
 	 * This functionality will change in the next releases. Not recommended for use by plugins.
 	 */
-	( function() {
+	editor.on( 'preinit', function() {
 		var Factory = tinymce.ui.Factory,
 			settings = editor.settings,
 			activeToolbar,
 			currentSelection,
+			timeout,
 			wpAdminbar = document.getElementById( 'wpadminbar' ),
-			mceIframe, mceToolbar, mceStatusbar, wpStatusbar;
-
-		editor.on( 'init', function() {
-			mceIframe = document.getElementById( editor.id + '_ifr' );
-			mceToolbar = tinymce.$( '.mce-toolbar-grp', editor.getContainer() )[0];
-			mceStatusbar = tinymce.$( '.mce-statusbar', editor.getContainer() )[0];
+			mceIframe = document.getElementById( editor.id + '_ifr' ),
+			mceToolbar = tinymce.$( '.mce-toolbar-grp', editor.getContainer() )[0],
+			mceStatusbar = tinymce.$( '.mce-statusbar', editor.getContainer() )[0],
+			wpStatusbar;
 
 			if ( editor.id === 'content' ) {
 				wpStatusbar = document.getElementById( 'post-status-info' );
 			}
-		} );
 
 		function create( buttons, bottom ) {
 			var toolbar,
@@ -587,10 +585,6 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 
 			toolbar.bottom = bottom;
 
-			function hide() {
-				toolbar.hide();
-			}
-
 			function reposition() {
 				var scrollX = window.pageXOffset || document.documentElement.scrollLeft,
 					scrollY = window.pageYOffset || document.documentElement.scrollTop,
@@ -617,6 +611,10 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 					className = '',
 					top, left;
 
+				if ( spaceTop >= editorHeight || spaceBottom >= editorHeight ) {
+					return this.hide();
+				}
+
 				if ( this.bottom ) {
 					if ( spaceBottom >= spaceNeeded ) {
 						className = ' mce-arrow-up';
@@ -677,18 +675,6 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 				}
 			} );
 
-			toolbar.on( 'remove', function() {
-				DOM.unbind( window, 'resize scroll', hide );
-				editor.dom.unbind( editor.getWin(), 'resize scroll', hide );
-				editor.off( 'blur hide', hide );
-			} );
-
-			editor.once( 'init', function() {
-				DOM.bind( window, 'resize scroll', hide );
-				editor.dom.bind( editor.getWin(), 'resize scroll', hide );
-				editor.on( 'blur hide', hide );
-			} );
-
 			toolbar.reposition = reposition;
 			toolbar.hide().renderTo( document.body );
 
@@ -735,13 +721,29 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 			}
 		} );
 
-		editor.on( 'hide', function() {
-			activeToolbar = false;
-		} );
+		function hide( event ) {
+			if ( activeToolbar ) {
+				activeToolbar.hide();
+
+				if ( event.type === 'hide' ) {
+					activeToolbar = false;
+				} else if ( event.type === 'resize' || event.type === 'scroll' ) {
+					clearTimeout( timeout );
+
+					timeout = setTimeout( function() {
+						activeToolbar.show();
+					}, 250 );
+				}
+			}
+		}
+
+		DOM.bind( window, 'resize scroll', hide );
+		editor.dom.bind( editor.getWin(), 'resize scroll', hide );
+		editor.on( 'blur hide', hide );
 
 		editor.wp = editor.wp || {};
 		editor.wp._createToolbar = create;
-	}());
+	}, true );
 
 	function noop() {}
 

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.3-alpha-32830';
+$wp_version = '4.3-alpha-32831';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.