TC
/
arozos-mirror
réplica de https://github.com/tobychui/arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
							<!DOCTYPE html>
<html>
    <head>
        <title>System Setting</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.min.css">
        <script type="text/javascript" src="../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
        <script type="text/javascript" src="../../script/ao_module.js"></script>
        <script type="text/javascript" src="../../script/applocale.js"></script>
        <style>
            html{
                overflow:hidden;
                height:100%;
            }
            body{
                background-color:#fcfcfc;
                overflow:hidden !important;
                height:100%;
            }
            #mainSideMenuDimmer{
                width:100%;
                height:100%;
                position:fixed;
                top:0px;
                left:0px;
                background-color: rgba(26,26,26,0.3);
                z-index:99;
            }
            #mainSideMenu{
                z-index:100;
            }
            #settingContentLoader{
                overflow-x: hidden;
                overflow-y:auto;
                height: calc(100% - 60px);
            }
            #mainFunctionTabMenu{
                background-color: #f8f8f8;
                margin-top: 0;
                padding-top: 1em;
                border-radius: 0 0 0 0 !important;
            }

            #msgbox{
                position: fixed;
                bottom: 0.2em;
                right: 2em;
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="mainSideMenu" class="ui left fixed vertical menu">
            <div class="item">
                <img class="ui image" src="img/banner.png">
            </div>
            
        </div>
        <div id="mainSideMenuDimmer" onclick="hideToolBar();"></div>
        <div id="mainFunctionTabMenu" class="ui top attached tabular menu" style="overflow-x:auto;overflow-y:hidden;">
            <a id="toolbarBtn" class="item" onclick="showToolBar();">
                <i class="content icon"></i>
            </a>
        
            <div class="right menu">
                <!--
                <div class="item">
                    <div class="ui transparent icon input">
                    <input id="searchInput" type="text" placeholder="Search Settings..." onkeydown="if (event.which == 13){ search(); }">
                        <i class="search link icon" onclick="search();"></i>
                    </div>
                </div>
                -->
            </div>
          </div>
          <div id="settingContentLoader" class="ui bottom attached segment">

          </div>
          <div id="msgbox" class="ui compact small message">
            Hello World
          </div>
          </div>
         
          <script>
              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

            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;
                    }

                    if (!loadToPage || loadToPage.group == "" || loadToPage.name == ""){
                        //Invalid hash object
                        initSettingGroup("Info");
                        return;
                    }

                    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(settingList.length - i-1);
                            }
                        }
                            
                    });

                }else{
                    //No hash, load default Info page
                    initSettingGroup("Info");
                }
                 pageStateRestored = true;
            }

            applocale.init("../locale/system_settings.json", function(){
                applocale.translate();
                //Initiation Functions
                initMainSideMenu(function(){
                    //Menu is now loaded
                    hideToolBar();
                    if (!pageStateRestored){
                        restorePageFromHash();
                        return;
                    }

                    initSettingGroup("Info");
                });
            });
 
            
            function initMainSideMenu(callback){
                $.get("../../system/setting/list",function(data){
                    for (var i =0; i < data.length; i++){
                        var settingGroupName = data[i].Name;
                        var groupUUID = data[i].Group;
                        var iconPath = "../../" + data[i].IconPath;
                        var toolTip = data[i].Desc;
                        settingGroupName = applocale.getString("menu/group/" + settingGroupName, settingGroupName);
                        $("#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();
                    }
                });
            }

            function initSettingGroup(group, callback=undefined){
                $.get("../../system/setting/list?listGroup=" + group,function(data){
                    if (data.error !== undefined){
                        console.log(data.error);
                    }else{
                        currentSettingModuleList = data;
                        initSettingModuleTabs(group);
                        initSettingModules(0);
                        if (callback != undefined){
                            callback(data);
                        }
                    }
                });
            }

              function menuClicked(object){
                var group=$(object).attr("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();
              }

              //Initiate the setting modules tabs
              function initSettingModuleTabs(groupName){
                $(".settingTab").remove();
                var moduleListInReverse = currentSettingModuleList.reverse();
                for (var i =0; i < moduleListInReverse.length; i ++){
                    var thisModuleInfo = moduleListInReverse[i];
                    var stringifyModuleInfo = encodeURIComponent(JSON.stringify(thisModuleInfo));
                    let localeGroupKey = "tab/" + groupName.toLowerCase() + "/" + thisModuleInfo.Name;
                    let displayTabName = applocale.getString(localeGroupKey, thisModuleInfo.Name)
                    console.log(thisModuleInfo.Desc);
                    $("#toolbarBtn").after(`<a class="item settingTab" moduleInfo="${stringifyModuleInfo}" title="${thisModuleInfo.Desc}" onclick="loadSettingModuleFromTab(this);">${displayTabName}</a>`);
                }

                applocale.translate();
            
              }

              function initSettingModules(index){
                if (index < 0){
                    index = 0;
                }
                var targetObject = $(".settingTab")[index];
                $(".settingTab.active").removeClass("active");
                if (targetObject !== undefined){
                    //Select this object
                    $(targetObject).addClass("active");

                    //Load this object into the tab
                    var settingModuleInfo = JSON.parse(decodeURIComponent($(targetObject).attr("moduleInfo")));
                    var settingStartDir = settingModuleInfo.StartDir;
                    $("#settingContentLoader").html("");
                    $("#settingContentLoader").load("../../" + settingStartDir, function(){
                        injectIMEToLoadedConetentFrame();
                    });
                }
              }

              function loadSettingModuleFromTab(object){
                targetObject = $(object);
                $(".settingTab.active").removeClass("active");
                if (targetObject !== undefined){
                    //Select this object
                    $(targetObject).addClass("active");

                    //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();
                    });
                }
              }

              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");
                    for (var i = 0; i < inputFields.length; i++){
                        if ($(inputFields[i]).attr("type") != undefined){
                            var thisType = $(inputFields[i]).attr("type");
                            if (thisType == "text" || thisType =="search" || thisType =="url"){
                                //Supported types of input
                                if (ao_module_virtualDesktop){
                                    ao_module_bindCustomIMEEvents(inputFields[i]);
                                }
                                
                                console.log(inputFields[i]);
                            }else{
                                //Not supported type of inputs
                                
                            }
                        }else{
                            //text area
                            if (ao_module_virtualDesktop){
                                ao_module_bindCustomIMEEvents(inputFields[i]);
                            }
                        }
                    }
              }


              function hideToolBar(){
                  $("#mainSideMenuDimmer").fadeOut('fast');
                  $("#mainSideMenu").animate({left: -1 * $("#mainSideMenu").width()},300);
              }

              function showToolBar(){
                $("#mainSideMenuDimmer").fadeIn('fast');
                $("#mainSideMenu").animate({left: "0px"},300);
              }

              function search(){
                var keyword = $("#searchInput").val();
                alert(keyword);
              }

              function msgbox(message, succ=true, delay=3000){
                $("#msgbox").html(`<i class="ui ${succ?"green circle check":"red circle times"} icon"></i> ${message}`);
                $("#msgbox").stop().finish().fadeIn("fast").delay(delay).fadeOut("fast");
              }

          </script>
    </body>
</html>