From a494a0646a4fd5904938262b3826acac06ffae75 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Mon, 5 Mar 2018 18:57:47 +0100 Subject: [PATCH] started to code the corpus nodepopup --- .../assets/dist/scripts/corpus.min.js | 135 ++++++++++++++---- .../assets/dist/styles/corpus.min.css | 23 +++ .../edlp_corpus/assets/scripts/corpus.js | 135 ++++++++++++++---- .../edlp_corpus/assets/styles/corpus.scss | 35 +++++ .../edlptheme/assets/dist/scripts/main.min.js | 2 +- .../custom/edlptheme/assets/scripts/main.js | 2 +- 6 files changed, 270 insertions(+), 62 deletions(-) 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 35d98ce25..625f50ba6 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 @@ -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 = $('
').addClass('node-popup').appendTo('body'); + this.$content = $('
').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() diff --git a/sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css b/sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css index dfb0ca670..5e8a4aa72 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css +++ b/sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css @@ -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); } 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 35d98ce25..625f50ba6 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js +++ b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js @@ -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 = $('
').addClass('node-popup').appendTo('body'); + this.$content = $('
').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() diff --git a/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss b/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss index 269a3c572..f44ab603d 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss +++ b/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss @@ -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"]{ + + } +} diff --git a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js index 827eb1c26..ec4d1373b 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js +++ b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js @@ -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'); }; diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js index e099082ac..e17a5f6fa 100644 --- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js +++ b/sites/all/themes/custom/edlptheme/assets/scripts/main.js @@ -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'); };