The X Window System, part 1 of N

3 files changed, 99 insertions, 57 deletions

diff --git a/css/style.css b/css/style.css
index fb6a093..3504c84 100644
--- a/css/style.css
+++ b/css/style.css
@@ -141,7 +141,6 @@ form > .content {
 	justify-content: center;
 }
 
-.filesystem > h2,
 form > h2 {
 	color: #4d4d4d;
 	margin: 0;
@@ -152,11 +151,31 @@ form > h2 {
 	border-top-right-radius: 0.5rem;
 }
 
+
+.window > h2 button {
+    border: none;
+    padding: 0.3rem 1rem;
+    background: inherit;
+    border-radius: 0;
+}
+
+.window > h2 button:not(.pathentry):hover {
+    background: white;
+}
+
+.window > h2 > .separator {
+    flex: 0 0 1px;
+    align-self: stretch;
+    background: #bbb;
+}
+
+.window > h2 > *:first-child {
+	border-top-left-radius: 0.5rem;
+}
 form p {
 	margin: 1rem 0px 0.3rem 0px;
 }
 
-
 .hero_form_error {
 	animation: fadein 0.2s;
 	background-color: #ff4d4d;
@@ -241,17 +260,40 @@ input[type=submit]:hover {
     display: none;
 }
 
-.filesystem {
+.window {
 	background: #fafafa;
-	margin: 1rem;
+	margin: 0rem;
 	padding: 0;
 	box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2);
 	border-radius: 0.5rem;
 	border: 1px solid #b9b9b9;
 
     display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 800px;
+    height: 600px;
+}
+
+.window > h2 {
+	color: #4d4d4d;
+	background: #f0f0f0;
+	margin: 0;
+	border-top-left-radius: 0.5rem;
+	border-top-right-radius: 0.5rem;
+
+    cursor: grab;
+
+    display: flex;
+    align-items: stretch;
+    font-weight: normal;
+    padding: 0rem;
+    border-bottom: 1px solid #bbb;
+    font-size: 1.3rem;
 }
 
+
 .files {
     padding: 0.3rem;
     display: grid;
@@ -297,35 +339,6 @@ input[type=submit]:hover {
     filter: brightness(120%);
 }
 
-.filesystem > h2 {
-    display: flex;
-    align-items: stretch;
-    font-weight: normal;
-    padding: 0rem;
-    border-bottom: 1px solid #bbb;
-    font-size: 1.3rem;
-}
-
-.filesystem > h2 button {
-    border: none;
-    padding: 0.3rem 1rem;
-    background: inherit;
-    border-radius: 0;
-}
-
-.filesystem > h2 button:not(.pathentry):hover {
-    background: white;
-}
-
-.filesystem > h2 > .separator {
-    flex: 0 0 1px;
-    align-self: stretch;
-    background: #bbb;
-}
-
-.filesystem > h2 > *:first-child {
-	border-top-left-radius: 0.5rem;
-}
 
 .path {
     display: flex;
diff --git a/loggedin.js b/loggedin.js
index 4b4cb25..68a1b54 100644
--- a/loggedin.js
+++ b/loggedin.js
@@ -182,39 +182,61 @@ function new_folder() {
     xhr.send(data);
 }
 
-function begin_drag(e, fileview) {
+function begin_drag_fileview(e, fileview) {
     if (dragging)
         end_drag();
 
     dragging_placeholder = document.createElement('div');
-    fileview.visuals.parentNode.insertBefore(dragging_placeholder, fileview.visuals);
+    dragging_fileview = fileview;
 
     dragging = fileview.visuals;
-    dragging_fileview = fileview;
+
+    // document.body.appendChild(dragging);
+
+    begin_drag(e, fileview.visuals,);
+}
+
+function begin_drag(e, obj) {
+
+    dragging = obj;
     dragging.classList.add("dragged");
 
     var elemRect = dragging.getBoundingClientRect();
+    dragging_offset_x = e.clientX - elemRect.left;
+    dragging_offset_y = -e.clientY + elemRect.top;
+    
 
-    dragging_offset_x = elemRect.width - (elemRect.left - e.clientX);
-    dragging_offset_y = elemRect.top  - e.clientY;
+    console.log(elemRect);
+    console.log(e.clientY, elemRect.top);
+    if (dragging_placeholder)
+        obj.parentNode.insertBefore(dragging_placeholder, obj);
+
+    dragging.style.left = (e.clientX - dragging_offset_x) + "px";
+    dragging.style.top  = (e.clientY + dragging_offset_y) + "px";
 
-    dragging.style.position = "absolute";
     dragging.style.width  = elemRect.width  + "px";
     dragging.style.height = elemRect.height + "px";
-    document.body.appendChild(dragging);
 
-    dragging.style.left = (e.clientX - dragging_offset_x) + "px";
-    dragging.style.top  = (e.clientY + dragging_offset_y) + "px";
+    dragging.style.position = "absolute";
+    document.body.appendChild(dragging);
 }
 
-function end_drag(e) {
-    dragging_placeholder.parentNode.insertBefore(dragging, dragging_placeholder);
-    dragging_placeholder.remove();
-    dragging.style.removeProperty("position");
-    dragging.style.removeProperty("width");
-    dragging.style.removeProperty("height");
-    dragging.style.removeProperty("left");
-    dragging.style.removeProperty("top");
+function end_drag(_e) {
+    if (dragging_placeholder) {
+        dragging_placeholder.parentNode.insertBefore(dragging, dragging_placeholder);
+        dragging_placeholder.remove();
+        dragging_placeholder = null;
+    }
+
+    if (dragging_fileview) {
+        dragging.style.removeProperty("position");
+        dragging.style.removeProperty("width");
+        dragging.style.removeProperty("height");
+        dragging.style.removeProperty("left");
+        dragging.style.removeProperty("top");
+        dragging_fileview = null;
+    }
+
     dragging.classList.remove("dragged");
     dragging = null;
 }
@@ -301,7 +323,7 @@ function add_file_visuals(fileview) {
     }
 
     visuals.ondragstart = (e) => {
-        begin_drag(e, fileview);
+        begin_drag_fileview(e, fileview);
         e.preventDefault();
     };
 
@@ -398,4 +420,14 @@ document.body.oncontextmenu = (e) => {
         context_menu.remove();
 }
 
+function init_window(wnd) {
+    var h2 = wnd.getElementsByTagName("h2")[0];
+    h2.onmousedown = (e) => {
+        begin_drag(e, wnd);
+        e.preventDefault();
+    };
+}
+
+init_window(document.getElementById("root_window"));
+
 load_dir();
diff --git a/loggedin.php b/loggedin.php
index cc31684..36b92af 100644
--- a/loggedin.php
+++ b/loggedin.php
@@ -1,5 +1,5 @@
 <div>
-    <div class="filesystem">
+    <div class="window" id="root_window">
         <h2 style="display: flex; gap: 0rem;">
             <button id="upload_btn" onclick="begin_upload()">Upload</button>
             <div class="separator"></div>
@@ -7,11 +7,8 @@
             <div class="separator"></div>
             <div class="path" id="the_path">
                 <button class="pathentry" id="home_path_entry">
-		<?php
-		$user=$_SESSION['user_object'];
-		echo $user->username;
-	       	?>
-		's files</button>
+                    <?php echo $_SESSION['user_object']->username; ?>'s files
+                </button>
             </div>
         </h2>