bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

entrees block is displaying well and interact with map on mouse hover, map nodes are well drawn centered, map performance improvements, added domain contrib module and configured domain for mobile display

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-01-04 11:55:52 +01:00
parent 7b9de31a42
commit 57a9bcd721
270 changed files with 24298 additions and 1127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js
Vendored
+110 -68
View File
@@ -24,17 +24,21 @@
var _canvas = _$canvas[0];
var _ctx = _canvas.getContext('2d');
var _canvas_props = {
'margin-top':100,
'margin-bottom':100
'margin_top':100,
'margin_right':0,
'margin_bottom':100,
'margin_left':0
};
var _physics = new Physics();
// var _stage = new createjs.Stage('edlp-map');
var _nodes = [];
// var _particules = [];
var _p_radius = 6;
var _p_radius = 3; // nodes radius (real radius, not diametre)
var _p_velocity_factor = 0.5;
var _m_pos = {x:0, y:0};
var _node_hover_id = -1;
var _$entrees_block = $('#block-edlpentreesblock');
var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
var _entrees_colors = {
"130":"rgb(75, 143, 126)",
"121":"rgb(134, 142, 36)",
@@ -69,15 +73,14 @@
console.log("EdlpCorpus init()");
// console.log("document", document);
initMap();
};
function initMap(){
console.log("EdlpCorpus initMap()");
// console.log('_physics',_physics);
initCanvas();
initEvents();
loadCorpus();
};
// ______
@@ -93,38 +96,13 @@
function onResizeCanvas() {
_canvas.width = window.innerWidth;
_canvas.height = window.innerHeight - _canvas_props['margin-top'] - _canvas_props['margin-bottom'];
_canvas.style['margin-top'] = _canvas_props['margin-top']+"px";
_canvas.style['margin-bottom'] = _canvas_props['margin-bottom']+"px";
_canvas.height = window.innerHeight;
// - _canvas_props['margin-top'] - _canvas_props['margin-bottom'];
// _canvas.style['margin-top'] = _canvas_props['margin-top']+"px";
// _canvas.style['margin-bottom'] = _canvas_props['margin-bottom']+"px";
};
// ______ __
// / ____/ _____ ____ / /______
// / __/ | | / / _ \/ __ \/ __/ ___/
// / /___ | |/ / __/ / / / /_(__ )
// /_____/ |___/\___/_/ /_/\__/____/
function initEvents(){
_$container
.on('mousemove', function(event) {
event.preventDefault();
// console.log("onMouseMove", event);
_m_pos.x = event.originalEvent.clientX;
_m_pos.y = event.originalEvent.clientY;
// console.log("Node pos: ", {x:_nodes[0].x, y:_nodes[0].y});
// console.log("Mouse pos: ", {x:_m_pos.x, y:_m_pos.y});
})
.on('click', function(event) {
if(event.target.tagName != "A"){
console.log("Corpus : click", event);
event.preventDefault();
if(_node_hover_id != -1){
console.log("click on node", _nodes[_node_hover_id]);
}
}
});
};
// ___ _
// / | (_)___ __ __
// / /| | / / __ `/ |/_/
@@ -135,13 +113,16 @@
// console.log('drupalSettings',drupalSettings);
// console.log('window.location', window.location);
var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
$.getJSON(path, {}, function(data){
console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]);
// buildParticles(data.nodes);
buildNodes(data.nodes);
startAnime();
});
$.getJSON(path, {}, onCorpusLoaded);
};
function onCorpusLoaded(data){
console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]);
// buildParticles(data.nodes);
buildNodes(data.nodes);
initEvents();
startAnime();
};
// _ __ __
@@ -155,29 +136,35 @@
var x,y,d;
for (var i in nodes) {
// console.log('i',i);
x = _p_radius*2 + Math.random()*(_canvas.width - _p_radius*4);
y = _p_radius*2 + Math.random()*(_canvas.height - _p_radius*4);
d = i < 1 ? true : false;
_nodes.push(new Node(i,nodes[i],x,y,d));
// if(i==4)
_nodes.push(new Node(i,nodes[i],d));
// if(i==0)
// break;
}
};
function Node(i,n,x,y,d){
function Node(i,node,d){
this.id = i;
for(key in n)
this[key] = n[key];
for(key in node)
this[key] = node[key];
this.debug = d;
this.radius = _p_radius;
this.mass = 8;
this.base_radius = _p_radius;
this.g = {
l : 1, // drawing line width
s : 1 // drawing space between squares
};
this.real_radius = this.base_radius + (this.g.l+this.g.s)*this.entrees.length;
this.wall_limits = {
top: _canvas_props.margin_top +this.real_radius,
right: _canvas.width -_canvas_props.margin_right -this.real_radius,
bottom: _canvas.height -_canvas_props.margin_bottom -this.real_radius,
left: _canvas_props.margin_left +this.real_radius
}
this.x = x;
this.y = y;
this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
this.hover = false;
// physics
this.p = _physics.makeParticle(this.mass, this.x, this.y);
@@ -202,17 +189,16 @@
};
Node.prototype.checkWallBouncing = function(){
// TODO: correct waal bouncing with centered squares
if(
(this.x < 0 && this.p.velocity.x < 0)
|| (this.x > _canvas.width-this.radius && this.p.velocity.x > 0)
(this.x < this.wall_limits.left && this.p.velocity.x < 0)
|| (this.x > this.wall_limits.right && this.p.velocity.x > 0)
){
// console.log("bounce x");
this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
}
if(
(this.y < 0 && this.p.velocity.y < 0)
|| (this.y > _canvas.height-this.radius && this.p.velocity.y > 0)
(this.y < this.wall_limits.top && this.p.velocity.y < 0)
|| (this.y > this.wall_limits.bottom && this.p.velocity.y > 0)
){
// console.log("bounce y");
this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
@@ -225,36 +211,51 @@
};
Node.prototype.checkMouse = function(){
// TODO: get the real w and h of node (with entrees squares)
if( _m_pos.x > this.x
&& _m_pos.x < this.x+this.radius
&& _m_pos.y > this.y
&& _m_pos.y < this.y+this.radius){
if( _m_pos.x > this.x - this.real_radius
&& _m_pos.x < this.x + this.real_radius
&& _m_pos.y > this.y - this.real_radius
&& _m_pos.y < this.y + this.real_radius){
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;
}
}else{
this.hover = false;
if (_node_hover_id == this.id) {
_node_hover_id = -1;
_$entrees_block_termlinks.removeClass('highlighted');
}
}
};
Node.prototype.draw = function(){
// TODO: center the squares around the pos
_ctx.beginPath();
_ctx.lineWidth = this.g.l;
Node.prototype.highlightEntries = function(){
_$entrees_block_termlinks.removeClass('highlighted');
var entree;
for (var i = 0; i < this.entrees.length; i++) {
_ctx.strokeStyle = this.hover ? "red" : _entrees_colors[this.entrees[i]];
_ctx.strokeRect(this.x-4*i, this.y-4*i, this.radius+8*i, this.radius+8*i);
entree = this.entrees[i];
_$entrees_block_termlinks.filter(function(){
return $(this).attr('tid') == entree;
}).addClass('highlighted');
}
}
Node.prototype.draw = function(){
_ctx.beginPath();
_ctx.lineWidth = this.hover ? this.g.l*2 : this.g.l;
var r,d;
for (var i = 0; i < this.entrees.length; i++) {
_ctx.strokeStyle = _entrees_colors[this.entrees[i]];
r = this.base_radius + (this.g.l+this.g.s)*i; // radius
d = r*2; // diametre
_ctx.strokeRect(this.x - r,this.y - r,d,d);
}
_ctx.closePath();
// _ctx.beginPath();
// _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black";
// _ctx.fillRect(this.x, this.y, this.radius, this.radius);
// _ctx.fillRect(this.x, this.y, this.base_radius, this.base_radius);
// _ctx.closePath();
};
@@ -321,6 +322,42 @@
}
};
// ______ __
// / ____/ _____ ____ / /______
// / __/ | | / / _ \/ __ \/ __/ ___/
// / /___ | |/ / __/ / / / /_(__ )
// /_____/ |___/\___/_/ /_/\__/____/
function initEvents(){
_$container
.on('mousemove', function(event) {
event.preventDefault();
// console.log("onMouseMove", event);
_m_pos.x = event.originalEvent.clientX;
_m_pos.y = event.originalEvent.clientY;
// console.log("/ _ / - / _ /");
// console.log("Node pos: ", {x:_nodes[0].x, y:_nodes[0].y});
// console.log("Mouse pos: ", {x:_m_pos.x, y:_m_pos.y});
})
.on('click', function(event) {
if(event.target.tagName != "A"){
console.log("Corpus : click", event);
event.preventDefault();
if(_node_hover_id != -1){
console.log("click on node", _nodes[_node_hover_id]);
}
}
});
_$entrees_block_termlinks.on('click', function(event) {
event.preventDefault();
_$entrees_block_termlinks.parents('li').removeClass('opened');
$(this).parents('li').addClass('opened');
return false;
});
};
// ____ __
// / __ \___ ____ ____/ /__ _____
// / /_/ / _ \/ __ \/ __ / _ \/ ___/
@@ -332,6 +369,11 @@
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].onUpdate();
}
if(_node_hover_id != -1){
document.body.style.cursor = 'pointer';
}else{
document.body.style.cursor = 'auto';
}
};
function startAnime(){
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+110 -68
View File
@@ -24,17 +24,21 @@
var _canvas = _$canvas[0];
var _ctx = _canvas.getContext('2d');
var _canvas_props = {
'margin-top':100,
'margin-bottom':100
'margin_top':100,
'margin_right':0,
'margin_bottom':100,
'margin_left':0
};
var _physics = new Physics();
// var _stage = new createjs.Stage('edlp-map');
var _nodes = [];
// var _particules = [];
var _p_radius = 6;
var _p_radius = 3; // nodes radius (real radius, not diametre)
var _p_velocity_factor = 0.5;
var _m_pos = {x:0, y:0};
var _node_hover_id = -1;
var _$entrees_block = $('#block-edlpentreesblock');
var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
var _entrees_colors = {
"130":"rgb(75, 143, 126)",
"121":"rgb(134, 142, 36)",
@@ -69,15 +73,14 @@
console.log("EdlpCorpus init()");
// console.log("document", document);
initMap();
};
function initMap(){
console.log("EdlpCorpus initMap()");
// console.log('_physics',_physics);
initCanvas();
initEvents();
loadCorpus();
};
// ______
@@ -93,38 +96,13 @@
function onResizeCanvas() {
_canvas.width = window.innerWidth;
_canvas.height = window.innerHeight - _canvas_props['margin-top'] - _canvas_props['margin-bottom'];
_canvas.style['margin-top'] = _canvas_props['margin-top']+"px";
_canvas.style['margin-bottom'] = _canvas_props['margin-bottom']+"px";
_canvas.height = window.innerHeight;
// - _canvas_props['margin-top'] - _canvas_props['margin-bottom'];
// _canvas.style['margin-top'] = _canvas_props['margin-top']+"px";
// _canvas.style['margin-bottom'] = _canvas_props['margin-bottom']+"px";
};
// ______ __
// / ____/ _____ ____ / /______
// / __/ | | / / _ \/ __ \/ __/ ___/
// / /___ | |/ / __/ / / / /_(__ )
// /_____/ |___/\___/_/ /_/\__/____/
function initEvents(){
_$container
.on('mousemove', function(event) {
event.preventDefault();
// console.log("onMouseMove", event);
_m_pos.x = event.originalEvent.clientX;
_m_pos.y = event.originalEvent.clientY;
// console.log("Node pos: ", {x:_nodes[0].x, y:_nodes[0].y});
// console.log("Mouse pos: ", {x:_m_pos.x, y:_m_pos.y});
})
.on('click', function(event) {
if(event.target.tagName != "A"){
console.log("Corpus : click", event);
event.preventDefault();
if(_node_hover_id != -1){
console.log("click on node", _nodes[_node_hover_id]);
}
}
});
};
// ___ _
// / | (_)___ __ __
// / /| | / / __ `/ |/_/
@@ -135,13 +113,16 @@
// console.log('drupalSettings',drupalSettings);
// console.log('window.location', window.location);
var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
$.getJSON(path, {}, function(data){
console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]);
// buildParticles(data.nodes);
buildNodes(data.nodes);
startAnime();
});
$.getJSON(path, {}, onCorpusLoaded);
};
function onCorpusLoaded(data){
console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]);
// buildParticles(data.nodes);
buildNodes(data.nodes);
initEvents();
startAnime();
};
// _ __ __
@@ -155,29 +136,35 @@
var x,y,d;
for (var i in nodes) {
// console.log('i',i);
x = _p_radius*2 + Math.random()*(_canvas.width - _p_radius*4);
y = _p_radius*2 + Math.random()*(_canvas.height - _p_radius*4);
d = i < 1 ? true : false;
_nodes.push(new Node(i,nodes[i],x,y,d));
// if(i==4)
_nodes.push(new Node(i,nodes[i],d));
// if(i==0)
// break;
}
};
function Node(i,n,x,y,d){
function Node(i,node,d){
this.id = i;
for(key in n)
this[key] = n[key];
for(key in node)
this[key] = node[key];
this.debug = d;
this.radius = _p_radius;
this.mass = 8;
this.base_radius = _p_radius;
this.g = {
l : 1, // drawing line width
s : 1 // drawing space between squares
};
this.real_radius = this.base_radius + (this.g.l+this.g.s)*this.entrees.length;
this.wall_limits = {
top: _canvas_props.margin_top +this.real_radius,
right: _canvas.width -_canvas_props.margin_right -this.real_radius,
bottom: _canvas.height -_canvas_props.margin_bottom -this.real_radius,
left: _canvas_props.margin_left +this.real_radius
}
this.x = x;
this.y = y;
this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
this.hover = false;
// physics
this.p = _physics.makeParticle(this.mass, this.x, this.y);
@@ -202,17 +189,16 @@
};
Node.prototype.checkWallBouncing = function(){
// TODO: correct waal bouncing with centered squares
if(
(this.x < 0 && this.p.velocity.x < 0)
|| (this.x > _canvas.width-this.radius && this.p.velocity.x > 0)
(this.x < this.wall_limits.left && this.p.velocity.x < 0)
|| (this.x > this.wall_limits.right && this.p.velocity.x > 0)
){
// console.log("bounce x");
this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
}
if(
(this.y < 0 && this.p.velocity.y < 0)
|| (this.y > _canvas.height-this.radius && this.p.velocity.y > 0)
(this.y < this.wall_limits.top && this.p.velocity.y < 0)
|| (this.y > this.wall_limits.bottom && this.p.velocity.y > 0)
){
// console.log("bounce y");
this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
@@ -225,36 +211,51 @@
};
Node.prototype.checkMouse = function(){
// TODO: get the real w and h of node (with entrees squares)
if( _m_pos.x > this.x
&& _m_pos.x < this.x+this.radius
&& _m_pos.y > this.y
&& _m_pos.y < this.y+this.radius){
if( _m_pos.x > this.x - this.real_radius
&& _m_pos.x < this.x + this.real_radius
&& _m_pos.y > this.y - this.real_radius
&& _m_pos.y < this.y + this.real_radius){
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;
}
}else{
this.hover = false;
if (_node_hover_id == this.id) {
_node_hover_id = -1;
_$entrees_block_termlinks.removeClass('highlighted');
}
}
};
Node.prototype.draw = function(){
// TODO: center the squares around the pos
_ctx.beginPath();
_ctx.lineWidth = this.g.l;
Node.prototype.highlightEntries = function(){
_$entrees_block_termlinks.removeClass('highlighted');
var entree;
for (var i = 0; i < this.entrees.length; i++) {
_ctx.strokeStyle = this.hover ? "red" : _entrees_colors[this.entrees[i]];
_ctx.strokeRect(this.x-4*i, this.y-4*i, this.radius+8*i, this.radius+8*i);
entree = this.entrees[i];
_$entrees_block_termlinks.filter(function(){
return $(this).attr('tid') == entree;
}).addClass('highlighted');
}
}
Node.prototype.draw = function(){
_ctx.beginPath();
_ctx.lineWidth = this.hover ? this.g.l*2 : this.g.l;
var r,d;
for (var i = 0; i < this.entrees.length; i++) {
_ctx.strokeStyle = _entrees_colors[this.entrees[i]];
r = this.base_radius + (this.g.l+this.g.s)*i; // radius
d = r*2; // diametre
_ctx.strokeRect(this.x - r,this.y - r,d,d);
}
_ctx.closePath();
// _ctx.beginPath();
// _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black";
// _ctx.fillRect(this.x, this.y, this.radius, this.radius);
// _ctx.fillRect(this.x, this.y, this.base_radius, this.base_radius);
// _ctx.closePath();
};
@@ -321,6 +322,42 @@
}
};
// ______ __
// / ____/ _____ ____ / /______
// / __/ | | / / _ \/ __ \/ __/ ___/
// / /___ | |/ / __/ / / / /_(__ )
// /_____/ |___/\___/_/ /_/\__/____/
function initEvents(){
_$container
.on('mousemove', function(event) {
event.preventDefault();
// console.log("onMouseMove", event);
_m_pos.x = event.originalEvent.clientX;
_m_pos.y = event.originalEvent.clientY;
// console.log("/ _ / - / _ /");
// console.log("Node pos: ", {x:_nodes[0].x, y:_nodes[0].y});
// console.log("Mouse pos: ", {x:_m_pos.x, y:_m_pos.y});
})
.on('click', function(event) {
if(event.target.tagName != "A"){
console.log("Corpus : click", event);
event.preventDefault();
if(_node_hover_id != -1){
console.log("click on node", _nodes[_node_hover_id]);
}
}
});
_$entrees_block_termlinks.on('click', function(event) {
event.preventDefault();
_$entrees_block_termlinks.parents('li').removeClass('opened');
$(this).parents('li').addClass('opened');
return false;
});
};
// ____ __
// / __ \___ ____ ____/ /__ _____
// / /_/ / _ \/ __ \/ __ / _ \/ ___/
@@ -332,6 +369,11 @@
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].onUpdate();
}
if(_node_hover_id != -1){
document.body.style.cursor = 'pointer';
}else{
document.body.style.cursor = 'auto';
}
};
function startAnime(){
sites/all/modules/figli/edlp_corpus/src/Plugin/Block/BlockEntrees.php
+58 -5
View File
@@ -30,13 +30,66 @@ class BlockEntrees extends BlockBase {
$terms = entity_load_multiple('taxonomy_term', $tids);
// dsm($terms);
foreach ($terms as $term) {
// dpm($term->toArray());
$tid = $term->id();
$name = $term->getName();
$url = Url::fromRoute('entity.taxonomy_term.canonical', ['taxonomy_term' => $tid]);
$link = Link::fromTextAndUrl($name, $url);
$link = $link->toRenderable();
$link["#attributes"]["class"] = 'term-'.$term->id();
$entrees[] = $link;
$term_url = Url::fromRoute('entity.taxonomy_term.canonical', ['taxonomy_term' => $tid]);
$term_link = Link::fromTextAndUrl($name, $term_url)->toRenderable();
$term_link['#prefix'] = '<span class="oblique-wrapper">';
$term_link['#suffix'] = "</span>";
$term_link["#attributes"] = array(
"class" => array('term-'.$term->id(), 'term-link'),
"tid" => $term->id()
);
$index_url = Url::fromRoute('entity.taxonomy_term.canonical', ['taxonomy_term' => $tid]);
$index_link = Link::fromTextAndUrl('index', $index_url)->toRenderable();
$index_link['#prefix'] = '<span class="oblique-wrapper">';
$index_link['#suffix'] = "</span>";
$index_link['#attributes'] = array(
'class' => array('index-link'),
"tid" => $term->id()
);
$notice_url = Url::fromRoute('entity.taxonomy_term.canonical', ['taxonomy_term' => $tid]);
$notice_link = Link::fromTextAndUrl('notice', $notice_url)->toRenderable();
$notice_link['#prefix'] = '<span class="oblique-wrapper">';
$notice_link['#suffix'] = "</span>";
$notice_link['#attributes'] = array(
'class' => array('notice-link'),
"tid" => $term->id()
);
$description = $term->get('description')->value;
// dpm($description);
$entree = array(
'#wrapper_attributes' => array(
'class' => array('term-'.$term->id(), 'entree'),
'tid' => $term->id()
),
'term_link' => $term_link,
'entree_content' => array(
'#type' => 'container',
'#attributes' => array(
'class' => 'entree-content'
),
'index_link' => $index_link,
'notice_link' => $notice_link,
'description' => array(
'#type' => 'container',
'#markup' => $description,
'#attributes' => array('class'=>'term-description')
)
)
);
//
// dpm($entree);
$entrees[] = $entree;
}
return array (