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 fafd0fbfa..105355bee 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 @@ -39,6 +39,7 @@ var _p_velocity_factor = 0.5; var _m_pos = {x:0, y:0}; var _node_hover_id = -1; + var _node_opened_id = -1; var _$entrees_block = $('#block-edlpentreesblock'); var _$entrees_block_termlinks = $('a.term-link', _$entrees_block); var _node_pop_up; @@ -176,6 +177,7 @@ this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))]; this.hover = false; + this.opened = false; // physics this.p = _physics.makeParticle(this.mass, this.x, this.y); @@ -267,6 +269,14 @@ } }; + Node.prototype.open = function(){ + this.opened = true; + }; + + Node.prototype.close = function(){ + this.opened = false; + }; + Node.prototype.draw = function(){ // carre plein // clouleur aléatoire ds les entrees @@ -280,6 +290,13 @@ // _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){ + _ctx.lineWidth = '1px'; + _ctx.strokeStyle = 'rgb(255,0,0)'; + _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6); + } + _ctx.closePath(); }; @@ -288,13 +305,6 @@ // this.init(); }; - - // ____ __ _ - // / __ \/ /_ __ _______(_)_________ - // / /_/ / __ \/ / / / ___/ / ___/ ___/ - // / ____/ / / / /_/ (__ ) / /__(__ ) - // /_/ /_/ /_/\__, /____/_/\___/____/ - // /____/ // TODO: we may convert a lot of computation into a web worker https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers function checkParticulesCollisions(){ // pre create vars to save memory; @@ -354,6 +364,19 @@ } }; + // show opened audio node + function openNode(id){ + closeNode(); + _node_opened_id = id; + _nodes[id].open(); + } + function closeNode(){ + if(_node_opened_id != -1){ + _nodes[_node_opened_id].close(); + _node_opened_id = -1; + } + } + // ______ __ // / ____/ _____ ____ / /______ // / __/ | | / / _ \/ __ \/ __/ ___/ @@ -385,11 +408,15 @@ }, }; _$canvas.trigger(event); + openNode(_node_hover_id); }else{ // console.log('corpus : click on map'); _$canvas.trigger('corpus-cliked-on-map'); } } + }) + .on('audio-node-closed', function(e){ + closeNode(); }); _$entrees_block_termlinks.on('click', function(event) { 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 fafd0fbfa..105355bee 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js +++ b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js @@ -39,6 +39,7 @@ var _p_velocity_factor = 0.5; var _m_pos = {x:0, y:0}; var _node_hover_id = -1; + var _node_opened_id = -1; var _$entrees_block = $('#block-edlpentreesblock'); var _$entrees_block_termlinks = $('a.term-link', _$entrees_block); var _node_pop_up; @@ -176,6 +177,7 @@ this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))]; this.hover = false; + this.opened = false; // physics this.p = _physics.makeParticle(this.mass, this.x, this.y); @@ -267,6 +269,14 @@ } }; + Node.prototype.open = function(){ + this.opened = true; + }; + + Node.prototype.close = function(){ + this.opened = false; + }; + Node.prototype.draw = function(){ // carre plein // clouleur aléatoire ds les entrees @@ -280,6 +290,13 @@ // _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){ + _ctx.lineWidth = '1px'; + _ctx.strokeStyle = 'rgb(255,0,0)'; + _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6); + } + _ctx.closePath(); }; @@ -288,13 +305,6 @@ // this.init(); }; - - // ____ __ _ - // / __ \/ /_ __ _______(_)_________ - // / /_/ / __ \/ / / / ___/ / ___/ ___/ - // / ____/ / / / /_/ (__ ) / /__(__ ) - // /_/ /_/ /_/\__, /____/_/\___/____/ - // /____/ // TODO: we may convert a lot of computation into a web worker https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers function checkParticulesCollisions(){ // pre create vars to save memory; @@ -354,6 +364,19 @@ } }; + // show opened audio node + function openNode(id){ + closeNode(); + _node_opened_id = id; + _nodes[id].open(); + } + function closeNode(){ + if(_node_opened_id != -1){ + _nodes[_node_opened_id].close(); + _node_opened_id = -1; + } + } + // ______ __ // / ____/ _____ ____ / /______ // / __/ | | / / _ \/ __ \/ __/ ___/ @@ -385,11 +408,15 @@ }, }; _$canvas.trigger(event); + openNode(_node_hover_id); }else{ // console.log('corpus : click on map'); _$canvas.trigger('corpus-cliked-on-map'); } } + }) + .on('audio-node-closed', function(e){ + closeNode(); }); _$entrees_block_termlinks.on('click', function(event) { 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 d8b4cd1a3..301e9738c 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 @@ -27,7 +27,7 @@ edlp_vars = { var _$body = $('body'); var _is_front = _$body.is('.path-frontpage'); - var _$corpus_map; + var _$corpus_canvas; var _$content_container = $('.layout-container>main>.layout-content'); var _$ajaxLinks; @@ -208,7 +208,8 @@ edlp_vars = { }, hide(){ this.$container.removeClass('visible'); - // TODO: trigger highlighted node remove on corpus map + // trigger highlighted node remove on corpus map + _$corpus_canvas.trigger('audio-node-closed'); } } @@ -331,8 +332,8 @@ edlp_vars = { // |_| function onCorpusMapReady(e){ console.log('theme : onCorpusReady'); - _$corpus_map = $('canvas#corpus-map'); - _$corpus_map + _$corpus_canvas = $('canvas#corpus-map'); + _$corpus_canvas .on('corpus-cliked-on-map', function(e) { console.log('theme : corpus-cliked-on-map'); backToFrontPage(); 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 7a0b82371..d990f43b9 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 @@ -1285,12 +1285,11 @@ body.ajax-loading main[role="main"]:before { height: 60px; top: calc(50% - 30px); left: calc(50% - 30px); - background-color: white; + background-color: rgba(255, 255, 255, 0.5); background-image: url(../img/edlp-loader-anim.svg); background-size: 50%; background-repeat: no-repeat; - background-position: center; - border-radius: 30px; } + background-position: center; } #audio-player { position: absolute; diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js index f9a1e6ff2..5811ef9c3 100644 --- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js +++ b/sites/all/themes/custom/edlptheme/assets/scripts/main.js @@ -4,7 +4,7 @@ var _$body = $('body'); var _is_front = _$body.is('.path-frontpage'); - var _$corpus_map; + var _$corpus_canvas; var _$content_container = $('.layout-container>main>.layout-content'); var _$ajaxLinks; @@ -185,7 +185,8 @@ }, hide(){ this.$container.removeClass('visible'); - // TODO: trigger highlighted node remove on corpus map + // trigger highlighted node remove on corpus map + _$corpus_canvas.trigger('audio-node-closed'); } } @@ -308,8 +309,8 @@ // |_| function onCorpusMapReady(e){ console.log('theme : onCorpusReady'); - _$corpus_map = $('canvas#corpus-map'); - _$corpus_map + _$corpus_canvas = $('canvas#corpus-map'); + _$corpus_canvas .on('corpus-cliked-on-map', function(e) { console.log('theme : corpus-cliked-on-map'); backToFrontPage(); diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index 7fcea2f7a..d598ab225 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -21,7 +21,6 @@ animation: rotation 2s infinite linear; } - @mixin entrie-micro-square { display:inline-block; $s:8px; @@ -50,12 +49,15 @@ } -// header - .layout-container{ pointer-events: none; } + +// _ _ +// | |_ ___ __ _ __| |___ _ _ +// | ' \/ -_) _` / _` / -_) '_| +// |_||_\___\__,_\__,_\___|_| header[role="banner"]{ position: relative; padding:0 0 0.5em 0; @@ -143,7 +145,11 @@ header[role="banner"]{ } } -// main + +// _ +// _ __ __ _(_)_ _ +// | ' \/ _` | | ' \ +// |_|_|_\__,_|_|_||_| main[role="main"]{ .layout-content{ pointer-events: none; @@ -203,12 +209,13 @@ main[role="main"]{ $s:60px; width:$s; height:$s; top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2}); - background-color: white; + // padding:1em; + background-color: rgba(255,255,255, 0.5); background-image: url(../img/edlp-loader-anim.svg); background-size: 50%; background-repeat: no-repeat; background-position: center; - border-radius: $s/2; + // border-radius: $s/2; } } }