diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-11-20 23:01:32 +0100 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-11-20 23:01:32 +0100 |
commit | 1b5ff103f589140473068fd83340b0cc443fb420 (patch) | |
tree | c90b3e2ae018df1f51ff87a755718581ca0254b1 /static/dragable.js | |
parent | Start looking into generalized input-list. (diff) | |
download | calp-1b5ff103f589140473068fd83340b0cc443fb420.tar.gz calp-1b5ff103f589140473068fd83340b0cc443fb420.tar.xz |
Work on templetazing js.
Diffstat (limited to '')
-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 = ""; + }); +} |