Added advance share functions

web/SystemAO/file_system/file_explorer.html

@@ -922,10 +922,17 @@
         <div id="shareFile" class="popup wide whiteTheme" style="display:none;">
             <div class="popupheader whiteTheme">
                 <i class="external icon"></i> <span locale="opr/share/title">Share File</span>
-                <div class="popupcloser" onclick="hideAllPopupWindows();">
+                <div class="popupcloser" onclick="hideShare();">
                     <i class="remove icon"></i>
                 </div>
             </div>
+            <div>
+                <iframe id="shareFileEmbedded" style="border: 0px solid transparent; width: 100%; height: 70vh;" allowtransparency="true">
+
+                </iframe>
+            </div>
+            
+            <!--
             <div class="popupcontent" style="padding:12px;">
                 <div class="ts stackable grid">
                     <div class="eight wide column">
@@ -985,15 +992,19 @@
                         </div>
                     </div>
                 </div>
-                
-                <div class="ts divider"></div>
-                <div id="sharingRemoveBtn" class="popupbuttons negative whiteTheme allowHover" onclick="removeSharing()">
-                    <i class="remove icon"></i> <span locale="opr/share/remove">Remove Sharing</span>
-                </div> 
-                <div class="popupbuttons whiteTheme allowHover" onclick="hideShare()">
-                    <i class="checkmark icon"></i> <span locale="opr/share/ok">OK</span>
-                </div> 
+                  -->
+                <div style="padding:12px;">
+                    <div class="ts divider"></div>
+                    <div id="sharingRemoveBtn" class="popupbuttons negative whiteTheme allowHover" onclick="removeSharing()">
+                        <i class="remove icon"></i> <span locale="opr/share/remove">Remove Sharing</span>
+                    </div> 
+                    <div class="popupbuttons whiteTheme allowHover" onclick="hideShare();">
+                        <i class="checkmark icon"></i> <span locale="opr/share/ok">OK</span>
+                    </div> 
+                </div>
             </div>
+           
+            
         </div>
 
         <!-- Open With Dialog-->
@@ -3701,6 +3712,9 @@
                 if (isMobile){
                     refreshList();
                 }
+
+                //Resize the share iframe
+                resizeShareIframe()
             });
 
             function handleShareFilebuttonClick(event, object){
@@ -3716,12 +3730,19 @@
                 shareFile();
             }
 
+            function resizeShareIframe(){
+                $("#shareFileEmbedded").css("height", $("#shareFile").height() - 126 + "px");
+            }
             
             function shareFile(){
                 var selectedFiles = [];
+                var selectedFileObjects = [];
                 $(".fileObject.selected").each(function(){
                     var thisFilepath = $(this).attr("filepath");
+                    var thisFilename = $(this).attr("filename");
                     selectedFiles.push(thisFilepath);
+                    selectedFileObjects.push({"filepath": thisFilepath, "filename": thisFilename});
+
                 });
 
                 if (selectedFiles.length != 1){
@@ -3732,6 +3753,7 @@
 
                 //OK! Continue to generate link
                 var selectedFile = selectedFiles[0];
+                var selectedFileObject = selectedFileObjects[0];
                 shareEditingObject = selectedFile;
                 $.ajax({
                     url: "../../system/file_system/share/new",
@@ -3741,6 +3763,8 @@
                             msgbox("remove",applocale.getString("message/" + data.error,data.error), 5000);
                         }else{
                             //Build the predicted share endpoint
+                            
+                            /*
                             let protocol = "https://";
                             if (location.protocol !== 'https:') {
                                 protocol = "http://";
@@ -3769,6 +3793,15 @@
                             }else if (tagetCheckbox == "samegroup"){
                                 $("#samegroup")[0].checked = true;
                             }
+                            */ 
+
+                            selectedFileObject["QRCode"] = true;
+                            selectedFileObject["ActionButtons"] = false;
+                            var payload = encodeURIComponent(JSON.stringify([selectedFileObject]));
+                            var requestURL = "file_share.html#" + payload;
+                            console.log(selectedFileObject, requestURL);
+                            $("#shareFileEmbedded").attr("src", requestURL);
+                            resizeShareIframe();
 
                             //Show the share file interface
                             $(".popup").fadeOut('fast');
@@ -3788,9 +3821,10 @@
                 if (shareEditingObject == ""){
                     return
                 }
+
                 //The target file to remove
                 var selectedFile = shareEditingObject;
-
+                $("#shareFileEmbedded").attr("src", "");
                 $.ajax({
                     url: "../../system/file_system/share/delete",
                     data: {path: selectedFile},
@@ -3800,7 +3834,6 @@
                         $(".shareoption").parent().addClass("disabled");
                         $("#sharelink").text("(Sharing Removed)");
                         $("#sharelink").removeAttr("href");
-                        $("#sharingRemoveBtn").hide();
                         //Reload the current filelist and hide the share interface
                         listDirectory(currentPath);
 
@@ -3810,6 +3843,9 @@
                     }
                 });
 
+                $("#shareFile").fadeOut(100);
+                $(".popupWrapper").fadeOut(100);
+                msgbox("checkmark", applocale.getString("message/share/removed", "File share removed"))
             }
 
             function updateShareSettings(object){
@@ -3835,6 +3871,8 @@
 
             function hideShare(){
                 hideAllPopupWindows();
+                $("#shareFileEmbedded").attr("src", "");
+               
             }
 
             function toggleSidebar(useAnimation=true){
@@ -5196,6 +5234,9 @@
             $(".popup").fadeOut(100);
             $(".popupWrapper").fadeOut(100);
             $('body').css("overflow","");
+            if($("#shareFile").is(":visible")){
+                $("#shareFileEmbedded").attr("src", "");
+            }
         }
 
         function showPopupWrapper(){

web/SystemAO/file_system/file_share.html

@@ -1,25 +1,66 @@
 <html>
     <head>
         <title locale="title/title">File Share</title>
+        <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>
+        <script type="text/javascript" src="../../script/applocale.js"></script>
+        <script type="text/javascript" src="../../script/qrcode.min.js"></script>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
         <style>
-            body{
+            body:not(.darkTheme){
                 background: rgba(255,255,255,01) !important;
             }
+
+            body.darkTheme{
+                background-color: #242330 !important;
+            }
+
+            .sub.header.darkTheme{
+                color: rgba(255, 255, 255, 0.623) !important;
+            }
+
+            .darkTheme:not(a){
+                color: #eeeeee;
+            }
+
+            .yellow.message.darkTheme{
+                box-shadow: none !important;
+                border: 0px solid transparent !important;
+                background-color: #5e550e !important;
+            }
+
+            .dropDown.darkTheme:not(.icon){
+                background-color: #413f57 !important;
+                border: 1px solid white;
+            }
+
+            .dropdown.darkThem  .ui.label{
+                color: rgb(175, 175, 175);
+                background-color: #2f2d3d !important;
+            }
+
+            .dropdown.darkThem  .ui.label:hover{
+                color: white;
+                opacity: 0.8;
+            }
+
+
         </style>
     </head>
     <body>
-        <div class="ui stackable grid">
+        <div id="main" class="ui stackable grid">
             <div class="eight wide column">
-                <div class="width: 100%; ">
+                <div style="width: 100%;" class="qrcode" align="center">
                     <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 style="width: 70%; text-align: center;">
+                    <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>
@@ -118,7 +159,7 @@
                                 </div>
                             </div>
                         <br><br>
-                        <div id="udpateNotification" style="display:none;" class="ui green inverted segment">
+                        <div id="udpateNotification" style="display:none; position: fixed; bottom: 1em; right: 1em;" class="ui green inverted segment">
                                 <i class=" checkmark icon"></i> <span locale="share/setting/updated">Share Setting Updated</span>
                         </div>
                         </div>
@@ -126,8 +167,8 @@
                 </div>
             </div>
         </div>
-        <div class="ui divider"></div>
-        <div style="width: 100%; padding-right: 12px;" align="right">
+        <div class="ui divider actionButton"></div>
+        <div class="actionButton" 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> 
@@ -156,13 +197,43 @@
                 To remove a share, pass in "remove" for the share mode
                 Supported Share Mode keywords {anyone/signedin/samegroup/remove}
 
+                Other supported flags
+                {
+                    QRCode: {true/false} //Show or Hide the QR Code and link
+                    ActionButtons: {true/false} //Show or Hide the action button on the bottom
+                }
+
             */
-            var shareEditingUUID = "";
+            var sharCurrentEditingUUID = "";
             var shareingFileData = {};
+            var darkTheme = false;
             var initialized = false;
             var fileSharingURL = "";
+            var relpath = "../../";
             
+            function applyDarkThemeMode(){
+                $(".whiteTheme").removeClass("whiteTheme").addClass("darkTheme");
+                $("*:not(button)").addClass("darkTheme");
+                $("body").addClass("darkTheme");
+                $(".ui.button").addClass("inverted");
+                darkTheme = true;
+            }
+
+            function removeQRCodeInDarkTheme(){
+                if (darkTheme){
+                    $("#qrcode").css({
+                        "border":"0px solid transparent",
+                        "background-color":"#242330",
+                    })
+                }
+            }
 
+            if ($(parent) && $(parent.document).find("body").hasClass("darkTheme")){
+                //Switch to darkTheme mode immediately
+                applyDarkThemeMode();
+            }   
+
+            PageReady();
             function PageReady(){
                 if (initialized){
                     return;
@@ -183,8 +254,64 @@
                     for (var [key, value] of Object.entries(groups)) {
                         $("#targetGroupList").append(`<option value="${key}">${key}</option>`);
                     }
+
+                    //Initiate the share details
+                    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();
+                            $("#sharelink").parent().css({
+                                "width": "100%",
+                                "text-align": "left",
+                            });
+                            $.ajax({
+                                url: relpath + "../system/file_system/share/edit",
+                                data: {uuid: sharCurrentEditingUUID, 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
+                            $("#main").css({
+                                "padding-top":"1em",
+                                "padding": "4px"
+                            });
+                            $("#shareSettingOptions").show();
+                        }
+
+                        $(".accordion").accordion();
+                    });
                 });
 
+                //Load theme style
+                $.get(relpath + "../system/file_system/preference?key=file_explorer/theme",function(data){
+                    if (data == "darkTheme"){
+                        applyDarkThemeMode();
+                    }
+                });
+
+
+
                 initialized = true;
                 //Do localization
                 applocale.init(relpath + "../SystemAO/locale/file_share.json", function(){
@@ -193,7 +320,6 @@
 
                 $(".checkbox").checkbox();
                 $(".dropdown").dropdown();
-                $(".accordion").accordion();
                 var inputFile = ao_module_loadInputFiles();
                 if (inputFile == null){
                     //No file selected
@@ -207,44 +333,20 @@
 
                 //Make sure one file is choicen each time
                 inputFile = inputFile[0]; 
+                console.log("inputFile", inputFile);
                 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();
-                    }
-                });
+                //Filter out the nessary display flags
+                if (shareingFileData.QRCode !== undefined && shareingFileData.QRCode == false){
+                    $(".qrcode").hide();
+                    $("#shareSettingOptions").attr("class", "sixteen wide column");
+                    $("#shareSettingOptions").css("padding", "1em");
+                    $(".eight.wide").hide();
+                }
 
+                if (shareingFileData.ActionButtons !== undefined && shareingFileData.ActionButtons == false){
+                    $(".actionButton").hide();
+                }
             }
 
             function initFileDetails(shareingFileData, callback=undefined){
@@ -257,7 +359,7 @@
                         }else{
                             console.log(data);
                             updateShareLinkInfo(data.UUID);
-                            shareEditingUUID = data.UUID;
+                            sharCurrentEditingUUID = data.UUID;
                             $(".shareoption").each(function(){
                                 if ($(this)[0].value != data.Permission){
                                     $(this)[0].checked = false;
@@ -273,6 +375,9 @@
                                         $("#targetGroupList").dropdown("set selected", data.Accessibles);
                                         $("#targetUsersList").parent().addClass("disabled");
                                         $("#targetGroupList").parent().removeClass("disabled");
+                                    }else{
+                                        $("#targetGroupList").parent().addClass("disabled");
+                                        $("#targetUsersList").parent().addClass("disabled");
                                     }
                                 }
                                
@@ -309,7 +414,7 @@
             }
 
             function removeSharing(){
-                if (shareEditingUUID == ""){
+                if (sharCurrentEditingUUID == ""){
                     return
                 }
 
@@ -327,7 +432,7 @@
                             $("#sharelink").text("");
                             $("#sharelink").attr("href", "#");
                             $("#qrcode").html(`<br><br><h1><i class="green checkmark icon"></i> ${applocale.getString("message/removed", "Share Removed")}</h1>`);
-
+                            removeQRCodeInDarkTheme();
                             //If the file is located on desktop and it is web desktop mode
                             if (ao_module_virtualDesktop == true){
                                 var fileDir = shareingFileData.filepath.split("/");
@@ -354,6 +459,7 @@
                     $("#targetUsersList").parent().removeClass("disabled");
                     $("#targetGroupList").parent().addClass("disabled");
                     var selectedUsers = $("#targetUsersList").val();
+                    $("#noGroupWarning").slideUp("fast");
                     if (selectedUsers.length == 0){
                         //Show tips message
                         $("#noUserWarning").slideDown("fast");
@@ -368,6 +474,7 @@
                     $("#targetUsersList").parent().addClass("disabled");
                     $("#targetGroupList").parent().removeClass("disabled");
                     var selectedGroups = $("#targetGroupList").val();
+                    $("#noUserWarning").slideUp("fast");
                     if (selectedGroups.length == 0){
                         //Show tips message
                         $("#noGroupWarning").slideDown("fast");
@@ -381,13 +488,13 @@
 
                 $.ajax({
                     url: relpath + "../system/file_system/share/edit",
-                    data: {uuid: shareEditingUUID, mode: newPermission},
+                    data: {uuid: sharCurrentEditingUUID, mode: newPermission},
                     success: function(data){
                         if (data.error !== undefined){
                             alert(data.error);
                             return;
                         }
-                        $("#udpateNotification").slideDown("fast").delay(3000).slideUp("fast");
+                        $("#udpateNotification").stop().finish().fadeIn("fast").delay(3000).fadeOut("fast");
                     }
                 });
             }
@@ -404,7 +511,7 @@
                     port = "";
                 }
                 var shareURL = protocol + window.location.hostname + port + "/share/" + uuid;
-                shareEditingUUID = uuid;
+                sharCurrentEditingUUID = uuid;
                 fileSharingURL = shareURL;
                 new QRCode(document.getElementById("qrcode"), shareURL);
                 $("#sharelink").text(shareURL);
@@ -421,6 +528,7 @@
                 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);
@@ -481,7 +589,7 @@
 
             //Load jQuery first
             if (typeof(window.jQuery) == "undefined"){
-                //jQuery not found. Laod it
+                //jQuery not found. Load it
                 for (var i = 0; i < loopCount; i++){
                     var relpath = possibleLocations[i];
                     tryLoad(relpath, "jquery.min.js", function(relpath, filename){
@@ -495,12 +603,11 @@
                             injectOtherJavaScriptLibrary(relpath);
                         });
                         
-                        
                     });
                 }
             }else{
                 //jQuery exists. Load ao_module
-                dynamicLoadAoModule();
+                injectOtherJavaScriptLibrary();
             }
 
             function doAfterJqueryLoaded(callback){
@@ -514,6 +621,7 @@
                     }
                 }), 300;
             }
+            */
 
             function copyLinkToClipboard(btn){
                 //Copy text

web/SystemAO/locale/file_explorer.json

@@ -123,6 +123,7 @@
                 "message/rename/success": "重新命名成功",
                 "message/copy/success": " 個檔案已複製",
                 "message/move/success": " 個檔案已移動",
+                "message/share/removed": "已停止檔案分享",
                 "message/paste/nothing": "沒有可貼上的檔案",
                 "message/remove/success": " 個檔案已被成功刪除",
                 "message/recycle/success": " 個檔案已被成功移動到資源回收箱",
@@ -323,6 +324,7 @@
                 "message/rename/success": "重新命名成功",
                 "message/copy/success": " 個檔案已複製",
                 "message/move/success": " 個檔案已移動",
+                "message/share/removed": "已停止檔案分享",
                 "message/paste/nothing": "沒有可貼上的檔案",
                 "message/remove/success": " 個檔案已被成功刪除",
                 "message/recycle/success": " 個檔案已被成功移動到資源回收箱",
@@ -520,6 +522,7 @@
                 "message/rename/success": "重新命名成功",
                 "message/copy/success": " 个文件已复制",
                 "message/move/success": " 个文件已移动",
+                "message/share/removed": "已停止文件分享",
                 "message/paste/nothing": "没有可粘贴的文件",
                 "message/remove/success": " 个文件已被成功删除",
                 "message/recycle/success": " 个文件已被成功移动到资源回收箱",

web/desktop.system

@@ -4496,7 +4496,7 @@
             let keycode = event.which || event.keyCode;
             if (keycode == "17") {
                 ctrlHold = false;
-            } else if (keycode == "16") {
+            }else if (keycode == "16") {
                 shiftHold = false;
             }else if (keycode == "27"){
                 //ESC key, stop all floatWindow operations
@@ -4504,6 +4504,12 @@
                 movingWindow = false;
                 resizingWindow = false;
                 event.preventDefault();
+            }else if (keycode == "13"){
+                //Enter key. open the selected object if exists
+                $(".launchIconWrapper.selected").each(function(){
+                    console.log($(this).parent());
+                    iconDoubleClicked($(this).parent(), event);
+                })
             }
         });