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

improved node popup placement with corpus evolution_zone, fix #540

Browse Source
This commit is contained in:
bachir
2019-12-02 16:40:40 +01:00
parent b645a5e3ee
commit 4433431b9c
4 changed files with 33 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/modules/custom/edlp_corpus/assets/dist/scripts/corpus.min.js
Vendored
+2 -2
View File
@@ -26,14 +26,14 @@ newVelY1=(ma-mb)/Smamb*na.p.velocity.y+2*mb/Smamb*nb.p.velocity.y;newVelY2=(mb-m
newVelX1=(ma-mb)/Smamb*na.p.velocity.x+2*mb/Smamb*nb.p.velocity.x;newVelX2=(mb-ma)/Smamb*nb.p.velocity.x+2*ma/Smamb*na.p.velocity.x;na.p.velocity.x=newVelX1;nb.p.velocity.x=newVelX2;}
na.p.velocity.multiplyScalar(0.90);nb.p.velocity.multiplyScalar(0.90);}}};function openNodeByNid(nid){closeNode();if(typeof _nodes_Nid_Id[nid]!='undefined'){_node_opened_id=_nodes_Nid_Id[nid];_nodes[_nodes_Nid_Id[nid]].open();}}
function closeNode(){if(_node_opened_id!=-1){_nodes[_node_opened_id].close();_node_opened_id=-1;}}
function createNodesRepulsions(){purgeNodesRepulsions();for(var n=0;n<_nodes_centered.length;n++){for(var q=n+1;q<_nodes_centered.length;q++){_physics.makeAttraction(_nodes_centered[n].p,_nodes_centered[q].p,-0.4,10);}}};function purgeNodesRepulsions(){for(var a=_physics.attractions.length-1;a>=0;a--){if(Math.abs(_physics.attractions[a].constant)<1){_physics.attractions.splice(a,1);}else{break;}}};function moveEvolutionZone(l,r){var left=l||0;var right=r||0;_evolution_zone.left=Math.max(_scene_props.width/5,left+20);_evolution_zone.right=Math.min(_scene_props.width-_scene_props.width/5,_scene_props.width-right+20);_evolution_zone.center=_evolution_zone.left+(_evolution_zone.right-_evolution_zone.left)/2;resizePhysics();}
function createNodesRepulsions(){purgeNodesRepulsions();for(var n=0;n<_nodes_centered.length;n++){for(var q=n+1;q<_nodes_centered.length;q++){_physics.makeAttraction(_nodes_centered[n].p,_nodes_centered[q].p,-0.4,10);}}};function purgeNodesRepulsions(){for(var a=_physics.attractions.length-1;a>=0;a--){if(Math.abs(_physics.attractions[a].constant)<1){_physics.attractions.splice(a,1);}else{break;}}};function moveEvolutionZone(l,r){var left=l||0;var right=r||0;void 0;void 0;_evolution_zone.left=left==0?left+20:Math.max(_scene_props.width/5,left+20);_evolution_zone.right=right==0?_scene_props.width-right+20:Math.min(_scene_props.width-_scene_props.width/5,_scene_props.width-right+20);_evolution_zone.center=_evolution_zone.left+(_evolution_zone.right-_evolution_zone.left)/2;void 0;resizePhysics();}
function updateRandomPlaylist(p){_$canvas.trigger({type:'update-random-playlist',playlist:p})};function toggleEntree(tid,bubbling){var $link=_$entrees_block_termlinks.filter('[tid="'+tid+'"]');var $li=$link.parents('li');var sys_path=$link.attr('data-drupal-link-system-path');var url=$link.attr('href');var title=$link.text();if(!$li.is('.opened')){_$entrees_block_termlinks.parents('li').removeClass('opened');$li.addClass('opened');$li.parents('.item-list').addClass('opened')
filterEntree(tid);if(bubbling){_$body.trigger({'type':'open_entree','tid':tid,'url':url,'sys_path':sys_path,'title':title});}}else if(bubbling){$li.removeClass('opened');$li.parents('.item-list').removeClass('opened')
scrambleCollection();_$body.trigger({'type':'close_entree','tid':tid});}};function filterEntree(t){_nodes_centered=[];for(var n=0;n<_nodes.length;n++){if(_nodes[n].entrees.indexOf(t)==-1){_nodes[n].setAside();}else{_nodes[n].setCenteredOnEntree(t);_nodes_centered.push(_nodes[n]);}}
updateRandomPlaylist(_nodes_centered);createNodesRepulsions();};function highlightEntries(){_$entrees_block_termlinks.parents('li').removeClass('highlighted').parents('.item-list').removeClass('highlighted');var id=-1;if(_node_hover_id!=-1){id=_node_hover_id;}else if(_node_opened_id!=-1){id=_node_opened_id;}
var entree;if(id!=-1){for(var i=0;i<_nodes[id].entrees.length;i++){entree=_nodes[id].entrees[i];_$entrees_block_termlinks.filter(function(){return $(this).attr('tid')==entree;}).parents('li').addClass('highlighted').parents('.item-list').addClass('highlighted');}}};function filterByNids(nids){_nodes_centered=[];for(var n=0;n<_nodes.length;n++){if(nids.indexOf(_nodes[n].nid)==-1){_nodes[n].setAside();}else{_nodes[n].setCentered();_nodes_centered.push(_nodes[n]);}}
updateRandomPlaylist(_nodes_centered);createNodesRepulsions();};function scrambleCollection(){for(var i=0;i<_nodes.length;i++){_nodes[i].scramble();}
updateRandomPlaylist(_playlist);};function closeAllEntries(){_$entrees_block_termlinks.each(function(index,el){if($(this).parents('li').is('.opened')){$(this).trigger('click');return false;}});};function initArtilesLink(){var href=window.location.origin+drupalSettings.path.baseUrl+_settings.articlesindex_url;_$articles_link=$('<a>').html('Articles').attr("href",href).attr("data-drupal-link-system-path",_settings.articlesindex_url).addClass('articles-link ajax-link');$('.item-list ul',_$entrees_block).append($('<li>').append($('<span class="oblique-wrapper">').append(_$articles_link)));};function initEvents(){void 0;_$canvas.on('mousemove',function(event){event.preventDefault();_m_pos.x=event.originalEvent.clientX;_m_pos.y=event.originalEvent.clientY;}).on('mouseenter',function(event){_mouse_in=true;}).on('mouseout',function(event){_mouse_in=false;_node_pop_up.removeNode();}).on('click',function(event){if(event.target.tagName!="A"&&event.target.tagName!="INPUT"){event.preventDefault();if(_node_hover_id!=-1){var event={'type':'corpus-cliked-on-node','target_node':_nodes[_node_hover_id],};_$canvas.trigger(event);}else{_$canvas.trigger('corpus-cliked-on-map');}}}).on('mouseover-audio-link',function(e){void 0;_nodes_by_nid[e.nid].setHover();}).on('mouseout-audio-link',function(e){void 0;_nodes_by_nid[e.nid].unsetHover();}).on('audio-node-opened',function(e){openNodeByNid(e.nid);}).on('audio-node-closed',function(e){closeNode();}).on('open-entree',function(e){toggleEntree(e.tid);}).on('close-all-entree',function(e){closeAllEntries();}).on('scramble-collection',function(e){void 0;scrambleCollection();}).on('shuffle-collection',function(e){void 0;onResizeCanvas();});_$entrees_block_termlinks.on('click',function(event){event.preventDefault();toggleEntree($(this).attr('tid'),true);return false;});_$body.on('chutier-action-done',function(e){_nodes_by_nid[e.target_id].chutier_action=e.new_action;}).on('ajax-node-loaded-linked-documents',function(e){void 0;filterByNids(e.nids);}).on('search-results-loaded',function(e){filterByNids(e.results);}).on('search-closed',function(e){scrambleCollection();}).on('new-content-not-entree-ajax-loaded',function(e){if(_$entrees_block_termlinks.parents('li.opened').length){_$entrees_block_termlinks.parents('li').removeClass('opened').parents('.item-list').removeClass('opened');scrambleCollection();}}).on('visible-space-changed',function(e){moveEvolutionZone(e.left_limit,e.right_limit);});};function checkPreOpenedEntry(){_$entrees_block.find('li.entree').each(function(index,el){var $li=$(this);if($('a.is-active',$li).length){$li.addClass('opened').parents('.item-list').addClass('opened');filterEntree($li.attr('tid'));return false;}});};function initNodePopup(){_node_pop_up=new NodePopUp();};function NodePopUp(){this.visible=false;this.node;this.$dom=$('<div>').addClass('node-popup').attr('pos','top-right').appendTo('body');this.$content=$('<div>').addClass('inner').appendTo(this.$dom);if(typeof NodePopUp.initialized=="undefined"){NodePopUp.prototype.setNode=function(n){this.node=n;this.setPositioning();this.setContent();};NodePopUp.prototype.setPositioning=function(){switch(true){case this.node.x>this.node.wall_limits.right-350&&this.node.y<this.node.wall_limits.top+200:this.$dom.attr('pos','bottom-left');break;case this.node.x>this.node.wall_limits.right-350:this.$dom.attr('pos','top-left');break;case this.node.y<this.node.wall_limits.top+200:this.$dom.attr('pos','bottom-right');break;default:this.$dom.attr('pos','top-right');}};NodePopUp.prototype.setContent=function(){this.$content.html('');var $entrees=$('<div>').addClass('entrees');for(var i=0;i<this.node.entrees.length;i++){var tid=this.node.entrees[i];$entrees.append($('<span>').addClass('entree').attr('tid',tid));}
updateRandomPlaylist(_playlist);};function closeAllEntries(){_$entrees_block_termlinks.each(function(index,el){if($(this).parents('li').is('.opened')){$(this).trigger('click');return false;}});};function initArtilesLink(){var href=window.location.origin+drupalSettings.path.baseUrl+_settings.articlesindex_url;_$articles_link=$('<a>').html('Articles').attr("href",href).attr("data-drupal-link-system-path",_settings.articlesindex_url).addClass('articles-link ajax-link');$('.item-list ul',_$entrees_block).append($('<li>').append($('<span class="oblique-wrapper">').append(_$articles_link)));};function initEvents(){void 0;_$canvas.on('mousemove',function(event){event.preventDefault();_m_pos.x=event.originalEvent.clientX;_m_pos.y=event.originalEvent.clientY;}).on('mouseenter',function(event){_mouse_in=true;}).on('mouseout',function(event){_mouse_in=false;_node_pop_up.removeNode();}).on('click',function(event){if(event.target.tagName!="A"&&event.target.tagName!="INPUT"){event.preventDefault();if(_node_hover_id!=-1){var event={'type':'corpus-cliked-on-node','target_node':_nodes[_node_hover_id],};_$canvas.trigger(event);}else{_$canvas.trigger('corpus-cliked-on-map');}}}).on('mouseover-audio-link',function(e){void 0;_nodes_by_nid[e.nid].setHover();}).on('mouseout-audio-link',function(e){void 0;_nodes_by_nid[e.nid].unsetHover();}).on('audio-node-opened',function(e){openNodeByNid(e.nid);}).on('audio-node-closed',function(e){closeNode();}).on('open-entree',function(e){toggleEntree(e.tid);}).on('close-all-entree',function(e){closeAllEntries();}).on('scramble-collection',function(e){void 0;scrambleCollection();}).on('shuffle-collection',function(e){void 0;onResizeCanvas();});_$entrees_block_termlinks.on('click',function(event){event.preventDefault();toggleEntree($(this).attr('tid'),true);return false;});_$body.on('chutier-action-done',function(e){_nodes_by_nid[e.target_id].chutier_action=e.new_action;}).on('ajax-node-loaded-linked-documents',function(e){void 0;filterByNids(e.nids);}).on('search-results-loaded',function(e){filterByNids(e.results);}).on('search-closed',function(e){scrambleCollection();}).on('new-content-not-entree-ajax-loaded',function(e){if(_$entrees_block_termlinks.parents('li.opened').length){_$entrees_block_termlinks.parents('li').removeClass('opened').parents('.item-list').removeClass('opened');scrambleCollection();}}).on('visible-space-changed',function(e){moveEvolutionZone(e.left_limit,e.right_limit);});};function checkPreOpenedEntry(){_$entrees_block.find('li.entree').each(function(index,el){var $li=$(this);if($('a.is-active',$li).length){$li.addClass('opened').parents('.item-list').addClass('opened');filterEntree($li.attr('tid'));return false;}});};function initNodePopup(){_node_pop_up=new NodePopUp();};function NodePopUp(){this.visible=false;this.node;this.$dom=$('<div>').addClass('node-popup').attr('pos','top-right').appendTo('body');this.$content=$('<div>').addClass('inner').appendTo(this.$dom);if(typeof NodePopUp.initialized=="undefined"){NodePopUp.prototype.setNode=function(n){this.node=n;this.setPositioning();this.setContent();};NodePopUp.prototype.setPositioning=function(){switch(true){case this.node.x>_evolution_zone.right-350&&this.node.y<this.node.wall_limits.top+200:this.$dom.attr('pos','bottom-left');break;case this.node.x>_evolution_zone.right-350:this.$dom.attr('pos','top-left');break;case this.node.y<this.node.wall_limits.top+200:this.$dom.attr('pos','bottom-right');break;default:this.$dom.attr('pos','top-right');}};NodePopUp.prototype.setContent=function(){this.$content.html('');var $entrees=$('<div>').addClass('entrees');for(var i=0;i<this.node.entrees.length;i++){var tid=this.node.entrees[i];$entrees.append($('<span>').addClass('entree').attr('tid',tid));}
var $chutier_action=$('<span>').addClass('chutier-icon').attr('action',this.node.chutier_action);this.$content.append($entrees).append('<h2 class="title">'+this.node.title+'</h2>').append('<section class="description">'+this.node.description+'</section>').append($chutier_action);};NodePopUp.prototype.removeNode=function(){this.node=false;};NodePopUp.prototype.draw=function(){if(this.node){this.$dom.css({'display':"block",'left':this.node.x+"px",'top':this.node.y+"px",});}else{this.$dom.css({'display':"none",});}};NodePopUp.initialized=true;}}
function render(){_ctx.clearRect(0,0,_scene_props.width,_scene_props.height);checkParticulesCollisions();for(var i=0;i<_nodes.length;i++){_nodes[i].onUpdate();}
_node_pop_up.draw();if(_node_hover_id!=-1){_canvas.style.cursor='pointer';}else{_canvas.style.cursor='auto';}
web/modules/custom/edlp_corpus/assets/scripts/corpus.js
+26 -4
View File
@@ -755,9 +755,18 @@
function moveEvolutionZone(l, r){
var left = l || 0;
var right = r || 0;
_evolution_zone.left = Math.max(_scene_props.width/5, left+20);
_evolution_zone.right = Math.min(_scene_props.width - _scene_props.width/5, _scene_props.width-right+20);
console.log("moveEvolutionZone",left,right);
console.log("_scene_props", _scene_props);
_evolution_zone.left =
left == 0
? left+20
: Math.max(_scene_props.width/5, left+20);
_evolution_zone.right =
right == 0
? _scene_props.width-right+20
: Math.min(_scene_props.width - _scene_props.width/5, _scene_props.width-right+20);
_evolution_zone.center = _evolution_zone.left + (_evolution_zone.right - _evolution_zone.left)/2;
console.log("moveEvolutionZone",_evolution_zone);
// move _attracter to the center of the zone
resizePhysics();
}
@@ -1185,11 +1194,24 @@
};
NodePopUp.prototype.setPositioning = function(){
// switch(true){
// case this.node.x > this.node.wall_limits.right-350-_evolution_zone.right && this.node.y < this.node.wall_limits.top+200:
// this.$dom.attr('pos', 'bottom-left');
// break;
// case this.node.x > this.node.wall_limits.right-350-_evolution_zone.right:
// this.$dom.attr('pos', 'top-left');
// break;
// case this.node.y < this.node.wall_limits.top+200:
// this.$dom.attr('pos', 'bottom-right');
// break;
// default:
// this.$dom.attr('pos', 'top-right');
// }
switch(true){
case this.node.x > this.node.wall_limits.right-350 && this.node.y < this.node.wall_limits.top+200:
case this.node.x > _evolution_zone.right-350 && this.node.y < this.node.wall_limits.top+200:
this.$dom.attr('pos', 'bottom-left');
break;
case this.node.x > this.node.wall_limits.right-350:
case this.node.x > _evolution_zone.right-350:
this.$dom.attr('pos', 'top-left');
break;
case this.node.y < this.node.wall_limits.top+200: