Merge branch 't/13434'

ckeditor · Jul 3, 2015 · 7c8521b · 7c8521b
2 parents 9b72d86 + 7abcfce
commit 7c8521b
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 57 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -3,6 +3,10 @@ CKEditor 4 Changelog
 
 ## CKEditor 4.5.2
 
+Fixed Issues:
+
+* [#13434](http://dev.ckeditor.com/ticket/13434): Dialog state indicator broken in Right–To–Left environments.
+
 ## CKEditor 4.5.1
 
 Fixed Issues:

diff --git a/plugins/dialog/plugin.js b/plugins/dialog/plugin.js
@@ -1453,15 +1453,19 @@ CKEDITOR.DIALOG_STATE_BUSY = 2;
 			if ( state == CKEDITOR.DIALOG_STATE_BUSY ) {
 				// Insert the spinner on demand.
 				if ( !this.parts.spinner ) {
-					this.parts.spinner = CKEDITOR.document.createElement( 'div', {
-						attributes: {
-							'class': 'cke_dialog_spinner'
-						},
-						styles: {
-							'float': 'left',
-							'margin-right': '8px'
-						}
-					} );
+					var dir = this.getParentEditor().lang.dir,
+						spinnerDef = {
+							attributes: {
+								'class': 'cke_dialog_spinner'
+							},
+							styles: {
+								'float': dir == 'rtl' ? 'right' : 'left'
+							}
+						};
+
+					spinnerDef.styles[ 'margin-' + ( dir == 'rtl' ? 'left' : 'right' ) ] = '8px';
+
+					this.parts.spinner = CKEDITOR.document.createElement( 'div', spinnerDef );
 
 					this.parts.spinner.setHtml( '&#8987;' );
 					this.parts.spinner.appendTo( this.parts.title, 1 );

diff --git a/tests/plugins/dialog/manual/state.html b/tests/plugins/dialog/manual/state.html
@@ -1,5 +1,9 @@
 <div>
-	<textarea cols="80" id="editor1" name="editor1" rows="10">
+	<h2>LTR Editor</h2>
+	<textarea cols="80" name="en" id="editor1" name="editor1" rows="10">
+	</textarea>
+	<h2>RTL Editor</h2>
+	<textarea cols="80" name="he" id="editor2" name="editor2" rows="10">
 	</textarea>
 	<style>
 		.cke_button__state_label {
@@ -11,57 +15,62 @@
 		}
 	</style>
 	<script>
-		CKEDITOR.replace( 'editor1', {
-			on: {
-				pluginsLoaded: function() {
-					CKEDITOR.dialog.add( 'state', function() {
-						return {
-							title: 'Dialog with state indicator',
-							minWidth: 250,
-							minHeight: 50,
-							onLoad: function( evt ) {
-								this.getContentElement( 'info', 'busy' ).on( 'click', function() {
-									this.setState( CKEDITOR.DIALOG_STATE_BUSY );
-								}, this );
+		CKEDITOR.on( 'instanceLoaded', function( evt ) {
+			CKEDITOR.dialog.add( 'state', function() {
+				return {
+					title: 'Dialog with state indicator',
+					minWidth: 250,
+					minHeight: 50,
+					onLoad: function( evt ) {
+						this.getContentElement( 'info', 'busy' ).on( 'click', function() {
+							this.setState( CKEDITOR.DIALOG_STATE_BUSY );
+						}, this );
 
-								this.getContentElement( 'info', 'idle' ).on( 'click', function() {
-									this.setState( CKEDITOR.DIALOG_STATE_IDLE );
-								}, this );
-							},
-							contents: [
+						this.getContentElement( 'info', 'idle' ).on( 'click', function() {
+							this.setState( CKEDITOR.DIALOG_STATE_IDLE );
+						}, this );
+					},
+					contents: [
+						{
+							id: 'info',
+							label: 'Info Tab',
+							elements: [
 								{
-									id: 'info',
-									label: 'Info Tab',
-									elements: [
+									type: 'hbox',
+									children: [
+										{
+											type: 'button',
+											id: 'busy',
+											label: 'Set dialog busy'
+										},
 										{
-											type: 'hbox',
-											children: [
-												{
-													type: 'button',
-													id: 'busy',
-													label: 'Set dialog busy'
-												},
-												{
-													type: 'button',
-													id: 'idle',
-													label: 'Set dialog idle'
-												}
-											]
+											type: 'button',
+											id: 'idle',
+											label: 'Set dialog idle'
 										}
 									]
 								}
 							]
-						};
-					} );
+						}
+					]
+				};
+			} );
+		} );
 
-					this.addCommand( 'state', new CKEDITOR.dialogCommand( 'state' ) );
+		CKEDITOR.replaceAll( function( el, config ) {
+			CKEDITOR.tools.extend( config, {
+				language: el.getAttribute( 'name' ),
+				on: {
+					pluginsLoaded: function() {
+						this.addCommand( 'state', new CKEDITOR.dialogCommand( 'state' ) );
 
-					this.ui.addButton( 'state', {
-						label: 'Show a dialog with state indicator',
-						command: 'state',
-					} );
+						this.ui.addButton( 'state', {
+							label: 'Show a dialog with state indicator',
+							command: 'state',
+						} );
+					}
 				}
-			}
+			} );
 		} );
 	</script>
-</div>
+</div>
diff --git a/tests/plugins/dialog/manual/state.md b/tests/plugins/dialog/manual/state.md
@@ -1,22 +1,26 @@
-@bender-tags: dialog
+@bender-tags: dialog, 13434
 @bender-ui: collapsed
 @bender-ckeditor-plugins: wysiwygarea, toolbar, dialog
 
 ## Observe dialog state change
 
 1. Click the toolbar button.
-1. Click "Set dialog busy". A **spinning** indicator should appear in the **upper left corner** of the dialog, before the title.
+1. Click "Set dialog busy". A **spinning** indicator should appear in the **upper left corner** (**upper _right_ corner** in RTL mode) of the dialog, before the title.
 1. Click the **OK** button. Nothing should happen. It supposed to be disabled.
 1. Click "Set dialog idle". The spinner should disappear.
 1. Click the **OK** button. The dialog should disappear.
 1. Re–open the dialog. Click each of the buttons multiple times. There should be no errors in console. Nothing extra should happen except of
- * the spinner appearing and disappearing
- * **OK** button being locked and unlocked
+	* the spinner appearing and disappearing
+	* **OK** button being locked and unlocked
 
 ## Dialog state reset on hide
 
 1. Re–open the dialog.
 1. Click "Set dialog busy".
 1. Click **Cancel**.
 1. Re–open the dialog.
-1. The dialog should be idle (**OK** button **enabled**, no spinner).
+1. The dialog should be idle (**OK** button **enabled**, no spinner).
+
+## Notes
+
+* Expect the "Ok" and "Cancel" buttons and their tooltips in RTL mode to be in Hebrew.