Browse Source

Added language selector UI

AY 4 years ago
parent
commit
b88e8d3ea2
3 changed files with 97 additions and 25 deletions
  1. 13 0
      setting.advance.go
  2. 60 0
      web/SystemAO/advance/locale.html
  3. 24 25
      web/script/applocale.js

+ 13 - 0
setting.advance.go

@@ -65,4 +65,17 @@ func AdvanceSettingInit() {
 		})
 	}
 
+	/*
+		Locale / Display Language
+
+		This method allows users to change their own language
+	*/
+	registerSetting(settingModule{
+		Name:         "Language",
+		Desc:         "Set the display language of the system",
+		IconPath:     "SystemAO/advance/img/small_icon.png",
+		Group:        "Advance",
+		StartDir:     "SystemAO/advance/locale.html",
+		RequireAdmin: false,
+	})
 }

+ 60 - 0
web/SystemAO/advance/locale.html

@@ -0,0 +1,60 @@
+<html>
+
+<head>
+    <title>Locale</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
+    <link rel="stylesheet" href="../../script/semantic/semantic.css">
+    <script type="application/javascript" src="../../script/jquery.min.js"></script>
+    <script type="application/javascript" src="../../script/clipboard.min.js"></script>
+    <script type="application/javascript" src="../../script/semantic/semantic.js"></script>
+</head>
+
+<body>
+    <div class="ui container">
+        <div class="ui basic segment">
+            <div class="ui header">
+                <i class="tv icon"></i>
+                <div class="content">
+                    Language
+                    <div class="sub header">Change the language here.</div>
+                </div>
+            </div>
+        </div>
+        <div class="ui divider"></div>
+        <div class="ui green inverted segment" style="display:none;" id="updateSet">
+            <h5 class="ui header">
+                <i class="checkmark icon"></i>
+                <div class="content">
+                    Setting Updated
+                </div>
+            </h5>
+        </div>
+        <div class="ui form">
+            <div class="field">
+                <label>Display language</label>
+                <div class="ui selection dropdown">
+                    <input id="language" type="hidden" name="language">
+                    <i class="dropdown icon"></i>
+                    <div class="default text">Language</div>
+                    <div class="menu">
+                        <div class="item" data-value="default">Browser Default</div>
+                        <div class="item" data-value="zh-TW">繁體中文</div>
+                    </div>
+                </div>
+            </div>
+            <button id="ntb" onclick="update();" class="ui green button" type="submit">Update</button>
+        </div>
+    </div>
+    <script>
+        $("#language").val(localStorage.getItem('global_language'));
+        $('.selection.dropdown').dropdown();
+
+        function update() {
+            localStorage.setItem('global_language', $("#language").val());
+            $("#updateSet").stop().finish().slideDown("fast").delay(3000).slideUp('fast');
+        }
+    </script>
+</body>
+
+</html>

+ 24 - 25
web/script/applocale.js

@@ -18,32 +18,31 @@
 
 
 var applocale = {
-    lang: navigator.language,
+    lang: localStorage.getItem('global_language') == null || localStorage.getItem('global_language') == "default" ? navigator.language : localStorage.getItem('global_language'),
     localeFile: "",
     localData: {},
-    init: function(localeFile, callback=undefined){
+    init: function(localeFile, callback = undefined) {
         applocale.localeFile = localeFile;
         $.ajax({
             dataType: "json",
             url: localeFile,
-            success: function(data){
+            success: function(data) {
                 applocale.localData = data;
-                if (callback != undefined){
+                if (callback != undefined) {
                     callback(data);
                 }
 
-                if (data.keys[applocale.lang] != undefined && data.keys[applocale.lang].fwtitle != undefined && ao_module_virtualDesktop){
+                if (data.keys[applocale.lang] != undefined && data.keys[applocale.lang].fwtitle != undefined && ao_module_virtualDesktop) {
                     //Update the floatwindow title as well
                     ao_module_setWindowTitle(data.keys[applocale.lang].fwtitle);
                 }
             }
-          });
+        });
     },
-    translate: function(targetLang = ""){
+    translate: function(targetLang = "") {
         var targetLang = targetLang || applocale.lang;
-
         //Check if the given locale exists
-        if (applocale.localData.keys[targetLang] == undefined){
+        if (applocale.localData.keys[targetLang] == undefined) {
             console.log("[Applocale] This language is not supported. Using default")
             return
         }
@@ -52,39 +51,39 @@ var applocale = {
         let hasTitleLocale = (applocale.localData.keys[targetLang].titles !== undefined);
         let hasStringLocale = (applocale.localData.keys[targetLang].strings !== undefined);
         let hasPlaceHolderLocale = (applocale.localData.keys[targetLang].placeholder !== undefined);
-        $("*").each(function(){
-            if ($(this).attr("title") != undefined && hasTitleLocale){
-               let targetString = applocale.localData.keys[targetLang].titles[$(this).attr("title")];
-               if (targetString != undefined){
+        $("*").each(function() {
+            if ($(this).attr("title") != undefined && hasTitleLocale) {
+                let targetString = applocale.localData.keys[targetLang].titles[$(this).attr("title")];
+                if (targetString != undefined) {
                     $(this).attr("title", targetString);
-               }
-               
+                }
+
             }
 
-            if ($(this).attr("locale") != undefined && hasStringLocale){
+            if ($(this).attr("locale") != undefined && hasStringLocale) {
                 let targetString = applocale.localData.keys[targetLang].strings[$(this).attr("locale")];
-                if (targetString != undefined){
+                if (targetString != undefined) {
                     $(this).html(targetString);
                 }
             }
 
-            if ($(this).attr("placeholder") != undefined && hasPlaceHolderLocale){
+            if ($(this).attr("placeholder") != undefined && hasPlaceHolderLocale) {
                 let targetString = applocale.localData.keys[targetLang].placeholder[$(this).attr("placeholder")];
-                if (targetString != undefined){
-                    $(this).attr("placeholder",targetString);
+                if (targetString != undefined) {
+                    $(this).attr("placeholder", targetString);
                 }
             }
         })
-   },
-    getString: function(key, original, type="strings"){
+    },
+    getString: function(key, original, type = "strings") {
         var targetLang = applocale.lang;
-        if (applocale.localData.keys[targetLang] == undefined){
+        if (applocale.localData.keys[targetLang] == undefined) {
             return original;
         }
         let targetString = applocale.localData.keys[targetLang].strings[key];
-        if (targetString != undefined){
+        if (targetString != undefined) {
             return targetString
-        }else{
+        } else {
             return original
         }
     }