diff options
author | Alex Vitkov <alexvitkov98@gmail.com> | 2021-03-25 11:59:30 +0200 |
---|---|---|
committer | Alex Vitkov <alexvitkov98@gmail.com> | 2021-03-25 11:59:30 +0200 |
commit | dfb48a23e4a7ac455be3a475ebf28027b6d2c148 (patch) | |
tree | 6740cb58ba28695a24fd9c7b014f64f61cd68ead /front/dragging.ts | |
parent | b377a01261b6356c8b13b73bece635056e38efe6 (diff) | |
download | fileup-dfb48a23e4a7ac455be3a475ebf28027b6d2c148.tar.gz |
Draggable windows
Diffstat (limited to 'front/dragging.ts')
-rw-r--r-- | front/dragging.ts | 74 |
1 files changed, 23 insertions, 51 deletions
diff --git a/front/dragging.ts b/front/dragging.ts index b65f1f4..bcf6e9f 100644 --- a/front/dragging.ts +++ b/front/dragging.ts @@ -2,16 +2,15 @@ export class Draggable { el: HTMLElement; - canDragX: boolean = true; - canDragY: boolean = true; reparent: boolean = true; lockSize: boolean = true; onBeforeDragStart: () => void = null; onAfterDragEnd: () => void = null; + customMoveHandler: (x: number, y: number) => void = null; - Draggable(el: HTMLElement) { + constructor(el: HTMLElement) { this.el = el; } } @@ -31,11 +30,6 @@ export var dragging_offset_x = 0, dragging_offset_y = 0; export var dragging_candidate: Draggable = null; export var dragging_candidate_x, dragging_candidate_y; -// If we're dragging a fileview, this is set to the fileview class instance itself, because 'dragging' is just a DOM object -// The placeholder is a dummy DIV that we insert in the object's place on the grid to keep things nicely aligned -// export var dragging_fileview: FileView; -// export var dragging_placeholder = null; - export function set_dragging_candidate(e, candidate: Draggable) { dragging_candidate = candidate; dragging_candidate_x = e.clientX; @@ -46,6 +40,8 @@ export function set_dragging_candidate(e, candidate: Draggable) { // Start dragging the 'obj' DOM element // e is a DOM event, this should only get called in response of a DOM event export function begin_drag(e, d: Draggable) { + if (d.onBeforeDragStart) + d.onBeforeDragStart() set_iframe_enabled(false); dragging = d; dragging_candidate = null; @@ -55,42 +51,27 @@ export function begin_drag(e, d: Draggable) { dragging_offset_x = e.clientX - elemRect.left; dragging_offset_y = -e.clientY + elemRect.top; - //if (dragging_placeholder) - // dragging.el.parentNode.insertBefore(dragging_placeholder, dragging.el); - - dragging.el.style.left = (e.clientX - dragging_offset_x) + "px"; - dragging.el.style.top = (e.clientY + dragging_offset_y) + "px"; if (dragging.lockSize) { + dragging.el.style.left = (e.clientX - dragging_offset_x) + "px"; + dragging.el.style.top = (e.clientY + dragging_offset_y) + "px"; dragging.el.style.width = elemRect.width + "px"; dragging.el.style.height = elemRect.height + "px"; + dragging.el.style.position = "absolute"; } - dragging.el.style.position = "absolute"; - document.body.appendChild(dragging.el); + + + if (dragging.reparent) + document.body.appendChild(dragging.el); } export function end_drag(_e) { set_iframe_enabled(true); - // If there's a dragging placeholder remove it and put the dragged node back into its place - if (dragging_placeholder) { - dragging_placeholder.parentNode.insertBefore(dragging, dragging_placeholder); - dragging_placeholder.remove(); - dragging_placeholder = null; - } - - // If we were dragging a FileView, we need to reset some CSS - 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.el.classList.remove("dragged"); + if (dragging.onAfterDragEnd) + dragging.onAfterDragEnd(); dragging = null; } @@ -109,30 +90,21 @@ document.body.onmouseup = (_e) => { document.body.onmousemove = (e) => { if (dragging) { - dragging.style.left = (e.clientX - dragging_offset_x) + "px"; - dragging.style.top = (e.clientY + dragging_offset_y) + "px"; + const x = e.clientX - dragging_offset_x; + const y = e.clientY + dragging_offset_y; + if (dragging.customMoveHandler) { + dragging.customMoveHandler(x, y) + } else { + dragging.el.style.left = x + "px"; + dragging.el.style.top = y + "px"; + } } else if (dragging_candidate) { var d = Math.abs(e.clientX - dragging_candidate_x) + Math.abs(e.clientY - dragging_candidate_y); if (d > 15) - begin_drag(e, dragging_candidate, true); + begin_drag(e, dragging_candidate); } } -// Dragging a fileview is a bit different from dragging a window -// This does some setup work before calling the common begin_drag -export function begin_drag_fileview(e, fileview) { - if (dragging) - end_drag(e); - - // The dragging_placeholder is inserted into its place by the begin_drag function - dragging_placeholder = document.createElement('div'); - dragging_fileview = fileview; - - dragging = fileview.visuals; - dragging.style.zIndex = 50000; - - begin_drag(e, fileview.visuals); -} export function oncontextmenu_hook(e) { if (dragging) { |