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 16398f6b9..69878e3b0 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 @@ -102,11 +102,11 @@ onCorpusLoaded(data); }) .fail(function(jqxhr, textStatus, error){ - onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path); + onCorpusLoadError(jqxhr, textStatus, error); }); }; - function onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path){ + function onCorpusLoadError(jqxhr, textStatus, error){ console.warn('corpus load failed', jqxhr.responseText); }; @@ -114,9 +114,9 @@ console.log('corpus loaded : data', data); // console.log('first node', data.nodes[0]); // buildParticles(data.nodes); + initNodePopup(); buildNodes(data.nodes); initEvents(); - initNodePopup(); startAnime(); }; @@ -180,6 +180,10 @@ 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); + // if(this.id == '620'){ + // _node_pop_up.setNode(this); + // } + // prototypes if (typeof Node.initialized == "undefined") { @@ -234,10 +238,9 @@ && _m_pos.x < this.x + this.r && _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); + if(_node_hover_id == -1 || _node_hover_id !== this.id){ + console.log("Node hover", this.id); this.hover = true; - // this.highlightEntries(); _node_hover_id = this.id; _node_pop_up.setNode(this); } @@ -250,17 +253,6 @@ } }; - // 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 // clouleur aléatoire ds les entrees @@ -439,26 +431,48 @@ if (typeof NodePopUp.initialized == "undefined") { NodePopUp.prototype.setNode = function(n){ + console.log('NodePopUp setNode()'); this.node = n; // positioning NodePopUp regarding node position + this.setPositioning(); + // update NodePopUp content + this.setContent(); + }; + + NodePopUp.prototype.setPositioning = function(){ switch(true){ - case n.x > n.wall_limits.right-350 && n.y < n.wall_limits.top+200: + 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 n.x > n.wall_limits.right-350: + case this.node.x > this.node.wall_limits.right-350: this.$dom.attr('pos', 'top-left'); break; - case n.y < n.wall_limits.top+200: + case this.node.y < this.node.wall_limits.top+200: this.$dom.attr('pos', 'bottom-right'); break; default: this.$dom.attr('pos', 'top-right'); } - // update NodePopUp content - this.$content.html(this.node.title); + }; + + NodePopUp.prototype.setContent = function(){ + // console.log(this.node); + this.$content.html(''); + var $entrees = $('
').addClass('entrees'); + for (var i = 0; i < this.node.entrees.length; i++) { + var tid = this.node.entrees[i]; + $entrees.append($('').addClass('entree').attr('tid', tid)); + } + this.$content + .append($entrees) + .append('

'+this.node.title+'

') + .append('
'+this.node.description+'
'); + + // TODO: favoris marker }; NodePopUp.prototype.removeNode = function(){ + console.log('NodePopUp removeNode()'); this.node = false; }; 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 709e3f789..bf4479465 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 @@ -17,7 +17,8 @@ div.node-popup { min-height: 30px; pointer-events: none; top: 60%; - left: 30%; } + left: 30%; + pointer-events: none; } div.node-popup .inner { padding: 1em; outline: 1px solid red; 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 16398f6b9..69878e3b0 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js +++ b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js @@ -102,11 +102,11 @@ onCorpusLoaded(data); }) .fail(function(jqxhr, textStatus, error){ - onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path); + onCorpusLoadError(jqxhr, textStatus, error); }); }; - function onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path){ + function onCorpusLoadError(jqxhr, textStatus, error){ console.warn('corpus load failed', jqxhr.responseText); }; @@ -114,9 +114,9 @@ console.log('corpus loaded : data', data); // console.log('first node', data.nodes[0]); // buildParticles(data.nodes); + initNodePopup(); buildNodes(data.nodes); initEvents(); - initNodePopup(); startAnime(); }; @@ -180,6 +180,10 @@ 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); + // if(this.id == '620'){ + // _node_pop_up.setNode(this); + // } + // prototypes if (typeof Node.initialized == "undefined") { @@ -234,10 +238,9 @@ && _m_pos.x < this.x + this.r && _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); + if(_node_hover_id == -1 || _node_hover_id !== this.id){ + console.log("Node hover", this.id); this.hover = true; - // this.highlightEntries(); _node_hover_id = this.id; _node_pop_up.setNode(this); } @@ -250,17 +253,6 @@ } }; - // 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 // clouleur aléatoire ds les entrees @@ -439,26 +431,48 @@ if (typeof NodePopUp.initialized == "undefined") { NodePopUp.prototype.setNode = function(n){ + console.log('NodePopUp setNode()'); this.node = n; // positioning NodePopUp regarding node position + this.setPositioning(); + // update NodePopUp content + this.setContent(); + }; + + NodePopUp.prototype.setPositioning = function(){ switch(true){ - case n.x > n.wall_limits.right-350 && n.y < n.wall_limits.top+200: + 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 n.x > n.wall_limits.right-350: + case this.node.x > this.node.wall_limits.right-350: this.$dom.attr('pos', 'top-left'); break; - case n.y < n.wall_limits.top+200: + case this.node.y < this.node.wall_limits.top+200: this.$dom.attr('pos', 'bottom-right'); break; default: this.$dom.attr('pos', 'top-right'); } - // update NodePopUp content - this.$content.html(this.node.title); + }; + + NodePopUp.prototype.setContent = function(){ + // console.log(this.node); + this.$content.html(''); + var $entrees = $('
').addClass('entrees'); + for (var i = 0; i < this.node.entrees.length; i++) { + var tid = this.node.entrees[i]; + $entrees.append($('').addClass('entree').attr('tid', tid)); + } + this.$content + .append($entrees) + .append('

'+this.node.title+'

') + .append('
'+this.node.description+'
'); + + // TODO: favoris marker }; NodePopUp.prototype.removeNode = function(){ + console.log('NodePopUp removeNode()'); this.node = false; }; 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 ec92bda46..1f76dc145 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss +++ b/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss @@ -16,6 +16,13 @@ canvas#corpus-map{ // width:100%; height:100%; z-index:0; } + + +// _ _ _ ___ _ _ +// | \| |___ __| |___| _ \___ _ __| | | |_ __ +// | .` / _ \/ _` / -_) _/ _ \ '_ \ |_| | '_ \ +// |_|\_\___/\__,_\___|_| \___/ .__/\___/| .__/ +// |_| |_| div.node-popup{ // display:none; // outline: 1px dotted green; @@ -25,6 +32,7 @@ div.node-popup{ width:300px; min-height: 30px; pointer-events: none; top:60%; left:30%; + pointer-events: none; .inner{ padding:1em; diff --git a/sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php b/sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php index bbc0c1296..559f61d4d 100644 --- a/sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php +++ b/sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php @@ -17,6 +17,7 @@ class CorpusController extends ControllerBase { */ public function contentjson() { + // @see https://www.droptica.com/blog/drupal-8-restjson-integration-simple-javascript-application/ // @see https://www.sitepoint.com/drupal-8-version-entityfieldquery/ // @see https://www.frobiovox.com/posts/2016/03/28/simplify-drupal-8-field-value-calls.html @@ -36,14 +37,26 @@ class CorpusController extends ControllerBase { $nids = $query->execute(); $nodes = entity_load_multiple('node', $nids); + $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node'); + $nodes_data = []; foreach ($nodes as $node) { + // this is ideal but it's too heavy to load : the whole ajax json goes from 138kb to 1.23Md (even optimized)... + // $node_builder = $view_builder->view($node, 'popup'); + + $entrees = []; foreach ($node->get('field_entrees')->getValue() as $key => $term) { $entrees[] = $term['target_id']; } - $son_fid = $node->get('field_son')->getValue(); + + $description_values = $node->get('field_description')->getValue(); + $description = count($description_values) ? $description_values[0]['value'] : ""; + // dpm($description); + + $field_son_values = $node->get('field_son')->getValue(); + $son_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : ""; // TODO: how to get this fucking file uri, fuck !! // $son_file = $file_storage->load($fid); // $son_file = File::load($son_fid); @@ -51,13 +64,16 @@ class CorpusController extends ControllerBase { // $son_uri = \Drupal\file\Entity\File::load($son_fid);//->getFileUri(); // $son_uri = file_create_url($node->get('field_son')->entity->getFileUri()); + // TODO: favoris marker + $nodes_data[] = array( "nid" => $node->get('nid')->getString(), "title" => $node->get('title')->getString(), - "description" => $node->get('field_description')->getString(), + "description" => $description, + "entrees" => $entrees, "son_fid" => $son_fid, // "son" => $son_file, - "entrees" => $entrees, + // "popup_content" => render($node_builder), // trop lourd ); } 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 3f5b3474a..10f6d351a 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 @@ -1352,12 +1352,12 @@ body.path-productions .layout-content .row { padding: 0 1em; } footer { + pointer-events: none; display: table; padding: 0 0 0.5em 0; } footer > .region { display: table-cell; - white-space: nowrap; - pointer-events: all; } + white-space: nowrap; } footer .region-footer-left { text-align: left; } footer .region-footer-center { @@ -1371,6 +1371,7 @@ footer { margin: 0; padding: 0; } footer nav.block-menu ul li { + pointer-events: all; display: inline-block; position: relative; list-style: none; @@ -1400,7 +1401,8 @@ footer { transform-origin: left bottom; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); - white-space: nowrap; } + white-space: nowrap; + pointer-events: all; } footer .block-language ul li { margin: 0; padding: 0; @@ -1415,26 +1417,28 @@ footer { font-size: 0.756em; } footer .block-language ul li.is-active a { color: red; } - body:not(.path-productions) footer #block-productions { - display: none; } - footer #block-productions ul { - white-space: nowrap; } - footer #block-productions ul li a { - pointer-events: all; - background-color: #fff; - padding-right: 0.4em; } - footer #block-productions ul li a:before { - content: ""; - display: inline-block; - width: 7px; - height: 7px; - border: 1px solid red; - margin-right: 0.5em; } - footer #block-productions ul li a:hover:before { - background-color: red; } - footer #block-productions ul li a.ajax-loading:before { - -webkit-animation: rotation 2s infinite linear; - animation: rotation 2s infinite linear; } + footer #block-productions { + pointer-events: none; } + body:not(.path-productions) footer #block-productions { + display: none; } + footer #block-productions ul { + white-space: nowrap; } + footer #block-productions ul li a { + pointer-events: all; + background-color: #fff; + padding-right: 0.4em; } + footer #block-productions ul li a:before { + content: ""; + display: inline-block; + width: 7px; + height: 7px; + border: 1px solid red; + margin-right: 0.5em; } + footer #block-productions ul li a:hover:before { + background-color: red; } + footer #block-productions ul li a.ajax-loading:before { + -webkit-animation: rotation 2s infinite linear; + animation: rotation 2s infinite linear; } @keyframes rotation { from { @@ -1444,6 +1448,7 @@ footer { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } footer .block-block-edlp-entrees { + pointer-events: none; display: inline-block; } body:not(.path-frontpage) footer .block-block-edlp-entrees { display: none; } @@ -1643,3 +1648,57 @@ footer { height: 200px; opacity: 1; pointer-events: auto; } + +.node-popup .inner .entrees span { + display: inline-block; + width: 8px; + height: 8px; + background-color: black; + margin-right: 3px; } + .node-popup .inner .entrees span[tid='134'] { + background-color: #2b8f2f; } + .node-popup .inner .entrees span[tid='121'] { + background-color: #3a33b6; } + .node-popup .inner .entrees span[tid='125'] { + background-color: #2c9f57; } + .node-popup .inner .entrees span[tid='119'] { + background-color: #c48978; } + .node-popup .inner .entrees span[tid='132'] { + background-color: #5270bb; } + .node-popup .inner .entrees span[tid='122'] { + background-color: #fb54d3; } + .node-popup .inner .entrees span[tid='129'] { + background-color: #e07483; } + .node-popup .inner .entrees span[tid='120'] { + background-color: #655845; } + .node-popup .inner .entrees span[tid='130'] { + background-color: #7e0868; } + .node-popup .inner .entrees span[tid='118'] { + background-color: #0e7121; } + .node-popup .inner .entrees span[tid='127'] { + background-color: #dabd42; } + .node-popup .inner .entrees span[tid='133'] { + background-color: #0399bb; } + .node-popup .inner .entrees span[tid='128'] { + background-color: #399a1c; } + .node-popup .inner .entrees span[tid='124'] { + background-color: #708540; } + .node-popup .inner .entrees span[tid='116'] { + background-color: #191bff; } + .node-popup .inner .entrees span[tid='117'] { + background-color: #279d84; } + .node-popup .inner .entrees span[tid='131'] { + background-color: #5219ab; } + .node-popup .inner .entrees span[tid='126'] { + background-color: #d49cb6; } + .node-popup .inner .entrees span[tid='123'] { + background-color: #497715; } + +.node-popup .inner .title { + margin: 0.3em 0; + font-size: 1.2em; + font-weight: 500; } + +.node-popup .inner .description p { + margin: 0; + font-size: 0.75em; } diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index 72eb21e5f..3a66fb675 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -312,13 +312,16 @@ body.path-productions{ } footer{ + pointer-events: none; + // outline: 1px dotted blue; // text-align: center; display: table; padding: 0 0 0.5em 0; + >.region{ display: table-cell; white-space: nowrap; - pointer-events: all; + // pointer-events: none; // outline: 1px dotted purple; // position: relative; } @@ -332,6 +335,7 @@ footer{ margin:0; padding:0; li{ + pointer-events: all; @include oblique-list; } } @@ -348,6 +352,7 @@ footer{ transform-origin: left bottom; transform: rotateZ(-45deg); white-space: nowrap; + pointer-events: all; li{ margin:0; padding:0; list-style: none; @@ -372,6 +377,7 @@ footer{ #block-productions{ + pointer-events: none; body:not(.path-productions) & {display:none} ul{ @@ -402,7 +408,7 @@ footer{ } .block-block-edlp-entrees{ - + pointer-events: none; body:not(.path-frontpage) & {display:none} display: inline-block; @@ -631,3 +637,53 @@ footer{ } } + + +// _ _ _ ___ +// | \| |___ __| |___ | _ \___ _ __ _ _ _ __ +// | .` / _ \/ _` / -_) | _/ _ \ '_ \ || | '_ \ +// |_|\_\___/\__,_\___| |_| \___/ .__/\_,_| .__/ +// |_| |_| +.node-popup{ + .inner{ + .entrees{ + span{ + display:inline-block; + $s:8px; + width:$s; height:$s; + background-color: black; + margin-right: 3px; + &[tid='134']{background-color: $e_col_134;} + &[tid='121']{background-color: $e_col_121;} + &[tid='125']{background-color: $e_col_125;} + &[tid='119']{background-color: $e_col_119;} + &[tid='132']{background-color: $e_col_132;} + &[tid='122']{background-color: $e_col_122;} + &[tid='129']{background-color: $e_col_129;} + &[tid='120']{background-color: $e_col_120;} + &[tid='130']{background-color: $e_col_130;} + &[tid='118']{background-color: $e_col_118;} + &[tid='127']{background-color: $e_col_127;} + &[tid='133']{background-color: $e_col_133;} + &[tid='128']{background-color: $e_col_128;} + &[tid='124']{background-color: $e_col_124;} + &[tid='116']{background-color: $e_col_116;} + &[tid='117']{background-color: $e_col_117;} + &[tid='131']{background-color: $e_col_131;} + &[tid='126']{background-color: $e_col_126;} + &[tid='123']{background-color: $e_col_123;} + } + } + .title{ + margin:0.3em 0; + font-size: 1.2em; + font-weight: 500; + } + .description{ + p{ + margin:0; + font-size: 0.75em; + } + } + } +} diff --git a/sites/default/config/sync/core.entity_view_display.node.enregistrement.default.yml b/sites/default/config/sync/core.entity_view_display.node.enregistrement.default.yml index 22a728176..255b0e896 100644 --- a/sites/default/config/sync/core.entity_view_display.node.enregistrement.default.yml +++ b/sites/default/config/sync/core.entity_view_display.node.enregistrement.default.yml @@ -95,6 +95,8 @@ content: audio_player_initial_volume: 8 audio_player_autoplay: false download_link: false + audio_player_lazyload: false + download_button: false third_party_settings: { } type: audiofield_audioplayer region: content