Changeset 29471

Timestamp:

08/12/2014 04:26:13 AM (12 years ago)

Author:

azaozz

Message:

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

Location:

trunk/src/wp-includes/js

Files:

• mce-view.js (modified) (1 diff)
• media-editor.js (modified) (1 diff)
• media-views.js (modified) (2 diffs)
• tinymce/plugins/wpeditimage/plugin.js (modified) (6 diffs)
• tinymce/skins/wordpress/wp-content.css (modified) (1 diff)

trunk/src/wp-includes/js/mce-view.js

@@ -484 +484 @@
                                 $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
                                 wp.mce.views.refreshView( self, shortcode );
+                        });
+
+                        frame.on( 'close', function() {
                                 frame.detach();
                         });

trunk/src/wp-includes/js/media-editor.js

@@ -1049 +1049 @@
                  */
                 open: function( id, options ) {
-                        var workflow, focusTrap, scrollTop;
-
-                        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 );
-                        }
+                        var workflow;
 
                         options = options || {};

trunk/src/wp-includes/js/media-views.js

@@ -3223 +3223 @@
                 open: function() {
                         var $el = this.$el,
-                                options = this.options;
+                                options = this.options,
+                                mceEditor;
 
                         if ( $el.is(':visible') ) {
@@ -3244 +3245 @@
 
                         $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');
                 },

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

@@ -1 +1 @@
 /* global tinymce */
 tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
-        var toolbarActive = false;
+        var toolbarActive = false,
+                editingImage = false;
 
         function parseShortcode( content ) {
@@ -412 +413 @@
                         editor.focus();
                         frame.detach();
+                        editingImage = false;
                 });
 
@@ -493 +495 @@
                 editor.dom.setAttrib( editor.dom.select( 'img[data-wp-imgselect]' ), 'data-wp-imgselect', null );
 
+                editingImage = false;
                 toolbarActive = false;
         }
@@ -506 +509 @@
 
                 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 );
         }
 
@@ -920 +980 @@
 
         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
@@ -926 +986 @@
                         }
                 } else if ( event.target.nodeName !== 'IMG' ) {
-                        removeToolbar();
-                }
-        });
-
-        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();
                 }

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

@@ -210 +210 @@
 /* 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;