Added experimental mobile interaface mode

web/SystemAO/file_system/file_explorer.html

@@ -80,7 +80,7 @@
             </div>
 
             <!-- Mobile Navi-bar -->
-            <div id="mobileNaviBar" class="ui right fixed vertical menu" style="display:;">
+            <div id="mobileNaviBar" class="ui right fixed vertical menu" style="display:none;">
                 <div class="mobileFileOprMenuToggle" onclick="toggleMobileSidebar(false);">
                     <i class="large chevron right icon"></i>
                 </div>
@@ -89,16 +89,18 @@
 
                 </div>
                 <!-- File Operation Buttons -->
-                <div class="fileOprBtnMobile" title="Open" onclick="openViaButton();"><img class="opricon" src="img/opr/open.svg"><p class="oprtxt" locale="fileopr/Open">Open</p></div>
-                <div class="fileOprBtnMobile" title="Copy" onclick="copy();"><img class="opricon" src="img/opr/copy.svg"><p class="oprtxt" locale="fileopr/Copy">Copy</p></div>
-                <div class="fileOprBtnMobile" title="Paste" onclick="paste();"><img class="opricon" src="img/opr/paste.svg"><p class="oprtxt" locale="fileopr/Paste">Paste</p></div>
-                <div class="fileOprBtnMobile" title="Delete" onclick="deleteFile();"><img class="opricon" src="img/opr/delete.svg"><p class="oprtxt" locale="fileopr/Delete">Delete</p></div>
-                <button class="fileoprSmallBtnMobile" title="New File" onclick="newfile();"><i class="file outline icon"></i> <span locale="fileopr/New File">New File</span></button><br>
-                <button class="fileoprSmallBtnMobile" title="Create Zip" onclick="zipFile();"><i class="brown zip file icon"></i> <span locale="fileopr/Create Zip">Create Zip</span></button><br>
-                <button class="fileoprSmallBtnMobile" title="Unzip Here" onclick="unzipHere();"><i class="inbox icon"></i> <span locale="fileopr/Unzip Here">Unzip Here</span></button><br>
-                <button class="fileoprSmallBtnMobile" title="Refresh" onclick="refreshList();"><i class="green refresh icon"></i> <span locale="fileopr/Refresh">Refresh</span></button><br>
-                <button class="fileoprSmallBtnMobile" title="Home" onclick="openHomeDir();"><i class="home icon"></i> <span locale="fileopr/Home">Home</span></button><br>
-                <button class="fileoprSmallBtnMobile" title="File Info" onclick="showFileProperties();"><i class="blue info circle icon"></i> <span locale="fileopr/File Info">File Info</span></button><br>
+                <div class="fileOprBtnMobile" title="Open" onclick="openViaButton(); toggleMobileSidebar(false, exitMultiSelectMode);"><img class="opricon" src="img/opr/open.svg"><p class="oprtxt" locale="fileopr/Open">Open</p></div>
+                <div class="fileOprBtnMobile" title="Copy" onclick="copy(); toggleMobileSidebar(false, exitMultiSelectMode);"><img class="opricon" src="img/opr/copy.svg"><p class="oprtxt" locale="fileopr/Copy">Copy</p></div>
+                <div class="fileOprBtnMobile" title="Paste" onclick="paste(); toggleMobileSidebar(false, exitMultiSelectMode);"><img class="opricon" src="img/opr/paste.svg"><p class="oprtxt" locale="fileopr/Paste">Paste</p></div>
+                <div class="fileOprBtnMobile" title="Delete" onclick="deleteFile(); toggleMobileSidebar(false, exitMultiSelectMode);"><img class="opricon" src="img/opr/delete.svg"><p class="oprtxt" locale="fileopr/Delete">Delete</p></div>
+                <button class="fileoprSmallBtnMobile" title="Multi Select" onclick="toggleCtrl(); toggleMobileSidebar(false);"> <i class="mouse pointer icon"></i> <span locale="fileopr/Multi Select">Multi-select</span></button><br>
+                <button class="fileoprSmallBtnMobile" title="Multi Select" onclick="selectAll(); toggleMobileSidebar(false);"> <i class="plus square icon"></i> <span locale="fileopr/Select All">Select All</span></button><br>
+                <button class="fileoprSmallBtnMobile" title="Clear Selection" onclick="clearSelection(); toggleMobileSidebar(false, exitMultiSelectMode);"> <i class="remove icon"></i> <span locale="fileopr/Clear Select">Clear Selection</span></button><br><button class="fileoprSmallBtnMobile" title="New File" onclick="newfile();"><i class="file outline icon"></i> <span locale="fileopr/New File">New File</span></button><br>
+                <button class="fileoprSmallBtnMobile" title="Create Zip" onclick="zipFile(); toggleMobileSidebar(false, exitMultiSelectMode);"><i class="brown zip file icon"></i> <span locale="fileopr/Create Zip">Create Zip</span></button><br>
+                <button class="fileoprSmallBtnMobile" title="Unzip Here" onclick="unzipHere(); toggleMobileSidebar(false, exitMultiSelectMode);"><i class="inbox icon"></i> <span locale="fileopr/Unzip Here">Unzip Here</span></button><br>
+                <button class="fileoprSmallBtnMobile" title="Refresh" onclick="refreshList(); toggleMobileSidebar(false);"><i class="green refresh icon"></i> <span locale="fileopr/Refresh">Refresh</span></button><br>
+                <button class="fileoprSmallBtnMobile" title="Home" onclick="openHomeDir(); toggleMobileSidebar(false, exitMultiSelectMode);"><i class="home icon"></i> <span locale="fileopr/Home">Home</span></button><br>
+                <button class="fileoprSmallBtnMobile" title="File Info" onclick="showFileProperties(); toggleMobileSidebar(false, exitMultiSelectMode);"><i class="blue info circle icon"></i> <span locale="fileopr/File Info">File Info</span></button><br>
             </div>
             <br>
             <!-- Directoy navigations -->
@@ -575,7 +577,7 @@
             let shareEditingUUID = "";
 
             //System Information
-            let systemUUID = "";
+            let systecontextmenumUUID = "";
             let systemIP = "";
 
             //Browser detection
@@ -1579,6 +1581,12 @@
                         evt.preventDefault();
                         evt.stopImmediatePropagation();
                         openthis(this,evt);
+
+                        //Deselect everything if in multi-select mode
+                        if (ctrlHold){
+                            ctrlHold = false;
+                            updateCtrlDisplay();
+                        }
                         return
                     }
 
@@ -1708,6 +1716,10 @@
                             $(selectedObject).addClass("selected");
                        }
 
+                        //Enable multi-select mode
+                        ctrlHold = true;
+                        updateCtrlDisplay();
+                        return;
                     }
 
                     //Show all options by defaults
@@ -2088,7 +2100,10 @@
                 }
 
                 shiftHold = false;
-                ctrlHold = false;
+                if (!isMobile){
+                    //Desktop mode only, to prevent focus out when ctrl Up
+                    ctrlHold = false;
+                }
                 updateCtrlDisplay();
                 listDirectory(currentPath, callback);
             }
@@ -3692,14 +3707,25 @@
                 $("#shareFileEmbedded").attr("src", "");
             }
 
-            function toggleMobileSidebar(show=undefined){
+            function exitMultiSelectMode(){
+                if (ctrlHold){
+                    ctrlHold = false;
+                    updateCtrlDisplay();
+                }
+            }
+
+            function toggleMobileSidebar(show=undefined, callback=undefined){
                 if(show == true){
-                    $("#mobileNaviBar").stop().finish().transition("slide left in");
+                    $("#mobileNaviBar").stop().finish().show();
                 }else if (show == false){
-                    $("#mobileNaviBar").stop().finish().transition("slide left out");
+                    $("#mobileNaviBar").stop().finish().hide();
                 }else{
                     $("#mobileNaviBar").toggle();
                 }
+
+                if (callback != undefined){
+                    callback();
+                }
             }
 
             function toggleSidebar(useAnimation=true){
@@ -5008,6 +5034,22 @@
             updateCtrlDisplay();
         }
 
+        function selectAll(){
+            $(".fileObject").addClass("selected");
+            updateSelectedObjectsCount();
+        }
+
+        function clearSelection(){
+            $('.fileObject.selected').removeClass("selected");
+            updateSelectedObjectsCount();
+
+            if (ctrlHold){
+                //Deselect everything, also exit multi-select mode
+                ctrlHold = false;
+                updateCtrlDisplay();
+            }
+        }
+
         function updateCtrlDisplay(){
             if (isMobile){
                 //Change color of the navibar based on selection mode

web/SystemAO/locale/file_explorer.json

@@ -27,6 +27,9 @@
                 "fileopr/Copy": "複製",
                 "fileopr/Paste": "貼上",
                 "fileopr/Cut": "剪下",
+                "fileopr/Multi Select": "切換多選",
+                "fileopr/Select All": "全選",
+                "fileopr/Clear Select": "取消選擇",
                 "fileopr/New File": "新增檔案",
                 "fileopr/New Folder": "新增<br>資料夾",
                 "fileopr/Upload": "上載",