diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-10-04 17:40:59 +0200 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-10-04 17:43:45 +0200 |
commit | c6c65f9e8273a5bc1b2ac1155d66003d2b98591c (patch) | |
tree | da25ccd8af897dbc2671008e06f22d08d1208035 /static/dragable.ts | |
parent | work (diff) | |
download | calp-c6c65f9e8273a5bc1b2ac1155d66003d2b98591c.tar.gz calp-c6c65f9e8273a5bc1b2ac1155d66003d2b98591c.tar.xz |
{.js => .ts} on relavant files.
Diffstat (limited to 'static/dragable.ts')
-rw-r--r-- | static/dragable.ts | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/static/dragable.ts b/static/dragable.ts new file mode 100644 index 00000000..6eb0b999 --- /dev/null +++ b/static/dragable.ts @@ -0,0 +1,43 @@ +/* + Apply to a given component to make it draggable. + Drag area (usually a title bar) should be be the only argument. + It is REQUIRED that the object which should be moved have the class + 'popup-container'; +*/ + + +/* + Given the navbar of a popup, make it dragable. + */ +function bind_popup_control (nav) { + + if (! nav.closest('.popup-container')) { + throw TypeError('not a popup container'); + } + + nav.onmousedown = function (e) { + /* Ignore mousedown on children */ + if (e.target != nav) return; + nav.style.cursor = "grabbing"; + nav.dataset.grabbed = "true"; + nav.dataset.grabPoint = e.clientX + ";" + e.clientY; + // let popup = nav.closest(".popup-container"); + let popup = nav.closest("popup-element"); + nav.dataset.startPoint = popup.offsetLeft + ";" + popup.offsetTop; + } + window.addEventListener('mousemove', function (e) { + if (nav.dataset.grabbed) { + let [x, y] = nav.dataset.grabPoint.split(";").map(Number); + let [startX, startY] = nav.dataset.startPoint.split(";").map(Number); + // let popup = nav.closest(".popup-container"); + let popup = nav.closest("popup-element"); + + popup.style.left = startX + (e.clientX - x) + "px"; + popup.style.top = startY + (e.clientY - y) + "px"; + } + }); + window.addEventListener('mouseup', function () { + nav.dataset.grabbed = ""; + nav.style.cursor = ""; + }); +} |