diff --git a/src/wp-includes/js/mce-view.js b/src/wp-includes/js/mce-view.js index fa1ed4402b..9c8b9512b4 100644 --- a/src/wp-includes/js/mce-view.js +++ b/src/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(); }); } diff --git a/src/wp-includes/js/media-editor.js b/src/wp-includes/js/media-editor.js index 5a69612f2a..5579550b7d 100644 --- a/src/wp-includes/js/media-editor.js +++ b/src/wp-includes/js/media-editor.js @@ -1048,21 +1048,7 @@ * @returns {wp.media.view.MediaFrame} */ open: function( id, options ) { - var workflow, focusTrap, scrollTop; - - if ( 'ontouchend' in document ) { - // Close the onscreen keyboard - if ( ! focusTrap ) { - focusTrap = $( '' ); - } - - // Keep the scroll position - scrollTop = $( window ).scrollTop(); - - $( document.body ).append( focusTrap ); - focusTrap.focus().blur().remove(); - $( window ).scrollTop( scrollTop ); - } + var workflow; options = options || {}; diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 4fa1303efd..d735dc45d1 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/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'); }, diff --git a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js index 4dfca71500..93391b24af 100644 --- a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js +++ b/src/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( /(?:

)?\[(?: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, '' ); diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css index 111952f598..4a9a1499a5 100644 --- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css +++ b/src/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;