diff --git a/assets/css/components/calls/callWindow.css b/assets/css/components/calls/callWindow.css index 54d601f8..27d71128 100644 --- a/assets/css/components/calls/callWindow.css +++ b/assets/css/components/calls/callWindow.css @@ -4,10 +4,19 @@ * @author Pierre HUBERT */ -.call-window { - background-color: white; - width: 300px; +#callsTarget { position: fixed; + width: 100%; + height: 100%; + top: 0px; + visibility: hidden; + z-index: 1000; +} + + +.call-window { + width: 300px; + position: absolute; top: 100px; right: 10px; z-index: 100; @@ -15,6 +24,7 @@ display: flex; flex-direction: column; background-color: #000000b3; + visibility: visible; } .call.window.body { diff --git a/assets/js/components/calls/callWindow.js b/assets/js/components/calls/callWindow.js index 0e360995..49d82ca1 100644 --- a/assets/js/components/calls/callWindow.js +++ b/assets/js/components/calls/callWindow.js @@ -329,6 +329,50 @@ ComunicWeb.components.calls.callWindow = { }); + + /** + * Make the call window draggable + */ + { + var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; + + call.window.title.onmousedown = function(e){ + e = e || window.event; + e.preventDefault(); + + //get the mouse cursor position at startup + pos3 = e.clientX; + pos4 = e.clientY; + document.onmouseup = closeDragElement; + document.onmousemove = elementDrag; + } + + function elementDrag(e){ + e = e || window.event; + e.preventDefault(); + + //Calculate new cursor position + pos1 = pos3 - e.clientX; + pos2 = pos4 - e.clientY; + pos3 = e.clientX; + pos4 = e.clientY; + + //Set element new position + callContainer.style.top = (callContainer.offsetTop - pos2) + "px"; + callContainer.style.left = (callContainer.offsetLeft - pos1) + "px"; + } + + function closeDragElement(){ + + //Stop moving when mouse button is released + document.onmouseup = null; + document.onmousemove = null; + } + } + + + + //Load user media call.setLoadingMessage("Waiting for your microphone and camera...");