diff --git a/lib/jquery.uls/css/jquery.uls.lcd.css b/lib/jquery.uls/css/jquery.uls.lcd.css index 7a07081b..fc7cff0a 100644 --- a/lib/jquery.uls/css/jquery.uls.lcd.css +++ b/lib/jquery.uls/css/jquery.uls.lcd.css @@ -52,3 +52,7 @@ margin-top: 1.6em; line-height: 1.6em; } + +.uls-lcd-region-section ul li.uls-column-break:hover{ + background: none; +} diff --git a/lib/jquery.uls/src/jquery.uls.data.utils.js b/lib/jquery.uls/src/jquery.uls.data.utils.js index a6c9ab06..2ccb5d0e 100644 --- a/lib/jquery.uls/src/jquery.uls.data.utils.js +++ b/lib/jquery.uls/src/jquery.uls.data.utils.js @@ -170,16 +170,20 @@ }; /** - * Get the given list of languages sorted by script. + * Get the given list of languages grouped by script. * @param languages Array of language codes * @return {Object} Array of languages indexed by script codes */ $.uls.data.languagesByScriptGroup = function( languages ) { - var languagesByScriptGroup = {}, scriptGroup, language, langScriptGroup; + var languagesByScriptGroup = {}, + scriptGroup, + language, + langScriptGroup; + for ( scriptGroup in $.uls.data.scriptgroups ) { for ( language in languages ) { langScriptGroup = $.uls.data.scriptGroupOfLanguage( language ); - if( langScriptGroup !== scriptGroup ){ + if( langScriptGroup !== scriptGroup ) { continue; } if ( !languagesByScriptGroup[scriptGroup] ) { @@ -188,8 +192,10 @@ languagesByScriptGroup[scriptGroup].push( language ); } } + return languagesByScriptGroup; }; + /** * Returns an associative array of languages in several regions, * grouped by script group. @@ -298,4 +304,15 @@ $.uls.data.scriptGroupOfLanguage = function( language ) { return $.uls.data.groupOfScript( $.uls.data.script( language ) ); }; + + /** + * A callback for sorting languages by autonym. + * Can be used as an argument to a sort function. + * @param two language codes + */ + $.uls.data.sortByAutonym = function( a, b ) { + var autonymA = $.uls.data.autonym( a ) || a, + autonymB = $.uls.data.autonym( b ) || b; + return ( autonymA.toLowerCase() < autonymB.toLowerCase() ) ? -1 : 1; + }; } )( jQuery ); diff --git a/lib/jquery.uls/src/jquery.uls.languagefilter.js b/lib/jquery.uls/src/jquery.uls.languagefilter.js index 49a98ff4..641a1ad3 100644 --- a/lib/jquery.uls/src/jquery.uls.languagefilter.js +++ b/lib/jquery.uls/src/jquery.uls.languagefilter.js @@ -67,7 +67,7 @@ e.preventDefault(); e.stopPropagation(); } else { - this.options.$target.focus(); + this.options.$target.focus(); } default: var that = this; @@ -87,7 +87,10 @@ }, toggleClear: function() { - if ( !this.$clear.length ) return; + if ( !this.$clear.length ) { + return; + } + if ( this.$element.val() ) { this.$clear.show(); } else { @@ -101,8 +104,10 @@ scriptGroup, langNum, langCode; this.resultCount = 0; for ( scriptGroup in languages ) { - for ( langNum = 0; langNum < languages[scriptGroup].length; langNum++ ) { - langCode = languages[scriptGroup][langNum]; + var languagesInScript = languages[scriptGroup]; + languagesInScript.sort( $.uls.data.sortByAutonym ); + for ( langNum = 0; langNum < languagesInScript.length; langNum++ ) { + langCode = languagesInScript[langNum]; if ( query === "" || this.filter( langCode, query ) ) { if ( this.resultCount === 0 ) { // Autofill the first result. @@ -261,6 +266,7 @@ test: function( langCode ) { var langRegions = $.uls.data.regions( langCode ), region; + for ( var i = 0; i < this.regions.length; i++ ) { region = this.regions[i]; if ( $.inArray( region, langRegions ) >= 0 ) { @@ -271,21 +277,21 @@ }, show: function() { - var i, regions, language, languagesByScriptGroup, scriptGroup, languages; // Make the selected region (and it only) active $( '.regionselector' ).removeClass( 'active' ); - if( this.regionGroup ) { + if ( this.regionGroup ) { // if there is a region group, make it active. this.$element.addClass( 'active' ); } + // Re-populate the list of languages this.options.$target.empty(); - languagesByScriptGroup = $.uls.data.languagesByScriptGroup( this.options.languages ); - for ( scriptGroup in languagesByScriptGroup ) { - languages = languagesByScriptGroup[scriptGroup]; - for ( i = 0; i < languages.length; i++) { - language = languages[i]; - this.test( language ); + var languagesByScriptGroup = $.uls.data.languagesByScriptGroup( this.options.languages ); + for ( var scriptGroup in languagesByScriptGroup ) { + var languages = languagesByScriptGroup[scriptGroup]; + languages.sort( $.uls.data.sortByAutonym ); + for ( var i = 0; i < languages.length; i++ ) { + this.test( languages[i] ); } } diff --git a/lib/jquery.uls/src/jquery.uls.lcd.js b/lib/jquery.uls/src/jquery.uls.lcd.js index 2642b883..492b14ae 100644 --- a/lib/jquery.uls/src/jquery.uls.lcd.js +++ b/lib/jquery.uls/src/jquery.uls.lcd.js @@ -32,7 +32,6 @@ constructor: LanguageCategoryDisplay, append: function( langCode, regionCode, languageName ) { - var that = this; this.addToRegion( langCode, regionCode, languageName ); }, @@ -47,10 +46,10 @@ addToRegion: function( langCode, region, languageName) { var that = this; var language = that.options.languages[langCode], - langName = languageName - || $.uls.data.autonym( langCode ) - || that.options.languages[langCode] - || langCode, + langName = languageName || + $.uls.data.autonym( langCode ) || + that.options.languages[langCode] || + langCode, regions = []; if ( region ) { regions.push( region ); @@ -68,8 +67,22 @@ ); // Append the element to the column in the list - var column = that.getColumn( regionCode ); - column.append( $li ); + var $column = that.getColumn( regionCode ); + var lastLanguage = $column.find( 'li:last' ).data( 'code' ); + if ( lastLanguage ) { + var lastScriptGroup = $.uls.data.scriptGroupOfLanguage( lastLanguage ), + currentScriptGroup = $.uls.data.scriptGroupOfLanguage( langCode ); + if ( lastScriptGroup !== currentScriptGroup ) { + if ( $column.find( 'li' ).length > 5 ) { + // If column has already 5 or more languages, add a new column + $column = that.getColumn( regionCode, true ); + } else { + // An empty item as column break. + $column.append( $( '