TinyMCE: fix the 'editimage' plugin for touch devices. Better attempt to hide the onscreen keyboard when the media modal opens and TinyMCE is in focus. See #28595, #29166

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


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

wp-includes/js/mce-view.js

@@ -483,6 +483,9 @@ window.wp = window.wp || {};
 				var shortcode = gallery.shortcode( selection ).string();
 				$( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
 				wp.mce.views.refreshView( self, shortcode );
+			});
+
+			frame.on( 'close', function() {
 				frame.detach();
 			});
 		}

wp-includes/js/media-editor.js

@@ -1048,21 +1048,7 @@
 		 * @returns {wp.media.view.MediaFrame}
 		 */
 		open: function( id, options ) {
-			var workflow, focusTrap, scrollTop;
+			var workflow;
-
-			if ( 'ontouchend' in document ) {
-				// Close the onscreen keyboard
-				if ( ! focusTrap ) {
-					focusTrap = $( '<input type="text" style="width: 1px; height: 1px;" />' );
-				}
-
-				// Keep the scroll position
-				scrollTop = $( window ).scrollTop();
-
-				$( document.body ).append( focusTrap );
-				focusTrap.focus().blur().remove();
-				$( window ).scrollTop( scrollTop );
-			}
 
 			options = options || {};
 

wp-includes/js/media-views.js

@@ -3222,7 +3222,8 @@
 		 */
 		open: function() {
 			var $el = this.$el,
-				options = this.options;
+				options = this.options,
+				mceEditor;
 
 			if ( $el.is(':visible') ) {
 				return this;
@@ -3243,6 +3244,19 @@
 			$( 'body' ).addClass( 'modal-open' );
 
 			$el.show().find( '.media-modal-close' ).focus();
+
+			// Try to close the onscreen keyboard
+			if ( 'ontouchend' in document ) {
+				if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor )  && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
+					mceEditor.iframeElement.focus();
+					mceEditor.iframeElement.blur();
+
+					setTimeout( function() {
+						mceEditor.iframeElement.blur();
+					}, 100 );
+				}
+			}
+
 			return this.propagate('open');
 		},
 

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

@@ -1,6 +1,7 @@
 /* global tinymce */
 tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
-	var toolbarActive = false;
+	var toolbarActive = false,
+		editingImage = false;
 
 	function parseShortcode( content ) {
 		return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
@@ -411,6 +412,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		frame.on( 'close', function() {
 			editor.focus();
 			frame.detach();
+			editingImage = false;
 		});
 
 		frame.open();
@@ -492,6 +494,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 
 		editor.dom.setAttrib( editor.dom.select( 'img[data-wp-imgselect]' ), 'data-wp-imgselect', null );
 
+		editingImage = false;
 		toolbarActive = false;
 	}
 
@@ -507,6 +510,63 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		return false;
 	}
 
+	function isToolbarButton( node ) {
+		return ( node && node.nodeName === 'I' && node.parentNode.id === 'wp-image-toolbar' );
+	}
+
+	function edit( event ) {
+		var image,
+			node = event.target,
+			dom = editor.dom;
+
+		// Don't trigger on right-click
+		if ( event.button && event.button > 1 ) {
+			return;
+		}
+
+		if ( isToolbarButton( node ) ) {
+			image = dom.select( 'img[data-wp-imgselect]' )[0];
+
+			if ( image ) {
+				editor.selection.select( image );
+
+				if ( dom.hasClass( node, 'remove' ) ) {
+					removeImage( image );
+				} else if ( dom.hasClass( node, 'edit' ) ) {
+					if ( ! editingImage ) {
+						editImage( image );
+						editingImage = true;
+					}
+				}
+			}
+
+			event.preventDefault();
+		} else if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) {
+			addToolbar( node );
+		} else if ( node.nodeName !== 'IMG' ) {
+			removeToolbar();
+		}
+	}
+
+	if ( 'ontouchend' in document ) {
+		editor.on( 'touchend', edit );
+
+		editor.on( 'click', function( event ) {
+			var target = event.target;
+
+			if ( editingImage && target.nodeName === 'IMG' ) {
+				event.preventDefault();
+			}
+
+			if ( isToolbarButton( target ) ) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		});
+	} else {
+		editor.on( 'mouseup', edit );
+	}
+
 	editor.on( 'init', function() {
 		var dom = editor.dom,
 			captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions';
@@ -919,7 +979,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 	});
 
 	editor.on( 'mousedown', function( event ) {
-		if ( editor.dom.getParent( event.target, '#wp-image-toolbar' ) ) {
+		if ( isToolbarButton( event.target ) ) {
 			if ( tinymce.Env.ie ) {
 				// Stop IE > 8 from making the wrapper resizable on mousedown
 				event.preventDefault();
@@ -929,35 +989,6 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		}
 	});
 
-	editor.on( 'mouseup touchend', function( event ) {
-		var image,
-			node = event.target,
-			dom = editor.dom;
-
-		// Don't trigger on right-click
-		if ( event.button && event.button > 1 ) {
-			return;
-		}
-
-		if ( node.nodeName === 'I' && dom.getParent( node, '#wp-image-toolbar' ) ) {
-			image = dom.select( 'img[data-wp-imgselect]' )[0];
-
-			if ( image ) {
-				editor.selection.select( image );
-
-				if ( dom.hasClass( node, 'remove' ) ) {
-					removeImage( image );
-				} else if ( dom.hasClass( node, 'edit' ) ) {
-					editImage( image );
-				}
-			}
-		} else if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) {
-			addToolbar( node );
-		} else if ( node.nodeName !== 'IMG' ) {
-			removeToolbar();
-		}
-	});
-
 	// Remove from undo levels
 	editor.on( 'BeforeAddUndo', function( event ) {
 		event.level.content = event.level.content.replace( / data-wp-imgselect="1"/g, '' );

wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -209,7 +209,9 @@ audio {
 
 /* delegate the handling of the selection to the wpview tinymce plugin */
 .wpview-wrap,
-.wpview-wrap * {
+.wpview-wrap *,
+#wp-image-toolbar,
+#wp-image-toolbar * {
 	-moz-user-select: none;
 	-webkit-user-select: none;
 	-ms-user-select: none;