diff --git a/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js b/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js index 7ed0c75ce..64545698d 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js +++ b/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js @@ -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; }); diff --git a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js index 7ed0c75ce..64545698d 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js +++ b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js @@ -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; }); diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css index a6e83b33a..9a630ebf7 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css +++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css @@ -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; diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index 0c767bbc4..0d8ead48c 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -631,6 +631,7 @@ footer{ &.articles-link{ margin-left: 2em; + text-transform: capitalize; } }