From 69e5811baed686a7f768c5db25856d04cd15d145 Mon Sep 17 00:00:00 2001 From: Alex Vitkov Date: Sat, 13 Feb 2021 13:24:43 +0200 Subject: The X Window System, part 1 of N --- loggedin.js | 68 +++++++++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 50 insertions(+), 18 deletions(-) (limited to 'loggedin.js') 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(); -- cgit v1.2.3