Merge pull request #4 from amire80/master

Starting RTL support (copied from Gerrit, except the tests)

css/jquery.uls.lcd.css

@@ -5,6 +5,7 @@
 .uls-lcd-region-section ul li:hover {
 	background-color: #eaeff7;
 }
+
 /* Language list */
 .uls-language-list {
 	height: 22em;
@@ -22,7 +23,32 @@
 	font-weight: normal;
 	overflow: hidden;
 	white-space: nowrap;
+
+	/*
+	 * Some languages have long names for various reasons and we still want
+	 * them to appear on one line.
+	 * To make it work correctly, the directionality must be set correctly
+	 * on the item level.
+	 */
 	text-overflow: ellipsis;
+
+	/*
+	 * The directionality (ltr/rtl) for each list item is set dynamically
+	 * as HTML attributes in JavaScript. Setting directionality also applies
+	 * alignment, but a list with mixed alignment is hard to read.
+	 * All items are therefore explicitly aligned to the left, including names
+	 * of right-to-left languages in left-to-right environment and vice versa.
+	 * As long as the directionality of the item is set correctly, the text
+	 * is readable.
+	 */
+	text-align: left;
+
+	
+	/*
+	 * We don't want any visible bullets in this list.
+	 */
+	list-style-image: none;
+	list-style-type: none;
 }
 
 .uls-language-list strong {

src/jquery.uls.data.utils.js

@@ -339,6 +339,15 @@
 		return $.inArray( $.uls.data.script( language ), $.uls.data.rtlscripts ) !== -1;
 	};
 
+	/**
+	 * Return the direction of the language
+	 * @param string language code
+	 * @return string
+	 */
+	$.uls.data.getDir = function( language ) {
+		return $.uls.data.isRtl( language ) ? 'rtl' : 'ltr';
+	};
+
 	/**
 	 * Returns the languages spoken in a territory.
 	 * @param string Territory code

src/jquery.uls.lcd.js

@@ -19,10 +19,9 @@
  * @licence MIT License
  */
 
-(function( $ ) {
+( function( $ ) {
 	"use strict";
 
-
 	var noResultsTemplate = '\
 	<div class="twelve columns uls-no-results-view">\
 		<h2 data-i18n="uls-no-results-found" class="eleven columns end offset-by-one">\
@@ -94,6 +93,10 @@
 
 				var $li = $( '<li>' )
 					.data( 'code', langCode )
+					.attr( {
+						lang: langCode,
+						dir: $.uls.data.getDir( langCode )
+					} )
 					.append(
 						$( '<a>' ).prop( 'href', '#' ).prop( 'title', language ).html( langName )
 					);
@@ -206,6 +209,10 @@
 				var langName = $.uls.data.autonym( langCode ) || language || langCode;
 				var $li = $( '<li>' )
 					.data( 'code', langCode )
+					.attr( {
+						lang: langCode,
+						dir: $.uls.data.getDir( langCode )
+					} )
 					.append(
 						$( '<a>' ).prop( 'href', '#' ).prop( 'title', language ).html( langName )
 					);