Made call window draggable

This commit is contained in:
Pierre HUBERT 2019-01-26 10:23:57 +01:00
parent b8865b96f0
commit 0b806d5bb2
2 changed files with 57 additions and 3 deletions

View File

@ -4,10 +4,19 @@
* @author Pierre HUBERT * @author Pierre HUBERT
*/ */
.call-window { #callsTarget {
background-color: white;
width: 300px;
position: fixed; position: fixed;
width: 100%;
height: 100%;
top: 0px;
visibility: hidden;
z-index: 1000;
}
.call-window {
width: 300px;
position: absolute;
top: 100px; top: 100px;
right: 10px; right: 10px;
z-index: 100; z-index: 100;
@ -15,6 +24,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #000000b3; background-color: #000000b3;
visibility: visible;
} }
.call.window.body { .call.window.body {

View File

@ -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 //Load user media
call.setLoadingMessage("Waiting for your microphone and camera..."); call.setLoadingMessage("Waiting for your microphone and camera...");