expo cartel is moving

web/modules/custom/edlp_corpus/assets/scripts/corpus.js

@@ -451,6 +451,10 @@
           this.opened = true;
           _node_opened_id = this.id;
           //this.drawSprite();
+          _$body.trigger({
+            'type':'map-node-opened',
+            'node':this
+          });
         };
         Node.prototype.close = function(){
           this.opened = false;

web/themes/custom/edlptheme/assets/scripts/main.js

@@ -1966,8 +1966,32 @@
       if(window.location.hash == '#black'){
         $('body').addClass('expo-black');
       }
+      _$body.on('map-node-opened', checkExpoPlayerPositionning);
       _randomPlayer.start();
     }
+    function checkExpoPlayerPositionning(e){
+      console.log('checkExpoPlayerPositionning', e.node);
+
+      switch(true){
+        case e.node.x > window.innerWidth-800 && e.node.y < 200:
+          _audioPlayer.$container.attr('pos', 'bottom-left');
+          break;
+        case e.node.x > window.innerWidth-800:
+          _audioPlayer.$container.attr('pos', 'top-left');
+          break;
+        case e.node.y < 200:
+          _audioPlayer.$container.attr('pos', 'bottom-right');
+          break;
+        default:
+          _audioPlayer.$container.attr('pos', 'top-right');
+      }
+
+      _audioPlayer.$container.css({
+        'display':"block",
+        'left':e.node.x+"px",
+        'top':e.node.y+"px",
+      });
+    }
 
     //   ___     _    _
     //  / __|_ _(_)__| |

web/themes/custom/edlptheme/assets/styles/app.scss

@@ -1001,7 +1001,9 @@ main[role="main"]{
         opacity:1;
         transition: opacity 0.2s ease-in-out;
         .entrees{
-          @include entree-micro-square;
+          // body:not(.domain-expo-encyclopediedelaparole-org) &{
+            @include entree-micro-square;
+          // }
         }
         h2.node-title{
           margin:0.2em 0 0;
@@ -1110,7 +1112,7 @@ main[role="main"]{
     transform: translate(-50%, -50%);
     background-color: rgba(255,255,255, 0.8);
     outline: 1px solid red;
-    padding:2em 1em 2em 2em; margin:0;
+    padding:0.5em 0.5em 0 0.5em; margin:0;
     .btns,
     .actions,
     .favoris{
@@ -1120,15 +1122,76 @@ main[role="main"]{
       margin:0.80em 0 0;
     }
     .time{
-      margin:0.75em 0 0;
+      margin:1.055em 0 0;
+      >*{
+        width:50px;
+      }
+      .current-time{
+        font-size: 1em;
+      }
+      .duration{
+        margin-top:0.28em;
+      }
     }
     .cartel{
       margin-top: 0;
       width:calc(100% - 190px);
+      .entrees{
+        span.entree{
+
+        }
+      }
     }
     * {
       background-color: transparent;
     }
+
+    $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;
+      width: $w; height:0;
+      border-top: 1px solid red;
+    }
+    // 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);*
+        top:0;
+        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);
+      }
+    }
   }
   body.expo-black &{
     background-color: $expo-black-bg;