corpus node popup done

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

@@ -102,11 +102,11 @@
           onCorpusLoaded(data);
         })
         .fail(function(jqxhr, textStatus, error){
-          onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path);
+          onCorpusLoadError(jqxhr, textStatus, error);
         });
     };
 
-    function onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path){
+    function onCorpusLoadError(jqxhr, textStatus, error){
       console.warn('corpus load failed', jqxhr.responseText);
     };
 
@@ -114,9 +114,9 @@
       console.log('corpus loaded : data', data);
       // console.log('first node', data.nodes[0]);
       // buildParticles(data.nodes);
+      initNodePopup();
       buildNodes(data.nodes);
       initEvents();
-      initNodePopup();
       startAnime();
     };
 
@@ -180,6 +180,10 @@
       this.p = _physics.makeParticle(this.mass, this.x, this.y);
       this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
 
+      // if(this.id == '620'){
+      //   _node_pop_up.setNode(this);
+      // }
+
       // prototypes
       if (typeof Node.initialized == "undefined") {
 
@@ -234,10 +238,9 @@
            && _m_pos.x < this.x + this.r
            && _m_pos.y > this.y - this.r
            && _m_pos.y < this.y + this.r){
-            if(_node_hover_id == -1 || _node_hover_id == this.id){
-              // console.log("Node hover", this.id);
+            if(_node_hover_id == -1 || _node_hover_id !== this.id){
+              console.log("Node hover", this.id);
               this.hover = true;
-              // this.highlightEntries();
               _node_hover_id = this.id;
               _node_pop_up.setNode(this);
             }
@@ -250,17 +253,6 @@
           }
         };
 
-        // Node.prototype.highlightEntries = function(){
-        //   _$entrees_block_termlinks.removeClass('highlighted');
-        //   var entree;
-        //   for (var i = 0; i < this.entrees.length; i++) {
-        //     entree = this.entrees[i];
-        //     _$entrees_block_termlinks.filter(function(){
-        //       return $(this).attr('tid') == entree;
-        //     }).addClass('highlighted');
-        //   }
-        // }
-
         Node.prototype.draw = function(){
           // carre plein
           // clouleur aléatoire ds les entrees
@@ -439,26 +431,48 @@
       if (typeof NodePopUp.initialized == "undefined") {
 
         NodePopUp.prototype.setNode = function(n){
+          console.log('NodePopUp setNode()');
           this.node = n;
           // positioning NodePopUp regarding node position
+          this.setPositioning();
+          // update NodePopUp content
+          this.setContent();
+        };
+
+        NodePopUp.prototype.setPositioning = function(){
           switch(true){
-            case n.x > n.wall_limits.right-350 && n.y < n.wall_limits.top+200:
+            case this.node.x > this.node.wall_limits.right-350 && this.node.y < this.node.wall_limits.top+200:
               this.$dom.attr('pos', 'bottom-left');
               break;
-            case n.x > n.wall_limits.right-350:
+            case this.node.x > this.node.wall_limits.right-350:
               this.$dom.attr('pos', 'top-left');
               break;
-            case n.y < n.wall_limits.top+200:
+            case this.node.y < this.node.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);
+        };
+
+        NodePopUp.prototype.setContent = function(){
+          // console.log(this.node);
+          this.$content.html('');
+          var $entrees = $('<div>').addClass('entrees');
+          for (var i = 0; i < this.node.entrees.length; i++) {
+            var tid = this.node.entrees[i];
+            $entrees.append($('<span>').addClass('entree').attr('tid', tid));
+          }
+          this.$content
+            .append($entrees)
+            .append('<h2 class="title">'+this.node.title+'</h2>')
+            .append('<section class="description">'+this.node.description+'</section>');
+
+          // TODO: favoris marker
         };
 
         NodePopUp.prototype.removeNode = function(){
+          console.log('NodePopUp removeNode()');
           this.node = false;
         };
 

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

@@ -17,7 +17,8 @@ div.node-popup {
   min-height: 30px;
   pointer-events: none;
   top: 60%;
-  left: 30%; }
+  left: 30%;
+  pointer-events: none; }
   div.node-popup .inner {
     padding: 1em;
     outline: 1px solid red;

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

@@ -102,11 +102,11 @@
           onCorpusLoaded(data);
         })
         .fail(function(jqxhr, textStatus, error){
-          onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path);
+          onCorpusLoadError(jqxhr, textStatus, error);
         });
     };
 
-    function onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path){
+    function onCorpusLoadError(jqxhr, textStatus, error){
       console.warn('corpus load failed', jqxhr.responseText);
     };
 
@@ -114,9 +114,9 @@
       console.log('corpus loaded : data', data);
       // console.log('first node', data.nodes[0]);
       // buildParticles(data.nodes);
+      initNodePopup();
       buildNodes(data.nodes);
       initEvents();
-      initNodePopup();
       startAnime();
     };
 
@@ -180,6 +180,10 @@
       this.p = _physics.makeParticle(this.mass, this.x, this.y);
       this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
 
+      // if(this.id == '620'){
+      //   _node_pop_up.setNode(this);
+      // }
+
       // prototypes
       if (typeof Node.initialized == "undefined") {
 
@@ -234,10 +238,9 @@
            && _m_pos.x < this.x + this.r
            && _m_pos.y > this.y - this.r
            && _m_pos.y < this.y + this.r){
-            if(_node_hover_id == -1 || _node_hover_id == this.id){
-              // console.log("Node hover", this.id);
+            if(_node_hover_id == -1 || _node_hover_id !== this.id){
+              console.log("Node hover", this.id);
               this.hover = true;
-              // this.highlightEntries();
               _node_hover_id = this.id;
               _node_pop_up.setNode(this);
             }
@@ -250,17 +253,6 @@
           }
         };
 
-        // Node.prototype.highlightEntries = function(){
-        //   _$entrees_block_termlinks.removeClass('highlighted');
-        //   var entree;
-        //   for (var i = 0; i < this.entrees.length; i++) {
-        //     entree = this.entrees[i];
-        //     _$entrees_block_termlinks.filter(function(){
-        //       return $(this).attr('tid') == entree;
-        //     }).addClass('highlighted');
-        //   }
-        // }
-
         Node.prototype.draw = function(){
           // carre plein
           // clouleur aléatoire ds les entrees
@@ -439,26 +431,48 @@
       if (typeof NodePopUp.initialized == "undefined") {
 
         NodePopUp.prototype.setNode = function(n){
+          console.log('NodePopUp setNode()');
           this.node = n;
           // positioning NodePopUp regarding node position
+          this.setPositioning();
+          // update NodePopUp content
+          this.setContent();
+        };
+
+        NodePopUp.prototype.setPositioning = function(){
           switch(true){
-            case n.x > n.wall_limits.right-350 && n.y < n.wall_limits.top+200:
+            case this.node.x > this.node.wall_limits.right-350 && this.node.y < this.node.wall_limits.top+200:
               this.$dom.attr('pos', 'bottom-left');
               break;
-            case n.x > n.wall_limits.right-350:
+            case this.node.x > this.node.wall_limits.right-350:
               this.$dom.attr('pos', 'top-left');
               break;
-            case n.y < n.wall_limits.top+200:
+            case this.node.y < this.node.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);
+        };
+
+        NodePopUp.prototype.setContent = function(){
+          // console.log(this.node);
+          this.$content.html('');
+          var $entrees = $('<div>').addClass('entrees');
+          for (var i = 0; i < this.node.entrees.length; i++) {
+            var tid = this.node.entrees[i];
+            $entrees.append($('<span>').addClass('entree').attr('tid', tid));
+          }
+          this.$content
+            .append($entrees)
+            .append('<h2 class="title">'+this.node.title+'</h2>')
+            .append('<section class="description">'+this.node.description+'</section>');
+
+          // TODO: favoris marker
         };
 
         NodePopUp.prototype.removeNode = function(){
+          console.log('NodePopUp removeNode()');
           this.node = false;
         };
 

sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss

@@ -16,6 +16,13 @@ canvas#corpus-map{
   // width:100%; height:100%;
   z-index:0;
 }
+
+
+//  _  _         _     ___          _   _
+// | \| |___  __| |___| _ \___ _ __| | | |_ __
+// | .` / _ \/ _` / -_)  _/ _ \ '_ \ |_| | '_ \
+// |_|\_\___/\__,_\___|_| \___/ .__/\___/| .__/
+//                            |_|        |_|
 div.node-popup{
   // display:none;
   // outline: 1px dotted green;
@@ -25,6 +32,7 @@ div.node-popup{
   width:300px; min-height: 30px;
   pointer-events: none;
   top:60%; left:30%;
+  pointer-events: none;
 
   .inner{
     padding:1em;

sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php

@@ -17,6 +17,7 @@ class CorpusController extends ControllerBase {
    */
   public function contentjson() {
 
+
     // @see https://www.droptica.com/blog/drupal-8-restjson-integration-simple-javascript-application/
     // @see https://www.sitepoint.com/drupal-8-version-entityfieldquery/
     // @see https://www.frobiovox.com/posts/2016/03/28/simplify-drupal-8-field-value-calls.html
@@ -36,14 +37,26 @@ class CorpusController extends ControllerBase {
     $nids = $query->execute();
     $nodes = entity_load_multiple('node', $nids);
 
+    $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
+
     $nodes_data = [];
     foreach ($nodes as $node) {
 
+      // this is ideal but it's too heavy to load : the whole ajax json goes from 138kb to 1.23Md (even optimized)...
+      // $node_builder = $view_builder->view($node, 'popup');
+
+
       $entrees = [];
       foreach ($node->get('field_entrees')->getValue() as $key => $term) {
         $entrees[] = $term['target_id'];
       }
-      $son_fid = $node->get('field_son')->getValue();
+
+      $description_values = $node->get('field_description')->getValue();
+      $description = count($description_values) ? $description_values[0]['value'] : "";
+      // dpm($description);
+
+      $field_son_values = $node->get('field_son')->getValue();
+      $son_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : "";
       // TODO: how to get this fucking file uri, fuck !!
       // $son_file = $file_storage->load($fid);
       // $son_file = File::load($son_fid);
@@ -51,13 +64,16 @@ class CorpusController extends ControllerBase {
       // $son_uri = \Drupal\file\Entity\File::load($son_fid);//->getFileUri();
       // $son_uri = file_create_url($node->get('field_son')->entity->getFileUri());
 
+      // TODO: favoris marker
+
       $nodes_data[] = array(
         "nid" => $node->get('nid')->getString(),
         "title" => $node->get('title')->getString(),
-        "description" => $node->get('field_description')->getString(),
+        "description" => $description,
+        "entrees" => $entrees,
         "son_fid" => $son_fid,
         // "son" => $son_file,
-        "entrees" => $entrees,
+        // "popup_content" => render($node_builder), // trop lourd
       );
     }
 

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

@@ -1352,12 +1352,12 @@ body.path-productions .layout-content .row {
         padding: 0 1em; }
 
 footer {
+  pointer-events: none;
   display: table;
   padding: 0 0 0.5em 0; }
   footer > .region {
     display: table-cell;
-    white-space: nowrap;
-    pointer-events: all; }
+    white-space: nowrap; }
   footer .region-footer-left {
     text-align: left; }
   footer .region-footer-center {
@@ -1371,6 +1371,7 @@ footer {
       margin: 0;
       padding: 0; }
       footer nav.block-menu ul li {
+        pointer-events: all;
         display: inline-block;
         position: relative;
         list-style: none;
@@ -1400,7 +1401,8 @@ footer {
       transform-origin: left bottom;
       -webkit-transform: rotateZ(-45deg);
       transform: rotateZ(-45deg);
-      white-space: nowrap; }
+      white-space: nowrap;
+      pointer-events: all; }
       footer .block-language ul li {
         margin: 0;
         padding: 0;
@@ -1415,26 +1417,28 @@ footer {
           font-size: 0.756em; }
         footer .block-language ul li.is-active a {
           color: red; }
-  body:not(.path-productions) footer #block-productions {
-    display: none; }
-  footer #block-productions ul {
-    white-space: nowrap; }
-    footer #block-productions ul li a {
-      pointer-events: all;
-      background-color: #fff;
-      padding-right: 0.4em; }
-      footer #block-productions ul li a:before {
-        content: "";
-        display: inline-block;
-        width: 7px;
-        height: 7px;
-        border: 1px solid red;
-        margin-right: 0.5em; }
-      footer #block-productions ul li a:hover:before {
-        background-color: red; }
-      footer #block-productions ul li a.ajax-loading:before {
-        -webkit-animation: rotation 2s infinite linear;
-        animation: rotation 2s infinite linear; }
+  footer #block-productions {
+    pointer-events: none; }
+    body:not(.path-productions) footer #block-productions {
+      display: none; }
+    footer #block-productions ul {
+      white-space: nowrap; }
+      footer #block-productions ul li a {
+        pointer-events: all;
+        background-color: #fff;
+        padding-right: 0.4em; }
+        footer #block-productions ul li a:before {
+          content: "";
+          display: inline-block;
+          width: 7px;
+          height: 7px;
+          border: 1px solid red;
+          margin-right: 0.5em; }
+        footer #block-productions ul li a:hover:before {
+          background-color: red; }
+        footer #block-productions ul li a.ajax-loading:before {
+          -webkit-animation: rotation 2s infinite linear;
+          animation: rotation 2s infinite linear; }
 
 @keyframes rotation {
   from {
@@ -1444,6 +1448,7 @@ footer {
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg); } }
   footer .block-block-edlp-entrees {
+    pointer-events: none;
     display: inline-block; }
     body:not(.path-frontpage) footer .block-block-edlp-entrees {
       display: none; }
@@ -1643,3 +1648,57 @@ footer {
       height: 200px;
       opacity: 1;
       pointer-events: auto; }
+
+.node-popup .inner .entrees span {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: black;
+  margin-right: 3px; }
+  .node-popup .inner .entrees span[tid='134'] {
+    background-color: #2b8f2f; }
+  .node-popup .inner .entrees span[tid='121'] {
+    background-color: #3a33b6; }
+  .node-popup .inner .entrees span[tid='125'] {
+    background-color: #2c9f57; }
+  .node-popup .inner .entrees span[tid='119'] {
+    background-color: #c48978; }
+  .node-popup .inner .entrees span[tid='132'] {
+    background-color: #5270bb; }
+  .node-popup .inner .entrees span[tid='122'] {
+    background-color: #fb54d3; }
+  .node-popup .inner .entrees span[tid='129'] {
+    background-color: #e07483; }
+  .node-popup .inner .entrees span[tid='120'] {
+    background-color: #655845; }
+  .node-popup .inner .entrees span[tid='130'] {
+    background-color: #7e0868; }
+  .node-popup .inner .entrees span[tid='118'] {
+    background-color: #0e7121; }
+  .node-popup .inner .entrees span[tid='127'] {
+    background-color: #dabd42; }
+  .node-popup .inner .entrees span[tid='133'] {
+    background-color: #0399bb; }
+  .node-popup .inner .entrees span[tid='128'] {
+    background-color: #399a1c; }
+  .node-popup .inner .entrees span[tid='124'] {
+    background-color: #708540; }
+  .node-popup .inner .entrees span[tid='116'] {
+    background-color: #191bff; }
+  .node-popup .inner .entrees span[tid='117'] {
+    background-color: #279d84; }
+  .node-popup .inner .entrees span[tid='131'] {
+    background-color: #5219ab; }
+  .node-popup .inner .entrees span[tid='126'] {
+    background-color: #d49cb6; }
+  .node-popup .inner .entrees span[tid='123'] {
+    background-color: #497715; }
+
+.node-popup .inner .title {
+  margin: 0.3em 0;
+  font-size: 1.2em;
+  font-weight: 500; }
+
+.node-popup .inner .description p {
+  margin: 0;
+  font-size: 0.75em; }

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

@@ -312,13 +312,16 @@ body.path-productions{
 }
 
 footer{
+  pointer-events: none;
+  // outline: 1px dotted blue;
   // text-align: center;
   display: table;
   padding: 0 0 0.5em 0;
+
   >.region{
     display: table-cell;
     white-space: nowrap;
-    pointer-events: all;
+    // pointer-events: none;
     // outline: 1px dotted purple;
     // position: relative;
   }
@@ -332,6 +335,7 @@ footer{
       margin:0;
       padding:0;
       li{
+        pointer-events: all;
         @include oblique-list;
       }
     }
@@ -348,6 +352,7 @@ footer{
       transform-origin: left bottom;
       transform: rotateZ(-45deg);
       white-space: nowrap;
+      pointer-events: all;
       li{
         margin:0; padding:0;
         list-style: none;
@@ -372,6 +377,7 @@ footer{
 
   #block-productions{
 
+    pointer-events: none;
     body:not(.path-productions) & {display:none}
 
     ul{
@@ -402,7 +408,7 @@ footer{
   }
 
   .block-block-edlp-entrees{
-
+    pointer-events: none;
     body:not(.path-frontpage) & {display:none}
 
     display: inline-block;
@@ -631,3 +637,53 @@ footer{
   }
 
 }
+
+
+//  _  _         _       ___
+// | \| |___  __| |___  | _ \___ _ __ _  _ _ __
+// | .` / _ \/ _` / -_) |  _/ _ \ '_ \ || | '_ \
+// |_|\_\___/\__,_\___| |_| \___/ .__/\_,_| .__/
+//                              |_|       |_|
+.node-popup{
+  .inner{
+    .entrees{
+      span{
+        display:inline-block;
+        $s:8px;
+        width:$s; height:$s;
+        background-color: black;
+        margin-right: 3px;
+        &[tid='134']{background-color: $e_col_134;}
+        &[tid='121']{background-color: $e_col_121;}
+        &[tid='125']{background-color: $e_col_125;}
+        &[tid='119']{background-color: $e_col_119;}
+        &[tid='132']{background-color: $e_col_132;}
+        &[tid='122']{background-color: $e_col_122;}
+        &[tid='129']{background-color: $e_col_129;}
+        &[tid='120']{background-color: $e_col_120;}
+        &[tid='130']{background-color: $e_col_130;}
+        &[tid='118']{background-color: $e_col_118;}
+        &[tid='127']{background-color: $e_col_127;}
+        &[tid='133']{background-color: $e_col_133;}
+        &[tid='128']{background-color: $e_col_128;}
+        &[tid='124']{background-color: $e_col_124;}
+        &[tid='116']{background-color: $e_col_116;}
+        &[tid='117']{background-color: $e_col_117;}
+        &[tid='131']{background-color: $e_col_131;}
+        &[tid='126']{background-color: $e_col_126;}
+        &[tid='123']{background-color: $e_col_123;}
+      }
+    }
+    .title{
+      margin:0.3em 0;
+      font-size: 1.2em;
+      font-weight: 500;
+    }
+    .description{
+      p{
+        margin:0;
+        font-size: 0.75em;
+      }
+    }
+  }
+}

sites/default/config/sync/core.entity_view_display.node.enregistrement.default.yml

@@ -95,6 +95,8 @@ content:
       audio_player_initial_volume: 8
       audio_player_autoplay: false
       download_link: false
+      audio_player_lazyload: false
+      download_button: false
     third_party_settings: {  }
     type: audiofield_audioplayer
     region: content