TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
							<html>
    <head>
        <title locale="title">File Selector</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
        <link rel="stylesheet" href="../../script/tocas/tocas.css">
        <link rel="stylesheet" href="../../script/ao.css">
        <script type="text/javascript" src="../../script/tocas/tocas.js"></script>
        <script type="text/javascript" src="../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../script/ao_module.js"></script>
        <script type="text/javascript" src="../../script/applocale.js"></script>
        <style>
            body{
                background-color:white;
            }
            .navi{
                padding:8px;
                background-color:#fcfcfc;
                border-bottom:2px solid #34b7eb;
                position:fixed;
                left:0px;
                top:0px;
                width:100%;
                z-index:99;
            }
            .pusher{
                margin-top:46px;
                margin-left:200px;
                width: calc(100% - 200px);
            }

            .pusher .fileListWrapper{
                padding-left:20px;
                padding-right:20px;
            }
            .navi .button{
                box-shadow: 0 1px 1px 0px rgb(190, 190, 190) !important;
            }
            .list .item{
                cursor:pointer;
            }
            .list .item:hover{
                color:#c7c7c7 !important;
            }
            .extrapadding{
                padding-left:6px !important;
                padding-right:6px !important;
            }
            .fileObject{
                overflow-wrap: break-word !important;
                display: block !important;
                padding:12px !important;
                font-size:98%;
            }
            .fileObject .fileInfo{
                display:inline-block !important;
                word-break: break-all;
                text-overflow: ellipsis !important;
                overflow: hidden;
                color:black;
                user-select: none;
            }
            .fileObject.selected{
                background-color:#d2f2f7 !important;

            }

            .fileObject.item:hover{
                background-color:#f2f2f2;
            }
        </style>
    </head>
    <body>
        <div class="navi">
            <button id="sidebarToggleBtn" class="ts icon tiny button" onclick="ts('.sidebar').sidebar('toggle');"><i class="content icon"></i></button>
            <button title="Back" class="ts icon tiny button" onclick="backDir();"><i class="arrow left icon"></i></button>
            <button title="Parent" class="ts icon tiny button" onclick="parentDir();"><i class="arrow up icon"></i></button>
            <button title="Refresh" class="ts icon tiny button" onclick="refresh();"><i class="refresh icon"></i></button>
            <button title="New Folder" class="ts icon tiny button" onclick="newFolder();"><i class="folder icon"></i></button>
            <div  class="ts action fluid tiny input" style="width: calc(100% - 180px); float: right;">
                <input id="addressbar" type="text" placeholder="" onchange="updatePath();">
                <button class="ts positive icon button" onclick="confirmSelection();"><i class="checkmark icon"></i></button>
            </div>
            
            <div id="newfilenameInput" style="width:100%; margin-top:12px;" align="right">
                <div  class="ts fluid tiny input" style="width: calc(100% - 180px); float: right;">
                    <input id="filename" type="text" placeholder="New Filename">
                </div>
            </div>

            <div id="newFolderInput" style="width:100%; margin-top:4px; display:none;" align="right">
                <div  class="ts fluid action tiny input" style="width: calc(100% - 180px); float: right;">
                    <input id="foldername" type="text" placeholder="New Folder" value="">
                    <button class="ts icon button" onclick="createFolder()" title="Create Folder"><i class="add icon"></i></button>
                </div>
            </div>
        </div>
        <div id="sidebar" class="ts left static visible overlapped sidebar" style="background-color:#f5f5f5 !important;z-index:90 !important; width:200px;">
            <div id="sidebarPadder" style="height:46px;"></div>
            <details class="ts accordion" open>
                <summary>
                    <i class="dropdown icon"></i> <span locale="roots/user">User</span>
                </summary>
                <div class="content" >
                    <div class="ts list" id="userlist">
                    </div>
                </div>
            </details>
            <details class="ts accordion" open>
                <summary>
                    <i class="dropdown icon"></i> <span locale="roots/storage">Storage</span>
                </summary>
                <div class="content">
                    <div class="ts list" id="storagelist">
                    </div>
                </div>
            </details>
        </div>

        <div class="pusher">
            <br>
            <div class="fileListWrapper" style="min-height:300px; width:100%;">
                <div id="folderList" class="ts segmented basic fluid list whiteTheme">
                    <div class="fileObject">
                        <span class="fileInfo"><i class="loading spinner icon" style="margin-right:12px;"></i>  <span locale="message/loading">Loading</span></span>
                    </div>
                </div>
                <div id="fileList" class="ts segmented fluid list whiteTheme">
                  
                </div>
                
            </div>
            <br><br>
        </div>
        <div id="waitloader" class="ts active dimmer" style="display:none; z-index:999;">
            <div id="waitloadertext" class="ts indeterminate text loader" locale="message/waitingResp">Waiting Response</div>
        </div>
        <script>
            var multiSelect = false;
            var type = "file";
            var currentDir = "user:/";
            var currentFileList = [];
            var pathHistory = [];
            var ctrlDown = false;
            var shiftDown = false;
            var lastClickedItemID = 0;
            var listenerUUID = "";
            var fileOptions = {};

            if (applocale){
                //Applocale found. Do localization
                applocale.init("../locale/file_selector.json", function(){
                    applocale.translate();
                    initRoots();
                });
            }else{
                //Applocale not found. Is this a trim down version of ArozOS?
                applocale = {
                    getString: function(key, original){
                        return original;
                    }
                }
                initRoots();
            }

            initSelectorObject();
            updateWindowResize();

            function initSelectorObject(){
                var initInfo = loadSelectorInfoFromHash();
                //Load the initiation directory
                listDir(initInfo.root);
                //init global var
                type = initInfo.type;
                multiSelect = initInfo.allowMultiple;
                listenerUUID = initInfo.listenerUUID;
                if (initInfo.options != undefined){
                    fileOptions = JSON.parse(JSON.stringify(initInfo.options));
                }
                
                
                //Load options and parse the UI
                if (type == "new"){
                    //Resize the top bar
                    $("#sidebarPadder").css("height", "90px");
                    $(".fileListWrapper").css("padding-top", "50px");
                    if (typeof(fileOptions.defaultName) != "undefined"){
                        $("#filename").val(fileOptions.defaultName);
                    }else{
                        $("#filename").val("newfile.txt");
                    }

                }else{
                    $("#newfilenameInput").hide();
                }

               
            }

            function cancelSelection(){
                localStorage.setItem(listenerUUID, JSON.stringify("&&selection_canceled&&"));
            }

            function confirmSelection(){
                var files = [];
                $(".selected.fileObject").each(function(){
                    var filename = decodeURIComponent($(this).attr('filename'));
                    var filepath = decodeURIComponent($(this).attr('filepath'));
                    files.push({
                        filename: filename,
                        filepath: filepath
                    });
                });

                //Check if currentdir end with "/". If not, append it
                if(currentDir.substr(currentDir.length - 1, 1) != "/"){
                    currentDir = currentDir + "/";
                }

                //Check for special cases
                if (files.length == 0 && type == "folder"){
                    //Select the current path as target instead
                   var currentPathname = currentDir.split("/");
                    currentPathname.pop();
                    currentPathname = currentPathname.pop();
                    if (currentPathname == ""){
                        currentPathname = currentDir;
                    }

                    files.push({
                        filename: currentPathname,
                        filepath: currentDir
                    });
                }else if (files.length == 0 && type == "new"){
                    //Push this new file into the return structure
                    var newFilename = $("#filename").val();
                    files.push({
                        filename: newFilename,
                        filepath: currentDir + newFilename
                    });
                }

                if (ao_module_virtualDesktop){
                    if (!ao_module_parentCallback(files)){
                        //Parent callback not exists
                        alert("Selection Failed. Is parent window alive?")
                    }else{
                        parent.closeFwProcess(ao_module_windowID);
                    }
                }else{
                    if (listenerUUID == ""){
                        alert("Invalid listener UUID. Please re-open your file selector.")
                        return;
                    }
                    var selectedFilesInJSON = JSON.stringify(files);
                    localStorage.setItem(listenerUUID, selectedFilesInJSON);
                    $("#waitloader").show();
                    $(".pusher").css("overflow","hidden");
                    setTimeout(function(){
                        $("#waitloadertext").html("<i class='remove icon'></i> System is not responding. <br>Please close this window and retry.");
                    },10000)
                }
            }   

            //Handle on window close function, cancel current selection
            window.onbeforeunload = function(){
                cancelSelection();
            }

            //Overwrite the ao_module close function
            function ao_module_close(){
                if (!ao_module_virtualDesktop){
                    return;
                }
                if (!ao_module_parentCallback(files)){
                        alert("Selection Failed. Is parent window alive?")
                }else{
                    parent.closeFwProcess(ao_module_windowID);
                }
            }

            function updatePath(){
                var newDir = $("#addressbar").val();
                listDir(newDir);
            }

            function refresh(){
                $("#fileList").html("");
                $("#folderList").html("");
                listDir(currentDir);
            }

            function newFolder(){
                $("#newFolderInput").toggle();
                if($("#newFolderInput").is(":visible")){
                    $("#sidebarPadder").css("height", "90px");
                }else{
                    $("#sidebarPadder").css("height", "46px");
                }
                updateFileListTopLocation();
            }

            function hideFolderNameInput(){
                $("#newFolderInput").hide();
                $("#sidebarPadder").css("height", "46px");
                $(".fileListWrapper").css("padding-top", "0px");
            }

            function createFolder(){
                var folderName = $("#foldername").val();
                if (folderName == ""){
                    folderName = "New Folder"
                    $("#foldername").val("New Folder");
                }
                folderName = folderName.replace(/[<>:"/\\|?*]/g, "_");
                
                //Check if folder exists
                var nameAlreadyExists = false;
                currentFileList.forEach(fileObject => {
                    if (fileObject.IsDir && fileObject.Filename == folderName){
                        nameAlreadyExists = true;   
                    }
                });

                if (nameAlreadyExists){
                    alert("Folder already exists")
                    return
                }

                //Create the new folder request
                requestCSRFToken(function(token){
                    $.ajax({
                        url: "../../system/file_system/newItem",
                        data: {type: "folder", src: currentDir, filename: folderName, csrft: token},
                        success: function(data){
                            if (data.error !== undefined){
                                alert(data.error);
                            }else{
                                refresh()
                            }
                            hideFolderNameInput();
                        }
                    });
                });
            }

            function loadSelectorInfoFromHash(){
                if (window.location.hash.length == 0){
                    return {
                        root: "user:/",
                        type: "file",
                        allowMultiple: false
                    }
                }else{
                    try{
                        var selectInfo = JSON.parse(decodeURIComponent(window.location.hash.substring(1)));
                        return selectInfo;
                    }catch{
                        //Error parsing the input. Use default settings
                        return {
                            root: "user:/",
                            type: "file",
                            allowMultiple: false
                        }
                    }
                    
                }
            }

            function listDir(dir){
                currentDir = dir;
                pathHistory.push(currentDir);
                $("#addressbar").val(currentDir);
                ao_module_setWindowTitle(`Open`);
                $.get("../../system/file_system/listDir?dir=" + encodeURIComponent(dir),function(data){
                    $("#folderList").html("");
                    $("#fileList").html("");
                    if (data === null){
                        $("#folderList").hide();
                        $("#fileList").hide();
                        return;
                    }else{
                        $("#folderList").show();
                        $("#fileList").show();
                    }
                    if (data.error !== undefined){
                        //Load the index instead
                        listDir("user:/");
                    }else{
                        currentFileList = data;
                        var folders = [];
                        var files = [];
                        for (var i =0; i < data.length; i++){
                            if (data[i].IsDir == true){
                                folders.push(data[i]);
                            }else{
                                if (fileOptions.filter != undefined){
                                    var fileExt = data[i].Filename.split(".").pop();
                                    for (var j = 0; j < fileOptions.filter.length; j++){
                                        if (fileOptions.filter[j] == fileExt){
                                            files.push(data[i]);
                                            break;
                                        }
                                    }
                                }else{
                                    files.push(data[i]);
                                }
                                
                            }
                        }  

                        //Append folder first then files
                        var count = 0;
                        for (var i =0; i < folders.length; i++){
                            var filename = folders[i].Filename;
                            var filepath = folders[i].Filepath;
                            var ext = filename.split(".").pop();
                            var icon = ao_module_utils.getIconFromExt(ext);
                            var isDir = folders[i].IsDir;
                            if (isDir == true){
                                icon = "folder";
                            }
                            var fileSize = folders[i].Displaysize;
                            $("#folderList").append(`<div class="fileObject item" fid="${count}" ondblclick="openFolder(event,this);" onclick="selectThis(this,event);" filepath="${encodeURIComponent(filepath)}" filename="${encodeURIComponent(filename)}" isDir="${isDir}">
                                <span class="fileInfo"><i class="${icon} icon" style="margin-right:4px;"></i> ${filename}</span>
                            </div>`);
                            count++;
                        }
                        if (folders.length == 0){
                            $("#folderList").hide();
                        }

                        for (var i =0; i < files.length; i++){
                            var filename = files[i].Filename;
                            var filepath = files[i].Filepath;
                            var ext = filename.split(".").pop();
                            var icon = ao_module_utils.getIconFromExt(ext);
                            var isDir = files[i].IsDir;
                            if (isDir == true){
                                icon = "folder";
                            }
                            var fileSize = files[i].Displaysize;
                            $("#fileList").append(`<div class="fileObject item" fid="${count}"  ondblclick="chooseThisFile(this);"  onclick="selectThis(this,event);" filepath="${encodeURIComponent(filepath)}" filename="${encodeURIComponent(filename)}" isDir="${isDir}">
                                <span class="fileInfo"><i class="${icon} icon" style="margin-right:4px;margin-top: 2px;"></i> ${filename}</span>
                            </div>`);
                            count++;
                        }
                        if (files.length == 0){
                            $("#fileList").hide();
                        }

                        $('.pusher').scrollTop(0);
                    }
                });
            }

            function requestCSRFToken(callback){
                $.ajax({
                    url: "../../system/csrf/new",
                    success: function(token){
                        callback(token);
                    }
                })
            }

            //Open folder
            function openFolder(event, object){
                event.preventDefault();
                var filepath = $(object).attr("filepath");
                filepath = decodeURIComponent(filepath);
                listDir(filepath);
            }

            function selectThis(object,event){
                //event.preventDefault();
                //event.stopImmediatePropagation();
                //Check if this object is in suitable selection type
                if ($(object).attr("IsDir") == "true" && type == "file"){
                    return;
                }else if ($(object).attr("IsDir") == "false" && type == "folder"){
                    return;
                }else if (type == "new" && $(object).attr("IsDir") == "false"){
                    //Use this filename as the newfile name (aka overwrite mode)
                    var newNewFilename = $(object).attr("filename");
                    newNewFilename = decodeURIComponent(newNewFilename);
                    $("#filename").val(newNewFilename);
                    return;
                }else if (type == "new" && $(object).attr("IsDir") == "true"){
                    //Selected a folder in new mode. Ignore it
                    return
                }
                if (multiSelect){
                    if (ctrlDown){
                        //Add this into selection list
                        $(object).addClass("selected");
                    }else if (shiftDown){
                        var start = lastClickedItemID;
                        var end = $(object).attr("fid");
                        if (start > end){
                            start = end;
                            end = lastClickedItemID;
                        }
                        var fileObjects = $(".fileObject");
                        for (var k = start; k <= end; k++){
                            $(fileObjects[k]).addClass("selected");
                        }
                    }else{
                        //Reset and add this into selection list
                        $(".selected").removeClass("selected");
                        $(object).addClass("selected");
                    }
                }else{
                    $(".selected").removeClass("selected");
                    $(object).addClass("selected");
                }

                //Update last selected id
                lastClickedItemID = $(object).attr('fid');

                //Update title
                var objectCount = $(".selected").length;
                var typeName = "object"
                if (type == "file"){
                    typeName = "file";
                }else if (type == "folder"){
                    typeName = "folder";
                }
                var desc = `${typeName} selected`;
                if (objectCount > 1){
                    desc = `${typeName + "s"} selected`;
                }
                ao_module_setWindowTitle(`Open (${objectCount} ${desc})`);
            }

            $(window).on("keydown",function(event){
                if (event.which == 17){
                    ctrlDown = true;
                }else if (event.which == 16){
                    shiftDown = true;
                }
            });

            $(window).on("keyup",function(event){
                if (event.which == 17){
                    ctrlDown = false;
                }else if (event.which == 16){
                    shiftDown = false;
                }
            });

            $(window).on("resize",function(){
                updateWindowResize();
            });

            function updateWindowResize(){
                if (window.innerWidth < 560){
                    //Mobile mode
                    $("#sidebar").attr("class", "ts left overlapped sidebar");
                    $(".pusher").css("margin-left", "0px").css("width","100%");
                    $("#sidebar").css("margin-top", "30px");
                    $("#sidebarToggleBtn").show();

                    $("#addressbar").parent().css({
                        "width": "100%",
                        "margin-top": "4px"
                    });

                    $("#newfilenameInput").find(".input").css({
                        "width": "100%",
                        "margin-top": "4px"
                    });

                    $("#newFolderInput").find(".input").css({
                        "width": "100%",
                        "margin-top": "4px"
                    });


                }else{
                    $("#sidebar").attr("class", "ts left static visible overlapped sidebar");
                    $(".pusher").css("margin-left", "200px").css("width","calc(100% - 200px)");
                    $("#sidebarToggleBtn").hide();
                    $("#sidebar").css("margin-top", "0px");

                    $("#addressbar").parent().css({
                        "width": "calc(100% - 180px)",
                        "margin-top": "0px"
                    });

                    $("#newfilenameInput").find(".input").css({
                        "width": "calc(100% - 180px)",
                        "margin-top": "0px"
                    });

                    $("#newFolderInput").find(".input").css({
                        "width": "calc(100% - 180px)",
                        "margin-top": "8px"
                    });
                }

                updateFileListTopLocation();
            }

            function updateFileListTopLocation(){
                $(".fileListWrapper").css("padding-top", $(".navi").height() - 38 + "px");
            }

            function initAddressBarWidth(){
                $("#addressbar").css("width",window.innerWidth - 220 + "px"); 
            }

            function chooseThisFile(object){
                $(".selected").removeClass('selected');
                $(object).addClass('selected');
                confirmSelection();
            }

            function parentDir(){
                if (currentDir.substring(currentDir.length - 1) == "/"){
                    currentDir = currentDir.substring(0, currentDir.length - 1);
                }
                var tmp = currentDir.split("/");
                tmp.pop();
                var parentPath = tmp.join("/");
                if (parentPath.length == 0){
                    //Do nothing. Already at root dir
                }else{
                    listDir(parentPath);
                }
            }

            function backDir(){
                if (pathHistory.length > 1){
                    pathHistory.pop();
                    var targetPath = pathHistory.pop();
                    listDir(targetPath);
                }
            }

            //Initialize user shortcuts
            function initRoots(){
                $.get("../../system/file_system/listRoots",function(data){
                    $("#storagelist").html("");
                    for (var i =0; i < data.length; i++){
                        $('#storagelist').append(`<div class="item extrapadding" filepath="${data[i]["RootPath"]}" onclick="openShortcut(this);"><i class="disk outline icon" style="margin-right:8px;"></i> ${data[i]["RootName"]} (${data[i]["RootPath"]})</div>`);
                    }
                });
                $.get("../../system/file_system/listRoots?user=true",function(data){
                    $("#userlist").html("");
                    for (var i =0; i < data.length; i++){
                        if (data[i].IsDir == true){
                            if (data[i]["Filename"].substring(0,1) == "."){
                                //Do not show hidden files
                                continue;
                            }

                            //Get the icon and the localization of this user root
                            var iconAndFolderName = getUserRootIcons(data[i]["Filename"]);
                            console.log(iconAndFolderName);
                            $('#userlist').append(`<div class="item extrapadding" filepath="${data[i]["Filepath"]}" onclick="openShortcut(this);"><i class="${iconAndFolderName[0]} icon" style="margin-right:8px;"></i> ${iconAndFolderName[1]}</div>`);
                        }
                        
                    }
                });
            }

            function getUserRootIcons(foldername){
                var icon = "folder open";
                var name = foldername;
                foldername = foldername.toLowerCase();
                if (foldername == "desktop"){
                    icon = "computer";
                    name = applocale.getString("sidebar/vroot/desktop", name);
                }else if (foldername == "document"){
                    icon = "file text outline";
                    name = applocale.getString("sidebar/vroot/document", name);
                }else if (foldername == "music" || foldername == "audio"){
                    icon = "music";
                    name = applocale.getString("sidebar/vroot/music", name);
                }else if (foldername == "photo" || foldername == "picture"){
                    icon = "image";
                    name = applocale.getString("sidebar/vroot/photo", name);
                }else if (foldername == "video" || foldername == "film"){
                    icon = "video";
                    name = applocale.getString("sidebar/vroot/video", name);
                }else if (foldername == "trash" || foldername == "bin" || foldername == "rubbish"){
                    icon = "trash"
                    name = applocale.getString("sidebar/vroot/trash", name);
                }else if (foldername == "download"){
                    icon = "download"
                    name = applocale.getString("sidebar/vroot/download", name);
                }else if (foldername == "www" || foldername == "web" || foldername == "mysite"){
                    icon = "globe"
                    name = applocale.getString("sidebar/vroot/web", name);
                }else if (foldername == "model"){
                    icon = "cube"
                    name = applocale.getString("sidebar/vroot/model", name);
                }else if (foldername == "appdata"){
                    icon = "code"
                    name = applocale.getString("sidebar/vroot/appdata", name);
                }
                return [icon, name];
            }

            function openShortcut(object){
                var targetdir = $(object).attr("filepath");
                targetdir = decodeURIComponent(targetdir);
                listDir(targetdir);
                if (window.innerWidth < 560){
                    ts('.sidebar').sidebar('hide');
                }
            }

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