jquery-ui:Base text direction support

tests/unit/accordion/common.js

@@ -21,6 +21,7 @@ common.testWidget( "accordion", {
 			"activeHeader": "ui-icon-triangle-1-s",
 			"header": "ui-icon-triangle-1-e"
 		},
+		textDir: null,
 
 		// Callbacks
 		activate: null,

tests/unit/autocomplete/common.js

@@ -21,6 +21,7 @@ common.testWidget( "autocomplete", {
 			collision: "none"
 		},
 		source: null,
+		textDir: null,
 
 		// Callbacks
 		change: null,

tests/unit/button/common-deprecated.js

@@ -18,6 +18,7 @@ common.testWidget( "button", {
 		label: null,
 		showLabel: true,
 		text: true,
+		textDir: null,
 
 		// Callbacks
 		create: null

tests/unit/button/common.js

@@ -13,6 +13,7 @@ common.testWidget( "button", {
 		iconPosition: "beginning",
 		label: null,
 		showLabel: true,
+		textDir: null,
 
 		// Callbacks
 		create: null

tests/unit/checkboxradio/common.js

@@ -13,6 +13,7 @@ common.testWidget( "checkboxradio", {
 		disabled: null,
 		icon: true,
 		label: null,
+		textDir: null,
 
 		// Callbacks
 		create: null

tests/unit/controlgroup/common.js

@@ -20,6 +20,7 @@ common.testWidget( "controlgroup", {
 			"controlgroupLabel": ".ui-controlgroup-label"
 		},
 		onlyVisible: true,
+		textDir: null,
 
 		// Callbacks
 		create: null

tests/unit/menu/common.js

@@ -17,6 +17,7 @@ common.testWidget( "menu", {
 			at: "right top"
 		},
 		role: "menu",
+		textDir: null,
 
 		// Callbacks
 		blur: null,

tests/unit/selectmenu/common.js

@@ -19,6 +19,7 @@ common.testWidget( "selectmenu", {
 			at: "left bottom",
 			collision: "none"
 		},
+		textDir: null,
 		width: false,
 
 		// Callbacks

tests/unit/tabs/common.js

@@ -18,6 +18,7 @@ common.testWidget( "tabs", {
 		heightStyle: "content",
 		hide: null,
 		show: null,
+		textDir: null,
 
 		// Callbacks
 		activate: null,

tests/unit/tooltip/common-deprecated.js

@@ -18,6 +18,7 @@ common.testWidget( "tooltip", {
 			collision: "flipfit flip"
 		},
 		show: true,
+		textDir: null,
 		tooltipClass: null,
 		track: false,
 

tests/unit/tooltip/common.js

@@ -18,6 +18,7 @@ common.testWidget( "tooltip", {
 			collision: "flipfit flip"
 		},
 		show: true,
+		textDir: null,
 		track: false,
 
 		// Callbacks

ui/widget.js

@@ -697,6 +697,32 @@ $.Widget.prototype = {
 		return !( $.isFunction( callback ) &&
 			callback.apply( this.element[ 0 ], [ event ].concat( data ) ) === false ||
 			event.isDefaultPrevented() );
+	},
+
+	_getTextDir: function( text ) {
+		if ( this.options.textDir === "auto" ) {
+
+			// Look for first strong (either English or Arabic/Hebrew) character.
+			// Resolve text direction accordingly ("rtl" for Arabic/Hebrew, "ltr" otherwise).
+			var matcher = /[A-Za-z\u05d0-\u065f\u066a-\u06ef\u06fa-\u07ff\ufb1d-\ufdff\ufe70-\ufefc]/.exec( text );
+			return ( matcher && ( matcher[ 0 ] > "z" ) ) ? "rtl" : "ltr";
+		}
+		return this.options.textDir;
+	},
+
+	_applyTextDir: function( param ) {
+		if ( typeof param === "string" ) {
+			param = param.replace( /[\u202A\u202B\u202C]/g, "" );
+
+			// Unicode directional characters: 202A and 202B used to enforce text direction.
+			// 202C - POP formatter closing directional segment.
+			return ( this._getTextDir( param ) === "rtl" ? "\u202B" : "\u202A" ) + param + "\u202C";
+		} else if ( param.jquery ) {
+				var isField = param.is( "input" ) || param.is( "textarea" );
+				param.css( "direction", this._getTextDir( isField ? param.val() : param.text() ) );
+		} else if ( param.nodeType === 1 ) {
+				param.style.direction = this._getTextDir( param.textContent );
+		}
 	}
 };
 

ui/widgets/accordion.js

@@ -54,6 +54,7 @@ return $.widget( "ui.accordion", {
 			activeHeader: "ui-icon-triangle-1-s",
 			header: "ui-icon-triangle-1-e"
 		},
+		textDir: null,
 
 		// Callbacks
 		activate: null,
@@ -305,6 +306,13 @@ return $.widget( "ui.accordion", {
 		this._addClass( this.active.next(), "ui-accordion-content-active" );
 		this.active.next().show();
 
+		if ( this.options.textDir ) {
+			var that = this;
+			this.headers.each( function( i, header ) {
+				header.textContent = that._applyTextDir( header.textContent );
+			} );
+		}
+
 		this.headers
 			.attr( "role", "tab" )
 			.each( function() {

ui/widgets/autocomplete.js

@@ -50,6 +50,7 @@ $.widget( "ui.autocomplete", {
 			collision: "none"
 		},
 		source: null,
+		textDir: null,
 
 		// Callbacks
 		change: null,
@@ -89,6 +90,26 @@ $.widget( "ui.autocomplete", {
 
 		this._addClass( "ui-autocomplete-input" );
 		this.element.attr( "autocomplete", "off" );
+		if ( this.options.textDir ) {
+			var textDir = this._getTextDir( this._value() );
+			this.element.css( "direction", textDir );
+			if ( this.options.textDir === "auto" ) {
+				this.element.css( "text-align", textDir === "rtl" ? "right" : "left" );
+				this._on( this.element, {
+					keyup: function( e ) {
+						var keyCode = $.ui.keyCode;
+						if ( e.keyCode < keyCode.PAGE_UP || e.keyCode >= keyCode.DELETE ) {
+							var textDir = this._getTextDir( this._value() );
+							this.element.css( "direction", textDir )
+								.css( "text-align", textDir === "rtl" ? "right" : "left" );
+						}
+					}
+				} );
+			} else {
+				this.element.css( "text-align",
+					this.element.css( "direction" ) === "rtl" ? "right" : "left" );
+			}
+		}
 
 		this._on( this.element, {
 			keydown: function( event ) {
@@ -288,6 +309,9 @@ $.widget( "ui.autocomplete", {
 
 				if ( false !== this._trigger( "select", event, { item: item } ) ) {
 					this._value( item.value );
+					if ( this.options.textDir === "auto" ) {
+						this.element.css( "direction", this._getTextDir( item.value ) );
+					}
 				}
 
 				// reset the term after the select event
@@ -521,6 +545,15 @@ $.widget( "ui.autocomplete", {
 	_suggest: function( items ) {
 		var ul = this.menu.element.empty();
 		this._renderMenu( ul, items );
+
+		if ( this.options.textDir ) {
+			ul.css( "text-align", ul.css( "direction" ) === "rtl" ? "right" : "left" );
+			var that = this;
+			ul.children().each( function( i, li ) {
+				li.style.direction = that._getTextDir( li.textContent );
+			} );
+		}
+
 		this.isNewMenu = true;
 		this.menu.refresh();
 

ui/widgets/button.js

@@ -49,7 +49,8 @@ $.widget( "ui.button", {
 		icon: null,
 		iconPosition: "beginning",
 		label: null,
-		showLabel: true
+		showLabel: true,
+		textDir: null
 	},
 
 	_getCreateOptions: function() {
@@ -96,6 +97,14 @@ $.widget( "ui.button", {
 				this.element.html( this.options.label );
 			}
 		}
+
+		if ( this.options.textDir ) {
+			this._applyTextDir( this.element );
+			if ( this.hasTitle ) {
+				this.element.attr( "title", this._applyTextDir( this.element.attr( "title" ) ) );
+			}
+		}
+
 		this._addClass( "ui-button", "ui-widget" );
 		this._setOption( "disabled", this.options.disabled );
 		this._enhance();
@@ -218,6 +227,9 @@ $.widget( "ui.button", {
 			options.showLabel = true;
 		}
 		this._super( options );
+		if ( ( this.options.textDir && options.label ) || options.textDir ) {
+			this._applyTextDir( this.element );
+		}
 	},
 
 	_setOption: function( key, value ) {

ui/widgets/checkboxradio.js

@@ -44,7 +44,8 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
 		classes: {
 			"ui-checkboxradio-label": "ui-corner-all",
 			"ui-checkboxradio-icon": "ui-corner-all"
-		}
+		},
+		textDir: null
 	},
 
 	_getCreateOptions: function() {
@@ -105,6 +106,13 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
 			this._addClass( this.label, "ui-checkboxradio-radio-label" );
 		}
 
+		if ( this.options.textDir ) {
+			var markup = $.parseHTML( this.options.label );
+			if ( markup && markup.length === 1 && markup[ 0 ].nodeType === 3 ) {
+				this.options.label = this._applyTextDir( this.options.label );
+			}
+		}
+
 		if ( this.options.label && this.options.label !== this.originalLabel ) {
 			this._updateLabel();
 		} else if ( this.originalLabel ) {
@@ -208,6 +216,13 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
 
 		this._super( key, value );
 
+		if ( this.options.textDir && ( key === "label" || key === "textDir" ) ) {
+			var markup = $.parseHTML( this.options.label );
+			if ( markup && markup.length === 1 && markup[ 0 ].nodeType === 3 ) {
+				this.options.label = this._applyTextDir( this.options.label );
+			}
+		}
+
 		if ( key === "disabled" ) {
 			this._toggleClass( this.label, null, "ui-state-disabled", value );
 			this.element[ 0 ].disabled = value;

ui/widgets/controlgroup.js

@@ -45,7 +45,8 @@ return $.widget( "ui.controlgroup", {
 			"checkboxradio": "input[type='checkbox'], input[type='radio']",
 			"selectmenu": "select",
 			"spinner": ".ui-spinner-input"
-		}
+		},
+		textDir: null
 	},
 
 	_create: function() {
@@ -92,8 +93,11 @@ return $.widget( "ui.controlgroup", {
 					if ( element.children( ".ui-controlgroup-label-contents" ).length ) {
 						return;
 					}
-					element.contents()
-						.wrapAll( "<span class='ui-controlgroup-label-contents'></span>" );
+					var dir = that.options.textDir ?
+						"dir='" + that._getTextDir( element.text() ) + "' " : "";
+
+					element.contents().wrapAll(
+						"<span " + dir + "class='ui-controlgroup-label-contents'></span>" );
 				} );
 				that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" );
 				childWidgets = childWidgets.concat( labels.get() );
@@ -138,6 +142,9 @@ return $.widget( "ui.controlgroup", {
 						instanceOptions.classes =
 							that._resolveClassesValues( instanceOptions.classes, instance );
 					}
+					if ( that.options.textDir ) {
+						instanceOptions.textDir = that.options.textDir;
+					}
 					element[ widget ]( instanceOptions );
 
 					// Store an instance of the controlgroup to be able to reference

ui/widgets/menu.js

@@ -51,6 +51,7 @@ return $.widget( "ui.menu", {
 			at: "right top"
 		},
 		role: "menu",
+		textDir: null,
 
 		// Callbacks
 		blur: null,
@@ -370,6 +371,16 @@ return $.widget( "ui.menu", {
 		if ( this.active && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
 			this.blur();
 		}
+		if ( this.options.textDir ) {
+			menus.each( function() {
+				var item = $( this );
+				item.css( "text-align", item.css( "direction" ) === "rtl" ? "right" : "left" );
+			} );
+
+			items.each( function() {
+				that._applyTextDir( this );
+			} );
+		}
 	},
 
 	_itemRole: function() {

ui/widgets/selectmenu.js

@@ -60,6 +60,7 @@ return $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
 			collision: "none"
 		},
 		width: false,
+		textDir: null,
 
 		// Callbacks
 		change: null,
@@ -318,6 +319,10 @@ return $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
 		var that = this,
 			currentOptgroup = "";
 
+		if ( this.options.textDir ) {
+			ul.css( "text-align", ul.css( "direction" ) === "rtl" ? "right" : "left" );
+		}
+
 		$.each( items, function( index, item ) {
 			var li;
 
@@ -359,6 +364,9 @@ return $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
 
 	_setText: function( element, value ) {
 		if ( value ) {
+			if ( this.options.textDir ) {
+				value = this._applyTextDir( value );
+			}
 			element.text( value );
 		} else {
 			element.html( " " );

ui/widgets/tabs.js

@@ -52,6 +52,7 @@ $.widget( "ui.tabs", {
 		heightStyle: "content",
 		hide: null,
 		show: null,
+		textDir: null,
 
 		// Callbacks
 		activate: null,
@@ -371,6 +372,13 @@ $.widget( "ui.tabs", {
 				"aria-hidden": "true"
 			} );
 
+		if ( this.options.textDir ) {
+			var that = this;
+			this.tabs.each( function( i, tab ) {
+				that._applyTextDir( $( tab ).find( ".ui-tabs-anchor" ) );
+			} );
+		}
+
 		// Make sure one tab is in the tab order
 		if ( !this.active.length ) {
 			this.tabs.eq( 0 ).attr( "tabIndex", 0 );