chutier icon added to corpus map nodepopup

This commit is contained in:
Bachir Soussi Chiadmi
2018-03-11 19:17:20 +01:00
parent c0d185bb6d
commit 0f5d0d0884
8 changed files with 109 additions and 74 deletions
@@ -21,7 +21,7 @@
EdlpCorpus = function(){ EdlpCorpus = function(){
var _activated = true; var _activated = true;
var _$container = $('body'); var _$body = _$container = $('body');
var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container); var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
var _canvas = _$canvas[0]; var _canvas = _$canvas[0];
var _ctx = _canvas.getContext('2d'); var _ctx = _canvas.getContext('2d');
@@ -37,6 +37,8 @@
var _articles_nodes = []; var _articles_nodes = [];
var _no_articles_nodes = []; var _no_articles_nodes = [];
var _nodes_by_entries = {}; var _nodes_by_entries = {};
var _nodes_by_nid = {};
// var _particules = []; // var _particules = [];
// var _base_radius = 3; // nodes radius (real radius, not diametre) // var _base_radius = 3; // nodes radius (real radius, not diametre)
var _p_velocity_factor = 0.5; var _p_velocity_factor = 0.5;
@@ -182,6 +184,8 @@
// record the node in different lists // record the node in different lists
_nodes.push(this); _nodes.push(this);
_nodes_by_nid[this.nid] = this;
if(this.has_article == 1){ if(this.has_article == 1){
_articles_nodes.push(this); _articles_nodes.push(this);
}else{ }else{
@@ -664,6 +668,15 @@
} }
return false; 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]; var tid = this.node.entrees[i];
$entrees.append($('<span>').addClass('entree').attr('tid', tid)); $entrees.append($('<span>').addClass('entree').attr('tid', tid));
} }
var $chutier_action = $('<span>').addClass('chutier-icon').attr('action', this.node.chutier_action);
this.$content this.$content
.append($entrees) .append($entrees)
.append('<h2 class="title">'+this.node.title+'</h2>') .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 // TODO: favoris marker
}; };
@@ -21,7 +21,7 @@
EdlpCorpus = function(){ EdlpCorpus = function(){
var _activated = true; var _activated = true;
var _$container = $('body'); var _$body = _$container = $('body');
var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container); var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
var _canvas = _$canvas[0]; var _canvas = _$canvas[0];
var _ctx = _canvas.getContext('2d'); var _ctx = _canvas.getContext('2d');
@@ -37,6 +37,8 @@
var _articles_nodes = []; var _articles_nodes = [];
var _no_articles_nodes = []; var _no_articles_nodes = [];
var _nodes_by_entries = {}; var _nodes_by_entries = {};
var _nodes_by_nid = {};
// var _particules = []; // var _particules = [];
// var _base_radius = 3; // nodes radius (real radius, not diametre) // var _base_radius = 3; // nodes radius (real radius, not diametre)
var _p_velocity_factor = 0.5; var _p_velocity_factor = 0.5;
@@ -182,6 +184,8 @@
// record the node in different lists // record the node in different lists
_nodes.push(this); _nodes.push(this);
_nodes_by_nid[this.nid] = this;
if(this.has_article == 1){ if(this.has_article == 1){
_articles_nodes.push(this); _articles_nodes.push(this);
}else{ }else{
@@ -664,6 +668,15 @@
} }
return false; 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]; var tid = this.node.entrees[i];
$entrees.append($('<span>').addClass('entree').attr('tid', tid)); $entrees.append($('<span>').addClass('entree').attr('tid', tid));
} }
var $chutier_action = $('<span>').addClass('chutier-icon').attr('action', this.node.chutier_action);
this.$content this.$content
.append($entrees) .append($entrees)
.append('<h2 class="title">'+this.node.title+'</h2>') .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 // TODO: favoris marker
}; };
@@ -86,6 +86,7 @@ class CorpusController extends ControllerBase {
// "son_fid" => $son_fid, // "son_fid" => $son_fid,
"son_url" => $son_url, "son_url" => $son_url,
"has_article" => $has_article, "has_article" => $has_article,
"chutier_action" => 'add',
); );
} }
@@ -20,18 +20,7 @@
function onClickAjaxLink(e){ function onClickAjaxLink(e){
console.log('studio onClickAjaxLink chutier'); console.log('studio onClickAjaxLink chutier');
e.preventDefault(); e.preventDefault();
// var $this = $(this);
addRemoveToChutier($(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; return false;
}; };
@@ -51,6 +40,12 @@
function onActionToChutierDone($link, data){ function onActionToChutierDone($link, data){
console.log('onActionToChutierDone',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); $link.replaceWith(data.new_link);
initAjax(); initAjax();
}; };
@@ -97,6 +97,7 @@ class ChutierController extends ControllerBase {
'status' => $status, 'status' => $status,
'message' => $message, 'message' => $message,
'new_link' => $new_link, 'new_link' => $new_link,
'action_done' => $action,
); );
$response->setData($data); $response->setData($data);
return $response; return $response;
@@ -284,7 +284,7 @@ class Chutier extends ContentEntityBase implements ChutierInterface {
); );
$url = Url::fromRoute('edlp_studio.chutier_controller_ajax_add_content', $args, array( $url = Url::fromRoute('edlp_studio.chutier_controller_ajax_add_content', $args, array(
'attributes' => array( 'attributes' => array(
'class' => ['chutier-link','chutier-ajax-link'], 'class' => ['chutier-icon','chutier-link','chutier-ajax-link'],
'action' => $action, 'action' => $action,
'target_id' => $id, 'target_id' => $id,
) )
@@ -1457,7 +1457,7 @@ body.ajax-loading main[role="main"]:before {
#audio-player.is-playing .btns .play-pause { #audio-player.is-playing .btns .play-pause {
background-image: url(../img/audio-player-pause.svg); } background-image: url(../img/audio-player-pause.svg); }
a.chutier-link { .chutier-icon {
display: block; display: block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@@ -1469,9 +1469,9 @@ a.chutier-link {
background-image: url(../img/favori-off.svg); background-image: url(../img/favori-off.svg);
-webkit-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out;
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); } background-image: url(../img/favori-on.svg); }
a.chutier-link.ajax-loading { .chutier-icon.ajax-loading {
opacity: 0.2; } opacity: 0.2; }
body.path-agenda main .col > .wrapper { body.path-agenda main .col > .wrapper {
@@ -1842,56 +1842,60 @@ footer {
opacity: 1; opacity: 1;
pointer-events: auto; } pointer-events: auto; }
.node-popup .inner .entrees span { .node-popup .inner {
display: inline-block; position: relative; }
width: 8px; .node-popup .inner .entrees span {
height: 8px; display: inline-block;
background-color: black; width: 8px;
margin-right: 3px; } height: 8px;
.node-popup .inner .entrees span[tid='134'] { background-color: black;
background-color: #2b8f2f; } margin-right: 3px; }
.node-popup .inner .entrees span[tid='121'] { .node-popup .inner .entrees span[tid='134'] {
background-color: #3a33b6; } background-color: #2b8f2f; }
.node-popup .inner .entrees span[tid='125'] { .node-popup .inner .entrees span[tid='121'] {
background-color: #2c9f57; } background-color: #3a33b6; }
.node-popup .inner .entrees span[tid='119'] { .node-popup .inner .entrees span[tid='125'] {
background-color: #c48978; } background-color: #2c9f57; }
.node-popup .inner .entrees span[tid='132'] { .node-popup .inner .entrees span[tid='119'] {
background-color: #5270bb; } background-color: #c48978; }
.node-popup .inner .entrees span[tid='122'] { .node-popup .inner .entrees span[tid='132'] {
background-color: #fb54d3; } background-color: #5270bb; }
.node-popup .inner .entrees span[tid='129'] { .node-popup .inner .entrees span[tid='122'] {
background-color: #e07483; } background-color: #fb54d3; }
.node-popup .inner .entrees span[tid='120'] { .node-popup .inner .entrees span[tid='129'] {
background-color: #655845; } background-color: #e07483; }
.node-popup .inner .entrees span[tid='130'] { .node-popup .inner .entrees span[tid='120'] {
background-color: #7e0868; } background-color: #655845; }
.node-popup .inner .entrees span[tid='118'] { .node-popup .inner .entrees span[tid='130'] {
background-color: #0e7121; } background-color: #7e0868; }
.node-popup .inner .entrees span[tid='127'] { .node-popup .inner .entrees span[tid='118'] {
background-color: #dabd42; } background-color: #0e7121; }
.node-popup .inner .entrees span[tid='133'] { .node-popup .inner .entrees span[tid='127'] {
background-color: #0399bb; } background-color: #dabd42; }
.node-popup .inner .entrees span[tid='128'] { .node-popup .inner .entrees span[tid='133'] {
background-color: #399a1c; } background-color: #0399bb; }
.node-popup .inner .entrees span[tid='124'] { .node-popup .inner .entrees span[tid='128'] {
background-color: #708540; } background-color: #399a1c; }
.node-popup .inner .entrees span[tid='116'] { .node-popup .inner .entrees span[tid='124'] {
background-color: #191bff; } background-color: #708540; }
.node-popup .inner .entrees span[tid='117'] { .node-popup .inner .entrees span[tid='116'] {
background-color: #279d84; } background-color: #191bff; }
.node-popup .inner .entrees span[tid='131'] { .node-popup .inner .entrees span[tid='117'] {
background-color: #5219ab; } background-color: #279d84; }
.node-popup .inner .entrees span[tid='126'] { .node-popup .inner .entrees span[tid='131'] {
background-color: #d49cb6; } background-color: #5219ab; }
.node-popup .inner .entrees span[tid='123'] { .node-popup .inner .entrees span[tid='126'] {
background-color: #497715; } background-color: #d49cb6; }
.node-popup .inner .entrees span[tid='123'] {
.node-popup .inner .title { background-color: #497715; }
margin: 0.3em 0; .node-popup .inner .title {
font-size: 1.2em; margin: 0.3em 0;
font-weight: 500; } font-size: 1.2em;
font-weight: 500; }
.node-popup .inner .description p { .node-popup .inner .description p {
margin: 0; margin: 0;
font-size: 0.75em; } font-size: 0.75em; }
.node-popup .inner .chutier-icon {
position: absolute;
top: 1em;
right: 1em; }
@@ -386,8 +386,7 @@ main[role="main"]{
// / __| |_ _ _ __| (_)___ // / __| |_ _ _ __| (_)___
// \__ \ _| || / _` | / _ \ // \__ \ _| || / _` | / _ \
// |___/\__|\_,_\__,_|_\___/ // |___/\__|\_,_\__,_|_\___/
.chutier-icon{
a.chutier-link{
display: block; display: block;
width:1em;height:1em; width:1em;height:1em;
overflow: hidden; overflow: hidden;
@@ -883,6 +882,7 @@ footer{
// |_| |_| // |_| |_|
.node-popup{ .node-popup{
.inner{ .inner{
position: relative;
.entrees{ .entrees{
span{ span{
@include entrie-micro-square; @include entrie-micro-square;
@@ -899,5 +899,9 @@ footer{
font-size: 0.75em; font-size: 0.75em;
} }
} }
.chutier-icon{
position:absolute;
top:1em; right:1em;
}
} }
} }