Added personal homepage localization

- Added location
- Added hash state for system setting

src/web/SystemAO/locale/personal_homepage.json

@@ -0,0 +1,131 @@
+{
+    "author": "tobychui",
+    "version": "1.0",
+    "keys": {
+        "zh-tw": {
+            "name": "繁體中文（台灣）",
+            "fontFamily": "\"Microsoft JhengHei\",\"SimHei\", \"Apple LiGothic Medium\", \"STHeiti\"",
+            "strings": {
+                "header/title": "個人網頁",
+                "header/subtitle": "在 ArozOS 上建立您的專屬網頁",
+                "info/header": "什麼是個人網頁？",
+                "info/point1": "您可以使用 ArozOS 來架設靜態網站",
+                "info/point2": "所有網站的原始碼皆可從您的檔案管理員存取，位於您的使用者檔案系統中",
+                "info/point3": "任何人都可以使用這個連結來訪問您的網頁：",
+                "toggle/title": "啟用個人網頁",
+                "toggle/label": "啟用個人網頁",
+                "toggle/success": "個人網頁狀態已更新",
+                "webroot/title": "選擇網頁根目錄位置",
+                "webroot/placeholder": "選擇位置",
+                "webroot/button": "開啟",
+                "webroot/warning": "位於網頁根目錄內的所有檔案都可以被網路上的任何人存取。",
+                "webroot/success": "網頁根目錄位置已更新",
+                "footer/note": "*所有變更都會在更新時自動儲存。",
+                "": ""
+            },
+            "placeholder": {
+                "": ""
+            }
+        },
+        "zh-hk": {
+            "name": "繁體中文（香港）",
+            "fontFamily": "\"Microsoft JhengHei\",\"SimHei\", \"Apple LiGothic Medium\", \"STHeiti\"",
+            "strings": {
+                "header/title": "個人網頁",
+                "header/subtitle": "在 ArozOS 上建立您的專屬網頁",
+                "info/header": "什麼是個人網頁？",
+                "info/point1": "您可以使用 ArozOS 來架設靜態網站",
+                "info/point2": "所有網站的原始碼皆可從您的檔案管理員存取，位於您的使用者檔案系統中",
+                "info/point3": "任何人都可以使用這個連結來訪問您的網頁：",
+                "toggle/title": "啟用個人網頁",
+                "toggle/label": "啟用個人網頁",
+                "toggle/success": "個人網頁狀態已更新",
+                "webroot/title": "選擇網頁根目錄位置",
+                "webroot/placeholder": "選擇位置",
+                "webroot/button": "開啟",
+                "webroot/warning": "位於網頁根目錄內的所有檔案都可以被網路上的任何人存取。",
+                "webroot/success": "網頁根目錄位置已更新",
+                "footer/note": "*所有變更都會在更新時自動儲存。",
+                "": ""
+            },
+            "placeholder": {
+                "": ""
+            }
+        },
+        "zh-cn": {
+            "name": "简体中文",
+            "fontFamily": "\"Microsoft YaHei\",\"SimHei\", \"STHeiti\"",
+            "strings": {
+                "header/title": "个人网页",
+                "header/subtitle": "在 ArozOS 上创建您的专属网页",
+                "info/header": "什么是个人网页？",
+                "info/point1": "您可以使用 ArozOS 来架设静态网站",
+                "info/point2": "所有网站的源代码均可从您的文件管理器访问，位于您的用户文件系统中",
+                "info/point3": "任何人都可以使用这个链接来访问您的网页：",
+                "toggle/title": "启用个人网页",
+                "toggle/label": "启用个人网页",
+                "toggle/success": "个人网页状态已更新",
+                "webroot/title": "选择网页根目录位置",
+                "webroot/placeholder": "选择位置",
+                "webroot/button": "打开",
+                "webroot/warning": "位于网页根目录内的所有文件都可以被网络上的任何人访问。",
+                "webroot/success": "网页根目录位置已更新",
+                "footer/note": "*所有更改都会在更新时自动保存。",
+                "": ""
+            },
+            "placeholder": {
+                "": ""
+            }
+        },
+        "ja-jp": {
+            "name": "日本語",
+            "fontFamily": "\"Meiryo UI\", \"Arial Unicode MS\", \"Hiragino Kaku Gothic Pro\"",
+            "strings": {
+                "header/title": "個人ホームページ",
+                "header/subtitle": "ArozOS で独自のホームページを作成",
+                "info/header": "個人ホームページとは？",
+                "info/point1": "ArozOS を使用して静的ウェブサイトをホストできます",
+                "info/point2": "すべてのウェブサイトソースは、ユーザーファイルシステム内のファイルマネージャーからアクセスできます",
+                "info/point3": "誰でもこのリンクを使用してあなたのホームページにアクセスできます：",
+                "toggle/title": "個人ホームページの切り替え",
+                "toggle/label": "個人ホームページを有効にする",
+                "toggle/success": "ホームページのステータスが更新されました",
+                "webroot/title": "ウェブルートフォルダの場所を選択",
+                "webroot/placeholder": "場所を選択",
+                "webroot/button": "開く",
+                "webroot/warning": "ウェブルート内のすべてのファイルは、インターネット上の誰でもアクセスできます。",
+                "webroot/success": "ウェブルートの場所が更新されました",
+                "footer/note": "*すべての変更は更新時に自動的に保存されます。",
+                "": ""
+            },
+            "placeholder": {
+                "": ""
+            }
+        },
+        "ko-kr": {
+            "name": "한국어",
+            "fontFamily": "\"Malgun Gothic\", \"Apple SD Gothic Neo\"",
+            "strings": {
+                "header/title": "개인 홈페이지",
+                "header/subtitle": "ArozOS에서 나만의 홈페이지 만들기",
+                "info/header": "개인 홈페이지란?",
+                "info/point1": "ArozOS를 사용하여 정적 웹사이트를 호스팅할 수 있습니다",
+                "info/point2": "모든 웹사이트 소스는 사용자 파일 시스템에 있는 파일 관리자에서 액세스할 수 있습니다",
+                "info/point3": "누구나 이 링크를 사용하여 홈페이지에 액세스할 수 있습니다:",
+                "toggle/title": "개인 홈페이지 전환",
+                "toggle/label": "개인 홈페이지 활성화",
+                "toggle/success": "홈페이지 상태가 업데이트되었습니다",
+                "webroot/title": "웹 루트 폴더 위치 선택",
+                "webroot/placeholder": "위치 선택",
+                "webroot/button": "열기",
+                "webroot/warning": "웹 루트 내의 모든 파일은 인터넷의 모든 사용자가 액세스할 수 있습니다.",
+                "webroot/success": "웹 루트 위치가 업데이트되었습니다",
+                "footer/note": "*모든 변경 사항은 업데이트 시 자동으로 저장됩니다.",
+                "": ""
+            },
+            "placeholder": {
+                "": ""
+            }
+        }
+    }
+}

src/web/SystemAO/system_setting/index.html

@@ -87,40 +87,58 @@
               var currentSettingModuleList = [];
               var loadViaSystemSetting = true; //Check for this parameter to see if launching in Setting Interface
               var loadToPage = undefined; //Load setting page directly to the given tab, passed in via window hash
+              var pageStateRestored = false; //Flag to track if page state has been restored from hash
 
-              if (window.location.hash.length > 0){
-                var hashObject = window.location.hash.substr(1);
-                hashObject = JSON.parse(decodeURIComponent(hashObject));
-                if (typeof(hashObject.group) != 'undefined' && typeof(hashObject.name) != 'undefined'){
-                    loadToPage = hashObject;
+            function restorePageFromHash(){
+                if (pageStateRestored){
+                    return;
                 }
-              }
+                if (window.location.hash.length > 0){
+                    var hashObject = window.location.hash.substr(1);
+                    hashObject = JSON.parse(decodeURIComponent(hashObject));
+                    if (typeof(hashObject.group) != 'undefined' && typeof(hashObject.name) != 'undefined'){
+                        loadToPage = hashObject;
+                    }
 
-            applocale.init("../locale/system_settings.json", function(){
-                applocale.translate();
-                //Initiation Functions
-                initMainSideMenu();
-                hideToolBar();
+                    if (!loadToPage || loadToPage.group == "" || loadToPage.name == ""){
+                        //Invalid hash object
+                        initSettingGroup("Info");
+                        return;
+                    }
 
-                if (loadToPage == undefined){
-                    initSettingGroup("Info");
-                }else{
                     initSettingGroup(loadToPage.group, function(settingList){
                         let reversedList = JSON.parse(JSON.stringify(settingList)).reverse();
                         for (var i = 0; i < settingList.length; i++){
                             var settingTab = settingList[i];
+                            console.log(settingTab.Name, loadToPage.name, settingTab.Name == loadToPage.name, i);
                             if (settingTab.Name == loadToPage.name){
                                 //This is the tab we are looking for
-                                initSettingModules(i - 1);
+                                initSettingModules(settingList.length - i-1);
                             }
                         }
-                           
+                            
                     });
+
                 }
+                 pageStateRestored = true;
+            }
+
+            applocale.init("../locale/system_settings.json", function(){
+                applocale.translate();
+                //Initiation Functions
+                initMainSideMenu(function(){
+                    //Menu is now loaded
+                    hideToolBar();
+                     if (!pageStateRestored){
+                        restorePageFromHash();
+                    }else{
+                        initSettingGroup("Info");
+                    }
+                });
             });
  
             
-            function initMainSideMenu(){
+            function initMainSideMenu(callback){
                 $.get("../../system/setting/list",function(data){
                     for (var i =0; i < data.length; i++){
                         var settingGroupName = data[i].Name;
@@ -131,6 +149,11 @@
                         $("#mainSideMenu").append(`<a class="item" group="${groupUUID}" title="${toolTip}" style="padding:4px;" onclick="menuClicked(this);"><img class="ui middle aligned mini image" src="${iconPath}" style="padding: 2px;"></img> ${settingGroupName}</a>`);
                     }
                     applocale.translate();
+                    
+                    //Notify that menu is loaded
+                    if (callback){
+                        callback();
+                    }
                 });
             }
 
@@ -151,7 +174,12 @@
 
               function menuClicked(object){
                 var group=$(object).attr("group");
-                initSettingGroup(group);
+                initSettingGroup(group, function(settingList){
+                    //After loading group, update hash with first tab
+                    if (settingList.length > 0){
+                        updateWindowHash(settingList[0].Group, settingList[0].Name);
+                    }
+                });
                 hideToolBar();
               }
 
@@ -173,6 +201,9 @@
               }
 
               function initSettingModules(index){
+                if (index < 0){
+                    index = 0;
+                }
                 var targetObject = $(".settingTab")[index];
                 $(".settingTab.active").removeClass("active");
                 if (targetObject !== undefined){
@@ -199,6 +230,10 @@
                     //Load this object into the tab
                     var settingModuleInfo = JSON.parse(decodeURIComponent($(targetObject).attr("moduleInfo")));
                     var settingStartDir = settingModuleInfo.StartDir;
+                    
+                    //Update window hash with current tab
+                    updateWindowHash(settingModuleInfo.Group, settingModuleInfo.Name);
+                    
                     $("#settingContentLoader").html("");
                     $("#settingContentLoader").load("../../" + settingStartDir, function(){
                         injectIMEToLoadedConetentFrame();
@@ -206,6 +241,21 @@
                 }
               }
 
+              function updateWindowHash(groupName, moduleName){
+                  //Update window hash to preserve tab state on refresh
+                  //Skip if in ao_window mode
+                  if (ao_module_windowID !== false){
+                      //Running in floatWindow mode, do not update hash
+                      return;
+                  }
+                  
+                  var hashObject = {
+                      group: groupName,
+                      name: moduleName
+                  };
+                  window.location.hash = encodeURIComponent(JSON.stringify(hashObject));
+              }
+
               function injectIMEToLoadedConetentFrame(){
                     //Inject IME listener into the loaded content window
                     var inputFields = document.getElementById("settingContentLoader").querySelectorAll("input,textarea");

src/web/SystemAO/www/config.html

@@ -12,6 +12,7 @@
         <script src="../../../script/jquery.min.js"></script>
         <!-- <script src="../../../script/ao_module.js"></script> -->
         <script src="../../../script/semantic/semantic.min.js"></script>
+        <script type="text/javascript" src="../../../script/applocale.js"></script>
         <title>Personal Homepage</title>
         <style>
             body{
@@ -26,43 +27,50 @@
                 <h3 class="ui header">
                     <i class="home icon"></i>
                     <div class="content">
-                        Personal Home Page
-                        <div class="sub header">Create your own home page on ArozOS</div>
+                        <span locale="header/title">Personal Home Page</span>
+                        <div class="sub header" locale="header/subtitle">Create your own home page on ArozOS</div>
                     </div>
                 </h3>
             </div>
             <div class="ui divider"></div>
             <div class="ui message">
-                <div class="header">
+                <div class="header" locale="info/header">
                     What is Personal Home Page?
                 </div>
                 <ul class="list">
-                    <li>You can host a static website using ArozOS</li>
-                    <li>All website source are accessiable by your File Manager located inside your user file system</li>
-                    <li>Everyone can access your home page using <a id="homepageLink" target="_blank"><span class="protocol">http:</span>//<span class="hostname"></span><span class="port"></span>/www/<span class="username">{your_username}</span>/</a></li>
+                    <li locale="info/point1">You can host a static website using ArozOS</li>
+                    <li locale="info/point2">All website source are accessiable by your File Manager located inside your user file system</li>
+                    <li><span locale="info/point3">Everyone can access your home page using</span> <a id="homepageLink" target="_blank"><span class="protocol">http:</span>//<span class="hostname"></span><span class="port"></span>/www/<span class="username">{your_username}</span>/</a></li>
                 </ul>
             </div>
             <div class="ui container">
-                <h4>Toggle Personal Home Page</h4>
+                <h4 locale="toggle/title">Toggle Personal Home Page</h4>
                 <div class="ui toggle checkbox">
                     <input type="checkbox" id="enablehp" onchange="updateHomepageStatus(this.checked);">
-                    <label>Enable personal home page</label>
+                    <label locale="toggle/label">Enable personal home page</label>
                 </div>
-                <div id="updateSuceed" style="display:none;" class="ui green inverted segment"><i class="checkmark icon"></i> Home Page Status Updated</div>
+                <div id="updateSuceed" style="display:none;" class="ui green inverted segment"><i class="checkmark icon"></i> <span locale="toggle/success">Home Page Status Updated</span></div>
                 <br>
-                <h4>Select web root folder location</h4>
+                <h4 locale="webroot/title">Select web root folder location</h4>
                 <div class="ui action fluid input">
-                    <input id="webroot" type="text" placeholder="Select Location" readonly="true">
-                    <button class="ui black button" onclick="selectWebRootLocation();"><i class="folder open icon"></i> Open</button>
+                    <input id="webroot" type="text" placeholder="Select Location" readonly="true" locale-placeholder="webroot/placeholder">
+                    <button class="ui black button" onclick="selectWebRootLocation();"><i class="folder open icon"></i> <span locale="webroot/button">Open</span></button>
                 </div>
-                <div class="ui yellow message"><i class="warning icon"></i> All files located inside the web root will be accessiable by everyone on the internet.</div>
-                <div id="webrootSetSuceed" style="display:none;" class="ui green inverted segment"><i class="checkmark icon"></i> Web Root Location Updated</div>
+                <div class="ui yellow message"><i class="warning icon"></i> <span locale="webroot/warning">All files located inside the web root will be accessiable by everyone on the internet.</span></div>
+                <div id="webrootSetSuceed" style="display:none;" class="ui green inverted segment"><i class="checkmark icon"></i> <span locale="webroot/success">Web Root Location Updated</span></div>
                 <br>
-                <small>*All changes will be saved automatically upon updates.</small>
+                <small locale="footer/note">*All changes will be saved automatically upon updates.</small>
             </div>
             <br><br>
         </div>
         <script>
+            //Initialize applocale for translations
+            if (applocale) {
+                applocale.init("../locale/personal_homepage.json", function(){
+                    applocale.translate();
+                });
+            }
+
             var ignoreChange = true;
 
             //Update the user information