From cebee8499f94ff02451ab4d4e69814b29f0899c4 Mon Sep 17 00:00:00 2001 From: Nicolai Tellefsen Date: Sun, 29 May 2016 16:33:39 +0200 Subject: front: Make info-box draggable --- web/js/nms-info-box.js | 42 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) (limited to 'web/js/nms-info-box.js') 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; }; -- cgit v1.2.3 From fdd9d04b10cf8e54af91e258de459cb5324acd45 Mon Sep 17 00:00:00 2001 From: Nicolai Tellefsen Date: Sun, 29 May 2016 17:19:13 +0200 Subject: front: Adjust preview of switch-edit request text --- web/js/nms-info-box.js | 31 +++++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) (limited to 'web/js/nms-info-box.js') diff --git a/web/js/nms-info-box.js b/web/js/nms-info-box.js index 84f19f5..c985e42 100644 --- a/web/js/nms-info-box.js +++ b/web/js/nms-info-box.js @@ -808,19 +808,38 @@ var switchEditPanel = function () { content.sort(); - var table = nmsInfoBox._makeTable(content, "edit"); + var table = nmsInfoBox._makeTable(content); domObj.appendChild(table); + var outputCont = document.createElement("div"); + outputCont.id = "edit-output-cont"; + outputCont.classList.add("collapse"); + outputCont.innerHTML = "
Request preview
"; + var output = document.createElement("output"); + output.id = "edit-output"; + outputCont.appendChild(output); + domObj.appendChild(outputCont); + + var nav = document.createElement("nav"); + nav.classList.add("nav","nav-pills"); + var submit = document.createElement("button"); submit.innerHTML = "Save changes"; submit.classList.add("btn", "btn-primary"); submit.id = "edit-submit-" + this.sw; submit.setAttribute("onclick","nmsInfoBox._windowHandler.doInPanel('" + this.id + "','save');"); - domObj.appendChild(submit); - - var output = document.createElement("output"); - output.id = "edit-output"; - domObj.appendChild(output); + nav.appendChild(submit); + + var toggleDetails = document.createElement("button"); + toggleDetails.innerHTML = ''; + toggleDetails.classList.add("btn", "btn-default", "pull-right"); + toggleDetails.dataset.toggle = "collapse"; + toggleDetails.dataset.target = "#edit-output-cont"; + toggleDetails.title = "Show request preview"; + toggleDetails.id = "edit-toggle-details-" + this.sw; + nav.appendChild(toggleDetails); + + domObj.appendChild(nav); this._render(domObj); if (place) { -- cgit v1.2.3