Add basic support for dir and lang attributes for autonyms
Added a util function for getting the language's direction. Added lang and dir attributes for every language item in the list.
This commit is contained in:
@@ -5,6 +5,7 @@
|
|||||||
.uls-lcd-region-section ul li:hover {
|
.uls-lcd-region-section ul li:hover {
|
||||||
background-color: #eaeff7;
|
background-color: #eaeff7;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Language list */
|
/* Language list */
|
||||||
.uls-language-list {
|
.uls-language-list {
|
||||||
height: 22em;
|
height: 22em;
|
||||||
@@ -22,7 +23,32 @@
|
|||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
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;
|
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 {
|
.uls-language-list strong {
|
||||||
|
|||||||
@@ -339,6 +339,15 @@
|
|||||||
return $.inArray( $.uls.data.script( language ), $.uls.data.rtlscripts ) !== -1;
|
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.
|
* Returns the languages spoken in a territory.
|
||||||
* @param string Territory code
|
* @param string Territory code
|
||||||
|
|||||||
@@ -19,10 +19,9 @@
|
|||||||
* @licence MIT License
|
* @licence MIT License
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function( $ ) {
|
( function( $ ) {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
|
||||||
var noResultsTemplate = '\
|
var noResultsTemplate = '\
|
||||||
<div class="twelve columns uls-no-results-view">\
|
<div class="twelve columns uls-no-results-view">\
|
||||||
<h2 data-i18n="uls-no-results-found" class="eleven columns end offset-by-one">\
|
<h2 data-i18n="uls-no-results-found" class="eleven columns end offset-by-one">\
|
||||||
@@ -94,6 +93,10 @@
|
|||||||
|
|
||||||
var $li = $( '<li>' )
|
var $li = $( '<li>' )
|
||||||
.data( 'code', langCode )
|
.data( 'code', langCode )
|
||||||
|
.attr({
|
||||||
|
lang: langCode,
|
||||||
|
dir: $.uls.data.getDir( langCode )
|
||||||
|
})
|
||||||
.append(
|
.append(
|
||||||
$( '<a>' ).prop( 'href', '#' ).prop( 'title', language ).html( langName )
|
$( '<a>' ).prop( 'href', '#' ).prop( 'title', language ).html( langName )
|
||||||
);
|
);
|
||||||
@@ -206,6 +209,10 @@
|
|||||||
var langName = $.uls.data.autonym( langCode ) || language || langCode;
|
var langName = $.uls.data.autonym( langCode ) || language || langCode;
|
||||||
var $li = $( '<li>' )
|
var $li = $( '<li>' )
|
||||||
.data( 'code', langCode )
|
.data( 'code', langCode )
|
||||||
|
.attr({
|
||||||
|
lang: langCode,
|
||||||
|
dir: $.uls.data.getDir( langCode )
|
||||||
|
})
|
||||||
.append(
|
.append(
|
||||||
$( '<a>' ).prop( 'href', '#' ).prop( 'title', language ).html( langName )
|
$( '<a>' ).prop( 'href', '#' ).prop( 'title', language ).html( langName )
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user