From 467387c34fc637ba4d5263e77753cf71fd127e2a Mon Sep 17 00:00:00 2001
From: ryan <ryan@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Thu, 14 Feb 2008 05:45:40 +0000
Subject: [PATCH] auto-add css class when using align on Image. Props azaozz.
 fixes #5856

git-svn-id: http://svn.automattic.com/wordpress/trunk@6844 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../plugins/wordpress/editor_plugin.js        | 18 ++++++++++++++++
 .../js/tinymce/themes/advanced/image.htm      |  5 ++++-
 .../js/tinymce/themes/advanced/js/image.js    | 21 +++++++++++--------
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js b/wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js
index 6c0c1a3907..5373e9f325 100644
--- a/wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js
+++ b/wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js
@@ -72,6 +72,24 @@
 				}
 			});
 
+			// Add class "alignleft" or "alignright" when selecting align for images.
+			ed.onBeforeExecCommand.add(function( editor, cmd ) {
+				var node, dir, xdir;
+	
+				if ( ( cmd.indexOf('Justify') != -1 ) && ( node = editor.selection.getNode() ) ) {
+					if ( node.nodeName !== 'IMG' ) return;
+					dir = cmd.substring(7).toLowerCase();
+					if ( 'JustifyCenter' == cmd || editor.queryCommandState( cmd ) ) {
+						editor.dom.removeClass( node, "alignleft" );
+						editor.dom.removeClass( node, "alignright" );
+					} else {
+						xdir = ( dir == 'left' ) ? 'right' : 'left';
+						editor.dom.removeClass( node, "align"+xdir );
+						editor.dom.addClass( node, "align"+dir );
+					}
+				}
+			});
+			
 			// Add listeners to handle more break
 			t._handleMoreBreak(ed, url);
 		},
diff --git a/wp-includes/js/tinymce/themes/advanced/image.htm b/wp-includes/js/tinymce/themes/advanced/image.htm
index 19c00d7f0c..b55b35e10e 100644
--- a/wp-includes/js/tinymce/themes/advanced/image.htm
+++ b/wp-includes/js/tinymce/themes/advanced/image.htm
@@ -69,8 +69,11 @@
             <td nowrap="nowrap"><label for="hspace">{#advanced_dlg.image_hspace}</label></td>
             <td><input id="hspace" name="hspace" type="text" value="" size="3" maxlength="3" onchange="ImageDialog.updateStyle();" /></td>
           </tr>
+          <tr>
+            <td nowrap="nowrap"><label for="class_name">{#class_name}</label></td>
+            <td><input type="text" id="class_name" name="class_name" style="width: 140px" value="" /></td>
+          </tr>
         </table>
-        <input type="hidden" id="class_name" name="class_name" value="" />
 		</div>
 	</div>
 
diff --git a/wp-includes/js/tinymce/themes/advanced/js/image.js b/wp-includes/js/tinymce/themes/advanced/js/image.js
index 56843c554f..aff8929ffc 100644
--- a/wp-includes/js/tinymce/themes/advanced/js/image.js
+++ b/wp-includes/js/tinymce/themes/advanced/js/image.js
@@ -29,6 +29,7 @@ var ImageDialog = {
 			f.width.value = ed.dom.getAttrib(e, 'width');
 			f.height.value = ed.dom.getAttrib(e, 'height');
 			f.insert.value = ed.getLang('update');
+			f.class_name.value = ed.dom.getAttrib(e, 'class');
 			this.styleVal = ed.dom.getAttrib(e, 'style');
 			selectByValue(f, 'image_list', f.src.value);
 			selectByValue(f, 'align', this.getAttrib(e, 'align'));
@@ -69,17 +70,15 @@ var ImageDialog = {
 				align : getSelectValue(f, 'align')
 			});
 		} else {
-			args = tinymce.extend(args, {
-				style : this.styleVal,
-				'class' : f.class_name.value
-			});
+			args.style = this.styleVal;
 		}
 		
 		tinymce.extend(args, {
 			src : f.src.value,
 			alt : f.alt.value,
 			width : f.width.value,
-			height : f.height.value
+			height : f.height.value,
+			'class' : f.class_name.value
 		});
 
 		el = ed.selection.getNode();
@@ -96,27 +95,31 @@ var ImageDialog = {
 	},
 
 	updateStyle : function() {
-		var dom = tinyMCEPopup.dom, st, v, f = document.forms[0];
+		var dom = tinyMCEPopup.dom, st, v, cls, oldcls, rep, f = document.forms[0];
 
 		if (tinyMCEPopup.editor.settings.inline_styles) {
 			st = tinyMCEPopup.dom.parseStyle(this.styleVal);
 
 			// Handle align
 			v = getSelectValue(f, 'align');
+			cls = f.class_name.value || '';
+			cls = cls ? cls.replace(/alignright\s*|alignleft\s*/g, '') : '';
+			cls = cls ? cls.replace(/^\s*(.+?)\s*$/, '$1') : '';
 			if (v) {
 				if (v == 'left' || v == 'right') {
 					st['float'] = v;
 					delete st['vertical-align'];
-					f.class_name.value = (v == 'right') ? 'alignright' : 'alignleft';
+					oldcls = cls ? ' '+cls : '';
+					f.class_name.value = 'align' + v + oldcls;
 				} else {
 					st['vertical-align'] = v;
 					delete st['float'];
-					f.class_name.value = null;
+					f.class_name.value = cls;
 				}
 			} else {
 				delete st['float'];
 				delete st['vertical-align'];
-				f.class_name.value = null;
+				f.class_name.value = cls;
 			}
 
 			// Handle border