front: Make info-box draggable

1 files changed, 41 insertions, 1 deletions

diff --git a/web/js/nms-info-box.js b/web/js/nms-info-box.js
index 1a4ab4f..84f19f5 100644
--- a/web/js/nms-info-box.js
+++ b/web/js/nms-info-box.js
@@ -22,7 +22,6 @@
  * - Take a critical look at what methods/variables should be marked as "_"
  * - Currently argument is assumed to be a switch, this should not be the case
  * - Add some basic styling to separate panels visually when in the same view
- * - Add some movement/placement/size options to info window
  *
  */
 
@@ -121,6 +120,15 @@ nmsInfoBox.showWindow = function (windowName,argument) {
 
 	this._windowHandler.showWindow(windowName,argument)
 	this._container.style.display = "block";
+
+	$(this._windowHandler.getTitleObj()).on('mousedown', function(e) {
+		var cont = $(nmsInfoBox._container);
+		var dimensions = nmsInfoBox._container.getBoundingClientRect();
+		var startLeft = dimensions.left;
+		var startTop = dimensions.top;
+		nmsInfoBox.startDrag(e.screenX, e.screenY, startLeft, startTop);
+	});
+	$(this._windowHandler.getTitleObj()).on('mouseup',nmsInfoBox.stopDrag);
 };
 
 /*
@@ -172,6 +180,35 @@ nmsInfoBox.hide = function() {
 		this._windowHandler.hide();
 		this._windowHandler.unloadWindow();
 	}
+	nmsInfoBox.resetDrag();
+};
+
+/*
+ * Start window drag
+ */
+nmsInfoBox.startDrag = function(mouseStartX, mouseStartY, startLeft, startTop) {
+	document.onmousemove = function(e) {
+		var mouseOffsetX = e.screenX - mouseStartX;
+		var mouseOffsetY = e.screenY - mouseStartY;
+		$(nmsInfoBox._container).css('left', startLeft + mouseOffsetX + 'px');
+		$(nmsInfoBox._container).css('top', startTop + mouseOffsetY + 'px');
+	};
+};
+
+/*
+ * Reset drag
+ */
+nmsInfoBox.resetDrag = function() {
+	nmsInfoBox.stopDrag();
+	$(nmsInfoBox._container).css('left','');
+	$(nmsInfoBox._container).css('top','');
+};
+
+/*
+ * Stop window drag
+ */
+nmsInfoBox.stopDrag = function() {
+	document.onmousemove = null;
 };
 
 /*
@@ -221,6 +258,9 @@ var windowHandler = function () {
 	this.setTitleObj = function (titleObj) {
 		this.titleObj = titleObj;
 	};
+	this.getTitleObj = function (titleObj) {
+		return this.titleObj;
+	};
 	this.setNavObj = function (navObj) {
 		this.navObj = navObj;
 	};