articles filter is working

This commit is contained in:
Bachir Soussi Chiadmi
2018-03-09 17:13:27 +01:00
parent 07e5560361
commit ae91e6517d
5 changed files with 228 additions and 22 deletions
@@ -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 @@
});
};
// _ _ _ ___ _ _
// | \| |___ __| |___| _ \___ _ __| | | |_ __
// | .` / _ \/ _` / -_) _/ _ \ '_ \ |_| | '_ \
@@ -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 @@
});
};
// _ _ _ ___ _ _
// | \| |___ __| |___| _ \___ _ __| | | |_ __
// | .` / _ \/ _` / -_) _/ _ \ '_ \ |_| | '_ \
@@ -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'
// );
}
}
@@ -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 {
@@ -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;