Final push

web/desktop.system

@@ -721,6 +721,11 @@
             width: 100%;
         }
 
+        .disabled{
+            pointer-events: none;
+            opacity: 0.5;
+        }
+
          /* Offline blinking warning css */
          @-moz-keyframes blink {
                 0% {
@@ -1076,11 +1081,12 @@
         var downloadMode = false;
         var lowMemoryMode = true;
 
-        //Browser detection
+        //Browser and device detection
         var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
         var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
         var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
         var isMacOS = (navigator.appVersion.indexOf("Mac")!=-1);
+        var isTouchScreen = (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
 
         //Check and prepare localization
         if (applocale){
@@ -1629,6 +1635,18 @@
                 closeFloatWindow(this,evt);
             });
 
+            $(".dockleft").off("touchstart").on("touchstart",function(evt){
+                evt.preventDefault();
+                evt.stopImmediatePropagation();
+                dockWindowToLeft($(this).parent().parent().parent());
+            });
+
+            $(".dockright").off("touchstart").on("touchstart",function(evt){
+                evt.preventDefault();
+                evt.stopImmediatePropagation();
+                dockWindowToRight($(this).parent().parent().parent());
+            });
+
             //floatWindow events for mouse
             $(".maxtoggle").off("mousedown").on("mousedown",function(evt){
                 evt.preventDefault();
@@ -1648,6 +1666,18 @@
                 closeFloatWindow(this,evt);
             });
 
+            $(".dockleft").off("mousedown").on("mousedown",function(evt){
+                evt.preventDefault();
+                evt.stopImmediatePropagation();
+                dockWindowToLeft($(this).parent().parent().parent());
+            });
+
+            $(".dockright").off("mousedown").on("mousedown",function(evt){
+                evt.preventDefault();
+                evt.stopImmediatePropagation();
+                dockWindowToRight($(this).parent().parent().parent());
+            });
+
             //Float Window events for resizing
             $(".iframewrapper").off("mousedown").on("mousedown", function(evt) {
                 evt.preventDefault();
@@ -2092,7 +2122,9 @@
                     clickDownOffset[0] = clickRatio * originalSize[0];
                     clickDownOffset[1] = 2;
                     //Restore the maximize icon
-                    $(object).find(".maxToogleButton").attr('src', "img/system/max.png")
+                    $(object).find(".maxToogleButton").attr('src', "img/system/max.svg");
+                    $(object).find(".dockright").removeClass("disabled");
+                    $(object).find(".dockleft").removeClass("disabled");
                 }
 
                 $(object).css("left", event.pageX - clickDownOffset[0]);
@@ -2102,6 +2134,40 @@
 
         }
 
+        //Dock the window object to left
+        function dockWindowToLeft(object){
+            var originalSize = [$(object).width(), $(object).height(), $(object).offset().left, $(object).offset().top];
+            $(object).attr("orgsize", encodeURIComponent(JSON.stringify(originalSize)));
+            $(object).css({
+                width: "50%",
+                height: "calc(100% - 36px)",
+                left: "0px",
+                right: "auto",
+                top: "0px"
+            });
+            $(object).attr("max", "true");
+            $(object).find(".maxToogleButton").attr('src', "img/system/restore.svg");
+            $(object).find(".dockright").addClass("disabled");
+            $(object).find(".dockleft").addClass("disabled");
+        }
+
+        //Dock the window object to right
+        function dockWindowToRight(object){
+            var originalSize = [$(object).width(), $(object).height(), $(object).offset().left, $(object).offset().top];
+            $(object).attr("orgsize", encodeURIComponent(JSON.stringify(originalSize)));
+            $(object).css({
+                width: "50%",
+                height: "calc(100% - 36px)",
+                right: "0px",
+                left: "auto",
+                top: "0px"
+            });
+            $(object).attr("max", "true");
+            $(object).find(".maxToogleButton").attr('src', "img/system/restore.svg");
+            $(object).find(".dockright").addClass("disabled");
+            $(object).find(".dockleft").addClass("disabled");
+        }
+
         function fwup(object, event) {
             event = mapEventFromTouch(event);
             if (movingWindow) {
@@ -2119,30 +2185,10 @@
                 var dockMode = false;
                 if (event.pageX < 10) {
                     //Dock to left
-                    var originalSize = [$(object).width(), $(object).height(), $(object).offset().left, $(object).offset().top];
-                    $(object).attr("orgsize", encodeURIComponent(JSON.stringify(originalSize)));
-                    $(object).css({
-                        width: "50%",
-                        height: "calc(100% - 36px)",
-                        left: "0px",
-                        right: "auto",
-                        top: "0px"
-                    });
-                    $(object).attr("max", "true");
-                    $(object).find(".maxToogleButton").attr('src', "img/system/restore.png");
+                    dockWindowToLeft(object);
                 } else if (event.pageX > window.innerWidth - 10) {
                     //Dock to right
-                    var originalSize = [$(object).width(), $(object).height(), $(object).offset().left, $(object).offset().top];
-                    $(object).attr("orgsize", encodeURIComponent(JSON.stringify(originalSize)));
-                    $(object).css({
-                        width: "50%",
-                        height: "calc(100% - 36px)",
-                        right: "0px",
-                        left: "auto",
-                        top: "0px"
-                    });
-                    $(object).attr("max", "true");
-                    $(object).find(".maxToogleButton").attr('src', "img/system/restore.png");
+                    dockWindowToRight(object);
                 }
             }
         }
@@ -2199,7 +2245,9 @@
                     left: originalSize[2],
                     top: originalSize[3]
                 });
-                $(fw).find(".maxToogleButton").attr('src', "img/system/max.png");
+                $(fw).find(".maxToogleButton").attr('src', "img/system/max.svg");
+                $(fw).find(".dockright").removeClass("disabled");
+                $(fw).find(".dockleft").removeClass("disabled");
             } else {
                 //Maxmize
                 var originalSize = [$(fw).width(), $(fw).height(), $(fw).offset().left, $(fw).offset().top];
@@ -2211,7 +2259,7 @@
                     top: "0px"
                 });
                 $(fw).attr("max", "true");
-                $(fw).find(".maxToogleButton").attr('src', "img/system/restore.png")
+                $(fw).find(".maxToogleButton").attr('src', "img/system/restore.svg")
             }
         }
 
@@ -2456,20 +2504,31 @@
                 overWriteThemeColor = `background-color: ${hexToRgbA(desktopThemeColor, 0.85)}`;
             }
 
+            //Updates 2022-06-24: Added touch screen docking buttons
+            let dockButtons = `<div class="buttons dockleft">
+                <img src="img/system/dleft.svg"></img>
+            </div>
+            <div class="buttons dockright">
+                <img src="img/system/dright.svg"></img>
+            </div>`;
+            if (!isTouchScreen){
+                dockButtons = "";
+            }
             //Append the floatWindow into the body
             $("body").append(`<div class="floatWindow" windowId="${uuid}" parent="${parentWindowID}" callback="${callbackFunctionName}" style="z-index:0; width:${width}px; height:${height}px; left:${left}px; top:${top}px;${backgroundStyle}">
                 <div class="controls fwdragger themeColorSolid" style="${overWriteThemeColor}">
                     <img class="moduleicon" src="${moduleIcon}"></img>
                     <div class="title">${title}</div>
                     <div class="fwcontrol">
-                        <div class="buttons mintoggle">
-                            <img src="img/system/min.png"></img>
+                        ${dockButtons}
+                        <div class="buttons mintoggle" style="margin-left: 1em;">
+                            <img src="img/system/min.svg"></img>
                         </div>
                         <div class="buttons maxtoggle">
-                            <img class="maxToogleButton" src="img/system/max.png"></img>
+                            <img class="maxToogleButton" src="img/system/max.svg"></img>
                         </div>
                         <div class="buttons closetoggle close">
-                            <img src="img/system/close.png"></img>
+                            <img src="img/system/close.svg"></img>
                         </div>
                     </div>
                 </div>
@@ -2613,9 +2672,17 @@
             var targetfw = getFloatWindowByID(targetFWId);
             if (resizble) {
                 $(targetfw).find(".maxtoggle").show();
+                if (isTouchScreen){
+                    $(targetfw).find(".dockleft").show();
+                    $(targetfw).find(".dockright").show();
+                }
                 $(targetfw).removeClass("fixedsize");
             } else {
                 $(targetfw).find(".maxtoggle").hide();
+                if (isTouchScreen){
+                    $(targetfw).find(".dockleft").hide();
+                    $(targetfw).find(".dockright").hide();
+                }
                 $(targetfw).addClass("fixedsize");
             }
         }

web/img/system/close.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
+<polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="26.056,7.816 22.391,4.151 15.104,11.438 7.61,3.945 
+	3.945,7.61 11.438,15.104 3.944,22.598 7.609,26.262 15.104,18.768 22.392,26.056 26.056,22.391 18.769,15.104 "/>
+</svg>

web/img/system/dleft.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<path fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M6.167,41.731V6.269h6.313v35.463H6.167z
+	 M37.331,41.529L20.004,24.201L37.331,6.873l4.501,4.5L29.004,24.201L41.832,37.03L37.331,41.529z"/>
+</svg>

web/img/system/dright.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<path fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M11.067,40.834l-4.354-4.355L19.191,24
+	L6.712,11.521l4.354-4.354L27.9,24L11.067,40.834z M35.18,41.158V6.842h6.108v34.316H35.18z"/>
+</svg>

web/img/system/max.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
+<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M4.446,5.461v18.072h21.147V5.461H4.446z M21.517,20.493H8.593
+	v-8.017h12.924V20.493z"/>
+</svg>

web/img/system/min.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
+<rect x="6.485" y="17.349" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="17.104" height="6.22"/>
+</svg>

web/img/system/restore.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
+<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M12.601,5.738v4.907H4.619v0.242v12.854h0.657h14.098l0.276-0.519
+	v-3.455h6.013V5.738H12.601z M16.472,20.873H7.487v-5.011h8.984V20.873z M22.656,16.934h-3.282V11.06h-3.939V9.712h7.222V16.934z"/>
+</svg>