entrie colors are now dynamiclly loaded from field_color in entree term

had to patch the color_field module
https://www.drupal.org/project/color_field/issues/2854199#comment-12316266
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-14 13:14:41 +01:00
parent f422ff0ec4
commit 7241b669cf
52 changed files with 3664 additions and 280 deletions
@@ -21,7 +21,8 @@
EdlpCorpus = function(){
var _activated = true;
var _$body = _$container = $('body');
var _$body = $('body');
var _$container = _$body;
var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
var _canvas = _$canvas[0];
var _ctx = _canvas.getContext('2d');
@@ -50,12 +51,19 @@
var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
var _$articles_link;
var _node_pop_up;
// Colors depend on edlp_vars loaded by edlptheme
// console.log('Corpus : edlp_vars', edlp_vars);
// Colors depend on drupalSettings loaded by edlp_corpus.module
var _ecolors = drupalSettings.edlp_corpus.colors;
console.log('Corpus : _ecolors', _ecolors);
// Physics
var _attracter;
var _repulser;
var _attracter,
_repulser,
_repulser_center,
_scrambler_TL,
_scrambler_TR,
_scrambler_BR,
_scrambler_BL,
_scrambler_CL,
_scrambler_CR;
// ____ _ __
// / _/___ (_) /______
@@ -155,6 +163,10 @@
_scrambler_BR.fixed = true;
_scrambler_BL = _physics.makeParticle(100);
_scrambler_BL.fixed = true;
_scrambler_CR = _physics.makeParticle(100);
_scrambler_CR.fixed = true;
_scrambler_CL = _physics.makeParticle(100);
_scrambler_CL.fixed = true;
// move _attracter and _repulser on window resize
resizePhysics();
};
@@ -165,6 +177,8 @@
_scrambler_TR.position = {x:_canvas.width+100, y:-100};
_scrambler_BR.position = {x:_canvas.width+100, y:_canvas.height+100};
_scrambler_BL.position = {x:-100, y:_canvas.height+100};
_scrambler_CL.position = {x:-100, y:_canvas.height/2};
_scrambler_CR.position = {x:_canvas.width+100, y:_canvas.height/2};
// TODO: move _attracter and _repulser on window resize
};
@@ -257,7 +271,7 @@
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);
// attracter
this.attract = _physics.makeAttraction(_attracter, this.p, 100, _canvas.width*2);
this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
this.attract.on = false;
// repulsers
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
@@ -271,6 +285,10 @@
this.scramble_BR.on = false;
this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/3);
this.scramble_BL.on = false;
this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -100, _canvas.height/3);
this.scramble_CR.on = false;
this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -100, _canvas.height/3);
this.scramble_CL.on = false;
};
Node.prototype.calcWallLimits = function(){
@@ -412,6 +430,8 @@
this.scramble_TR.on = true;
this.scramble_BR.on = true;
this.scramble_BL.on = true;
// this.scramble_CR.on = true;
// this.scramble_CL.on = true;
}
Node.prototype.stopScrambling = function(){
this.scrambling = false;
@@ -419,6 +439,8 @@
this.scramble_TR.on = false;
this.scramble_BR.on = false;
this.scramble_BL.on = false;
// this.scramble_CR.on = false;
// this.scramble_CL.on = false;
}
Node.prototype.draw = function(){
@@ -432,8 +454,8 @@
_ctx.beginPath();
_ctx.globalAlpha = this.faded ? 0.1 : 1;
_ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
// _ctx.fillStyle = edlp_vars[this.e_color];
// _ctx.fillStyle = !this.p.resting() ? _ecolors[this.e_color] : 'rgb(0, 0, 0)';
_ctx.fillStyle = _ecolors[this.e_color];
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
if(this.opened){
@@ -21,7 +21,8 @@
EdlpCorpus = function(){
var _activated = true;
var _$body = _$container = $('body');
var _$body = $('body');
var _$container = _$body;
var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
var _canvas = _$canvas[0];
var _ctx = _canvas.getContext('2d');
@@ -50,12 +51,19 @@
var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
var _$articles_link;
var _node_pop_up;
// Colors depend on edlp_vars loaded by edlptheme
// console.log('Corpus : edlp_vars', edlp_vars);
// Colors depend on drupalSettings loaded by edlp_corpus.module
var _ecolors = drupalSettings.edlp_corpus.colors;
console.log('Corpus : _ecolors', _ecolors);
// Physics
var _attracter;
var _repulser;
var _attracter,
_repulser,
_repulser_center,
_scrambler_TL,
_scrambler_TR,
_scrambler_BR,
_scrambler_BL,
_scrambler_CL,
_scrambler_CR;
// ____ _ __
// / _/___ (_) /______
@@ -155,6 +163,10 @@
_scrambler_BR.fixed = true;
_scrambler_BL = _physics.makeParticle(100);
_scrambler_BL.fixed = true;
_scrambler_CR = _physics.makeParticle(100);
_scrambler_CR.fixed = true;
_scrambler_CL = _physics.makeParticle(100);
_scrambler_CL.fixed = true;
// move _attracter and _repulser on window resize
resizePhysics();
};
@@ -165,6 +177,8 @@
_scrambler_TR.position = {x:_canvas.width+100, y:-100};
_scrambler_BR.position = {x:_canvas.width+100, y:_canvas.height+100};
_scrambler_BL.position = {x:-100, y:_canvas.height+100};
_scrambler_CL.position = {x:-100, y:_canvas.height/2};
_scrambler_CR.position = {x:_canvas.width+100, y:_canvas.height/2};
// TODO: move _attracter and _repulser on window resize
};
@@ -257,7 +271,7 @@
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);
// attracter
this.attract = _physics.makeAttraction(_attracter, this.p, 100, _canvas.width*2);
this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
this.attract.on = false;
// repulsers
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
@@ -271,6 +285,10 @@
this.scramble_BR.on = false;
this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/3);
this.scramble_BL.on = false;
this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -100, _canvas.height/3);
this.scramble_CR.on = false;
this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -100, _canvas.height/3);
this.scramble_CL.on = false;
};
Node.prototype.calcWallLimits = function(){
@@ -412,6 +430,8 @@
this.scramble_TR.on = true;
this.scramble_BR.on = true;
this.scramble_BL.on = true;
// this.scramble_CR.on = true;
// this.scramble_CL.on = true;
}
Node.prototype.stopScrambling = function(){
this.scrambling = false;
@@ -419,6 +439,8 @@
this.scramble_TR.on = false;
this.scramble_BR.on = false;
this.scramble_BL.on = false;
// this.scramble_CR.on = false;
// this.scramble_CL.on = false;
}
Node.prototype.draw = function(){
@@ -432,8 +454,8 @@
_ctx.beginPath();
_ctx.globalAlpha = this.faded ? 0.1 : 1;
_ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
// _ctx.fillStyle = edlp_vars[this.e_color];
// _ctx.fillStyle = !this.p.resting() ? _ecolors[this.e_color] : 'rgb(0, 0, 0)';
_ctx.fillStyle = _ecolors[this.e_color];
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
if(this.opened){
@@ -92,12 +92,51 @@ function edlp_corpus_taxonomy_term_view(array &$build, \Drupal\Core\Entity\Entit
* Implements hook_page_attachments().
* @param array $attachments
*/
// function edlp_corpus_page_attachments(array &$attachments) {
// //add here any conditions if you need to limit the pages
// if (\Drupal::service('path.matcher')->isFrontPage()) {
// // $attachments['#attached']['library'][] = 'edlp_corpus/corpus';
// // $attachments['#attached']['drupalSettings']['basepath'] = base_path();
// // $attachments['#attached']['drupalSettings']['pathtoedlpcorpus'] = base_path() . drupal_get_path('module', 'edlp_corpus');
// // $attachments['#attached']['drupalSettings']['pathtotfiles'] = PublicStream::basePath();
// }
// }
function edlp_corpus_page_attachments(array &$attachments) {
// css class
// :root{
// --e-col-130:#4B8F7E;
// }
// javascript list
// drupalSettings edlp_corpus{
// "e_col_130": "rgb(75, 143, 126)",
// }
// get all entries
$query = \Drupal::entityQuery('taxonomy_term')
->condition('vid', 'entrees');
$tids = $query->execute();
$terms = entity_load_multiple('taxonomy_term', $tids);
$js_list = [];
$css_str = ":root{\n";
foreach ($terms as $term) {
$tid = $term->id();
// get the color value
$color = $term->get('field_color')->color;
// build colors list
$css_str .= "\t".'--e-col-'.$tid.':'.$color.";\n";
$js_list['e_col_'.$tid] = $color;
}
$css_str .= '}';
// attache css
// we should find a better way
// https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module
$attachments['#attached']['html_head'][] = [
[
'#type' => 'html_tag',
'#tag' => 'style',
'#value' => $css_str,
],
// A key, to make it possible to recognize this HTML element when altering.
'edlp_colors',
];
$attachments['#attached']['drupalSettings']['edlp_corpus']['colors'] = $js_list;
}