')
+ .addClass('node-popup')
+ .attr('pos', 'top-right')
+ .appendTo('body');
this.$content = $('
').addClass('inner').appendTo(this.$dom);
if (typeof NodePopUp.initialized == "undefined") {
- NodePopUp.prototype.setNode = function(node){
- this.node = node;
+ NodePopUp.prototype.setNode = function(n){
+ this.node = n;
+ // positioning NodePopUp regarding node position
+ switch(true){
+ case n.x > n.wall_limits.right-350 && n.y < n.wall_limits.top+200:
+ this.$dom.attr('pos', 'bottom-left');
+ break;
+ case n.x > n.wall_limits.right-350:
+ this.$dom.attr('pos', 'top-left');
+ break;
+ case n.y < n.wall_limits.top+200:
+ this.$dom.attr('pos', 'bottom-right');
+ break;
+ default:
+ this.$dom.attr('pos', 'top-right');
+ }
+ // update NodePopUp content
this.$content.html(this.node.title);
};
diff --git a/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss b/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss
index f44ab603d..ec92bda46 100644
--- a/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss
+++ b/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss
@@ -17,11 +17,14 @@ canvas#corpus-map{
z-index:0;
}
div.node-popup{
- display:none;
+ // display:none;
+ // outline: 1px dotted green;
+ z-index: 10;
position: absolute;
box-sizing: content-box;
- width:140px; min-height: 30px;
+ width:300px; min-height: 30px;
pointer-events: none;
+ top:60%; left:30%;
.inner{
padding:1em;
@@ -29,25 +32,49 @@ div.node-popup{
background-color: white;
}
+ $w:60px; // diagonal length
+ $s:($w *1.4)*0.5; // side given the diagonal (1.4 is the square root of 2)
&:before{
content:"";
position: absolute;
- bottom:-15px;left:-29px;
- width: 30px; height:0;
+ width: $w; height:0;
border-top: 1px solid red;
- transform: rotateZ(135deg);
- }
-
- &[pos="top-left"]{
-
- }
- &[pos="top-right"]{
-
}
+ // pos attributes refers to where the popup appears
&[pos="bottom-right"]{
-
+ transform: translateY($s) translateX($s);
+ &:before{
+ top:-1px;
+ left: -$w - 1px;
+ transform-origin: bottom right;
+ transform: rotateZ(45deg);
+ }
}
&[pos="bottom-left"]{
-
+ transform: translateX(-100%) translateY($s) translateX(-$s);
+ &:before{
+ top:calc(100% +1px);
+ left: 100%;
+ transform-origin: top left;
+ transform: rotateZ(-45deg);
+ }
+ }
+ &[pos="top-left"]{
+ transform: translateY(-100%) translateX(-100%) translateY(-$s) translateX(-$s);
+ &:before{
+ bottom:0;
+ left: 100%;
+ transform-origin: top left;
+ transform: rotateZ(45deg);
+ }
+ }
+ &[pos="top-right"]{
+ transform: translateY(-100%) translateY(-$s) translateX($s);
+ &:before{
+ top:calc(100% + 1px);
+ left: - ($w +1px);
+ transform-origin: top right;
+ transform: rotateZ(-45deg);
+ }
}
}