added red square arround opened node in corpus map

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

@@ -39,6 +39,7 @@
     var _p_velocity_factor = 0.5;
     var _m_pos = {x:0, y:0};
     var _node_hover_id = -1;
+    var _node_opened_id = -1;
     var _$entrees_block = $('#block-edlpentreesblock');
     var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
     var _node_pop_up;
@@ -176,6 +177,7 @@
       this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
 
       this.hover = false;
+      this.opened = false;
 
       // physics
       this.p = _physics.makeParticle(this.mass, this.x, this.y);
@@ -267,6 +269,14 @@
           }
         };
 
+        Node.prototype.open = function(){
+          this.opened = true;
+        };
+
+        Node.prototype.close = function(){
+          this.opened = false;
+        };
+
         Node.prototype.draw = function(){
           // carre plein
           // clouleur aléatoire ds les entrees
@@ -280,6 +290,13 @@
           // _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
           _ctx.fillStyle = edlp_vars[this.e_color];
           _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
+
+          if(this.opened){
+            _ctx.lineWidth = '1px';
+            _ctx.strokeStyle = 'rgb(255,0,0)';
+            _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
+          }
+
           _ctx.closePath();
         };
 
@@ -288,13 +305,6 @@
 
       // this.init();
     };
-
-    //     ____  __               _
-    //    / __ \/ /_  __  _______(_)_________
-    //   / /_/ / __ \/ / / / ___/ / ___/ ___/
-    //  / ____/ / / / /_/ (__  ) / /__(__  )
-    // /_/   /_/ /_/\__, /____/_/\___/____/
-    //             /____/
     // TODO: we may convert a lot of computation into a web worker https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
     function checkParticulesCollisions(){
       // pre create vars to save memory;
@@ -354,6 +364,19 @@
       }
     };
 
+    // show opened audio node
+    function openNode(id){
+      closeNode();
+      _node_opened_id = id;
+      _nodes[id].open();
+    }
+    function closeNode(){
+      if(_node_opened_id != -1){
+        _nodes[_node_opened_id].close();
+        _node_opened_id = -1;
+      }
+    }
+
     //     ______                 __
     //    / ____/   _____  ____  / /______
     //   / __/ | | / / _ \/ __ \/ __/ ___/
@@ -385,11 +408,15 @@
                 },
               };
               _$canvas.trigger(event);
+              openNode(_node_hover_id);
             }else{
               // console.log('corpus : click on map');
               _$canvas.trigger('corpus-cliked-on-map');
             }
           }
+        })
+        .on('audio-node-closed', function(e){
+          closeNode();
         });
 
       _$entrees_block_termlinks.on('click', function(event) {

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

@@ -39,6 +39,7 @@
     var _p_velocity_factor = 0.5;
     var _m_pos = {x:0, y:0};
     var _node_hover_id = -1;
+    var _node_opened_id = -1;
     var _$entrees_block = $('#block-edlpentreesblock');
     var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
     var _node_pop_up;
@@ -176,6 +177,7 @@
       this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
 
       this.hover = false;
+      this.opened = false;
 
       // physics
       this.p = _physics.makeParticle(this.mass, this.x, this.y);
@@ -267,6 +269,14 @@
           }
         };
 
+        Node.prototype.open = function(){
+          this.opened = true;
+        };
+
+        Node.prototype.close = function(){
+          this.opened = false;
+        };
+
         Node.prototype.draw = function(){
           // carre plein
           // clouleur aléatoire ds les entrees
@@ -280,6 +290,13 @@
           // _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
           _ctx.fillStyle = edlp_vars[this.e_color];
           _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
+
+          if(this.opened){
+            _ctx.lineWidth = '1px';
+            _ctx.strokeStyle = 'rgb(255,0,0)';
+            _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
+          }
+
           _ctx.closePath();
         };
 
@@ -288,13 +305,6 @@
 
       // this.init();
     };
-
-    //     ____  __               _
-    //    / __ \/ /_  __  _______(_)_________
-    //   / /_/ / __ \/ / / / ___/ / ___/ ___/
-    //  / ____/ / / / /_/ (__  ) / /__(__  )
-    // /_/   /_/ /_/\__, /____/_/\___/____/
-    //             /____/
     // TODO: we may convert a lot of computation into a web worker https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
     function checkParticulesCollisions(){
       // pre create vars to save memory;
@@ -354,6 +364,19 @@
       }
     };
 
+    // show opened audio node
+    function openNode(id){
+      closeNode();
+      _node_opened_id = id;
+      _nodes[id].open();
+    }
+    function closeNode(){
+      if(_node_opened_id != -1){
+        _nodes[_node_opened_id].close();
+        _node_opened_id = -1;
+      }
+    }
+
     //     ______                 __
     //    / ____/   _____  ____  / /______
     //   / __/ | | / / _ \/ __ \/ __/ ___/
@@ -385,11 +408,15 @@
                 },
               };
               _$canvas.trigger(event);
+              openNode(_node_hover_id);
             }else{
               // console.log('corpus : click on map');
               _$canvas.trigger('corpus-cliked-on-map');
             }
           }
+        })
+        .on('audio-node-closed', function(e){
+          closeNode();
         });
 
       _$entrees_block_termlinks.on('click', function(event) {

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -27,7 +27,7 @@ edlp_vars = {
 
     var _$body = $('body');
     var _is_front = _$body.is('.path-frontpage');
-    var _$corpus_map;
+    var _$corpus_canvas;
     var _$content_container = $('.layout-container>main>.layout-content');
     var _$ajaxLinks;
 
@@ -208,7 +208,8 @@ edlp_vars = {
       },
       hide(){
         this.$container.removeClass('visible');
-        // TODO: trigger highlighted node remove on corpus map
+        // trigger highlighted node remove on corpus map
+        _$corpus_canvas.trigger('audio-node-closed');
       }
     }
 
@@ -331,8 +332,8 @@ edlp_vars = {
     //              |_|
     function onCorpusMapReady(e){
       console.log('theme : onCorpusReady');
-      _$corpus_map = $('canvas#corpus-map');
-      _$corpus_map
+      _$corpus_canvas = $('canvas#corpus-map');
+      _$corpus_canvas
         .on('corpus-cliked-on-map', function(e) {
           console.log('theme : corpus-cliked-on-map');
           backToFrontPage();

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1285,12 +1285,11 @@ body.ajax-loading main[role="main"]:before {
   height: 60px;
   top: calc(50% - 30px);
   left: calc(50% - 30px);
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.5);
   background-image: url(../img/edlp-loader-anim.svg);
   background-size: 50%;
   background-repeat: no-repeat;
-  background-position: center;
-  border-radius: 30px; }
+  background-position: center; }
 
 #audio-player {
   position: absolute;

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -4,7 +4,7 @@
 
     var _$body = $('body');
     var _is_front = _$body.is('.path-frontpage');
-    var _$corpus_map;
+    var _$corpus_canvas;
     var _$content_container = $('.layout-container>main>.layout-content');
     var _$ajaxLinks;
 
@@ -185,7 +185,8 @@
       },
       hide(){
         this.$container.removeClass('visible');
-        // TODO: trigger highlighted node remove on corpus map
+        // trigger highlighted node remove on corpus map
+        _$corpus_canvas.trigger('audio-node-closed');
       }
     }
 
@@ -308,8 +309,8 @@
     //              |_|
     function onCorpusMapReady(e){
       console.log('theme : onCorpusReady');
-      _$corpus_map = $('canvas#corpus-map');
-      _$corpus_map
+      _$corpus_canvas = $('canvas#corpus-map');
+      _$corpus_canvas
         .on('corpus-cliked-on-map', function(e) {
           console.log('theme : corpus-cliked-on-map');
           backToFrontPage();

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -21,7 +21,6 @@
   animation: rotation 2s infinite linear;
 }
 
-
 @mixin entrie-micro-square {
   display:inline-block;
   $s:8px;
@@ -50,12 +49,15 @@
 }
 
 
-// header
-
 .layout-container{
   pointer-events: none;
 }
 
+
+//  _                _
+// | |_  ___ __ _ __| |___ _ _
+// | ' \/ -_) _` / _` / -_) '_|
+// |_||_\___\__,_\__,_\___|_|
 header[role="banner"]{
   position: relative;
   padding:0 0 0.5em 0;
@@ -143,7 +145,11 @@ header[role="banner"]{
   }
 }
 
-// main
+
+//             _
+//  _ __  __ _(_)_ _
+// | '  \/ _` | | ' \
+// |_|_|_\__,_|_|_||_|
 main[role="main"]{
   .layout-content{
     pointer-events: none;
@@ -203,12 +209,13 @@ main[role="main"]{
       $s:60px;
       width:$s; height:$s;
       top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2});
-      background-color: white;
+      // padding:1em;
+      background-color: rgba(255,255,255, 0.5);
       background-image: url(../img/edlp-loader-anim.svg);
       background-size: 50%;
       background-repeat: no-repeat;
       background-position: center;
-      border-radius: $s/2;
+      // border-radius: $s/2;
     }
   }
 }