TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
							<!DOCTYPE html>
<html>
    <head>
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
        <script src="../../script/jquery.min.js"></script>
        <script src="../../script/semantic/semantic.min.js"></script>
        <script src="../../script/ao_module.js"></script>
        <style>
            .hidden{
                display:none;
            }

            .backgroundpreview{
                border: 1px solid #898989;
            }
        </style>
    </head>
    <body>
        <div class="ui tabular menu" style="position:fixed; top:0px; left:0px; width: 100%;">
            <div class="active item" data-tab="wallpaper">Wallpaper</div>
            <div class="item" data-tab="theme">Theme</div>
            <div class="item" data-tab="advance">Advance</div>
        </div>
        <div style="position:fixed; top: 42px; left:0px; width: 100%; height: calc(100% - 42px); overflow-y:auto;">
            <div class="ui active tab" data-tab="wallpaper">
                <!-- Wallpaper Functions -->
                <br>
                <div class="ui container">
                    <h3 class="ui header">
                        <i class="image outline icon"></i>
                        <div class="content">
                            Wallpapers
                            <div class="sub header">Manage your desktop preferences</div>
                        </div>
                    </h3>
                    <div class="ui divider"></div>

                    <div class="ui grid">
                        <div class="ten wide column">
                            <img id="mainBackground" class="ui fluid image backgroundpreview" src="">
                        </div>
                        <div class="six wide column">
                            
                        </div>
                    </div>
                
                    <div class="ui divider"></div>
                    <div id="backgroundPreviewList" class="ui grid">
                        <div class="four wide column">
                            <img class="ui fluid image backgroundpreview" src="">
                        </div>
                        <div class="four wide column">
                            <img class="ui fluid image backgroundpreview" src="">
                        </div>
                        <div class="four wide column">
                            <img class="ui fluid image backgroundpreview" src="">
                        </div>
                        <div class="four wide column">
                            <img class="ui fluid image backgroundpreview" src="">
                        </div>
                    </div>

                    <div class="ui divider"></div>
                    <h4 class="ui header">
                        Background Wallpaper
                        <div class="sub header">Set your desktop background wallpaper theme.</div>
                    </h4>
                    <select id="wallpaperlist" class="ui fluid dropdown" onchange="handleBackgroundSelectionChange(this.value);">
                        <option value="">Wallpaper Packs</option>
                    </select>
                    <br>
                    <button class="ui small green right floated button" onclick="applyWallpaper();"><i class="checkmark icon"></i> Apply Wallpaper</button>
                    <br><br><br>
                    <div class="ui green segment" style="display:none" id="wallpaperChangeConfirm">
                        <h4 class="ui header">
                            <i class="checkmark green icon"></i>
                            <div class="content">
                            Wallpaper Updated
                            <div class="sub header">You should be seeing your desktop wallpaper change in a moment.</div>
                            </div>
                        </h4>
                    </div>

                    <!-- Wallpaper change interval-->
                    <div class="ui divider"></div>
                    <h4 class="ui header">
                        Wallpaper Interval
                        <div class="sub header">Set the interval between the wallpaper image cycles.</div>
                    </h4>
                    <select id="changeInterval" class="ui fluid dropdown" onchange="handleIntervalChange(this.value);">
                        <option value="10">10 seconds</option>
                        <option value="30">30 seconds</option>
                        <option value="60">60 seconds</option>
                        <option value="180">3 minutes</option>
                        <option value="300">5 minutes</option>
                        <option value="600">10 minutes</option>
                        <option value="1800">30 minutes</option>
                        <option value="3600">1 hour</option>
                    </select>

                    <div class="ui green segment" style="display:none" id="interfaceChangeConfirm">
                        <h4 class="ui header">
                            <i class="checkmark green icon"></i>
                            <div class="content">
                            Wallpaper Interval Updated
                            <div class="sub header">This setting will only apply to this browser</div>
                            </div>
                        </h4>
                    </div>
                </div>
                <br><br><br>
            </div>
            <div class="ui tab" data-tab="theme">
                <!-- Theme Color Related !-->
                <br>
                <div class="ui container">
                    <h3 class="ui header">
                        <i class="paint brush icon"></i>
                        <div class="content">
                            Theme Color
                            <div class="sub header">Change the system theme color settings</div>
                        </div>
                    </h3>

                    <div class="ui divider"></div>
                    <p>Work In Progress</p>
                </div>
            </div>
            <div class="ui tab" data-tab="advance">
                <!-- Advance User Customization !-->
                <br>
                <div class="ui container">
                    <h3 class="ui header">
                        <i class="setting icon"></i>
                        <div class="content">
                            Advance Customization
                            <div class="sub header">Manage your desktop preferences</div>
                        </div>
                    </h3>
                    <div class="ui divider"></div>
                    <h4 class="ui header">
                        User Defined Wallpaper
                        <div class="sub header">Advanced user customization function for desktop interface</div>
                    </h4>
                    <h3 id="userSelectedFolderPath">Disabled</h3>
                    <p>If you have set a folder for loading desktop wallpapers, the image files from that folder will be used instead of the system build in wallpapers.</p>
                    <button class="ui small right floated button" onclick="clearUserSelectedFolder();"><i class="remove icon"></i> Clear Selection</button>
                    <button class="ui small black right floated button" onclick="selectUserFolder();"><i class="folder open icon"></i> Select Folder</button>
        
                    <br><br>
                </div>
                
            </div>
        </div>
        <br><br>
        <script>
            var desktopThemeList = [];
            var isStartingUp = true;

            $(".dropdown").dropdown();
            $('.tabular.menu .item').tab();


            //Startup process
            initCurrentBackgroundPreview();
            initDefaultBackgroundChangeValue();
            initUserDefinedWallpaperFolder();

            function initUserDefinedWallpaperFolder(){
                var userDefinedFolder = localStorage.getItem("ao/desktop/backgroundoverwrite");
                if (userDefinedFolder == null){
                    $("#userSelectedFolderPath").text("Disabled");
                }else{
                    $("#userSelectedFolderPath").text(userDefinedFolder);
                }
            }
            

            function initDefaultBackgroundChangeValue(){
                if (localStorage.getItem("ao/desktop/backgroundInterval") == null){
                    //No background interval set.
                    $("#changeInterval").dropdown("set selected", "30");
                }else{
                    //There is already a setting for background interval change. Use that instead
                    var changeInterval = localStorage.getItem("ao/desktop/backgroundInterval");
                    $("#changeInterval").dropdown("set selected", changeInterval);
                }
            }

            //Change the interval to the given 
            function handleIntervalChange(newInterval){
                //Show change finsihed
                if (isStartingUp){
                    //Ignore startup change
                    return;
                }

                //Save interval to localStorage
                localStorage.setItem("ao/desktop/backgroundInterval", newInterval)
                $("#interfaceChangeConfirm").slideDown('fast').delay(3000).slideUp('fast');

                //Restart desktop background changer interval
                if (ao_module_virtualDesktop){
                    console.log("Restarting desktop background changer interval")
                    parent.clearInterval(parent.backgroundIntervalCounter);
                    parent.initBackgroundSwitchingAnimation();
                }
                
            }

            function selectUserFolder(){
                ao_module_openFileSelector(folderSelected, undefined,"folder",false);
            }

            function folderSelected(filedata){
                for (var i=0; i < filedata.length; i++){
                    var filename = filedata[i].filename;
                    var filepath = filedata[i].filepath;

                    //Save the overwrite folder path
                    localStorage.setItem("ao/desktop/backgroundoverwrite",filepath);
                    $("#userSelectedFolderPath").text(filepath);
                }
            }

            function clearUserSelectedFolder(){
                //Clear user selected folder
                localStorage.removeItem("ao/desktop/backgroundoverwrite");
                initUserDefinedWallpaperFolder();
            }

            function initCurrentBackgroundPreview(){
                //Get the list of theme in the system
                $.get("../../system/desktop/theme", function(data) {
                    desktopThemeList = data;
                    //Generate the wallpaper list
                    $("#wallpaperlist").html("");
                    var deftaultData = "";
                    desktopThemeList.forEach(themepack => {
                        var encodedData = encodeURIComponent(JSON.stringify(themepack));
                        var themeName = themepack.Theme.charAt(0).toUpperCase() + themepack.Theme.slice(1);
                        $("#wallpaperlist").append(`<option value="${encodedData}">${themeName}</option>`);
                        if (themepack.Theme == "default"){
                            deftaultData = encodedData;
                        }
                    });

                    //Get the one the user is currently using
                    $.get("../../system/desktop/theme?get=true", function(data) {
                        //Get the user theme settings
                        $(".backgroundpreview").attr('src','../../img/desktop/bg/nobg.jpg');
                        
                        //Check if the theme exists
                        var themeExists = false;
                        var targetThemeObject;
                        desktopThemeList.forEach(theme => {
                            if (theme.Theme == data){
                                //Theme exists
                                themeExists = true;
                                targetThemeObject = theme;
                            }
                        });

                        if (themeExists == false){
                            //This theme not exists. Do not load preview
                            $("#wallpaperlist").dropdown("set selected","Default");
                        }else{
                            loadBackgroundPreview(targetThemeObject);
                            var themeName = data.charAt(0).toUpperCase() + data.slice(1)
                            $("#wallpaperlist").dropdown("set selected",themeName);
                        }
                        
                        //End of startup process
                        isStartingUp = false;
                    });
                });
            }

            function loadBackgroundPreview(targetThemeObject){
                $("#backgroundPreviewList").html("");
                var imageList = targetThemeObject.Bglist;
                $("#mainBackground").attr("src","../../img/desktop/bg/" + targetThemeObject.Theme + "/" + imageList[0]);
                
                for (var i = 1; i < imageList.length; i++){
                    $("#backgroundPreviewList").append(`<div class="four wide column">
                        <img class="ui fluid image backgroundpreview" src="${"../../img/desktop/bg/" + targetThemeObject.Theme + "/" + imageList[i]}">
                    </div>`);
                }
            }

            function handleBackgroundSelectionChange(value){
                var targetThemeObject = JSON.parse(decodeURIComponent(value));
                loadBackgroundPreview(targetThemeObject);
            }

            function applyWallpaper(){
                var targetWallpaper =JSON.parse(decodeURIComponent($("#wallpaperlist").val()));
                $.get("../../system/desktop/theme?set=" + targetWallpaper.Theme, function(data) {
                    if (ao_module_virtualDesktop == true){
                        parent.changeDesktopTheme(targetWallpaper.Theme);
                    }
                    if (data.includes("Error")) {
                        console.log(data);
                        return;
                    }

                    //Reload the preview
                    initCurrentBackgroundPreview();

                    //Show change finsihed
                    $("#wallpaperChangeConfirm").slideDown('fast').delay(3000).slideUp('fast');
                });
            }
        </script>
    </body>
</html>