From 0b806d5bb2cdc41a9e8c3c39a306171b6669f40c Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Sat, 26 Jan 2019 10:23:57 +0100
Subject: [PATCH] Made call window draggable

---
 assets/css/components/calls/callWindow.css | 16 ++++++--
 assets/js/components/calls/callWindow.js   | 44 ++++++++++++++++++++++
 2 files changed, 57 insertions(+), 3 deletions(-)

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...");