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

filtering collection map by entries is working

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-09 21:28:09 +01:00
parent ae91e6517d
commit 7bfb04a025
4 changed files with 313 additions and 63 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
+155 -31
View File
@@ -49,6 +49,10 @@
var _node_pop_up;
// Colors depend on edlp_vars loaded by edlptheme
// console.log('Corpus : edlp_vars', edlp_vars);
// Physics
var _attracter;
var _repulser;
// ____ _ __
// / _/___ (_) /______
@@ -89,6 +93,7 @@
_canvas.height = window.innerHeight;
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].onResizeCanvas();
// TODO: move _attracter and _repulser to the center again
}
};
@@ -121,11 +126,31 @@
// buildParticles(data.nodes);
initNodePopup();
initArtilesLink();
initPhysics();
buildNodes(data.nodes);
initEvents();
startAnime();
};
// ___ _ _
// | _ \ |_ _ _ __(_)__ ___
// | _/ ' \ || (_-< / _(_-<
// |_| |_||_\_, /__/_\__/__/
// |__/
function initPhysics(){
_attracter = _physics.makeParticle(1000, _canvas.width/2, _canvas.height/2);
_attracter.fixed = true;
_repulser_center = _physics.makeParticle(100, _canvas.width/2, _canvas.height/2);
_repulser_center.fixed = true;
_repulser_top = _physics.makeParticle(100, _canvas.width/2, 100);
_repulser_top.fixed = true;
_repulser_bottom = _physics.makeParticle(100, _canvas.width/2, _canvas.height-100);
_repulser_bottom.fixed = true;
// TODO: move _attracter and _repulser on window resize
};
// _ __ __
// / | / /___ ____/ /__ _____
// / |/ / __ \/ __ / _ \/ ___/
@@ -167,7 +192,7 @@
}
this.debug = d;
this.mass = 8;
this.mass = Math.max(1, this.entrees.length); //1;
this.velocity_threshold = 0.01;
// define radius regarding entries length
switch(true){
@@ -187,6 +212,8 @@
this.hover = false;
this.opened = false;
this.faded = false;
this.center = false;
this.aside = false;
// prototypes
if (typeof Node.initialized == "undefined") {
@@ -198,8 +225,19 @@
this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
// physics
// particule
this.p = _physics.makeParticle(this.mass, this.x, this.y);
this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
// attracter
this.attract = _physics.makeAttraction(_attracter, this.p, 100, _canvas.width*2);
this.attract.on = false;
// repulsers
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
this.repulse_center.on = false;
// this.repulse_left = _physics.makeAttraction(_repulser_top, this.p, -100, _canvas.height/3);
// this.repulse_left.on = false;
// this.repulse_right = _physics.makeAttraction(_repulser_bottom, this.p, -100, _canvas.height/3);
// this.repulse_right.on = false;
// if(this.id == '620'){
// _node_pop_up.setNode(this);
@@ -221,15 +259,17 @@
};
Node.prototype.onUpdate = function(){
// if(this.id == 0){
// console.log(_physics.playing);
// }
if(!this.p.resting()){
this.checkVelocityThreshold();
// this.p.velocity.multiplyScalar(0.99);
// if(!this.p.resting()){
// this.checkVelocityThreshold();
this.checkWallBouncing();
this.updatePos();
}
this.checkMouse();
// }
if(!this.aside)
this.checkMouse();
// if(this.debug)
// console.log("Node pos: ", {x:this.x, y:this.y});
this.draw();
@@ -244,20 +284,38 @@
};
Node.prototype.checkWallBouncing = function(){
if(
(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 < 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);
switch(true){
case this.x < this.wall_limits.left && this.p.velocity.x < 0:
this.p.position.x = this.wall_limits.left;
this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
break;
case this.x > this.wall_limits.right && this.p.velocity.x > 0:
this.p.position.x = this.wall_limits.right;
this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
break;
case this.y < this.wall_limits.top && this.p.velocity.y < 0 :
this.p.position.y = this.wall_limits.top;
this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
break;
case this.y > this.wall_limits.bottom && this.p.velocity.y > 0 :
this.p.position.y = this.wall_limits.bottom;
this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
break;
}
// if(
// (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 < 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);
// }
};
Node.prototype.updatePos = function(){
@@ -272,7 +330,7 @@
&& _m_pos.y > this.y - this.r
&& _m_pos.y < this.y + this.r){
if(_node_hover_id == -1 || _node_hover_id !== this.id){
console.log("Node hover", this.id);
// console.log("Node hover", this.id);
this.hover = true;
_node_hover_id = this.id;
_node_pop_up.setNode(this);
@@ -289,7 +347,6 @@
Node.prototype.open = function(){
this.opened = true;
};
Node.prototype.close = function(){
this.opened = false;
};
@@ -297,12 +354,34 @@
Node.prototype.fade = function(){
this.faded = true;
};
Node.prototype.unFade = function(){
this.faded = false;
};
Node.prototype.setCentered = function(){
this.center = true;
this.unsetAside();
this.unFade();
this.attract.on = true;
}
Node.prototype.unsetCentered = function(){
this.center = false;
this.attract.on = false;
}
Node.prototype.setAside = function(){
this.aside = true;
this.fade();
this.unsetCentered();
this.repulse_center.on = true;
// this.repulse_left.on = true;
// this.repulse_right.on = true;
}
Node.prototype.unsetAside = function(){
this.aside = false;
this.repulse_center.on = false;
// this.repulse_left.on = false;
// this.repulse_right.on = false;
}
Node.prototype.draw = function(){
// carre plein
@@ -314,9 +393,9 @@
// actif entouré de rouge
_ctx.beginPath();
// _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.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
// _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){
@@ -345,7 +424,16 @@
for (var q = n+1; q < _nodes.length; q++) {
if(q===n) continue;
// if(!_nodes[q].moving) continue;
// avoid impact between center and aside particules
if((_nodes[n].center && _nodes[q].aside) || (_nodes[n].aside && _nodes[q].center))
continue;
// avoid impact between two centered particulses that comes to the center
if(_nodes[n].center && _nodes[q].center){
if(Math.min(_nodes[n].p.distanceTo(_attracter), _nodes[q].p.distanceTo(_attracter)) > 300){
if( Math.random()>0.3 ) continue;
}
}
d = _nodes[n].p.distanceTo(_nodes[q].p);
@@ -369,13 +457,14 @@
_nodes[q].p.velocity.x = newVelX2;
_nodes[q].p.velocity.y = newVelY2;
_nodes[n].p.velocity.multiplyScalar(0.85);
_nodes[q].p.velocity.multiplyScalar(0.85);
// slow down particule on impact
_nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.95 : 0.90);
_nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.95 : 0.90);
// move particles if they overlap
if (d < full_rad) {
makeup = full_rad/2 - d/2;
makeup = (full_rad/2 - d/2)*1.2;
angle = Math.atan2(_nodes[q].p.position.y - _nodes[n].p.position.y, _nodes[q].p.position.x - _nodes[n].p.position.x);
_nodes[q].p.position.x += makeup * Math.cos(angle);
@@ -406,6 +495,38 @@
}
}
// ___ _
// | __|_ _| |_ _ _ ___ ___ ___
// | _|| ' \ _| '_/ -_) -_|_-<
// |___|_||_\__|_| \___\___/__/
function filterEntree(t){
// for (tid of _nodes_by_entries) {
for (var n = 0; n < _nodes.length; n++) {
if(_nodes[n].entrees.indexOf(t) == -1){
_nodes[n].setAside();
}else{
_nodes[n].setCentered();
}
}
// for (var i = 0; i < _nodes_by_entries[t].length; i++) {
// // _nodes_by_entries[t][i].unsetAside();
// _nodes_by_entries[t][i].setCentered();
// }
// for (var tid in _nodes_by_entries) {
// if (tid == t) continue;
// for (var i = 0; i < _nodes_by_entries[tid].length; i++) {
// // _nodes_by_entries[tid][i].unsetCentered();
// _nodes_by_entries[tid][i].setAside();
// }
// }
};
function resetFilterEntree(){
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].unsetAside();
}
};
// _ _ _ _
// /_\ _ _| |_(_)__| |___ ___
@@ -499,12 +620,15 @@
_$entrees_block_termlinks.on('click', function(event) {
event.preventDefault();
var tid = $(this).attr('tid');
var $li = $(this).parents('li');
if(!$li.is('.opened')){
_$entrees_block_termlinks.parents('li').removeClass('opened');
$li.addClass('opened');
filterEntree(tid);
}else{
$li.removeClass('opened');
resetFilterEntree(tid);
}
return false;
});
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+155 -31
View File
@@ -49,6 +49,10 @@
var _node_pop_up;
// Colors depend on edlp_vars loaded by edlptheme
// console.log('Corpus : edlp_vars', edlp_vars);
// Physics
var _attracter;
var _repulser;
// ____ _ __
// / _/___ (_) /______
@@ -89,6 +93,7 @@
_canvas.height = window.innerHeight;
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].onResizeCanvas();
// TODO: move _attracter and _repulser to the center again
}
};
@@ -121,11 +126,31 @@
// buildParticles(data.nodes);
initNodePopup();
initArtilesLink();
initPhysics();
buildNodes(data.nodes);
initEvents();
startAnime();
};
// ___ _ _
// | _ \ |_ _ _ __(_)__ ___
// | _/ ' \ || (_-< / _(_-<
// |_| |_||_\_, /__/_\__/__/
// |__/
function initPhysics(){
_attracter = _physics.makeParticle(1000, _canvas.width/2, _canvas.height/2);
_attracter.fixed = true;
_repulser_center = _physics.makeParticle(100, _canvas.width/2, _canvas.height/2);
_repulser_center.fixed = true;
_repulser_top = _physics.makeParticle(100, _canvas.width/2, 100);
_repulser_top.fixed = true;
_repulser_bottom = _physics.makeParticle(100, _canvas.width/2, _canvas.height-100);
_repulser_bottom.fixed = true;
// TODO: move _attracter and _repulser on window resize
};
// _ __ __
// / | / /___ ____/ /__ _____
// / |/ / __ \/ __ / _ \/ ___/
@@ -167,7 +192,7 @@
}
this.debug = d;
this.mass = 8;
this.mass = Math.max(1, this.entrees.length); //1;
this.velocity_threshold = 0.01;
// define radius regarding entries length
switch(true){
@@ -187,6 +212,8 @@
this.hover = false;
this.opened = false;
this.faded = false;
this.center = false;
this.aside = false;
// prototypes
if (typeof Node.initialized == "undefined") {
@@ -198,8 +225,19 @@
this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
// physics
// particule
this.p = _physics.makeParticle(this.mass, this.x, this.y);
this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
// attracter
this.attract = _physics.makeAttraction(_attracter, this.p, 100, _canvas.width*2);
this.attract.on = false;
// repulsers
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
this.repulse_center.on = false;
// this.repulse_left = _physics.makeAttraction(_repulser_top, this.p, -100, _canvas.height/3);
// this.repulse_left.on = false;
// this.repulse_right = _physics.makeAttraction(_repulser_bottom, this.p, -100, _canvas.height/3);
// this.repulse_right.on = false;
// if(this.id == '620'){
// _node_pop_up.setNode(this);
@@ -221,15 +259,17 @@
};
Node.prototype.onUpdate = function(){
// if(this.id == 0){
// console.log(_physics.playing);
// }
if(!this.p.resting()){
this.checkVelocityThreshold();
// this.p.velocity.multiplyScalar(0.99);
// if(!this.p.resting()){
// this.checkVelocityThreshold();
this.checkWallBouncing();
this.updatePos();
}
this.checkMouse();
// }
if(!this.aside)
this.checkMouse();
// if(this.debug)
// console.log("Node pos: ", {x:this.x, y:this.y});
this.draw();
@@ -244,20 +284,38 @@
};
Node.prototype.checkWallBouncing = function(){
if(
(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 < 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);
switch(true){
case this.x < this.wall_limits.left && this.p.velocity.x < 0:
this.p.position.x = this.wall_limits.left;
this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
break;
case this.x > this.wall_limits.right && this.p.velocity.x > 0:
this.p.position.x = this.wall_limits.right;
this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
break;
case this.y < this.wall_limits.top && this.p.velocity.y < 0 :
this.p.position.y = this.wall_limits.top;
this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
break;
case this.y > this.wall_limits.bottom && this.p.velocity.y > 0 :
this.p.position.y = this.wall_limits.bottom;
this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
break;
}
// if(
// (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 < 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);
// }
};
Node.prototype.updatePos = function(){
@@ -272,7 +330,7 @@
&& _m_pos.y > this.y - this.r
&& _m_pos.y < this.y + this.r){
if(_node_hover_id == -1 || _node_hover_id !== this.id){
console.log("Node hover", this.id);
// console.log("Node hover", this.id);
this.hover = true;
_node_hover_id = this.id;
_node_pop_up.setNode(this);
@@ -289,7 +347,6 @@
Node.prototype.open = function(){
this.opened = true;
};
Node.prototype.close = function(){
this.opened = false;
};
@@ -297,12 +354,34 @@
Node.prototype.fade = function(){
this.faded = true;
};
Node.prototype.unFade = function(){
this.faded = false;
};
Node.prototype.setCentered = function(){
this.center = true;
this.unsetAside();
this.unFade();
this.attract.on = true;
}
Node.prototype.unsetCentered = function(){
this.center = false;
this.attract.on = false;
}
Node.prototype.setAside = function(){
this.aside = true;
this.fade();
this.unsetCentered();
this.repulse_center.on = true;
// this.repulse_left.on = true;
// this.repulse_right.on = true;
}
Node.prototype.unsetAside = function(){
this.aside = false;
this.repulse_center.on = false;
// this.repulse_left.on = false;
// this.repulse_right.on = false;
}
Node.prototype.draw = function(){
// carre plein
@@ -314,9 +393,9 @@
// actif entouré de rouge
_ctx.beginPath();
// _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.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
// _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){
@@ -345,7 +424,16 @@
for (var q = n+1; q < _nodes.length; q++) {
if(q===n) continue;
// if(!_nodes[q].moving) continue;
// avoid impact between center and aside particules
if((_nodes[n].center && _nodes[q].aside) || (_nodes[n].aside && _nodes[q].center))
continue;
// avoid impact between two centered particulses that comes to the center
if(_nodes[n].center && _nodes[q].center){
if(Math.min(_nodes[n].p.distanceTo(_attracter), _nodes[q].p.distanceTo(_attracter)) > 300){
if( Math.random()>0.3 ) continue;
}
}
d = _nodes[n].p.distanceTo(_nodes[q].p);
@@ -369,13 +457,14 @@
_nodes[q].p.velocity.x = newVelX2;
_nodes[q].p.velocity.y = newVelY2;
_nodes[n].p.velocity.multiplyScalar(0.85);
_nodes[q].p.velocity.multiplyScalar(0.85);
// slow down particule on impact
_nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.95 : 0.90);
_nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.95 : 0.90);
// move particles if they overlap
if (d < full_rad) {
makeup = full_rad/2 - d/2;
makeup = (full_rad/2 - d/2)*1.2;
angle = Math.atan2(_nodes[q].p.position.y - _nodes[n].p.position.y, _nodes[q].p.position.x - _nodes[n].p.position.x);
_nodes[q].p.position.x += makeup * Math.cos(angle);
@@ -406,6 +495,38 @@
}
}
// ___ _
// | __|_ _| |_ _ _ ___ ___ ___
// | _|| ' \ _| '_/ -_) -_|_-<
// |___|_||_\__|_| \___\___/__/
function filterEntree(t){
// for (tid of _nodes_by_entries) {
for (var n = 0; n < _nodes.length; n++) {
if(_nodes[n].entrees.indexOf(t) == -1){
_nodes[n].setAside();
}else{
_nodes[n].setCentered();
}
}
// for (var i = 0; i < _nodes_by_entries[t].length; i++) {
// // _nodes_by_entries[t][i].unsetAside();
// _nodes_by_entries[t][i].setCentered();
// }
// for (var tid in _nodes_by_entries) {
// if (tid == t) continue;
// for (var i = 0; i < _nodes_by_entries[tid].length; i++) {
// // _nodes_by_entries[tid][i].unsetCentered();
// _nodes_by_entries[tid][i].setAside();
// }
// }
};
function resetFilterEntree(){
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].unsetAside();
}
};
// _ _ _ _
// /_\ _ _| |_(_)__| |___ ___
@@ -499,12 +620,15 @@
_$entrees_block_termlinks.on('click', function(event) {
event.preventDefault();
var tid = $(this).attr('tid');
var $li = $(this).parents('li');
if(!$li.is('.opened')){
_$entrees_block_termlinks.parents('li').removeClass('opened');
$li.addClass('opened');
filterEntree(tid);
}else{
$li.removeClass('opened');
resetFilterEntree(tid);
}
return false;
});
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+2 -1
View File
@@ -1654,7 +1654,8 @@ footer {
-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; }
margin-left: 2em;
text-transform: capitalize; }
footer .block-block-edlp-entrees ul li .entree-content {
display: inline-block;
width: 0;
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+1
View File
@@ -631,6 +631,7 @@ footer{
&.articles-link{
margin-left: 2em;
text-transform: capitalize;
}
}