aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--css/style.css79
-rw-r--r--loggedin.js68
-rw-r--r--loggedin.php9
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>