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) {
// Node position and dimension
// Node position and radius
nodeX = parseInt($(event.currentTarget).attr("cx"));
nodeY = parseInt($(event.currentTarget).attr("cy"));
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
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 yPos = event.clientY - dialog_height - nodeR - self._dialogNodeMargin;
}
else if (self.yOffset(map_height, nodeY, dialog_height)) {
var dialogClass = "nodeDialogBottom";
var xPos = event.pageX - nodeR;
var yPos = event.clientY + -dialog_height - nodeR - self._dialogNodeMargin;
}
else if (self.xOffset(map_width, nodeX, dialog_width)) {
var dialogClass = "nodeDialogTop";
var xPos = event.pageX - dialog_width + nodeR;
var yPos = event.clientY + nodeR + self._dialogNodeMargin;
}
else {
var dialogClass = "nodeDialogTop";
var xPos = event.pageX - nodeR;
var yPos = event.clientY + nodeR + self._dialogNodeMargin;
}
$(self._target + " svg").after($("<div>").attr("id", "dialog_popup"));
$("#dialog_popup").dialog({
dialogClass: dialogClass,
modal: false,
closeOnEscape: true,
show: {effect: 'fade', speed: 1000},
title: "Ventana Modarrl!!",
title: "Node dialog",
resizable: false,
position: [xPos,yPos],
height: dialog_height,

View File

@ -3123,3 +3123,87 @@ table#policy_modules td * {
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;
}