New maps in progress... (provisional arrows to nodes dialogs)

This commit is contained in:
Arturo Gonzalez 2016-02-11 10:53:33 +01:00
parent 9376e9aa6d
commit 38f105f041
2 changed files with 91 additions and 2 deletions

View File

@ -122,7 +122,7 @@ MapController.prototype.click_event = function(event) {
} }
MapController.prototype.popup_map = function(self, event) { MapController.prototype.popup_map = function(self, event) {
// Node position and dimension // Node position and radius
nodeX = parseInt($(event.currentTarget).attr("cx")); nodeX = parseInt($(event.currentTarget).attr("cx"));
nodeY = parseInt($(event.currentTarget).attr("cy")); nodeY = parseInt($(event.currentTarget).attr("cy"));
nodeR = parseInt($(event.currentTarget).attr("r")); nodeR = parseInt($(event.currentTarget).attr("r"));
@ -141,28 +141,33 @@ MapController.prototype.popup_map = function(self, event) {
//To know the position of the dialog box //To know the position of the dialog box
if (self.xOffset(map_width, nodeX, dialog_width) && self.yOffset(map_height, nodeY, dialog_height)) { if (self.xOffset(map_width, nodeX, dialog_width) && self.yOffset(map_height, nodeY, dialog_height)) {
var dialogClass = "nodeDialogBottom";
var xPos = event.pageX - dialog_width + nodeR; var xPos = event.pageX - dialog_width + nodeR;
var yPos = event.clientY - dialog_height - nodeR - self._dialogNodeMargin; var yPos = event.clientY - dialog_height - nodeR - self._dialogNodeMargin;
} }
else if (self.yOffset(map_height, nodeY, dialog_height)) { else if (self.yOffset(map_height, nodeY, dialog_height)) {
var dialogClass = "nodeDialogBottom";
var xPos = event.pageX - nodeR; var xPos = event.pageX - nodeR;
var yPos = event.clientY + -dialog_height - nodeR - self._dialogNodeMargin; var yPos = event.clientY + -dialog_height - nodeR - self._dialogNodeMargin;
} }
else if (self.xOffset(map_width, nodeX, dialog_width)) { else if (self.xOffset(map_width, nodeX, dialog_width)) {
var dialogClass = "nodeDialogTop";
var xPos = event.pageX - dialog_width + nodeR; var xPos = event.pageX - dialog_width + nodeR;
var yPos = event.clientY + nodeR + self._dialogNodeMargin; var yPos = event.clientY + nodeR + self._dialogNodeMargin;
} }
else { else {
var dialogClass = "nodeDialogTop";
var xPos = event.pageX - nodeR; var xPos = event.pageX - nodeR;
var yPos = event.clientY + nodeR + self._dialogNodeMargin; var yPos = event.clientY + nodeR + self._dialogNodeMargin;
} }
$(self._target + " svg").after($("<div>").attr("id", "dialog_popup")); $(self._target + " svg").after($("<div>").attr("id", "dialog_popup"));
$("#dialog_popup").dialog({ $("#dialog_popup").dialog({
dialogClass: dialogClass,
modal: false, modal: false,
closeOnEscape: true, closeOnEscape: true,
show: {effect: 'fade', speed: 1000}, show: {effect: 'fade', speed: 1000},
title: "Ventana Modarrl!!", title: "Node dialog",
resizable: false, resizable: false,
position: [xPos,yPos], position: [xPos,yPos],
height: dialog_height, height: dialog_height,

View File

@ -3123,3 +3123,87 @@ table#policy_modules td * {
transform: rotate(359deg); transform: rotate(359deg);
} }
} }
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++ PROVISIONAL +++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* Top arrow to nodes dialog (Networkmap) */
.nodeDialogTop {
position: relative;
background: #82b92e;
}
.nodeDialogTop:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-bottom-color: #82b92e;
border-width: 15px;
margin-left: -15px;
}
/* Bottom arrow to nodes dialog (Networkmap) */
.nodeDialogBottom {
position: relative;
background: #82b92e;
}
.nodeDialogBottom:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #82b92e;
border-width: 15px;
margin-left: -15px;
}
/* Right arrow to nodes dialog (Networkmap) */
.nodeDialogRight {
position: relative;
background: #82b92e;
}
.nodeDialogRight:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-left-color: #82b92e;
border-width: 15px;
margin-top: -15px;
}
/* Left arrow to nodes dialog (Networkmap) */
.nodeDialogLeft {
position: relative;
background: #82b92e;
}
.nodeDialogLeft:after {
right: 100%;
top: 50%;
border: #82b92e;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-right-color: #82b92e;
border-width: 15px;
margin-top: -15px;
}