diff options
| -rw-r--r-- | web/css/nms.css | 11 | ||||
| -rw-r--r-- | web/js/nms-info-box.js | 73 |
2 files changed, 75 insertions, 9 deletions
diff --git a/web/css/nms.css b/web/css/nms.css index 7bdfd01..975aadb 100644 --- a/web/css/nms.css +++ b/web/css/nms.css @@ -12,6 +12,13 @@ canvas { #info-box-container { max-width: 700px; } +#info-box-container #edit-output { + word-wrap: break-word; + padding: 20px; + margin-bottom: 10px; + background-color: #333333; + color: #ADADAD; +} .left { width: 22ch; } @@ -43,11 +50,11 @@ h1.map-mode-title { .nightmode h1.map-mode-title { text-shadow: -4px -4px 5px black,-4px 0px 5px black,0px -4px 5px black,0px 0px 5px black,4px 4px 5px black,4px 0px 5px black,0px 4px 5px black; } -.logbook { +.logbook-mini { background-color: rgba(255,255,255,0.1); text-shadow: -4px -4px 5px white,-4px 0px 5px white,0px -4px 5px white,0px 0px 5px white,4px 4px 5px white,4px 0px 5px white,0px 4px 5px white; } -.nightmode .logbook { +.nightmode .logbook-mini { background-color: rgba(0,0,0,0.1); text-shadow: -4px -4px 5px black,-4px 0px 5px black,0px -4px 5px black,0px 0px 5px black,4px 4px 5px black,4px 0px 5px black,0px 4px 5px black; } diff --git a/web/js/nms-info-box.js b/web/js/nms-info-box.js index 1a4ab4f..c985e42 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; }; @@ -768,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 = "<h5>Request preview</h5>"; + 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 = '<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>'; + 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) { |