diff options
Diffstat (limited to 'static/dragable.js')
-rw-r--r-- | static/dragable.js | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/static/dragable.js b/static/dragable.js new file mode 100644 index 00000000..41895760 --- /dev/null +++ b/static/dragable.js @@ -0,0 +1,41 @@ +/* + 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"); + 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"); + + 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 = ""; + }); +} |