New maps in progress... (provisional arrows to nodes dialogs)
This commit is contained in:
parent
9376e9aa6d
commit
38f105f041
|
@ -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,
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue