finished nodepopup positionning

sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js

@@ -430,13 +430,31 @@
     function NodePopUp(){
       this.visible = false;
       this.node;
-      this.$dom = $('<div>').addClass('node-popup').appendTo('body');
+      this.$dom = $('<div>')
+        .addClass('node-popup')
+        .attr('pos', 'top-right')
+        .appendTo('body');
       this.$content = $('<div>').addClass('inner').appendTo(this.$dom);
 
       if (typeof NodePopUp.initialized == "undefined") {
 
-        NodePopUp.prototype.setNode = function(node){
+        NodePopUp.prototype.setNode = function(n){
-          this.node = node;
+          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);
         };
 

sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css

@@ -9,13 +9,15 @@ canvas#corpus-map {
     background-color: #f4f4f4; }
 
 div.node-popup {
-  display: none;
+  z-index: 10;
   position: absolute;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
-  width: 140px;
+  width: 300px;
   min-height: 30px;
-  pointer-events: none; }
+  pointer-events: none;
+  top: 60%;
+  left: 30%; }
   div.node-popup .inner {
     padding: 1em;
     outline: 1px solid red;
@@ -23,10 +25,46 @@ div.node-popup {
   div.node-popup:before {
     content: "";
     position: absolute;
-    bottom: -15px;
+    width: 60px;
-    left: -29px;
-    width: 30px;
     height: 0;
-    border-top: 1px solid red;
+    border-top: 1px solid red; }
-    -webkit-transform: rotateZ(135deg);
+  div.node-popup[pos="bottom-right"] {
-    transform: rotateZ(135deg); }
+    -webkit-transform: translateY(42px) translateX(42px);
+    transform: translateY(42px) translateX(42px); }
+    div.node-popup[pos="bottom-right"]:before {
+      top: -1px;
+      left: -61px;
+      -webkit-transform-origin: bottom right;
+      transform-origin: bottom right;
+      -webkit-transform: rotateZ(45deg);
+      transform: rotateZ(45deg); }
+  div.node-popup[pos="bottom-left"] {
+    -webkit-transform: translateX(-100%) translateY(42px) translateX(-42px);
+    transform: translateX(-100%) translateY(42px) translateX(-42px); }
+    div.node-popup[pos="bottom-left"]:before {
+      top: calc(100% +1px);
+      left: 100%;
+      -webkit-transform-origin: top left;
+      transform-origin: top left;
+      -webkit-transform: rotateZ(-45deg);
+      transform: rotateZ(-45deg); }
+  div.node-popup[pos="top-left"] {
+    -webkit-transform: translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px);
+    transform: translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px); }
+    div.node-popup[pos="top-left"]:before {
+      bottom: 0;
+      left: 100%;
+      -webkit-transform-origin: top left;
+      transform-origin: top left;
+      -webkit-transform: rotateZ(45deg);
+      transform: rotateZ(45deg); }
+  div.node-popup[pos="top-right"] {
+    -webkit-transform: translateY(-100%) translateY(-42px) translateX(42px);
+    transform: translateY(-100%) translateY(-42px) translateX(42px); }
+    div.node-popup[pos="top-right"]:before {
+      top: calc(100% + 1px);
+      left: -61px;
+      -webkit-transform-origin: top right;
+      transform-origin: top right;
+      -webkit-transform: rotateZ(-45deg);
+      transform: rotateZ(-45deg); }

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -430,13 +430,31 @@
     function NodePopUp(){
       this.visible = false;
       this.node;
-      this.$dom = $('<div>').addClass('node-popup').appendTo('body');
+      this.$dom = $('<div>')
+        .addClass('node-popup')
+        .attr('pos', 'top-right')
+        .appendTo('body');
       this.$content = $('<div>').addClass('inner').appendTo(this.$dom);
 
       if (typeof NodePopUp.initialized == "undefined") {
 
-        NodePopUp.prototype.setNode = function(node){
+        NodePopUp.prototype.setNode = function(n){
-          this.node = node;
+          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);
         };
 

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: $w; height:0;
-    width: 30px; 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);
+    }
   }
 }