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

started to code the corpus nodepopup

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-05 18:57:47 +01:00
parent b64a2b289e
commit a494a0646a
6 changed files with 270 additions and 62 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
+105 -30
View File
@@ -41,7 +41,7 @@
var _node_hover_id = -1;
var _$entrees_block = $('#block-edlpentreesblock');
var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
var _node_pop_up;
// Colors depend on edlp_vars loaded by edlptheme
// console.log('Corpus : edlp_vars', edlp_vars);
@@ -97,7 +97,17 @@
// console.log('drupalSettings',drupalSettings);
// console.log('window.location', window.location);
var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
$.getJSON(path, {}, onCorpusLoaded);
$.getJSON(path, {})
.done(function(data){
onCorpusLoaded(data);
})
.fail(function(jqxhr, textStatus, error){
onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path);
});
};
function onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path){
console.warn('corpus load failed', jqxhr.responseText);
};
function onCorpusLoaded(data){
@@ -106,6 +116,7 @@
// buildParticles(data.nodes);
buildNodes(data.nodes);
initEvents();
initNodePopup();
startAnime();
};
@@ -114,16 +125,12 @@
// / |/ / __ \/ __ / _ \/ ___/
// / /| / /_/ / /_/ / __(__ )
// /_/ |_/\____/\__,_/\___/____/
function buildNodes(nodes){
console.log("buildNodes", nodes);
var x,y,d;
for (var i in nodes) {
// console.log('i',i);
d = i < 1 ? true : false;
_nodes.push(new Node(i,nodes[i],d));
// if(i==0)
// break;
}
};
@@ -167,21 +174,15 @@
this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
this.hover = false;
// physics
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);
// prototypes
if (typeof Node.initialized == "undefined") {
// Node.prototype.init = function(){
// // console.log("Node : init()", this);
// // this.draw();
// };
Node.prototype.calcWallLimits = function(){
this.wall_limits = {
top: _canvas_props.margin_top +this.r,
@@ -236,28 +237,29 @@
if(_node_hover_id == -1 || _node_hover_id == this.id){
// console.log("Node hover", this.id);
this.hover = true;
this.highlightEntries();
// this.highlightEntries();
_node_hover_id = this.id;
_node_pop_up.setNode(this);
}
}else{
this.hover = false;
if (_node_hover_id == this.id) {
_node_hover_id = -1;
_$entrees_block_termlinks.removeClass('highlighted');
_node_pop_up.removeNode();
}
}
};
Node.prototype.highlightEntries = function(){
_$entrees_block_termlinks.removeClass('highlighted');
var entree;
for (var i = 0; i < this.entrees.length; i++) {
entree = this.entrees[i];
_$entrees_block_termlinks.filter(function(){
return $(this).attr('tid') == entree;
}).addClass('highlighted');
}
}
// Node.prototype.highlightEntries = function(){
// _$entrees_block_termlinks.removeClass('highlighted');
// var entree;
// for (var i = 0; i < this.entrees.length; i++) {
// entree = this.entrees[i];
// _$entrees_block_termlinks.filter(function(){
// return $(this).attr('tid') == entree;
// }).addClass('highlighted');
// }
// }
Node.prototype.draw = function(){
// carre plein
@@ -415,6 +417,51 @@
};
// _ _ _ ___ _ _
// | \| |___ __| |___| _ \___ _ __| | | |_ __
// | .` / _ \/ _` / -_) _/ _ \ '_ \ |_| | '_ \
// |_|\_\___/\__,_\___|_| \___/ .__/\___/| .__/
// |_| |_|
function initNodePopup(){
_node_pop_up = new NodePopUp();
};
function NodePopUp(){
this.visible = false;
this.node;
this.$dom = $('<div>').addClass('node-popup').appendTo('body');
this.$content = $('<div>').addClass('inner').appendTo(this.$dom);
if (typeof NodePopUp.initialized == "undefined") {
NodePopUp.prototype.setNode = function(node){
this.node = node;
this.$content.html(this.node.title);
};
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;
}
}
// ____ __
// / __ \___ ____ ____/ /__ _____
// / /_/ / _ \/ __ \/ __ / _ \/ ___/
@@ -428,14 +475,42 @@
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].onUpdate();
}
// if(_node_hover_id != -1){
// _canvas.style.cursor = 'pointer';
// }else{
// _canvas.style.cursor = 'auto';
// }
_canvas.style.cursor = _node_hover_id != -1 ? 'pointer' : 'auto';
_node_pop_up.draw();
if(_node_hover_id != -1){
_canvas.style.cursor = 'pointer';
highlightEntries();
// _node_pop_up.visible = true;
}else{
_canvas.style.cursor = 'auto';
_$entrees_block_termlinks.removeClass('highlighted');
// _node_pop_up.visible = false;
}
};
// _ _ _ _ _ _ _ _ ___ _ _
// | || (_)__ _| |_ | |_(_)__ _| |_| |_| __|_ _| |_ _ _(_)___ ___
// | __ | / _` | ' \| / / / _` | ' \ _| _|| ' \ _| '_| / -_|_-<
// |_||_|_\__, |_||_|_\_\_\__, |_||_\__|___|_||_\__|_| |_\___/__/
// |___/ |___/
function highlightEntries(){
_$entrees_block_termlinks.removeClass('highlighted');
var entree;
for (var i = 0; i < _nodes[_node_hover_id].entrees.length; i++) {
entree = _nodes[_node_hover_id].entrees[i];
_$entrees_block_termlinks.filter(function(){
return $(this).attr('tid') == entree;
}).addClass('highlighted');
}
}
// ___ _ _ _ _
// / __| |_ __ _ _ _| |_ /_\ _ _ (_)_ __ ___
// \__ \ _/ _` | '_| _|/ _ \| ' \| | ' \/ -_)
// |___/\__\__,_|_| \__/_/ \_\_||_|_|_|_|_\___|
function startAnime(){
_physics.onUpdate(render);
_physics.play()
sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css
Vendored
+23
View File
@@ -7,3 +7,26 @@ canvas#corpus-map {
z-index: 0; }
canvas#corpus-map.de-activated {
background-color: #f4f4f4; }
div.node-popup {
display: none;
position: absolute;
-webkit-box-sizing: content-box;
box-sizing: content-box;
width: 140px;
min-height: 30px;
pointer-events: none; }
div.node-popup .inner {
padding: 1em;
outline: 1px solid red;
background-color: white; }
div.node-popup:before {
content: "";
position: absolute;
bottom: -15px;
left: -29px;
width: 30px;
height: 0;
border-top: 1px solid red;
-webkit-transform: rotateZ(135deg);
transform: rotateZ(135deg); }
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+105 -30
View File
@@ -41,7 +41,7 @@
var _node_hover_id = -1;
var _$entrees_block = $('#block-edlpentreesblock');
var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
var _node_pop_up;
// Colors depend on edlp_vars loaded by edlptheme
// console.log('Corpus : edlp_vars', edlp_vars);
@@ -97,7 +97,17 @@
// console.log('drupalSettings',drupalSettings);
// console.log('window.location', window.location);
var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
$.getJSON(path, {}, onCorpusLoaded);
$.getJSON(path, {})
.done(function(data){
onCorpusLoaded(data);
})
.fail(function(jqxhr, textStatus, error){
onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path);
});
};
function onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path){
console.warn('corpus load failed', jqxhr.responseText);
};
function onCorpusLoaded(data){
@@ -106,6 +116,7 @@
// buildParticles(data.nodes);
buildNodes(data.nodes);
initEvents();
initNodePopup();
startAnime();
};
@@ -114,16 +125,12 @@
// / |/ / __ \/ __ / _ \/ ___/
// / /| / /_/ / /_/ / __(__ )
// /_/ |_/\____/\__,_/\___/____/
function buildNodes(nodes){
console.log("buildNodes", nodes);
var x,y,d;
for (var i in nodes) {
// console.log('i',i);
d = i < 1 ? true : false;
_nodes.push(new Node(i,nodes[i],d));
// if(i==0)
// break;
}
};
@@ -167,21 +174,15 @@
this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
this.hover = false;
// physics
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);
// prototypes
if (typeof Node.initialized == "undefined") {
// Node.prototype.init = function(){
// // console.log("Node : init()", this);
// // this.draw();
// };
Node.prototype.calcWallLimits = function(){
this.wall_limits = {
top: _canvas_props.margin_top +this.r,
@@ -236,28 +237,29 @@
if(_node_hover_id == -1 || _node_hover_id == this.id){
// console.log("Node hover", this.id);
this.hover = true;
this.highlightEntries();
// this.highlightEntries();
_node_hover_id = this.id;
_node_pop_up.setNode(this);
}
}else{
this.hover = false;
if (_node_hover_id == this.id) {
_node_hover_id = -1;
_$entrees_block_termlinks.removeClass('highlighted');
_node_pop_up.removeNode();
}
}
};
Node.prototype.highlightEntries = function(){
_$entrees_block_termlinks.removeClass('highlighted');
var entree;
for (var i = 0; i < this.entrees.length; i++) {
entree = this.entrees[i];
_$entrees_block_termlinks.filter(function(){
return $(this).attr('tid') == entree;
}).addClass('highlighted');
}
}
// Node.prototype.highlightEntries = function(){
// _$entrees_block_termlinks.removeClass('highlighted');
// var entree;
// for (var i = 0; i < this.entrees.length; i++) {
// entree = this.entrees[i];
// _$entrees_block_termlinks.filter(function(){
// return $(this).attr('tid') == entree;
// }).addClass('highlighted');
// }
// }
Node.prototype.draw = function(){
// carre plein
@@ -415,6 +417,51 @@
};
// _ _ _ ___ _ _
// | \| |___ __| |___| _ \___ _ __| | | |_ __
// | .` / _ \/ _` / -_) _/ _ \ '_ \ |_| | '_ \
// |_|\_\___/\__,_\___|_| \___/ .__/\___/| .__/
// |_| |_|
function initNodePopup(){
_node_pop_up = new NodePopUp();
};
function NodePopUp(){
this.visible = false;
this.node;
this.$dom = $('<div>').addClass('node-popup').appendTo('body');
this.$content = $('<div>').addClass('inner').appendTo(this.$dom);
if (typeof NodePopUp.initialized == "undefined") {
NodePopUp.prototype.setNode = function(node){
this.node = node;
this.$content.html(this.node.title);
};
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;
}
}
// ____ __
// / __ \___ ____ ____/ /__ _____
// / /_/ / _ \/ __ \/ __ / _ \/ ___/
@@ -428,14 +475,42 @@
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].onUpdate();
}
// if(_node_hover_id != -1){
// _canvas.style.cursor = 'pointer';
// }else{
// _canvas.style.cursor = 'auto';
// }
_canvas.style.cursor = _node_hover_id != -1 ? 'pointer' : 'auto';
_node_pop_up.draw();
if(_node_hover_id != -1){
_canvas.style.cursor = 'pointer';
highlightEntries();
// _node_pop_up.visible = true;
}else{
_canvas.style.cursor = 'auto';
_$entrees_block_termlinks.removeClass('highlighted');
// _node_pop_up.visible = false;
}
};
// _ _ _ _ _ _ _ _ ___ _ _
// | || (_)__ _| |_ | |_(_)__ _| |_| |_| __|_ _| |_ _ _(_)___ ___
// | __ | / _` | ' \| / / / _` | ' \ _| _|| ' \ _| '_| / -_|_-<
// |_||_|_\__, |_||_|_\_\_\__, |_||_\__|___|_||_\__|_| |_\___/__/
// |___/ |___/
function highlightEntries(){
_$entrees_block_termlinks.removeClass('highlighted');
var entree;
for (var i = 0; i < _nodes[_node_hover_id].entrees.length; i++) {
entree = _nodes[_node_hover_id].entrees[i];
_$entrees_block_termlinks.filter(function(){
return $(this).attr('tid') == entree;
}).addClass('highlighted');
}
}
// ___ _ _ _ _
// / __| |_ __ _ _ _| |_ /_\ _ _ (_)_ __ ___
// \__ \ _/ _` | '_| _|/ _ \| ' \| | ' \/ -_)
// |___/\__\__,_|_| \__/_/ \_\_||_|_|_|_|_\___|
function startAnime(){
_physics.onUpdate(render);
_physics.play()
sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss
+35
View File
@@ -16,3 +16,38 @@ canvas#corpus-map{
// width:100%; height:100%;
z-index:0;
}
div.node-popup{
display:none;
position: absolute;
box-sizing: content-box;
width:140px; min-height: 30px;
pointer-events: none;
.inner{
padding:1em;
outline: 1px solid red;
background-color: white;
}
&:before{
content:"";
position: absolute;
bottom:-15px;left:-29px;
width: 30px; height:0;
border-top: 1px solid red;
transform: rotateZ(135deg);
}
&[pos="top-left"]{
}
&[pos="top-right"]{
}
&[pos="bottom-right"]{
}
&[pos="bottom-left"]{
}
}
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+1 -1
View File
@@ -117,7 +117,7 @@ edlp_vars = {
};
function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
console.warn('fail : error', jqxhr.responseText);
console.warn('ajaxlink load failed', jqxhr.responseText);
$link.removeClass('ajax-loading');
_$body.removeClass('ajax-loading');
};
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+1 -1
View File
@@ -94,7 +94,7 @@
};
function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
console.warn('fail : error', jqxhr.responseText);
console.warn('ajaxlink load failed', jqxhr.responseText);
$link.removeClass('ajax-loading');
_$body.removeClass('ajax-loading');
};