Added experimental top most layer for fw system

web/Dummy/index.html

@@ -23,6 +23,7 @@
             <p>Received drag-in filelist (if any)</p>
             <span id="flist"></span>
             <br>
+            <button class="ui blue button" onClick="pinWindow();">Pin Window</button>
             <button class="ui primary button" onclick="openfileselector();">Open File Selector New Mode</button>
             <button class="ui negative button" onClick="ao_module_close();">Close Window</button>
         </div>
@@ -42,6 +43,11 @@
                 })
             }
 
+            //Test to pin this window to topmost
+            function pinWindow(){
+                ao_module_setTopMost();
+            }
+
             function fileLoader(filedata){
                 if (filedata.length == 0){
                     $("#flist").text("No file selected");

web/desktop.system

@@ -135,7 +135,7 @@
         
         .navimenu {
             position: fixed;
-            z-index: 110;
+            z-index: 1110;
             width: 100%;
             height: 36px;
             left: 0px;
@@ -219,10 +219,20 @@
             z-index: 100;
             display: none;
         }
+
+        #tfwdragpanel{
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            top: 0px;
+            left: 0px;
+            z-index: 500;
+            display: none;
+        }
         
         #stackedWindowList {
             position: fixed;
-            z-index: 112;
+            z-index: 1112;
             left: 0px;
             bottom: 36px;
             width: 300px;
@@ -279,7 +289,7 @@
             width: 400px;
             background-color: #fcffff;
             box-shadow: 3px 3px 5px 0px rgba(207, 207, 207, 0.37);
-            z-index: 113;
+            z-index: 1113;
         }
 
         #listMenu.darkTheme{
@@ -394,7 +404,7 @@
         
         #contextmenu {
             position: fixed;
-            z-index: 1000;
+            z-index: 3000;
             left: 20px;
             top: 20px;
         }
@@ -495,7 +505,7 @@
             top:28px;
             width:100%;
             height: calc(100% - 28px);
-            z-index:114;
+            z-index:1114;
         }
 
         .notificationbar .content{
@@ -506,7 +516,7 @@
             width:30%;
             min-width:650px;
             height:400px;
-            z-index:115;
+            z-index:1115;
             padding: 3px;
             border-radius: 5px;
         }
@@ -657,7 +667,6 @@
             background-color:#f5f5f5 !important;
         }
 
-
         /*
                 Z-index layering
                 Layer -1 : Background Images
@@ -665,11 +674,17 @@
                 Layer 100: Focused tab drag drop layer
                 Layer 101: Focused Tab
                 ...
-                Layer 110: Navigation Bar
-                Layer 112: Stacked Window List
-                Layer 113: List Menu
-                Layer 114: Notification Bar background bluring layer
-                Layer 115: Notification Bar
+                Layer 400 - 499: Non-focused top most FloatWindows
+                Layer 500: Top Mot FloatWindow drag drop layer
+                Layer 501: Top Most FloatWindow
+                ...
+                Layer 1110: Navigation Bar
+                Layer 1112: Stacked Window List
+                Layer 1113: List Menu
+                Layer 1114: Notification Bar background bluring layer
+                Layer 1115: Notification Bar
+                ...
+                Layer 3000: contextmenu
             */
     </style>
     <script>
@@ -737,6 +752,7 @@
 
     <!-- floatWindow dragging panel-->
     <div id="fwdragpanel"></div>
+    <div id="tfwdragpanel"></div>
 
     <!-- Selection panel-->
     <div id="selectionPanel"></div>
@@ -1534,7 +1550,17 @@
             resizingWindowTarget = object;
             resizingMinX = $(object).offset().left + $(object).width() - minxWidth;
             MoveFloatWindowToTop(object);
-            $("#fwdragpanel").show();
+            if ($(object).hasClass("topmost")){
+                //Top most windows
+                $("#tfwdragpanel").show();
+            }else{
+                //Normal Windows
+                $('.floatWindow.topmost').css("pointer-events", "none");
+                $('.floatWindow.topmost').css("opacity", 0.7);
+                $("#fwdragpanel").show();
+            }
+          
+            
             $(object).find(".iframecover").show();
 
             //Check which edge is the user dragging
@@ -1614,6 +1640,10 @@
             resizingWindow = false;
             resizingEdgeID = 0;
             $("#fwdragpanel").hide();
+            $("#tfwdragpanel").hide();
+            $('.floatWindow.topmost').css("pointer-events", "auto");
+            $('.floatWindow.topmost').css("opacity", 1);
+
             $(object).find(".iframecover").hide();
             $(object).find(".iframewrapper").css('cursor', '');
             //Force minmium width and height on any floatWindow objects
@@ -1624,6 +1654,9 @@
                 $(object).css("height", "120px");
             }
             resizingWindowTarget = undefined;
+
+            $(".topmost").show();
+
         }
 
         //Hook body mousemove assistant events
@@ -1686,7 +1719,14 @@
             //Move the window to the top layer
             MoveFloatWindowToTop(object);
             //Show the background drag panel
-            $("#fwdragpanel").show();
+            if ($(object).hasClass("topmost")){
+                $("#tfwdragpanel").show();
+            }else{
+                $('.floatWindow.topmost').css("pointer-events", "none");
+                $('.floatWindow.topmost').css("opacity", 0.7);
+                $("#fwdragpanel").show();
+            }
+            
             
             //Get the relative click offset of the down event
             clickDownOffset = [event.pageX - $(object).offset().left, event.pageY - $(object).offset().top];
@@ -1729,6 +1769,10 @@
             event = mapEventFromTouch(event);
             if (movingWindow) {
                 $("#fwdragpanel").hide();
+                $("#tfwdragpanel").hide();
+                $('.floatWindow.topmost').css("pointer-events", "auto");
+                $('.floatWindow.topmost').css("opacity", 1);
+
                 $(object).find(".iframecover").hide();
                 movingWindow = false;
 
@@ -1904,6 +1948,22 @@
             }
         }
 
+        function PinFloatWindowToTopMostMode(object){
+            if ($(".floatwindow.topmost").length >= 100){
+                //Cannot add more topmost fw
+                console.log("Max number of top most floatWindow reached")
+                return
+            }
+            //Move the current fw to top, its z index is now 101
+            MoveFloatWindowToTop(object);
+            var windowID = $(object).attr("windowId");
+            console.log("Pinning window " + windowID)
+            //Move this to fixed layer position
+            $(object).addClass("topmost");
+            $(object).css("z-index", 501);
+            
+        }
+
         function MoveFloatWindowToTop(object) {
             var windowID = $(object).attr("windowId");
             var windowZindex = $(object).css("z-index");
@@ -1913,21 +1973,46 @@
                 return;
             }
 
-            //Move the previous focused window to layer 100 first
-            $(focusedWindow).css("z-index", 100);
-            $(".floatWindow").each(function() {
-                var thisWindowZIndex = $(this).css("z-index");
-                if (parseInt(thisWindowZIndex) > parseInt(windowZindex)) {
-                    if ($(this).attr("windowId") != windowID) {
-                        $(this).css("z-index", thisWindowZIndex - 1);
-                        //console.log($(this).attr("windowId"), $(this).css("z-index"));
+            if ($(focusedWindow).hasClass("topmost")){
+                //The previous focused windows is topmost. Move it to layer 109
+                $(focusedWindow).css("z-index", 500);
+                $(".floatWindow.topmost").each(function(){
+                    var thisWindowZIndex = $(this).css("z-index");
+                    if (parseInt(thisWindowZIndex) > parseInt(windowZindex)) {
+                        if ($(this).attr("windowId") != windowID) {
+                            $(this).css("z-index", thisWindowZIndex - 1);
+                        }
                     }
-                }
-            });
-            //Move target object to top
-            $(object).css("z-index", 101);
-            focusedWindow = $(object);
+                });
+            }else{
+                //The previous focused windows is normal windows. Move it to 100
+                $(focusedWindow).css("z-index", 100);
 
+                //Shift all the other windows down
+                $(".floatWindow").each(function() {
+                    if ($(this).hasClass("topmost")){
+                        return;
+                    }
+                    var thisWindowZIndex = $(this).css("z-index");
+                    if (parseInt(thisWindowZIndex) > parseInt(windowZindex)) {
+                        if ($(this).attr("windowId") != windowID) {
+                            $(this).css("z-index", thisWindowZIndex - 1);
+                            //console.log($(this).attr("windowId"), $(this).css("z-index"));
+                        }
+                    }
+                });
+            }
+
+            if ($(object).hasClass("topmost")){
+                //The new windows is a topmost window
+                $(object).css("z-index", 501);
+            }else{
+                $(object).css("z-index", 101);
+            }
+           
+            
+            focusedWindow = $(object);
+            
             //Check if this div is hidden. If not, fade it in.
             if ($(object).is(":hidden")) {
                 $(object).fadeIn(100);
@@ -2515,6 +2600,9 @@
                 resizingWindow = false;
                 resizingEdgeID = 0;
                 $("#fwdragpanel").hide();
+                $("#tfwdragpanel").hide();
+                $('.floatWindow.topmost').css("pointer-events", "auto");
+                $('.floatWindow.topmost').css("opacity", 1);
                 $(resizingWindowTarget).find(".iframecover").hide();
                 $(resizingWindowTarget).find(".iframewrapper").css('cursor', '');
             }
@@ -3611,6 +3699,7 @@
             }else if (event.which == "27"){
                 //Cancel all floatwindow events and key events
                 $("#fwdragpanel").hide();
+                $("#tfwdragpanel").hide();
                 $(".floatWindow").find(".iframecover").hide();
                 movingWindow = false;
                 resizingWindow = false;

web/script/ao_module.js

@@ -144,6 +144,17 @@ function ao_module_focus(){
     parent.MoveFloatWindowToTop(parent.getFloatWindowByID(ao_module_windowID));
 }
 
+//Set the floatWindow to top most mode
+function ao_module_setTopMost(){
+    parent.PinFloatWindowToTopMostMode(parent.getFloatWindowByID(ao_module_windowID));
+
+}
+
+//Unset the floatWindow top most mode
+function ao_module_unsetTopMost(){
+
+}
+
 //Popup a file selection window for uplaod
 function ao_module_selectFiles(callback, fileType="file", accept="*", allowMultiple=false){
     var input = document.createElement('input');