Browse Source

Fixed desktop floatWindow overflow issue

tobychui 4 years ago
parent
commit
f146ef5119
3 changed files with 56 additions and 4 deletions
  1. 1 0
      desktop.go
  2. 3 3
      web/SystemAO/locale/file_explorer.json
  3. 52 1
      web/desktop.system

+ 1 - 0
desktop.go

@@ -77,6 +77,7 @@ func desktop_initUserFolderStructure(username string) {
 	if !fileExists(filepath.Join(homedir, "Desktop")) {
 		//Desktop directory not exists. Create one and copy a template desktop
 		os.MkdirAll(homedir+"Desktop", 0755)
+
 		templateFolder := "./system/desktop/template/"
 		if fileExists(templateFolder) {
 			templateFiles, _ := filepath.Glob(templateFolder + "*")

+ 3 - 3
web/SystemAO/locale/file_explorer.json

@@ -26,7 +26,7 @@
                 "sidebar/vroot/download": "下載",
                 "sidebar/vroot/web": "網頁",
                 "sidebar/vroot/model": "模型",
-                "sidebar/vroot/appdata": "應用",
+                "sidebar/vroot/appdata": "程序數據",
 
                 "func/search/typeToStart": "輸入關鍵字以開始搜尋",
                 "func/search/tip1": "在上面的輸入欄位輸入關鍵字,然後按「搜尋」按鈕以開始搜尋",
@@ -200,7 +200,7 @@
                 "sidebar/vroot/download": "下載",
                 "sidebar/vroot/web": "網頁",
                 "sidebar/vroot/model": "模型",
-                "sidebar/vroot/appdata": "應用",
+                "sidebar/vroot/appdata": "程序數據",
 
                 "func/search/typeToStart": "輸入關鍵字以開始搜尋",
                 "func/search/tip1": "在上面的輸入欄位輸入關鍵字,然後按「搜尋」按鈕以開始搜尋",
@@ -374,7 +374,7 @@
                 "sidebar/vroot/download": "下载",
                 "sidebar/vroot/web": "网页",
                 "sidebar/vroot/model": "模型",
-                "sidebar/vroot/appdata": "应用",
+                "sidebar/vroot/appdata": "程序数据",
 
                 "func/search/typeToStart": "输入关键字以开始搜索",
                 "func/search/tip1": "在上面的输入字段输入关键字,然后按「搜索」按钮以开始搜索",

+ 52 - 1
web/desktop.system

@@ -20,6 +20,7 @@
             background-image: url('img/desktop/bg/init.jpg');
             width: 100%;
             height: 100%;
+            overflow: hidden;
         }
         
         .backgroundFrame {
@@ -1702,11 +1703,16 @@
                 //Generate the stackedWindowList
                 var windowIdList = JSON.parse(decodeURIComponent($(this).attr("windowidgroup")));
                 if (windowIdList.length == 1) {
-                    //There are only one window in this group. Show it anyway
+                    //There are only one window in this group. Focus that floatWindow
                     var targetFW = getFloatWindowByID(windowIdList[0]);
                     $(targetFW).fadeIn(100);
                     MoveFloatWindowToTop(targetFW);
                     stackedFloatWindowListShown = false;
+
+                    if (checkIfFloatWindowOutsideWindowArea(targetFW)){
+                        //This floatWindow is outside of the display area.
+                        resetFloatWindowPosition(targetFW);
+                    }
                     $("#stackedWindowList").hide();
                 } else {
                     //Get icon for each windows and build the list objects
@@ -1787,6 +1793,51 @@
             }
         }
 
+        //Check if the given floatWindow DOM object is located outside the screen area.
+        function checkIfFloatWindowOutsideWindowArea(targetFW, checkForCompletelyOutside=true){
+            let fwTop = $(targetFW).offset().top;
+            let fwLeft = $(targetFW).offset().left;
+            let fwBottom = $(targetFW).offset().left + $(targetFW).width();
+            let fwRight = $(targetFW).offset().top + $(targetFW).height();
+
+            //Check for floatWindow complete
+            if (checkForCompletelyOutside){
+                if (fwBottom < 0 || fwTop > window.innerHeight + 1){
+                    return true;
+                }else if (fwRight < 0 || fwLeft > window.innerWidth + 1){
+                    return true;
+                }
+                return false;
+            }else{
+                //Check if any edge of the fw is outside of the document window
+                if (fwTop < 0 || fwBottom > window.innerHeight + 1){
+                    return true;
+                }else if (fwLeft < 0 || fwRight > window.innerWidth + 1){
+                    return true;
+                }
+
+                return false;
+            }
+        }
+
+        //Reset the given floatWindow object position on screen
+        function resetFloatWindowPosition(targetFW, center=true){
+            if (center == true){
+                //Calculate the corner position of the target
+                var newTop = window.innerHeight/2 - $(targetFW).height()/2;
+                var newLeft = window.innerWidth/2 - $(targetFW).width()/2;
+                $(targetFW).css({
+                    left: newLeft,
+                    top: newTop,
+                });
+            }else{
+                //Reset to origin + 10
+                $(targetFW).css({
+                    left: 10,
+                    top: 10,
+                });
+            }
+        }
 
         //Handle floatWindow resize events
         let resizingWindowTarget;