Changeset 29471

Timestamp:

08/12/2014 04:26:13 AM (10 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;