Changeset 22602

Timestamp:

11/15/2012 11:49:19 PM (13 years ago)

Author:

azaozz

Message:

TinyMCE: fix and improve the popup buttons for editing images and galleries show/hide for touch devices, fix inconsistency in iOS when "touching" an image inside a link, see #21390

Location:

trunk/wp-includes/js/tinymce/plugins

Files:

• wpeditimage/editor_plugin_src.js (modified) (7 diffs)
• wpgallery/editor_plugin_src.js (modified) (6 diffs)

trunk/wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js

@@ -46 +46 @@
                     }
                 });
+
+                // iOS6 doesn't show the buttons properly on click, show them on 'touchstart'
+                if ( 'ontouchstart' in window ) {
+                    ed.dom.events.add(ed.getBody(), 'touchstart', function(e){
+                        t._showButtons(e);
+                    });
+                }
             });
 
@@ -76 +83 @@
 
             // show editimage buttons
-            ed.onMouseDown.add(function(ed, e) {
-                var target = e.target;
-
-                if ( target.nodeName != 'IMG' ) {
-                    if ( target.firstChild && target.firstChild.nodeName == 'IMG' && target.childNodes.length == 1 )
-                        target = target.firstChild;
-                    else
-                        return;
-                }
-
-                if ( ed.dom.getAttrib(target, 'class').indexOf('mceItem') == -1 ) {
-                    mouse = {
-                        x: e.clientX,
-                        y: e.clientY,
-                        img_w: target.clientWidth,
-                        img_h: target.clientHeight
-                    };
-
-                    ed.plugins.wordpress._showButtons(target, 'wp_editbtns');
-                }
+            ed.onMouseDown.add(function(ed, e){
+                t._showButtons(e);
             });
 
@@ -200 +189 @@
 
         _createButtons : function() {
-            var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
+            var t = this, ed = t.editor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
 
             isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
@@ -222 +211 @@
             tinymce.dom.Event.add(editButton, 'mousedown', function(e) {
                 t._editImage();
+                ed.plugins.wordpress._hideButtons();
             });
 
@@ -233 +223 @@
 
             tinymce.dom.Event.add(dellButton, 'mousedown', function(e) {
-                var ed = tinyMCE.activeEditor, el = ed.selection.getNode(), p;
+                var el = ed.selection.getNode(), p;
 
                 if ( el.nodeName == 'IMG' && ed.dom.getAttrib(el, 'class').indexOf('mceItem') == -1 ) {
@@ -246 +236 @@
                     return false;
                 }
+                ed.plugins.wordpress._hideButtons();
             });
         },
@@ -265 +256 @@
                 inline: true
             });
+        },
+
+        _showButtons : function(e) {
+            var ed = this.editor, target = e.target;
+
+            if ( target.nodeName != 'IMG' ) {
+                if ( target.firstChild && target.firstChild.nodeName == 'IMG' && target.childNodes.length == 1 ) {
+                    target = target.firstChild;
+                } else {
+                    ed.plugins.wordpress._hideButtons();
+                    return;
+                }
+            }
+
+            if ( ed.dom.getAttrib(target, 'class').indexOf('mceItem') == -1 ) {
+                mouse = {
+                    x: e.clientX,
+                    y: e.clientY,
+                    img_w: target.clientWidth,
+                    img_h: target.clientHeight
+                };
+
+                if ( e.type == 'touchstart' ) {
+                    ed.selection.select(target);
+                    ed.dom.events.cancel(e);
+                }
+
+                ed.plugins.wordpress._hideButtons();
+                ed.plugins.wordpress._showButtons(target, 'wp_editbtns');
+            }
         },
 

trunk/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin_src.js

@@ -7 +7 @@
 
             t.url = url;
+            t.editor = ed;
             t._createButtons();
 
@@ -31 +32 @@
             });
 
+            ed.onInit.add(function(ed) {
+                // iOS6 doesn't show the buttons properly on click, show them on 'touchstart'
+                if ( 'ontouchstart' in window ) {
+                    ed.dom.events.add(ed.getBody(), 'touchstart', function(e){
+                        var target = e.target;
+
+                        if ( target.nodeName == 'IMG' && ed.dom.hasClass(target, 'wpGallery') ) {
+                            ed.selection.select(target);
+                            ed.dom.events.cancel(e);
+                            ed.plugins.wordpress._hideButtons();
+                            ed.plugins.wordpress._showButtons(target, 'wp_gallerybtns');
+                        }
+                    });
+                }
+            });
+            
             ed.onMouseDown.add(function(ed, e) {
-                if ( e.target.nodeName == 'IMG' && ed.dom.hasClass(e.target, 'wpGallery') )
+                if ( e.target.nodeName == 'IMG' && ed.dom.hasClass(e.target, 'wpGallery') ) {
                     ed.plugins.wordpress._showButtons(e.target, 'wp_gallerybtns');
+                }
             });
 
@@ -70 +88 @@
 
         _createButtons : function() {
-            var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
+            var t = this, ed = t.editor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
 
             isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
@@ -91 +109 @@
 
             tinymce.dom.Event.add(editButton, 'mousedown', function(e) {
-                var ed = tinyMCE.activeEditor;
                 ed.windowManager.bookmark = ed.selection.getBookmark('simple');
                 ed.execCommand("WP_Gallery");
+                ed.plugins.wordpress._hideButtons();
             });
 
@@ -105 +123 @@
 
             tinymce.dom.Event.add(dellButton, 'mousedown', function(e) {
-                var ed = tinyMCE.activeEditor, el = ed.selection.getNode();
+                var el = ed.selection.getNode();
 
                 if ( el.nodeName == 'IMG' && ed.dom.hasClass(el, 'wpGallery') ) {
@@ -111 +129 @@
 
                     ed.execCommand('mceRepaint');
-                    return false;
+                    ed.dom.events.cancel(e);
                 }
+
+                ed.plugins.wordpress._hideButtons();
             });
         },