articles filter is working

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

@@ -34,6 +34,9 @@
     var _physics = new Physics();
     // var _stage = new createjs.Stage('corpus-map');
     var _nodes = [];
+    var _articles_nodes = [];
+    var _no_articles_nodes = [];
+    var _nodes_by_entries = {};
     // var _particules = [];
     // var _base_radius = 3; // nodes radius (real radius, not diametre)
     var _p_velocity_factor = 0.5;
@@ -42,6 +45,7 @@
     var _node_opened_id = -1;
     var _$entrees_block = $('#block-edlpentreesblock');
     var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
+    var _$articles_link;
     var _node_pop_up;
     // Colors depend on edlp_vars loaded by edlptheme
     // console.log('Corpus : edlp_vars', edlp_vars);
@@ -116,6 +120,7 @@
       // console.log('first node', data.nodes[0]);
       // buildParticles(data.nodes);
       initNodePopup();
+      initArtilesLink();
       buildNodes(data.nodes);
       initEvents();
       startAnime();
@@ -128,11 +133,16 @@
     // /_/ |_/\____/\__,_/\___/____/
     function buildNodes(nodes){
       console.log("buildNodes", nodes);
-      var x,y,d;
+      var d;
       for (var i in nodes) {
         d = i < 1 ? true : false;
-        _nodes.push(new Node(i,nodes[i],d));
+        // _nodes.push(new Node(i,nodes[i],d));
+        new Node(i,nodes[i],d);
       }
+      console.log('_nodes',_nodes);
+      console.log('_articles_nodes',_articles_nodes);
+      console.log('_no_articles_nodes',_no_articles_nodes);
+      console.log('_nodes_by_entries', _nodes_by_entries);
     };
 
     function Node(i,node,d){
@@ -140,6 +150,22 @@
       for(key in node)
         this[key] = node[key];
 
+      // record the node in different lists
+      _nodes.push(this);
+
+      if(this.has_article == 1){
+        _articles_nodes.push(this);
+      }else{
+        _no_articles_nodes.push(this);
+      }
+
+      for (var j = 0; j < this.entrees.length; j++) {
+        if(typeof _nodes_by_entries[this.entrees[j]] == 'undefined')
+          _nodes_by_entries[this.entrees[j]] = [];
+
+        _nodes_by_entries[this.entrees[j]].push(this);
+      }
+
       this.debug = d;
       this.mass = 8;
       this.velocity_threshold = 0.01;
@@ -160,6 +186,7 @@
 
       this.hover = false;
       this.opened = false;
+      this.faded = false;
 
       // prototypes
       if (typeof Node.initialized == "undefined") {
@@ -267,6 +294,16 @@
           this.opened = false;
         };
 
+        Node.prototype.fade = function(){
+          this.faded = true;
+        };
+
+        Node.prototype.unFade = function(){
+          this.faded = false;
+        };
+
+
+
         Node.prototype.draw = function(){
           // carre plein
           // clouleur aléatoire ds les entrees
@@ -277,8 +314,9 @@
           // actif entouré de rouge
 
           _ctx.beginPath();
-          _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
-          // _ctx.fillStyle = edlp_vars[this.e_color];
+          // _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
+          _ctx.globalAlpha = this.faded ? 0.1 : 1;
+          _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){
@@ -286,7 +324,7 @@
             _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.globalAlpha = 1;
           _ctx.closePath();
         };
 
@@ -360,6 +398,7 @@
       _node_opened_id = id;
       _nodes[id].open();
     }
+
     function closeNode(){
       if(_node_opened_id != -1){
         _nodes[_node_opened_id].close();
@@ -367,6 +406,55 @@
       }
     }
 
+
+    //    _       _   _    _
+    //   /_\  _ _| |_(_)__| |___ ___
+    //  / _ \| '_|  _| / _| / -_|_-<
+    // /_/ \_\_|  \__|_\__|_\___/__/
+    function initArtilesLink(){
+     // add "articles link to blockentrees"
+     _$articles_link = $('<a>')
+       .html('Articles')
+       .attr("href", "#articles")
+       .addClass('articles-link')
+       .on('click', onCLickedOnArticles);
+
+       $('.item-list ul',_$entrees_block).append(
+         $('<li>').append(
+           $('<span class="oblique-wrapper">').append(_$articles_link)
+         )
+       );
+    };
+
+    function onCLickedOnArticles(e){
+      e.preventDefault();
+      $(this).toggleClass('is-active');
+      if($(this).is('.is-active')){
+        filterArticles();
+      }else{
+        resetArticlesFilter();
+      }
+      // _$canvas.trigger({
+      //   'type':'corpus-cliqued-on-articles'
+      // });
+      return false;
+    };
+
+    function filterArticles(){
+      console.log('filterArticles');
+      for (var i = 0; i < _no_articles_nodes.length; i++) {
+        _no_articles_nodes[i].fade();
+      }
+    };
+
+    function resetArticlesFilter(){
+      console.log('resetArticlesFilter');
+      for (var i = 0; i < _no_articles_nodes.length; i++) {
+        _no_articles_nodes[i].unFade();
+      }
+    };
+
+
     //     ______                 __
     //    / ____/   _____  ____  / /______
     //   / __/ | | / / _ \/ __ \/ __/ ___/
@@ -422,8 +510,6 @@
       });
     };
 
-
-
     //  _  _         _     ___          _   _
     // | \| |___  __| |___| _ \___ _ __| | | |_ __
     // | .` / _ \/ _` / -_)  _/ _ \ '_ \ |_| | '_ \

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

@@ -34,6 +34,9 @@
     var _physics = new Physics();
     // var _stage = new createjs.Stage('corpus-map');
     var _nodes = [];
+    var _articles_nodes = [];
+    var _no_articles_nodes = [];
+    var _nodes_by_entries = {};
     // var _particules = [];
     // var _base_radius = 3; // nodes radius (real radius, not diametre)
     var _p_velocity_factor = 0.5;
@@ -42,6 +45,7 @@
     var _node_opened_id = -1;
     var _$entrees_block = $('#block-edlpentreesblock');
     var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
+    var _$articles_link;
     var _node_pop_up;
     // Colors depend on edlp_vars loaded by edlptheme
     // console.log('Corpus : edlp_vars', edlp_vars);
@@ -116,6 +120,7 @@
       // console.log('first node', data.nodes[0]);
       // buildParticles(data.nodes);
       initNodePopup();
+      initArtilesLink();
       buildNodes(data.nodes);
       initEvents();
       startAnime();
@@ -128,11 +133,16 @@
     // /_/ |_/\____/\__,_/\___/____/
     function buildNodes(nodes){
       console.log("buildNodes", nodes);
-      var x,y,d;
+      var d;
       for (var i in nodes) {
         d = i < 1 ? true : false;
-        _nodes.push(new Node(i,nodes[i],d));
+        // _nodes.push(new Node(i,nodes[i],d));
+        new Node(i,nodes[i],d);
       }
+      console.log('_nodes',_nodes);
+      console.log('_articles_nodes',_articles_nodes);
+      console.log('_no_articles_nodes',_no_articles_nodes);
+      console.log('_nodes_by_entries', _nodes_by_entries);
     };
 
     function Node(i,node,d){
@@ -140,6 +150,22 @@
       for(key in node)
         this[key] = node[key];
 
+      // record the node in different lists
+      _nodes.push(this);
+
+      if(this.has_article == 1){
+        _articles_nodes.push(this);
+      }else{
+        _no_articles_nodes.push(this);
+      }
+
+      for (var j = 0; j < this.entrees.length; j++) {
+        if(typeof _nodes_by_entries[this.entrees[j]] == 'undefined')
+          _nodes_by_entries[this.entrees[j]] = [];
+
+        _nodes_by_entries[this.entrees[j]].push(this);
+      }
+
       this.debug = d;
       this.mass = 8;
       this.velocity_threshold = 0.01;
@@ -160,6 +186,7 @@
 
       this.hover = false;
       this.opened = false;
+      this.faded = false;
 
       // prototypes
       if (typeof Node.initialized == "undefined") {
@@ -267,6 +294,16 @@
           this.opened = false;
         };
 
+        Node.prototype.fade = function(){
+          this.faded = true;
+        };
+
+        Node.prototype.unFade = function(){
+          this.faded = false;
+        };
+
+
+
         Node.prototype.draw = function(){
           // carre plein
           // clouleur aléatoire ds les entrees
@@ -277,8 +314,9 @@
           // actif entouré de rouge
 
           _ctx.beginPath();
-          _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
-          // _ctx.fillStyle = edlp_vars[this.e_color];
+          // _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
+          _ctx.globalAlpha = this.faded ? 0.1 : 1;
+          _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){
@@ -286,7 +324,7 @@
             _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.globalAlpha = 1;
           _ctx.closePath();
         };
 
@@ -360,6 +398,7 @@
       _node_opened_id = id;
       _nodes[id].open();
     }
+
     function closeNode(){
       if(_node_opened_id != -1){
         _nodes[_node_opened_id].close();
@@ -367,6 +406,55 @@
       }
     }
 
+
+    //    _       _   _    _
+    //   /_\  _ _| |_(_)__| |___ ___
+    //  / _ \| '_|  _| / _| / -_|_-<
+    // /_/ \_\_|  \__|_\__|_\___/__/
+    function initArtilesLink(){
+     // add "articles link to blockentrees"
+     _$articles_link = $('<a>')
+       .html('Articles')
+       .attr("href", "#articles")
+       .addClass('articles-link')
+       .on('click', onCLickedOnArticles);
+
+       $('.item-list ul',_$entrees_block).append(
+         $('<li>').append(
+           $('<span class="oblique-wrapper">').append(_$articles_link)
+         )
+       );
+    };
+
+    function onCLickedOnArticles(e){
+      e.preventDefault();
+      $(this).toggleClass('is-active');
+      if($(this).is('.is-active')){
+        filterArticles();
+      }else{
+        resetArticlesFilter();
+      }
+      // _$canvas.trigger({
+      //   'type':'corpus-cliqued-on-articles'
+      // });
+      return false;
+    };
+
+    function filterArticles(){
+      console.log('filterArticles');
+      for (var i = 0; i < _no_articles_nodes.length; i++) {
+        _no_articles_nodes[i].fade();
+      }
+    };
+
+    function resetArticlesFilter(){
+      console.log('resetArticlesFilter');
+      for (var i = 0; i < _no_articles_nodes.length; i++) {
+        _no_articles_nodes[i].unFade();
+      }
+    };
+
+
     //     ______                 __
     //    / ____/   _____  ____  / /______
     //   / __/ | | / / _ \/ __ \/ __/ ___/
@@ -422,8 +510,6 @@
       });
     };
 
-
-
     //  _  _         _     ___          _   _
     // | \| |___  __| |___| _ \___ _ __| | | |_ __
     // | .` / _ \/ _` / -_)  _/ _ \ '_ \ |_| | '_ \

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

@@ -3,6 +3,7 @@
 namespace Drupal\edlp_corpus\Controller;
 
 use Drupal\Core\Controller\ControllerBase;
+use Drupal\workflow\Entity\WorkflowManager;
 use Drupal\File\Entity\File;
 use Symfony\Component\HttpFoundation\JsonResponse;
 
@@ -44,6 +45,10 @@ class CorpusController extends ControllerBase {
       // this would be 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');
 
+      // remove masqué
+      $sid = WorkflowManager::getCurrentStateId($node, 'field_workflow');
+      if($sid != 'corpus_documents_publie') continue;
+
       $entrees = [];
       foreach ($node->get('field_entrees')->getValue() as $key => $term) {
         $entrees[] = $term['target_id'];
@@ -57,10 +62,17 @@ class CorpusController extends ControllerBase {
       $son_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : "";
       $son_file = \Drupal\file\Entity\File::load($son_fid);
       $son_url = null;
-      if($son_file){
-        $son_uri = $son_file->getFileUri();
-        $son_url = file_create_url($son_uri);
-      }
+      // if node don't have a sound file atteched, skip it
+      if(!$son_file) continue;
+
+      $son_uri = $son_file->getFileUri();
+      $son_url = file_create_url($son_uri);
+
+      // has article ?
+      $article_value = $node->body->getValue();
+      $has_article = count($article_value);
+      // if($has_article && $article_value[0]['value'] == "")
+      //   dpm($article_value);
 
       // TODO: favoris marker
 
@@ -71,6 +83,7 @@ class CorpusController extends ControllerBase {
         "entrees" => $entrees,
         // "son_fid" => $son_fid,
         "son_url" => $son_url,
+        "has_article" => $has_article,
       );
     }
 
@@ -94,6 +107,9 @@ class CorpusController extends ControllerBase {
     $response->setData($data);
 
     return $response;
+    // return array(
+    //   '#markup'=>'Hello Corpus'
+    // );
   }
 
 }

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

@@ -1639,17 +1639,22 @@ footer {
           vertical-align: bottom;
           position: relative;
           width: 1.5em; }
-        footer .block-block-edlp-entrees ul li a.term-link {
+        footer .block-block-edlp-entrees ul li a.term-link, footer .block-block-edlp-entrees ul li a.articles-link {
           pointer-events: all;
           background-color: #fff;
           padding-right: 0.4em; }
-          footer .block-block-edlp-entrees ul li a.term-link:before {
+          footer .block-block-edlp-entrees ul li a.term-link:before, footer .block-block-edlp-entrees ul li a.articles-link:before {
             content: "";
             display: inline-block;
             width: 7px;
             height: 7px;
             border: 1px solid #000;
-            margin-right: 0.5em; }
+            background-color: #000;
+            margin-right: 0.5em;
+            -webkit-transition: background-color 0.1s ease-in-out;
+            transition: background-color 0.1s ease-in-out; }
+          footer .block-block-edlp-entrees ul li a.term-link.articles-link, footer .block-block-edlp-entrees ul li a.articles-link.articles-link {
+            margin-left: 2em; }
         footer .block-block-edlp-entrees ul li .entree-content {
           display: inline-block;
           width: 0;
@@ -1746,6 +1751,8 @@ footer {
           background-color: #497715; }
         footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:not(:hover):not(.is-active):before {
           background-color: #fff !important; }
+        footer .block-block-edlp-entrees ul li a.articles-link:not(:hover):not(.is-active):before {
+          background-color: #fff !important; }
         footer .block-block-edlp-entrees ul li:not(.opened) a.term-link:not(:hover):not(.highlighted):before {
           background-color: #fff !important; }
         footer .block-block-edlp-entrees ul li.opened a.term-link:after {

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

@@ -613,7 +613,7 @@ footer{
           width:1.5em;
         }
 
-        a.term-link{
+        a.term-link, a.articles-link{
           // outline: 1px solid blue;
           pointer-events: all;
           background-color: #fff;
@@ -624,7 +624,13 @@ footer{
             $sq:7px;
             width: $sq; height:$sq;
             border: 1px solid #000;
+            background-color: #000;
             margin-right: 0.5em;
+            transition: background-color 0.1s ease-in-out;
+          }
+
+          &.articles-link{
+            margin-left: 2em;
           }
         }
 
@@ -735,6 +741,11 @@ footer{
         // }
         .entree-content span.oblique-wrapper a:not(:hover):not(.is-active):before{background-color: #fff!important;}
 
+        a.articles-link:not(:hover):not(.is-active):before{
+          background-color: #fff!important;
+        }
+
+
         &:not(.opened){
           a.term-link:not(:hover):not(.highlighted):before{
             background-color: #fff!important;