chutier icon added to corpus map nodepopup

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

@@ -21,7 +21,7 @@
 
   EdlpCorpus = function(){
     var _activated = true;
-    var _$container = $('body');
+    var _$body = _$container = $('body');
     var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
     var _canvas = _$canvas[0];
     var _ctx = _canvas.getContext('2d');
@@ -37,6 +37,8 @@
     var _articles_nodes = [];
     var _no_articles_nodes = [];
     var _nodes_by_entries = {};
+    var _nodes_by_nid = {};
+
     // var _particules = [];
     // var _base_radius = 3; // nodes radius (real radius, not diametre)
     var _p_velocity_factor = 0.5;
@@ -182,6 +184,8 @@
       // record the node in different lists
       _nodes.push(this);
 
+      _nodes_by_nid[this.nid] = this;
+
       if(this.has_article == 1){
         _articles_nodes.push(this);
       }else{
@@ -664,6 +668,15 @@
         }
         return false;
       });
+
+      // $('body').trigger({
+      //       'type':'chutier-action-done',
+      //       'action_done':data.action_done,
+      //       'target_id':$link.attr('target_id'),
+      //     });
+      _$body.on('chutier-action-done', function(e) {
+        _nodes_by_nid[e.target_id].chutier_action = e.new_action;
+      });
     };
 
     //  _  _         _     ___          _   _
@@ -718,10 +731,12 @@
             var tid = this.node.entrees[i];
             $entrees.append($('<span>').addClass('entree').attr('tid', tid));
           }
+          var $chutier_action = $('<span>').addClass('chutier-icon').attr('action', this.node.chutier_action);
           this.$content
             .append($entrees)
             .append('<h2 class="title">'+this.node.title+'</h2>')
-            .append('<section class="description">'+this.node.description+'</section>');
+            .append('<section class="description">'+this.node.description+'</section>')
+            .append($chutier_action);
 
           // TODO: favoris marker
         };

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

@@ -21,7 +21,7 @@
 
   EdlpCorpus = function(){
     var _activated = true;
-    var _$container = $('body');
+    var _$body = _$container = $('body');
     var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
     var _canvas = _$canvas[0];
     var _ctx = _canvas.getContext('2d');
@@ -37,6 +37,8 @@
     var _articles_nodes = [];
     var _no_articles_nodes = [];
     var _nodes_by_entries = {};
+    var _nodes_by_nid = {};
+
     // var _particules = [];
     // var _base_radius = 3; // nodes radius (real radius, not diametre)
     var _p_velocity_factor = 0.5;
@@ -182,6 +184,8 @@
       // record the node in different lists
       _nodes.push(this);
 
+      _nodes_by_nid[this.nid] = this;
+
       if(this.has_article == 1){
         _articles_nodes.push(this);
       }else{
@@ -664,6 +668,15 @@
         }
         return false;
       });
+
+      // $('body').trigger({
+      //       'type':'chutier-action-done',
+      //       'action_done':data.action_done,
+      //       'target_id':$link.attr('target_id'),
+      //     });
+      _$body.on('chutier-action-done', function(e) {
+        _nodes_by_nid[e.target_id].chutier_action = e.new_action;
+      });
     };
 
     //  _  _         _     ___          _   _
@@ -718,10 +731,12 @@
             var tid = this.node.entrees[i];
             $entrees.append($('<span>').addClass('entree').attr('tid', tid));
           }
+          var $chutier_action = $('<span>').addClass('chutier-icon').attr('action', this.node.chutier_action);
           this.$content
             .append($entrees)
             .append('<h2 class="title">'+this.node.title+'</h2>')
-            .append('<section class="description">'+this.node.description+'</section>');
+            .append('<section class="description">'+this.node.description+'</section>')
+            .append($chutier_action);
 
           // TODO: favoris marker
         };

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

@@ -86,6 +86,7 @@ class CorpusController extends ControllerBase {
         // "son_fid" => $son_fid,
         "son_url" => $son_url,
         "has_article" => $has_article,
+        "chutier_action" => 'add',
       );
     }
 

sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js

@@ -20,18 +20,7 @@
   function onClickAjaxLink(e){
     console.log('studio onClickAjaxLink chutier');
     e.preventDefault();
-    // var $this = $(this);
     addRemoveToChutier($(this));
-    // switch($this.attr('action')){
-    //   case 'add':
-    //     // TODO: get target chutier
-    //     addToChutier($this);
-    //     break;
-    //   case 'remove':
-    //     // TODO: if we use more than one chutoer per user get target chutier
-    //     removeFromChutier($this);
-    //     break;
-    // }
     return false;
   };
 
@@ -51,6 +40,12 @@
 
   function onActionToChutierDone($link, data){
     console.log('onActionToChutierDone',data);
+    $('body').trigger({
+      'type':'chutier-action-done',
+      'action_done':data.action_done,
+      'new_action':data.action_done == 'add' ? 'remove' : 'add',
+      'target_id':$link.attr('target_id'),
+    });
     $link.replaceWith(data.new_link);
     initAjax();
   };

sites/all/modules/figli/edlp_studio/src/Controller/ChutierController.php

@@ -97,6 +97,7 @@ class ChutierController extends ControllerBase {
       'status' => $status,
       'message' => $message,
       'new_link' => $new_link,
+      'action_done' => $action,
     );
     $response->setData($data);
     return $response;

sites/all/modules/figli/edlp_studio/src/Entity/Chutier.php

@@ -284,7 +284,7 @@ class Chutier extends ContentEntityBase implements ChutierInterface {
     );
     $url = Url::fromRoute('edlp_studio.chutier_controller_ajax_add_content', $args, array(
       'attributes' => array(
-        'class' => ['chutier-link','chutier-ajax-link'],
+        'class' => ['chutier-icon','chutier-link','chutier-ajax-link'],
         'action' => $action,
         'target_id' => $id,
       )

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

@@ -1457,7 +1457,7 @@ body.ajax-loading main[role="main"]:before {
   #audio-player.is-playing .btns .play-pause {
     background-image: url(../img/audio-player-pause.svg); }
 
-a.chutier-link {
+.chutier-icon {
   display: block;
   width: 1em;
   height: 1em;
@@ -1469,9 +1469,9 @@ a.chutier-link {
   background-image: url(../img/favori-off.svg);
   -webkit-transition: opacity 0.2s ease-in-out;
   transition: opacity 0.2s ease-in-out; }
-  a.chutier-link[action="remove"] {
+  .chutier-icon[action="remove"] {
     background-image: url(../img/favori-on.svg); }
-  a.chutier-link.ajax-loading {
+  .chutier-icon.ajax-loading {
     opacity: 0.2; }
 
 body.path-agenda main .col > .wrapper {
@@ -1842,56 +1842,60 @@ footer {
       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; }
+.node-popup .inner {
+  position: relative; }
+  .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; }
+  .node-popup .inner .chutier-icon {
+    position: absolute;
+    top: 1em;
+    right: 1em; }

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

@@ -386,8 +386,7 @@ main[role="main"]{
  // / __| |_ _  _ __| (_)___
  // \__ \  _| || / _` | / _ \
  // |___/\__|\_,_\__,_|_\___/
-
-a.chutier-link{
+.chutier-icon{
   display: block;
   width:1em;height:1em;
   overflow: hidden;
@@ -883,6 +882,7 @@ footer{
 //                              |_|       |_|
 .node-popup{
   .inner{
+    position: relative;
     .entrees{
       span{
         @include entrie-micro-square;
@@ -899,5 +899,9 @@ footer{
         font-size: 0.75em;
       }
     }
+    .chutier-icon{
+      position:absolute;
+      top:1em; right:1em;
+    }
   }
 }