From c20cd04a7b9e81d5c324f88e4f3d89bceec7ad4f Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Thu, 15 Nov 2012 23:49:19 +0000 Subject: [PATCH] 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 git-svn-id: https://develop.svn.wordpress.org/trunk@22602 602fd350-edb4-49c9-b593-d223f7449a82 --- .../plugins/wpeditimage/editor_plugin_src.js | 65 ++++++++++++------- .../plugins/wpgallery/editor_plugin_src.js | 30 +++++++-- 2 files changed, 68 insertions(+), 27 deletions(-) diff --git a/wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js b/wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js index b3754dad1d..fdc4a64dc3 100644 --- a/wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js +++ b/wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js @@ -45,6 +45,13 @@ } } }); + + // 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); + }); + } }); // resize the caption
when the image is soft-resized by the user @@ -75,26 +82,8 @@ }); // 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); }); ed.onBeforeSetContent.add(function(ed, o) { @@ -199,7 +188,7 @@ }, _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 ( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera @@ -221,6 +210,7 @@ tinymce.dom.Event.add(editButton, 'mousedown', function(e) { t._editImage(); + ed.plugins.wordpress._hideButtons(); }); dellButton = DOM.add('wp_editbtns', 'img', { @@ -232,7 +222,7 @@ }); 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 ) { if ( (p = ed.dom.getParent(el, 'div')) && ed.dom.hasClass(p, 'mceTemp') ) @@ -245,6 +235,7 @@ ed.execCommand('mceRepaint'); return false; } + ed.plugins.wordpress._hideButtons(); }); }, @@ -266,6 +257,36 @@ }); }, + _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'); + } + }, + getInfo : function() { return { longname : 'Edit Image', diff --git a/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin_src.js b/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin_src.js index 3b0ac74f6e..819637b5bf 100644 --- a/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin_src.js +++ b/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin_src.js @@ -6,6 +6,7 @@ var t = this; t.url = url; + t.editor = ed; t._createButtons(); // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...'); @@ -30,9 +31,26 @@ }); }); + 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'); + } }); ed.onBeforeSetContent.add(function(ed, o) { @@ -69,7 +87,7 @@ }, _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 ( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera @@ -90,9 +108,9 @@ }); 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(); }); dellButton = DOM.add('wp_gallerybtns', 'img', { @@ -104,14 +122,16 @@ }); 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') ) { ed.dom.remove(el); ed.execCommand('mceRepaint'); - return false; + ed.dom.events.cancel(e); } + + ed.plugins.wordpress._hideButtons(); }); },