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

corpus node popup done

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-06 13:51:00 +01:00
parent be9ee5fde2
commit 4c3c7c6577
8 changed files with 243 additions and 73 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
+36 -22
View File
@@ -102,11 +102,11 @@
onCorpusLoaded(data); onCorpusLoaded(data);
}) })
.fail(function(jqxhr, textStatus, error){ .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); console.warn('corpus load failed', jqxhr.responseText);
}; };
@@ -114,9 +114,9 @@
console.log('corpus loaded : data', data); console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]); // console.log('first node', data.nodes[0]);
// buildParticles(data.nodes); // buildParticles(data.nodes);
initNodePopup();
buildNodes(data.nodes); buildNodes(data.nodes);
initEvents(); initEvents();
initNodePopup();
startAnime(); startAnime();
}; };
@@ -180,6 +180,10 @@
this.p = _physics.makeParticle(this.mass, this.x, this.y); 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); 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 // prototypes
if (typeof Node.initialized == "undefined") { if (typeof Node.initialized == "undefined") {
@@ -234,10 +238,9 @@
&& _m_pos.x < this.x + this.r && _m_pos.x < this.x + this.r
&& _m_pos.y > this.y - this.r && _m_pos.y > this.y - 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){ if(_node_hover_id == -1 || _node_hover_id !== this.id){
// console.log("Node hover", this.id); console.log("Node hover", this.id);
this.hover = true; this.hover = true;
// this.highlightEntries();
_node_hover_id = this.id; _node_hover_id = this.id;
_node_pop_up.setNode(this); _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(){ Node.prototype.draw = function(){
// carre plein // carre plein
// clouleur aléatoire ds les entrees // clouleur aléatoire ds les entrees
@@ -439,26 +431,48 @@
if (typeof NodePopUp.initialized == "undefined") { if (typeof NodePopUp.initialized == "undefined") {
NodePopUp.prototype.setNode = function(n){ NodePopUp.prototype.setNode = function(n){
console.log('NodePopUp setNode()');
this.node = n; this.node = n;
// positioning NodePopUp regarding node position // positioning NodePopUp regarding node position
this.setPositioning();
// update NodePopUp content
this.setContent();
};
NodePopUp.prototype.setPositioning = function(){
switch(true){ 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'); this.$dom.attr('pos', 'bottom-left');
break; 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'); this.$dom.attr('pos', 'top-left');
break; 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'); this.$dom.attr('pos', 'bottom-right');
break; break;
default: default:
this.$dom.attr('pos', 'top-right'); 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 = $('<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));
}
this.$content
.append($entrees)
.append('<h2 class="title">'+this.node.title+'</h2>')
.append('<section class="description">'+this.node.description+'</section>');
// TODO: favoris marker
}; };
NodePopUp.prototype.removeNode = function(){ NodePopUp.prototype.removeNode = function(){
console.log('NodePopUp removeNode()');
this.node = false; this.node = false;
}; };
sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css
Vendored
+2 -1
View File
@@ -17,7 +17,8 @@ div.node-popup {
min-height: 30px; min-height: 30px;
pointer-events: none; pointer-events: none;
top: 60%; top: 60%;
left: 30%; } left: 30%;
pointer-events: none; }
div.node-popup .inner { div.node-popup .inner {
padding: 1em; padding: 1em;
outline: 1px solid red; outline: 1px solid red;
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+36 -22
View File
@@ -102,11 +102,11 @@
onCorpusLoaded(data); onCorpusLoaded(data);
}) })
.fail(function(jqxhr, textStatus, error){ .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); console.warn('corpus load failed', jqxhr.responseText);
}; };
@@ -114,9 +114,9 @@
console.log('corpus loaded : data', data); console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]); // console.log('first node', data.nodes[0]);
// buildParticles(data.nodes); // buildParticles(data.nodes);
initNodePopup();
buildNodes(data.nodes); buildNodes(data.nodes);
initEvents(); initEvents();
initNodePopup();
startAnime(); startAnime();
}; };
@@ -180,6 +180,10 @@
this.p = _physics.makeParticle(this.mass, this.x, this.y); 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); 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 // prototypes
if (typeof Node.initialized == "undefined") { if (typeof Node.initialized == "undefined") {
@@ -234,10 +238,9 @@
&& _m_pos.x < this.x + this.r && _m_pos.x < this.x + this.r
&& _m_pos.y > this.y - this.r && _m_pos.y > this.y - 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){ if(_node_hover_id == -1 || _node_hover_id !== this.id){
// console.log("Node hover", this.id); console.log("Node hover", this.id);
this.hover = true; this.hover = true;
// this.highlightEntries();
_node_hover_id = this.id; _node_hover_id = this.id;
_node_pop_up.setNode(this); _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(){ Node.prototype.draw = function(){
// carre plein // carre plein
// clouleur aléatoire ds les entrees // clouleur aléatoire ds les entrees
@@ -439,26 +431,48 @@
if (typeof NodePopUp.initialized == "undefined") { if (typeof NodePopUp.initialized == "undefined") {
NodePopUp.prototype.setNode = function(n){ NodePopUp.prototype.setNode = function(n){
console.log('NodePopUp setNode()');
this.node = n; this.node = n;
// positioning NodePopUp regarding node position // positioning NodePopUp regarding node position
this.setPositioning();
// update NodePopUp content
this.setContent();
};
NodePopUp.prototype.setPositioning = function(){
switch(true){ 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'); this.$dom.attr('pos', 'bottom-left');
break; 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'); this.$dom.attr('pos', 'top-left');
break; 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'); this.$dom.attr('pos', 'bottom-right');
break; break;
default: default:
this.$dom.attr('pos', 'top-right'); 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 = $('<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));
}
this.$content
.append($entrees)
.append('<h2 class="title">'+this.node.title+'</h2>')
.append('<section class="description">'+this.node.description+'</section>');
// TODO: favoris marker
}; };
NodePopUp.prototype.removeNode = function(){ NodePopUp.prototype.removeNode = function(){
console.log('NodePopUp removeNode()');
this.node = false; this.node = false;
}; };
sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss
+8
View File
@@ -16,6 +16,13 @@ canvas#corpus-map{
// width:100%; height:100%; // width:100%; height:100%;
z-index:0; z-index:0;
} }
// _ _ _ ___ _ _
// | \| |___ __| |___| _ \___ _ __| | | |_ __
// | .` / _ \/ _` / -_) _/ _ \ '_ \ |_| | '_ \
// |_|\_\___/\__,_\___|_| \___/ .__/\___/| .__/
// |_| |_|
div.node-popup{ div.node-popup{
// display:none; // display:none;
// outline: 1px dotted green; // outline: 1px dotted green;
@@ -25,6 +32,7 @@ div.node-popup{
width:300px; min-height: 30px; width:300px; min-height: 30px;
pointer-events: none; pointer-events: none;
top:60%; left:30%; top:60%; left:30%;
pointer-events: none;
.inner{ .inner{
padding:1em; padding:1em;
sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php
+19 -3
View File
@@ -17,6 +17,7 @@ class CorpusController extends ControllerBase {
*/ */
public function contentjson() { public function contentjson() {
// @see https://www.droptica.com/blog/drupal-8-restjson-integration-simple-javascript-application/ // @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.sitepoint.com/drupal-8-version-entityfieldquery/
// @see https://www.frobiovox.com/posts/2016/03/28/simplify-drupal-8-field-value-calls.html // @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(); $nids = $query->execute();
$nodes = entity_load_multiple('node', $nids); $nodes = entity_load_multiple('node', $nids);
$view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
$nodes_data = []; $nodes_data = [];
foreach ($nodes as $node) { 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 = []; $entrees = [];
foreach ($node->get('field_entrees')->getValue() as $key => $term) { foreach ($node->get('field_entrees')->getValue() as $key => $term) {
$entrees[] = $term['target_id']; $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 !! // TODO: how to get this fucking file uri, fuck !!
// $son_file = $file_storage->load($fid); // $son_file = $file_storage->load($fid);
// $son_file = File::load($son_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 = \Drupal\file\Entity\File::load($son_fid);//->getFileUri();
// $son_uri = file_create_url($node->get('field_son')->entity->getFileUri()); // $son_uri = file_create_url($node->get('field_son')->entity->getFileUri());
// TODO: favoris marker
$nodes_data[] = array( $nodes_data[] = array(
"nid" => $node->get('nid')->getString(), "nid" => $node->get('nid')->getString(),
"title" => $node->get('title')->getString(), "title" => $node->get('title')->getString(),
"description" => $node->get('field_description')->getString(), "description" => $description,
"entrees" => $entrees,
"son_fid" => $son_fid, "son_fid" => $son_fid,
// "son" => $son_file, // "son" => $son_file,
"entrees" => $entrees, // "popup_content" => render($node_builder), // trop lourd
); );
} }
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+82 -23
View File
@@ -1352,12 +1352,12 @@ body.path-productions .layout-content .row {
padding: 0 1em; } padding: 0 1em; }
footer { footer {
pointer-events: none;
display: table; display: table;
padding: 0 0 0.5em 0; } padding: 0 0 0.5em 0; }
footer > .region { footer > .region {
display: table-cell; display: table-cell;
white-space: nowrap; white-space: nowrap; }
pointer-events: all; }
footer .region-footer-left { footer .region-footer-left {
text-align: left; } text-align: left; }
footer .region-footer-center { footer .region-footer-center {
@@ -1371,6 +1371,7 @@ footer {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
footer nav.block-menu ul li { footer nav.block-menu ul li {
pointer-events: all;
display: inline-block; display: inline-block;
position: relative; position: relative;
list-style: none; list-style: none;
@@ -1400,7 +1401,8 @@ footer {
transform-origin: left bottom; transform-origin: left bottom;
-webkit-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg); transform: rotateZ(-45deg);
white-space: nowrap; } white-space: nowrap;
pointer-events: all; }
footer .block-language ul li { footer .block-language ul li {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -1415,26 +1417,28 @@ footer {
font-size: 0.756em; } font-size: 0.756em; }
footer .block-language ul li.is-active a { footer .block-language ul li.is-active a {
color: red; } color: red; }
body:not(.path-productions) footer #block-productions { footer #block-productions {
display: none; } pointer-events: none; }
footer #block-productions ul { body:not(.path-productions) footer #block-productions {
white-space: nowrap; } display: none; }
footer #block-productions ul li a { footer #block-productions ul {
pointer-events: all; white-space: nowrap; }
background-color: #fff; footer #block-productions ul li a {
padding-right: 0.4em; } pointer-events: all;
footer #block-productions ul li a:before { background-color: #fff;
content: ""; padding-right: 0.4em; }
display: inline-block; footer #block-productions ul li a:before {
width: 7px; content: "";
height: 7px; display: inline-block;
border: 1px solid red; width: 7px;
margin-right: 0.5em; } height: 7px;
footer #block-productions ul li a:hover:before { border: 1px solid red;
background-color: red; } margin-right: 0.5em; }
footer #block-productions ul li a.ajax-loading:before { footer #block-productions ul li a:hover:before {
-webkit-animation: rotation 2s infinite linear; background-color: red; }
animation: rotation 2s infinite linear; } footer #block-productions ul li a.ajax-loading:before {
-webkit-animation: rotation 2s infinite linear;
animation: rotation 2s infinite linear; }
@keyframes rotation { @keyframes rotation {
from { from {
@@ -1444,6 +1448,7 @@ footer {
-webkit-transform: rotate(359deg); -webkit-transform: rotate(359deg);
transform: rotate(359deg); } } transform: rotate(359deg); } }
footer .block-block-edlp-entrees { footer .block-block-edlp-entrees {
pointer-events: none;
display: inline-block; } display: inline-block; }
body:not(.path-frontpage) footer .block-block-edlp-entrees { body:not(.path-frontpage) footer .block-block-edlp-entrees {
display: none; } display: none; }
@@ -1643,3 +1648,57 @@ footer {
height: 200px; height: 200px;
opacity: 1; opacity: 1;
pointer-events: auto; } 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; }
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+58 -2
View File
@@ -312,13 +312,16 @@ body.path-productions{
} }
footer{ footer{
pointer-events: none;
// outline: 1px dotted blue;
// text-align: center; // text-align: center;
display: table; display: table;
padding: 0 0 0.5em 0; padding: 0 0 0.5em 0;
>.region{ >.region{
display: table-cell; display: table-cell;
white-space: nowrap; white-space: nowrap;
pointer-events: all; // pointer-events: none;
// outline: 1px dotted purple; // outline: 1px dotted purple;
// position: relative; // position: relative;
} }
@@ -332,6 +335,7 @@ footer{
margin:0; margin:0;
padding:0; padding:0;
li{ li{
pointer-events: all;
@include oblique-list; @include oblique-list;
} }
} }
@@ -348,6 +352,7 @@ footer{
transform-origin: left bottom; transform-origin: left bottom;
transform: rotateZ(-45deg); transform: rotateZ(-45deg);
white-space: nowrap; white-space: nowrap;
pointer-events: all;
li{ li{
margin:0; padding:0; margin:0; padding:0;
list-style: none; list-style: none;
@@ -372,6 +377,7 @@ footer{
#block-productions{ #block-productions{
pointer-events: none;
body:not(.path-productions) & {display:none} body:not(.path-productions) & {display:none}
ul{ ul{
@@ -402,7 +408,7 @@ footer{
} }
.block-block-edlp-entrees{ .block-block-edlp-entrees{
pointer-events: none;
body:not(.path-frontpage) & {display:none} body:not(.path-frontpage) & {display:none}
display: inline-block; 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;
}
}
}
}
sites/default/config/sync/core.entity_view_display.node.enregistrement.default.yml
+2
View File
@@ -95,6 +95,8 @@ content:
audio_player_initial_volume: 8 audio_player_initial_volume: 8
audio_player_autoplay: false audio_player_autoplay: false
download_link: false download_link: false
audio_player_lazyload: false
download_button: false
third_party_settings: { } third_party_settings: { }
type: audiofield_audioplayer type: audiofield_audioplayer
region: content region: content