From 2558307c3023086df82a000d76d7b3738394aacb Mon Sep 17 00:00:00 2001
From: Manos Pitsidianakis <el13635@mail.ntua.gr>
Date: Tue, 14 Jul 2020 00:55:25 +0300
Subject: [PATCH] Fix windows resetting position on first drag

---
 pkg/index.html | 62 ++++++++++++++++++++++++++++++++------------------
 1 file changed, 40 insertions(+), 22 deletions(-)

diff --git a/pkg/index.html b/pkg/index.html
index b5506e76..7fef0fc6 100644
--- a/pkg/index.html
+++ b/pkg/index.html
@@ -95,6 +95,7 @@
             display: flex;
             flex-direction: column;
             touch-action: none;
+            user-select: none;
             box-sizing: border-box;
         }
 
@@ -113,26 +114,31 @@
         .window-body section {
           flex 1;
         }
-.window-body section div.tab pre {
-  height:200px;
-}
+
+        .window-body section div.tab pre {
+          height:200px;
+        }
         #terminal_win.window {
             width: 802px;
             height: 593px;
-            transform: translate(5vw, 15vh);
+            left: 5vw;
+            top: 15vh;
             z-index: 3;
         }
 
         #manpages.window {
-height:300px; width: min-content;
+          height:300px;
+            width: calc(65 * 8px + 59 * var(--gridGap) + 5px);
             z-index: 1;
-            transform: translate(calc(87vw - 60* 8px + 59 * var(--gridGap) + 5px), 40vh);
+            left: calc(85vw - 60* 8px + 59 * var(--gridGap) + 5px);
+            top: 40vh;
         }
         #keyboard.window {
             z-index: 2;
             width: calc(60* 8px + 59 * var(--gridGap) + 5px);
             position: absolute;
-            transform: translate(calc(85vw - 60* 8px + 59 * var(--gridGap) + 5px), 50vh);
+            left: calc(83vw - 60* 8px + 59 * var(--gridGap) + 5px);
+            top: 50vh;
         }
 
         .title-bar {
@@ -151,7 +157,8 @@ height:300px; width: min-content;
             width: 28rem;
             position: absolute;
             z-index: 2;
-            transform: translate(calc(95vw - 30rem), 5vh);
+            left: calc(95vw - 30rem);
+            top: 5vh;
         }
 
         .help h1 {
@@ -414,7 +421,8 @@ display: flex;
   clear: both;
 }
 #manpages .window-body section > div> pre {
-  cursor: default;
+  cursor: text;
+  user-select: text;
   box-shadow: none;
   background: #c0c0c0;
   overflow: scroll;
@@ -451,7 +459,7 @@ display: flex;
             interact('#terminal_win.window, #manpages.window') // target elements with the "draggable" class
                 .draggable({
                     // enable inertial throwing
-                    inertia: true,
+                    inertia: false,
                     // keep the element within the area of it's parent
                     modifiers: [
                         interact.modifiers.restrictRect({
@@ -552,22 +560,26 @@ display: flex;
             }
             window_order.forEach(id => {
             document.getElementById(id).addEventListener('click', event => {
-            console.log("window_order = ", window_order );
-            console.log("click id = ", id);
-            let pos = window_order.indexOf(id);
-            console.log("pos = ", pos);
-            let removedItem = window_order.splice(pos, 1)[0];
-            console.log("removedItem = ", removedItem);
-            let newLength = window_order.unshift(removedItem);
-            console.log("newLength = ", newLength);
-            for (let i = 0; i < newLength; i++){
-              document.getElementById(window_order[i]).style.zIndex = newLength - i;
-            }
-            });
+              setWindowOnTop(id);
+              });
             });
 
+            function setWindowOnTop(id) {
+              //console.log("window_order = ", window_order );
+              //console.log("click id = ", id);
+              let pos = window_order.indexOf(id);
+              //console.log("pos = ", pos);
+              let removedItem = window_order.splice(pos, 1)[0];
+              //console.log("removedItem = ", removedItem);
+              let newLength = window_order.unshift(removedItem);
+              //console.log("newLength = ", newLength);
+              for (let i = 0; i < newLength; i++){
+                document.getElementById(window_order[i]).style.zIndex = newLength - i;
+              }
+            };
             function dragMoveListener(event) {
                 var target = event.target
+                setWindowOnTop(target.id);
                 // keep the dragged position in the data-x/data-y attributes
                 var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
                 var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
@@ -587,6 +599,8 @@ display: flex;
             function restorePosition(element) {
                 console.log("restorePosition ", element.id);
                 if (prev_window_position[element.id]) {
+                    document.getElementById(element.id).style.left = prev_window_position[element.id]["left"];
+                    document.getElementById(element.id).style.top = prev_window_position[element.id]["top"];
                     document.getElementById(element.id).style.width = prev_window_position[element.id]["width"];
                     document.getElementById(element.id).style.height = prev_window_position[element.id]["height"];
                     document.getElementById(element.id).style.webkitTransform = element.style.transform = prev_window_position[element.id]["transform"];
@@ -603,6 +617,8 @@ display: flex;
                 prev_window_position[element.id] = {
                     "width": element.style.width,
                     "height": element.style.height,
+                    "top": element.style.top,
+                    "left": element.style.left,
                     "transform": element.style.transform,
                     "data-x": element["data-x"],
                     "data-y": element["data-y"]
@@ -632,6 +648,8 @@ display: flex;
 
                 target.style.webkitTransform = target.style.transform =
                     'translate(' + x + 'px,' + y + 'px)';
+                    target.style.left = x;
+                    target.style.top = y;
 
                 target.setAttribute('data-x', x);
                 target.setAttribute('data-y', y);