Merge pull request #812 from Lord-Grey/Language_selection-#787

Improve language selection usability

assets/webconfig/js/content_index.js

@@ -27,7 +27,7 @@ $(document).ready(function () {
 	$(window.hyperion).on("cmd-serverinfo", function (event) {
 		window.serverInfo = event.response.info;
 		// comps
-    window.comps = event.response.info.components
+		window.comps = event.response.info.components
 
 		$(window.hyperion).trigger("ready");
 
@@ -56,6 +56,35 @@ $(document).ready(function () {
 		updateSessions();
 	}); // end cmd-serverinfo
 
+	// Update language selection
+	$("#language-select").on('changed.bs.select',function (e, clickedIndex, isSelected, previousValue){
+   	    var newLang = availLang[clickedIndex-1];
+	    if (newLang !== storedLang)
+	    {
+	    	setStorage("langcode", newLang);
+			reload();
+	    }
+	});
+
+	$("#language-select").selectpicker(
+	{
+		container: 'body'
+	});
+
+	$(".bootstrap-select").click(function () {
+		$(this).addClass("open");
+	});
+
+	$(document).click(function(){
+		$(".bootstrap-select").removeClass("open");
+	});
+
+	$(".bootstrap-select").click(function(e){
+		e.stopPropagation();
+	});
+	
+	//End language selection
+	
 	$(window.hyperion).on("cmd-sessions-update", function (event) {
 		window.serverInfo.sessions = event.response.data;
 		updateSessions();

assets/webconfig/js/settings.js

@@ -1,6 +1,7 @@
 var storedAccess;
 var storedLang;
 var availLang = ['en','de','es','it','cs','sv','nl','pl','ro'];
+var availLangText = ['English','Deutsch','Español','Italiano','Čeština','Svenska','Nederlands','Polski','Română'];
 var availAccess = ['default','advanced','expert'];
 //$.i18n.debug = true;
 
@@ -69,33 +70,7 @@ $(document).ready( function() {
 		$('#btn_setaccess').attr("disabled", true);
 	}
 
-	$('#btn_setlang').off().on('click',function() {
-		var newLang;
-		showInfoDialog('select', $.i18n('InfoDialog_lang_title'), $.i18n('InfoDialog_lang_text'));
-
-		for (var lcx = 0; lcx<availLang.length; lcx++)
-		{
-			$('#id_select').append(createSelOpt(availLang[lcx], $.i18n('general_speech_'+availLang[lcx])))
-		}
-
-		if (storedLang != "auto")
-			$('#id_select').val(storedLang);
-
-		$('#id_select').off().on('change',function() {
-			newLang = $('#id_select').val();
-			if (newLang == storedLang)
-				$('#id_btn_saveset').attr('disabled', true);
-			else
-				$('#id_btn_saveset').attr('disabled', false);
-		});
-
-		$('#id_btn_saveset').off().on('click',function() {
-				setStorage("langcode", newLang);
-				reload();
-		});
-
-		$('#id_select').trigger('change');
-	});
+	initLanguageSelection();
 
 	//access
 	storedAccess = getStorage("accesslevel");

assets/webconfig/js/ui_utils.js

@@ -178,6 +178,48 @@ function updateHyperionInstanceListing()
 	}
 }
 
+function initLanguageSelection()
+{
+	// Initialise language selection list with languages supported
+	for (var i = 0; i < availLang.length; i++)
+	{
+		$("#language-select").append('<option value="'+i+'" selected="">'+availLangText[i]+'</option>');
+	}	
+
+	var langLocale = storedLang;
+
+	// If no language has been set, resolve browser locale
+	if ( langLocale === 'auto' )
+	{
+		langLocale = $.i18n().locale.substring(0,2);
+	}
+
+	// Resolve text for language code
+	var langText = 'Please Select';
+
+	//Test, if language is supported by hyperion
+	langIdx = availLang.indexOf(langLocale)
+	if ( langIdx > -1 )
+	{
+		langText = availLangText[langIdx];
+	}
+	else
+	{
+		// If language is not supported by hyperion, try fallback language
+		langLocale = $.i18n().options.fallbackLocale.substring(0,2);	
+		langIdx = availLang.indexOf(langLocale)
+		if ( langIdx > -1 )
+		{
+			langText = availLangText[langIdx];
+		}
+	}
+	//console.log("langLocale: ", langLocale, "langText: ", langText);
+
+	$('#language-select').prop('title', langText);
+	$("#language-select").val(langIdx);
+	$("#language-select").selectpicker("refresh");
+}
+
 function updateUiOnInstance(inst)
 {
 	if(inst != 0)