Improve the image drag-resize detection in the visual editor (supported in FF and IE only), remove the size-* class if the image is soft-resized, see #18107

git-svn-id: http://svn.automattic.com/wordpress/trunk@18702 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin.dev.js

@@ -3,7 +3,7 @@
 	tinymce.create('tinymce.plugins.wpEditImage', {
 
 		init : function(ed, url) {
-			var t = this;
+			var t = this, mouse = {};
 
 			t.url = url;
 			t._createButtons();
@@ -48,32 +48,46 @@
 				if ( tinymce.isWebKit || tinymce.isOpera )
 					return;
 
-				if ( ed.dom.getParent(e.target, 'div.mceTemp') || ed.dom.is(e.target, 'div.mceTemp') ) {
+				if ( mouse.x && (e.clientX != mouse.x || e.clientY != mouse.y) ) {
-					window.setTimeout(function(){
+					var n = ed.selection.getNode();
-						var ed = tinyMCE.activeEditor, n = ed.selection.getNode(), DL, width;
 
-						if ( 'IMG' == n.nodeName ) {
+					if ( 'IMG' == n.nodeName ) {
-							DL = ed.dom.getParent(n, 'dl.wp-caption');
+						window.setTimeout(function(){
-							width = ed.dom.getAttrib(n, 'width') || n.width;
+							var DL, width;
-							width = parseInt(width, 10);
+
+							if ( n.width != mouse.img_w || n.height != mouse.img_h )
+								n.className = n.className.replace(/size-[^ "']+/, '');
+
+							if ( ed.dom.getParent(n, 'div.mceTemp') ) {
+								DL = ed.dom.getParent(n, 'dl.wp-caption');
+
+								if ( DL ) {
+									width = ed.dom.getAttrib(n, 'width') || n.width;
+									width = parseInt(width, 10);
+									ed.dom.setStyle(DL, 'width', 10 + width);
+									ed.execCommand('mceRepaint');
+								}
 
-							if ( DL && width != ( parseInt(ed.dom.getStyle(DL, 'width'), 10) - 10 ) ) {
-								ed.dom.setStyle(DL, 'width', 10 + width);
-								ed.execCommand('mceRepaint');
 							}
-						}
+						}, 100);
-					}, 100);
+					}
 				}
+				mouse = {};
 			});
 
 			// show editimage buttons
 			ed.onMouseDown.add(function(ed, e) {
-				var p;
 
-				if ( e.target.nodeName == 'IMG' && ed.dom.getAttrib(e.target, 'class').indexOf('mceItem') == -1 ) {
+				if ( e.target && (e.target.nodeName == 'IMG' || e.target.firstChild.nodeName == 'IMG') ) {
-					ed.plugins.wordpress._showButtons(e.target, 'wp_editbtns');
+					mouse = {
-					if ( tinymce.isGecko && (p = ed.dom.getParent(e.target, 'dl.wp-caption')) && ed.dom.hasClass(p.parentNode, 'mceTemp') )
+						x: e.clientX,
-						ed.selection.select(p.parentNode);
+						y: e.clientY,
+						img_w: e.target.clientWidth,
+						img_h: e.target.clientHeight
+					};
+
+					if ( ed.dom.getAttrib(e.target, 'class').indexOf('mceItem') == -1 )
+						ed.plugins.wordpress._showButtons(e.target, 'wp_editbtns');
 				}
 			});
 

wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin.js

@@ -1 +1 @@
-(function(){tinymce.create("tinymce.plugins.wpEditImage",{init:function(a,b){var c=this;c.url=b;c._createButtons();a.addCommand("WP_EditImage",function(){var h=a.selection.getNode(),f=tinymce.DOM.getViewPort(),g=f.h,d=(720<f.w)?720:f.w,e=a.dom.getAttrib(h,"class");if(e.indexOf("mceItem")!=-1||e.indexOf("wpGallery")!=-1||h.nodeName!="IMG"){return}tb_show("",b+"/editimage.html?ver=321&TB_iframe=true");tinymce.DOM.setStyles("TB_window",{width:(d-50)+"px",height:(g-45)+"px","margin-left":"-"+parseInt(((d-50)/2),10)+"px"});if(!tinymce.isIE6){tinymce.DOM.setStyles("TB_window",{top:"20px",marginTop:"0"})}tinymce.DOM.setStyles("TB_iframeContent",{width:(d-50)+"px",height:(g-75)+"px"});tinymce.DOM.setStyle(["TB_overlay","TB_window","TB_load"],"z-index","999999")});a.onInit.add(function(d){tinymce.dom.Event.add(d.getBody(),"dragstart",function(f){if(!tinymce.isGecko&&f.target.nodeName=="IMG"&&d.dom.getParent(f.target,"dl.wp-caption")){return tinymce.dom.Event.cancel(f)}})});a.onMouseUp.add(function(d,f){if(tinymce.isWebKit||tinymce.isOpera){return}if(d.dom.getParent(f.target,"div.mceTemp")||d.dom.is(f.target,"div.mceTemp")){window.setTimeout(function(){var e=tinyMCE.activeEditor,i=e.selection.getNode(),g,h;if("IMG"==i.nodeName){g=e.dom.getParent(i,"dl.wp-caption");h=e.dom.getAttrib(i,"width")||i.width;h=parseInt(h,10);if(g&&h!=(parseInt(e.dom.getStyle(g,"width"),10)-10)){e.dom.setStyle(g,"width",10+h);e.execCommand("mceRepaint")}}},100)}});a.onMouseDown.add(function(d,g){var f;if(g.target.nodeName=="IMG"&&d.dom.getAttrib(g.target,"class").indexOf("mceItem")==-1){d.plugins.wordpress._showButtons(g.target,"wp_editbtns");if(tinymce.isGecko&&(f=d.dom.getParent(g.target,"dl.wp-caption"))&&d.dom.hasClass(f.parentNode,"mceTemp")){d.selection.select(f.parentNode)}}});a.onKeyPress.add(function(d,i){var j,f,h,g;if(i.keyCode==13){j=d.selection.getNode();f=d.dom.getParent(j,"dl.wp-caption");h=d.dom.getParent(f,"div.mceTemp");if(f&&h){g=d.dom.create("p",{},"&nbsp;");d.dom.insertAfter(g,h);if(g.firstChild){d.selection.select(g.firstChild)}else{d.selection.select(g)}tinymce.dom.Event.cancel(i);return false}}});a.onBeforeSetContent.add(function(d,e){e.content=c._do_shcode(e.content)});a.onPostProcess.add(function(d,e){if(e.get){e.content=c._get_shcode(e.content)}})},_do_shcode:function(a){return a.replace(/(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?[\s\u00a0]*/g,function(g,d,k){var j,f,e,h,i;d=d.replace(/\\'|\\&#39;|\\&#039;/g,"&#39;").replace(/\\"|\\&quot;/g,"&quot;");k=k.replace(/\\&#39;|\\&#039;/g,"&#39;").replace(/\\&quot;/g,"&quot;");j=d.match(/id=['"]([^'"]+)/i);f=d.match(/align=['"]([^'"]+)/i);e=d.match(/width=['"]([0-9]+)/);h=d.match(/caption=['"]([^'"]+)/i);j=(j&&j[1])?j[1]:"";f=(f&&f[1])?f[1]:"alignnone";e=(e&&e[1])?e[1]:"";h=(h&&h[1])?h[1]:"";if(!e||!h){return k}i=(f=="aligncenter")?"mceTemp mceIEcenter":"mceTemp";return'<div class="'+i+'" draggable><dl id="'+j+'" class="wp-caption '+f+'" style="width: '+(10+parseInt(e))+'px"><dt class="wp-caption-dt">'+k+'</dt><dd class="wp-caption-dd">'+h+"</dd></dl></div>"})},_get_shcode:function(a){return a.replace(/<div class="mceTemp[^"]*">\s*<dl([^>]+)>\s*<dt[^>]+>([\s\S]+?)<\/dt>\s*<dd[^>]+>(.+?)<\/dd>\s*<\/dl>\s*<\/div>\s*/gi,function(g,d,j,h){var i,f,e;i=d.match(/id=['"]([^'"]+)/i);f=d.match(/class=['"]([^'"]+)/i);e=j.match(/width=['"]([0-9]+)/);i=(i&&i[1])?i[1]:"";f=(f&&f[1])?f[1]:"alignnone";e=(e&&e[1])?e[1]:"";if(!e||!h){return j}f=f.match(/align[^ '"]+/)||"alignnone";h=h.replace(/<\S[^<>]*>/gi,"").replace(/'/g,"&#39;").replace(/"/g,"&quot;");return'[caption id="'+i+'" align="'+f+'" width="'+e+'" caption="'+h+'"]'+j+"[/caption]"})},_createButtons:function(){var b=this,a=tinyMCE.activeEditor,d=tinymce.DOM,e,c;d.remove("wp_editbtns");d.add(document.body,"div",{id:"wp_editbtns",style:"display:none;"});e=d.add("wp_editbtns","img",{src:b.url+"/img/image.png",id:"wp_editimgbtn",width:"24",height:"24",title:a.getLang("wpeditimage.edit_img")});tinymce.dom.Event.add(e,"mousedown",function(g){var f=tinyMCE.activeEditor;f.windowManager.bookmark=f.selection.getBookmark("simple");f.execCommand("WP_EditImage")});c=d.add("wp_editbtns","img",{src:b.url+"/img/delete.png",id:"wp_delimgbtn",width:"24",height:"24",title:a.getLang("wpeditimage.del_img")});tinymce.dom.Event.add(c,"mousedown",function(i){var f=tinyMCE.activeEditor,g=f.selection.getNode(),h;if(g.nodeName=="IMG"&&f.dom.getAttrib(g,"class").indexOf("mceItem")==-1){if((h=f.dom.getParent(g,"div"))&&f.dom.hasClass(h,"mceTemp")){f.dom.remove(h)}else{if((h=f.dom.getParent(g,"A"))&&h.childNodes.length==1){f.dom.remove(h)}else{f.dom.remove(g)}}f.execCommand("mceRepaint");return false}})},getInfo:function(){return{longname:"Edit Image",author:"WordPress",authorurl:"http://wordpress.org",infourl:"",version:"1.0"}}});tinymce.PluginManager.add("wpeditimage",tinymce.plugins.wpEditImage)})();
+(function(){tinymce.create("tinymce.plugins.wpEditImage",{init:function(a,c){var d=this,b={};d.url=c;d._createButtons();a.addCommand("WP_EditImage",function(){var i=a.selection.getNode(),g=tinymce.DOM.getViewPort(),h=g.h,e=(720<g.w)?720:g.w,f=a.dom.getAttrib(i,"class");if(f.indexOf("mceItem")!=-1||f.indexOf("wpGallery")!=-1||i.nodeName!="IMG"){return}tb_show("",c+"/editimage.html?ver=321&TB_iframe=true");tinymce.DOM.setStyles("TB_window",{width:(e-50)+"px",height:(h-45)+"px","margin-left":"-"+parseInt(((e-50)/2),10)+"px"});if(!tinymce.isIE6){tinymce.DOM.setStyles("TB_window",{top:"20px",marginTop:"0"})}tinymce.DOM.setStyles("TB_iframeContent",{width:(e-50)+"px",height:(h-75)+"px"});tinymce.DOM.setStyle(["TB_overlay","TB_window","TB_load"],"z-index","999999")});a.onInit.add(function(e){tinymce.dom.Event.add(e.getBody(),"dragstart",function(f){if(!tinymce.isGecko&&f.target.nodeName=="IMG"&&e.dom.getParent(f.target,"dl.wp-caption")){return tinymce.dom.Event.cancel(f)}})});a.onMouseUp.add(function(f,g){if(tinymce.isWebKit||tinymce.isOpera){return}if(b.x&&(g.clientX!=b.x||g.clientY!=b.y)){var h=f.selection.getNode();if("IMG"==h.nodeName){window.setTimeout(function(){var e,i;if(h.width!=b.img_w||h.height!=b.img_h){h.className=h.className.replace(/size-[^ "']+/,"")}if(f.dom.getParent(h,"div.mceTemp")){e=f.dom.getParent(h,"dl.wp-caption");if(e){i=f.dom.getAttrib(h,"width")||h.width;i=parseInt(i,10);f.dom.setStyle(e,"width",10+i);f.execCommand("mceRepaint")}}},100)}}b={}});a.onMouseDown.add(function(f,g){if(g.target&&(g.target.nodeName=="IMG"||g.target.firstChild.nodeName=="IMG")){b={x:g.clientX,y:g.clientY,img_w:g.target.clientWidth,img_h:g.target.clientHeight};if(f.dom.getAttrib(g.target,"class").indexOf("mceItem")==-1){f.plugins.wordpress._showButtons(g.target,"wp_editbtns")}}});a.onKeyPress.add(function(f,j){var k,g,i,h;if(j.keyCode==13){k=f.selection.getNode();g=f.dom.getParent(k,"dl.wp-caption");i=f.dom.getParent(g,"div.mceTemp");if(g&&i){h=f.dom.create("p",{},"&nbsp;");f.dom.insertAfter(h,i);if(h.firstChild){f.selection.select(h.firstChild)}else{f.selection.select(h)}tinymce.dom.Event.cancel(j);return false}}});a.onBeforeSetContent.add(function(e,f){f.content=d._do_shcode(f.content)});a.onPostProcess.add(function(e,f){if(f.get){f.content=d._get_shcode(f.content)}})},_do_shcode:function(a){return a.replace(/(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?[\s\u00a0]*/g,function(g,d,k){var j,f,e,h,i;d=d.replace(/\\'|\\&#39;|\\&#039;/g,"&#39;").replace(/\\"|\\&quot;/g,"&quot;");k=k.replace(/\\&#39;|\\&#039;/g,"&#39;").replace(/\\&quot;/g,"&quot;");j=d.match(/id=['"]([^'"]+)/i);f=d.match(/align=['"]([^'"]+)/i);e=d.match(/width=['"]([0-9]+)/);h=d.match(/caption=['"]([^'"]+)/i);j=(j&&j[1])?j[1]:"";f=(f&&f[1])?f[1]:"alignnone";e=(e&&e[1])?e[1]:"";h=(h&&h[1])?h[1]:"";if(!e||!h){return k}i=(f=="aligncenter")?"mceTemp mceIEcenter":"mceTemp";return'<div class="'+i+'" draggable><dl id="'+j+'" class="wp-caption '+f+'" style="width: '+(10+parseInt(e))+'px"><dt class="wp-caption-dt">'+k+'</dt><dd class="wp-caption-dd">'+h+"</dd></dl></div>"})},_get_shcode:function(a){return a.replace(/<div class="mceTemp[^"]*">\s*<dl([^>]+)>\s*<dt[^>]+>([\s\S]+?)<\/dt>\s*<dd[^>]+>(.+?)<\/dd>\s*<\/dl>\s*<\/div>\s*/gi,function(g,d,j,h){var i,f,e;i=d.match(/id=['"]([^'"]+)/i);f=d.match(/class=['"]([^'"]+)/i);e=j.match(/width=['"]([0-9]+)/);i=(i&&i[1])?i[1]:"";f=(f&&f[1])?f[1]:"alignnone";e=(e&&e[1])?e[1]:"";if(!e||!h){return j}f=f.match(/align[^ '"]+/)||"alignnone";h=h.replace(/<\S[^<>]*>/gi,"").replace(/'/g,"&#39;").replace(/"/g,"&quot;");return'[caption id="'+i+'" align="'+f+'" width="'+e+'" caption="'+h+'"]'+j+"[/caption]"})},_createButtons:function(){var b=this,a=tinyMCE.activeEditor,d=tinymce.DOM,e,c;d.remove("wp_editbtns");d.add(document.body,"div",{id:"wp_editbtns",style:"display:none;"});e=d.add("wp_editbtns","img",{src:b.url+"/img/image.png",id:"wp_editimgbtn",width:"24",height:"24",title:a.getLang("wpeditimage.edit_img")});tinymce.dom.Event.add(e,"mousedown",function(g){var f=tinyMCE.activeEditor;f.windowManager.bookmark=f.selection.getBookmark("simple");f.execCommand("WP_EditImage")});c=d.add("wp_editbtns","img",{src:b.url+"/img/delete.png",id:"wp_delimgbtn",width:"24",height:"24",title:a.getLang("wpeditimage.del_img")});tinymce.dom.Event.add(c,"mousedown",function(i){var f=tinyMCE.activeEditor,g=f.selection.getNode(),h;if(g.nodeName=="IMG"&&f.dom.getAttrib(g,"class").indexOf("mceItem")==-1){if((h=f.dom.getParent(g,"div"))&&f.dom.hasClass(h,"mceTemp")){f.dom.remove(h)}else{if((h=f.dom.getParent(g,"A"))&&h.childNodes.length==1){f.dom.remove(h)}else{f.dom.remove(g)}}f.execCommand("mceRepaint");return false}})},getInfo:function(){return{longname:"Edit Image",author:"WordPress",authorurl:"http://wordpress.org",infourl:"",version:"1.0"}}});tinymce.PluginManager.add("wpeditimage",tinymce.plugins.wpEditImage)})();

wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js

@@ -374,6 +374,9 @@ wpImage = {
 
 		tinyMCEPopup.execCommand("mceBeginUndoLevel");
 
+		if ( f.width.value != el.width || f.height.value != el.height )
+			img_class = img_class.replace(/size-[^ "']+/, '');
+
 		ed.dom.setAttribs(el, {
 			src : f.img_src.value,
 			title : f.img_title.value,

wp-includes/version.php

@@ -18,7 +18,7 @@ $wp_db_version = 18541;
  *
  * @global string $tinymce_version
  */
-$tinymce_version = '345-20110908';
+$tinymce_version = '345-20110917';
 
 /**
  * Holds the cache manifest version