Changeset 22602

Timestamp:

11/15/2012 11:49:19 PM (14 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();
                         });
                 },