TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
							<html>
    <head>
        <title locale="title/title">File Share</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
        <style>
            body{
                background: rgba(255,255,255,01) !important;
            }
        </style>
    </head>
    <body>
        <div class="ui stackable grid">
            <div class="eight wide column">
                <div class="width: 100%; ">
                    <div style="display: block; margin-left: auto; margin-right: auto;" align="center">
                        <div id="qrcode" style="border: 10px solid white; background-color: white;">
                            <h1><br><i class="ui loading spinner icon"></i><br></h1>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <a id="sharelink" href="" target="_blank" style="margin-top:8px; font-size: 120%; padding-left: 20px; padding-right: 20px; word-break: break-all; overflow-wrap: anywhere;"></a>
                    </div>
                    
                </div>
            </div>
            <div id="shareSettingOptions" class="eight wide column" style="padding-left: 12px; display:none;">
                <div class="ui header whiteTheme">
                    <span locale="share/setting/title">Share Settings</span>
                    <div class="sub header whiteTheme" locale="share/setting/subtitle">Change who can see this file</div>
                </div>
                <div id="shareSettingForm" class="ui form">
                    <div class="field">
                        <label><p class="whiteTheme" locale="share/setting/options">Visable options:</p></label>
                        <div class="ui checkboxes">
                            <div class="ui radio checkbox">
                                <input id="anyone" type="radio" class="shareoption" name="shareopt" value="anyone" onchange="updateSharePermission(this);">
                                <label for="anyone">
                                    <div class="ui header">
                                        <div class="content whiteTheme">
                                            <i class="globe icon"></i> <span locale="share/setting/anyoneWithLink">Anyone with the link</span>
                                            <div class="sub header whiteTheme" locale="share/setting/anyoneWithLink/desc">Anyone who has the link can access this file</div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            <br><br>
                            <div class="ui radio checkbox">
                                <input id="signedin" type="radio" class="shareoption" value="signedin" name="shareopt" onchange="updateSharePermission(this);">
                                <label for="signedin">
                                    <div class="ui header">
                                        <div class="content whiteTheme">
                                            <i class="user circle outline icon"></i> <span locale="share/setting/anyoneSignedIn">Anyone signed in</span>
                                            <div class="sub header whiteTheme" locale="share/setting/anyoneSignedIn/desc">Anyone who has signed in can access this file</div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            <br><br>
                            <div class="ui radio checkbox">
                                <input id="samegroup" type="radio" class="shareoption" value="samegroup" name="shareopt" onchange="updateSharePermission(this);">
                                <label for="samegroup">
                                    <div class="ui header">
                                        <div class="content whiteTheme">
                                            <i class="users icon"></i> <span locale="share/setting/sameGroup">Users in the same group</span>
                                            <div class="sub header whiteTheme" locale="share/setting/sameGroup/desc">Anyone who is in the same group as you do</div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        <br><br>
                        <div id="udpateNotification" style="display:none;" class="ui green inverted segment">
                                <i class=" checkmark icon"></i> <span locale="share/setting/updated">Share Setting Updated</span>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui divider"></div>
        <div style="width: 100%; padding-right: 12px;" align="right">
            <div class="ui button popupbuttons whiteTheme allowHover" onclick="copyLinkToClipboard(this)">
                <i class="copy icon"></i> <span locale="button/copy">Copy</span>
            </div> 
            <div id="sharingRemoveBtn" class="ui red button popupbuttons negative whiteTheme allowHover" onclick="removeSharing()">
                <i class="remove icon"></i> <span locale="button/remove">Remove</span>
            </div> 
        </div>
        <script>
            /*
                Usage: Pass in file descriptor to start share a file
                var fd = encodeURIComponent(JSON.stringify({
                        filename: "test.txt",
                        filepath: "user:/Desktop/test.txt"
                    })
                );
                window.open("file_share.html#" + fd);
                
                If you want to preset a file sharing mode (aka your module handle the share mode picking),
                Pass in with the "shareMode" paramter. Example fd as follow:
                {
                    filename: "test.txt",
                    filepath: "user:/Desktop/test.txt",
                    shareMode: "signedin"
                }

                To remove a share, pass in "remove" for the share mode
                Supported Share Mode keywords {anyone/signedin/samegroup/remove}

            */
            var shareEditingUUID = "";
            var shareingFileData = {};
            var initialized = false;
            var fileSharingURL = "";
            

            function PageReady(){
                if (initialized){
                    return;
                }
                initialized = true;
                //Do localization
                applocale.init(relpath + "../SystemAO/locale/file_share.json", function(){
                    applocale.translate();
                });

                $(".checkbox").checkbox();
                var inputFile = ao_module_loadInputFiles();
                if (inputFile == null){
                    //No file selected
                    $(".shareoption").parent().addClass("disabled");
                    $("#qrcode").html(`<h1>No File</h1>`);
                    $("#sharelink").text(``);
                    $("#sharingRemoveBtn").addClass("disabled");
                    return
                }


                //Make sure one file is choicen each time
                inputFile = inputFile[0]; 
                shareingFileData = inputFile;

                initFileDetails(shareingFileData, function(shareUUID){
                    //Set the mode of share if it is defined
                    if (shareingFileData.shareMode !== undefined && shareingFileData.shareMode == "remove"){
                        //Remove the share UUID
                        removeSharing();
                        return;
                    }
                    if (shareingFileData.shareMode !== undefined){
                        //As the share mode is defined by the caller, hide the setting interface
                        $("#shareSettingOptions").hide();
                        $.ajax({
                            url: relpath + "../system/file_system/share/edit",
                            data: {uuid: shareEditingUUID, mode: shareingFileData.shareMode},
                            success: function(data){
                                if (data.error !== undefined){
                                    alert(data.error);
                                    return;
                                }
                                
                                //Update the checkbox
                                $(".shareoption").each(function(){
                                    if ($(this)[0].value != shareingFileData.shareMode){
                                        $(this)[0].checked = false;
                                    }else{
                                        $(this)[0].checked = true;
                                    }
                                
                                });
                            }
                        });
                    }else{
                        //Default: show the setting to allow user adjustment
                        $("#shareSettingOptions").show();
                    }
                });

            }

            function initFileDetails(shareingFileData, callback=undefined){
                $.ajax({
                    url: relpath + "../system/file_system/share/new",
                    data: {path: shareingFileData.filepath},
                    success: function(data){
                        if (data.error !== undefined){
                            alert(data.error);
                        }else{
                            updateShareLinkInfo(data.UUID);
                            shareEditingUUID = data.UUID;
                            $(".shareoption").each(function(){
                                if ($(this)[0].value != data.Permission){
                                    $(this)[0].checked = false;
                                }else{
                                    $(this)[0].checked = true;
                                }
                               
                            });

                            //If the file is from desktop, set share icon
                            if (ao_module_virtualDesktop == true){
                                var fileDir = shareingFileData.filepath.split("/");
                                fileDir.pop();
                                fileDir = fileDir.join("/");
                                if (fileDir == "user:/Desktop"){
                                    //Remove share icon
                                    parent.setFileShareIndicator(shareingFileData.filename);
                                }
                            }

                            if (callback != undefined){
                                callback(data.UUID)
                            }
                        }
                    }
                });
            }

            function removeSharing(){
                if (shareEditingUUID == ""){
                    return
                }

                //The target file to remove
                $.ajax({
                    url: relpath + "../system/file_system/share/delete",
                    data: {path: shareingFileData.filepath},
                    success: function(data){
                        if (data.error !== undefined){
                            alert(data.error);
                        }else{
                            //Removed!
                            $(".button").addClass('disabled');
                            $(".checkbox").addClass("disabled");
                            $("#sharelink").text("");
                            $("#sharelink").attr("href", "#");
                            $("#qrcode").html(`<br><br><h1><i class="green checkmark icon"></i> ${applocale.getString("message/removed", "Share Removed")}</h1>`);

                            //If the file is located on desktop and it is web desktop mode
                            if (ao_module_virtualDesktop == true){
                                var fileDir = shareingFileData.filepath.split("/");
                                fileDir.pop();
                                fileDir = fileDir.join("/");
                                if (fileDir == "user:/Desktop"){
                                    //Remove share icon
                                    parent.removeFileShareIndicator(shareingFileData.filename);
                                }
                            }
                        }
                    }
                });
            }

            function updateSharePermission(object){
                var newPermission = $(object).attr('value');
                $.ajax({
                    url: relpath + "../system/file_system/share/edit",
                    data: {uuid: shareEditingUUID, mode: newPermission},
                    success: function(data){
                        if (data.error !== undefined){
                            alert(data.error);
                            return;
                        }
                        $("#udpateNotification").slideDown("fast").delay(3000).slideUp("fast");
                    }
                });
            }   

            function updateShareLinkInfo(uuid){
                $("#qrcode").html("");
                let protocol = "https://";
                if (location.protocol !== 'https:') {
                    protocol = "http://";
                }

                var port = ":" + window.location.port;
                if (window.location.port == ""){
                    port = "";
                }
                var shareURL = protocol + window.location.hostname + port + "/share/" + uuid;
                shareEditingUUID = uuid;
                fileSharingURL = shareURL;
                new QRCode(document.getElementById("qrcode"), shareURL);
                $("#sharelink").text(shareURL);
                $("#sharelink").attr("href", shareURL)
            }

            /*
                Dynamic Script Loader

                This is a really experimental implementation of importing a script from anywhere
                under the ArozOS web root. This section of code must be written in plain JS to make sure
                it works without jQuery and other libraries.

                This function try to load jQuery and ao_module from the script folder.
                Also loading the semantic js and the css main body
            */
            //The possible location for desktop.system, standard webapp module, SystemAO interfaces and iui sub-interfaces
            let possibleLocations = ["script/", "../script/", "../../script/", "../../../script/"];
            let loopCount = Math.min(possibleLocations.length, JSON.parse(JSON.stringify(window.location.toString())).split("/").length - 3);
            function tryLoad(relpath, filename, successCallback=undefined){
                var request = new XMLHttpRequest();  
                request.open('GET', relpath + filename, true);
                request.onreadystatechange = function(){
                    if (request.readyState === 4){
                        if (request.status == 200 || request.status == 304) {  
                            if (typeof(successCallback) != "undefined"){
                                successCallback(relpath, filename);
                            }
                        }
                    }
                };
                request.send();
            }

            function injectOtherJavaScriptLibrary(relpath){
                //Check if ao_module is loaded
                if (typeof(ao_module_virtualDesktop) == "undefined"){
                    var script = document.createElement('script');
                    script.setAttribute('src', relpath + "ao_module.js");
                    document.getElementsByTagName('head')[0].appendChild(script);
                }else{
                    //This routine already run
                    return;
                }

                //Inject QR Code library
                var script = document.createElement('script');
                script.setAttribute('src', relpath + "qrcode.min.js");
                document.getElementsByTagName('head')[0].appendChild(script);

                //Inject applocale
                script = document.createElement('script');
                script.setAttribute('src', relpath + "applocale.js");
                document.getElementsByTagName('head')[0].appendChild(script);

                //Inject semmantic css and js anyway
                var head  = document.getElementsByTagName('head')[0];
                var link  = document.createElement('link');
                link.id   = "semantic";
                link.rel  = 'stylesheet';
                link.type = 'text/css';
                link.href = relpath + 'semantic/semantic.min.css';
                link.media = 'all';
                head.appendChild(link);

                var script = document.createElement('script');
                script.setAttribute('src', relpath + "semantic/semantic.min.js");
                document.getElementsByTagName('head')[0].appendChild(script);

                setTimeout(function(){
                    PageReady();
                }, 1000);
            }

            //Load jQuery first
            if (typeof(window.jQuery) == "undefined"){
                //jQuery not found. Laod it
                for (var i = 0; i < loopCount; i++){
                    var relpath = possibleLocations[i];
                    tryLoad(relpath, "jquery.min.js", function(relpath, filename){
                        //Generate the jquery script element
                        var script = document.createElement('script');
                        
                        script.setAttribute('src', relpath + filename);
                        document.getElementsByTagName('head')[0].appendChild(script);
                        
                        doAfterJqueryLoaded(function(){
                            injectOtherJavaScriptLibrary(relpath);
                        });
                        
                        
                    });
                }
            }else{
                //jQuery exists. Load ao_module
                dynamicLoadAoModule();
            }

            function doAfterJqueryLoaded(callback){
                setTimeout(function(){
                    //Wait until it is loaded
                    if (typeof(window.jQuery) == "undefined"){
                        doAfterJqueryLoaded(callback);
                        return
                    }else{
                        callback();
                    }
                }), 300;
            }

            function copyLinkToClipboard(btn){
                //Copy text
                const area = document.createElement('textarea');
                document.body.appendChild(area);

                area.value = fileSharingURL;
                area.select();
                document.execCommand('copy');

                document.body.removeChild(area);

                //Do visual feedback
                let oldContent = $(btn).html();
                $(btn).html(`<i class="green checkmark icon"></i> ${applocale.getString("button/copied","Copied!")}`);
                setTimeout(function(){
                    $(btn).html(oldContent);
                }, 3000);
            }

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