bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finished nodepopup positionning

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-06 11:15:26 +01:00
parent a494a0646a
commit be9ee5fde2
4 changed files with 130 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js
Vendored
+21 -3
View File
@@ -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){
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);
};
sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css
Vendored
+47 -9
View File
@@ -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;
left: -29px;
width: 30px;
width: 60px;
height: 0;
border-top: 1px solid red;
-webkit-transform: rotateZ(135deg);
transform: rotateZ(135deg); }
border-top: 1px solid red; }
div.node-popup[pos="bottom-right"] {
-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
+21 -3
View File
@@ -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){
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);
};
sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss
+41 -14
View File
@@ -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);
}
}
}