diff options
author | Devaev Maxim <[email protected]> | 2018-07-24 02:48:23 +0300 |
---|---|---|
committer | Devaev Maxim <[email protected]> | 2018-07-24 02:48:23 +0300 |
commit | 22c060956e37a9cb1733a3e7f808048779a5a72a (patch) | |
tree | a1fa16f1648622731555d574ba4ccb6edda01dd5 /kvmd/web/js | |
parent | 70b7f73e2063cdb61f1d31a8edf679f4f264e008 (diff) |
floating windows
Diffstat (limited to 'kvmd/web/js')
-rw-r--r-- | kvmd/web/js/main.js | 2 | ||||
-rw-r--r-- | kvmd/web/js/ui.js | 43 |
2 files changed, 43 insertions, 2 deletions
diff --git a/kvmd/web/js/main.js b/kvmd/web/js/main.js index f33c7203..5a55e966 100644 --- a/kvmd/web/js/main.js +++ b/kvmd/web/js/main.js @@ -1,5 +1,5 @@ function main () { - window.onclick = ui.windowClickHandler; + ui.init(); session.loadKvmdVersion(); session.startPoller(); stream.startPoller(); diff --git a/kvmd/web/js/ui.js b/kvmd/web/js/ui.js index 60fcf70f..e6b3de33 100644 --- a/kvmd/web/js/ui.js +++ b/kvmd/web/js/ui.js @@ -1,4 +1,13 @@ var ui = new function() { + this.init = function() { + window.onclick = __windowClickHandler; + + Array.prototype.forEach.call(document.getElementsByClassName("window"), function(el_window) { + var el_header = el_window.querySelector(".window-header"); + __makeWindowMovable(el_header, el_window); + }); + }; + this.toggleMenu = function(el_a) { Array.prototype.forEach.call(document.getElementsByClassName("ctl-item"), function(el_item) { var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content"); @@ -12,7 +21,7 @@ var ui = new function() { }); }; - this.windowClickHandler = function(event) { + var __windowClickHandler = function(event) { if (!event.target.matches(".ctl-item")) { for (el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) { if (el_item.hasAttribute("data-force-hide-menu")) { @@ -25,4 +34,36 @@ var ui = new function() { ui.toggleMenu(null); } }; + + var __makeWindowMovable = function(el_header, el_body) { + var prev_x = 0; + var prev_y = 0; + + function startMoving(event) { + event = (event || window.event); + event.preventDefault(); + prev_x = event.clientX; + prev_y = event.clientY; + document.onmousemove = doMoving; + document.onmouseup = stopMoving; + } + + function doMoving(event) { + event = (event || window.event); + event.preventDefault(); + x = prev_x - event.clientX; + y = prev_y - event.clientY; + prev_x = event.clientX; + prev_y = event.clientY; + el_body.style.top = (el_body.offsetTop - y) + "px"; + el_body.style.left = (el_body.offsetLeft - x) + "px"; + } + + function stopMoving() { + document.onmousemove = null; + document.onmouseup = null; + } + + el_header.onmousedown = startMoving; + }; }; |