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

corpus ajax loaded and displayed as physics map

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2017-12-18 19:03:20 +01:00
parent 32b20d353c
commit 6255e3285a
15 changed files with 1520 additions and 11982 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_corpus/assets/dist/bower/physics.js
Vendored
+1153
View File
File diff suppressed because it is too large Load Diff
sites/all/modules/figli/edlp_corpus/assets/dist/bower/physicsjs-full.js
Vendored
-11963
View File
File diff suppressed because it is too large Load Diff
sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js
Vendored
+137 -4
View File
@@ -1,12 +1,12 @@
(function($) {
EdlpCorpus = function(){
var $container = $('body>div.layout-container');
var $container = $('body');
var $canvas = $('<canvas>').addClass('edlp-map').appendTo($container);
var canvas = $canvas[0];
var ctx = canvas.getContext('2d');
var physics = new Physics();
var particules = [];
function init(){
console.log("EdlpCorpus init()");
@@ -15,8 +15,141 @@
function initMap(){
console.log("EdlpCorpus initMap()");
console.log('physics',physics);
}
// console.log('physics',physics);
initCanvas();
loadCorpus();
};
function initCanvas(){
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
};
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
function loadCorpus(){
// console.log('drupalSettings',drupalSettings);
console.log('window.location', window.location);
var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
$.getJSON(path, {}, function(data){
console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]);
buildMap(data.nodes);
startAnime();
});
};
function buildMap(nodes){
var x,y,p;
var mass = 8;
console.log("physics", physics);
for (var i in nodes) {
// console.log(nodes[i]);
x = Math.random()*canvas.width;
y = Math.random()*canvas.height;
p = physics.makeParticle(mass, x, y);
p.velocity = new Physics.Vector((Math.random()-0.5)*0.10, (Math.random()-0.5)*0.10);
// if(particules.length){
// for (var i = 0; i < particules.length; i++) {
// physics.makeAttraction(p, particules[i], strength, minDistance);
// }
// }
particules.push(p);
}
};
function render(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
var radius = 5;
// colisions between particules
for (var p = 0, l = particules.length; p < l; p++) {
var particule = particules[p];
// var theta = 360 / (Math.PI * radius);
if(!particule.attracted) continue;
for (var q = 0; q < p; q++) {
if(q==p) continue;
var a = particule;
var b = particules[q];
if(!b.attracted) continue;
var d = a.distanceTo(b);
// apply new forces if colliding
if(d <= radius*2){
var newVelX1 = (a.velocity.x * (a.mass - b.mass) + (2 * b.mass * b.velocity.x)) / (a.mass + b.mass);
var newVelY1 = (a.velocity.y * (a.mass - b.mass) + (2 * b.mass * b.velocity.y)) / (a.mass + b.mass);
var newVelX2 = (b.velocity.x * (b.mass - a.mass) + (2 * a.mass * a.velocity.x)) / (a.mass + b.mass);
var newVelY2 = (b.velocity.y * (b.mass - a.mass) + (2 * a.mass * a.velocity.y)) / (a.mass + b.mass);
a.velocity.x = newVelX1;
a.velocity.y = newVelY1;
b.velocity.x = newVelX2;
b.velocity.y = newVelY2;
a.velocity.multiplyScalar(0.75);
b.velocity.multiplyScalar(0.75);
// move particles if they overlap
if (d < radius*2) {
var makeup = radius - d/2;
var angle = Math.atan2(b.position.y - a.position.y, b.position.x - a.position.x);
b.position.x += makeup * Math.cos(angle);
b.position.y += makeup * Math.sin(angle);
angle += Math.PI;
a.position.x += makeup * Math.cos(angle);
a.position.y += makeup * Math.sin(angle);
}
}
}
}
for (var i = 0; i < particules.length; i++) {
var p = particules[i];
// wall boucing
if(p.position.x < 0+radius || p.position.x > canvas.width-radius){
// console.log("bounce x");
p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
}
if(p.position.y < 0+radius || p.position.y > canvas.height-radius){
// console.log("bounce y");
p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
}
// draw the ball
ctx.beginPath();
ctx.fillRect(p.position.x, p.position.y, 8, 8);
if(p.attracted){
ctx.fillStyle = "red";
}else{
ctx.fillStyle = "black";
}
ctx.fill();
}
};
function startAnime(){
physics.onUpdate(render);
// render();
physics.play()
};
init();
}
sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css
Vendored
+7
View File
@@ -0,0 +1,7 @@
canvas.edlp-map {
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 0; }
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+137 -4
View File
@@ -1,12 +1,12 @@
(function($) {
EdlpCorpus = function(){
var $container = $('body>div.layout-container');
var $container = $('body');
var $canvas = $('<canvas>').addClass('edlp-map').appendTo($container);
var canvas = $canvas[0];
var ctx = canvas.getContext('2d');
var physics = new Physics();
var particules = [];
function init(){
console.log("EdlpCorpus init()");
@@ -15,8 +15,141 @@
function initMap(){
console.log("EdlpCorpus initMap()");
console.log('physics',physics);
}
// console.log('physics',physics);
initCanvas();
loadCorpus();
};
function initCanvas(){
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
};
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
function loadCorpus(){
// console.log('drupalSettings',drupalSettings);
console.log('window.location', window.location);
var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
$.getJSON(path, {}, function(data){
console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]);
buildMap(data.nodes);
startAnime();
});
};
function buildMap(nodes){
var x,y,p;
var mass = 8;
console.log("physics", physics);
for (var i in nodes) {
// console.log(nodes[i]);
x = Math.random()*canvas.width;
y = Math.random()*canvas.height;
p = physics.makeParticle(mass, x, y);
p.velocity = new Physics.Vector((Math.random()-0.5)*0.10, (Math.random()-0.5)*0.10);
// if(particules.length){
// for (var i = 0; i < particules.length; i++) {
// physics.makeAttraction(p, particules[i], strength, minDistance);
// }
// }
particules.push(p);
}
};
function render(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
var radius = 5;
// colisions between particules
for (var p = 0, l = particules.length; p < l; p++) {
var particule = particules[p];
// var theta = 360 / (Math.PI * radius);
if(!particule.attracted) continue;
for (var q = 0; q < p; q++) {
if(q==p) continue;
var a = particule;
var b = particules[q];
if(!b.attracted) continue;
var d = a.distanceTo(b);
// apply new forces if colliding
if(d <= radius*2){
var newVelX1 = (a.velocity.x * (a.mass - b.mass) + (2 * b.mass * b.velocity.x)) / (a.mass + b.mass);
var newVelY1 = (a.velocity.y * (a.mass - b.mass) + (2 * b.mass * b.velocity.y)) / (a.mass + b.mass);
var newVelX2 = (b.velocity.x * (b.mass - a.mass) + (2 * a.mass * a.velocity.x)) / (a.mass + b.mass);
var newVelY2 = (b.velocity.y * (b.mass - a.mass) + (2 * a.mass * a.velocity.y)) / (a.mass + b.mass);
a.velocity.x = newVelX1;
a.velocity.y = newVelY1;
b.velocity.x = newVelX2;
b.velocity.y = newVelY2;
a.velocity.multiplyScalar(0.75);
b.velocity.multiplyScalar(0.75);
// move particles if they overlap
if (d < radius*2) {
var makeup = radius - d/2;
var angle = Math.atan2(b.position.y - a.position.y, b.position.x - a.position.x);
b.position.x += makeup * Math.cos(angle);
b.position.y += makeup * Math.sin(angle);
angle += Math.PI;
a.position.x += makeup * Math.cos(angle);
a.position.y += makeup * Math.sin(angle);
}
}
}
}
for (var i = 0; i < particules.length; i++) {
var p = particules[i];
// wall boucing
if(p.position.x < 0+radius || p.position.x > canvas.width-radius){
// console.log("bounce x");
p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
}
if(p.position.y < 0+radius || p.position.y > canvas.height-radius){
// console.log("bounce y");
p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
}
// draw the ball
ctx.beginPath();
ctx.fillRect(p.position.x, p.position.y, 8, 8);
if(p.attracted){
ctx.fillStyle = "red";
}else{
ctx.fillStyle = "black";
}
ctx.fill();
}
};
function startAnime(){
physics.onUpdate(render);
// render();
physics.play()
};
init();
}
sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss
+7
View File
@@ -0,0 +1,7 @@
canvas.edlp-map{
position: absolute;
box-sizing: border-box;
top:0; left:0;
// width:100%; height:100%;
z-index:0;
}
sites/all/modules/figli/edlp_corpus/bower.json
+1 -1
View File
@@ -14,6 +14,6 @@
"tests"
],
"dependencies": {
"PhysicsJS": "latest"
"physics": "latest"
}
}
sites/all/modules/figli/edlp_corpus/edlp_corpus.libraries.yml
+2 -1
View File
@@ -6,7 +6,8 @@ corpus:
version: VERSION
js:
assets/dist/bower/physicsjs-full.js: { scope: footer }
assets/dist/bower/physics.js: { scope: footer }
assets/dist/scripts/corpus.min.js: { scope: footer }
dependencies:
- core/drupalSettings
- core/jquery
sites/all/modules/figli/edlp_corpus/edlp_corpus.module
+6 -2
View File
@@ -5,7 +5,11 @@
* @param array $attachments
*/
function edlp_corpus_page_attachments(array &$attachments) {
//add here any conditions if you need to limit the pages
//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();
}
}
sites/all/modules/figli/edlp_corpus/edlp_corpus.routing.yml
+2 -2
View File
@@ -1,7 +1,7 @@
edlp_corpus.content:
edlp_corpus.corpusjson:
path: '/edlp/corpus'
defaults:
_controller: '\Drupal\edlp_corpus\Controller\CorpusController::content'
_controller: '\Drupal\edlp_corpus\Controller\CorpusController::contentjson'
_title: 'Corpus'
requirements:
_permission: 'access content'
sites/all/modules/figli/edlp_corpus/gulpfile.js
+5
View File
@@ -42,6 +42,11 @@ gulp.task('bower', function() {
"overrides":{
"jquery":{
"ignore":true
},
"physics": {
"main": [
'./build/physics.js'
]
}
}
}))
sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php
+59 -4
View File
@@ -3,19 +3,74 @@
namespace Drupal\edlp_corpus\Controller;
use Drupal\Core\Controller\ControllerBase;
use Drupal\File\Entity\File;
use Symfony\Component\HttpFoundation\JsonResponse;
class CorpusController extends ControllerBase {
/**
* Display the markup.
*
* @return array
*/
public function content() {
return array(
'#type' => 'markup',
'#markup' => $this->t('Hello, Edlp Corpus!'),
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
// @see https://chromatichq.com/blog/dependency-injection-drupal-8-plugins
// Get a node storage object.
// $file_storage = \Drupal::entityManager()->getStorage('node')
$response = new JsonResponse();
$config = \Drupal::config('system.site');
$query = \Drupal::entityQuery('node')
->condition('status', 1)
->condition('type', 'enregistrement');
$nids = $query->execute();
$nodes = entity_load_multiple('node', $nids);
$nodes_data = [];
foreach ($nodes as $node) {
$entrees = [];
foreach ($node->get('field_entrees')->getValue() as $key => $term) {
$entrees[] = $term['target_id'];
}
$son_fid = $node->get('field_son')->getValue();
// TODO: how to get this fucking file uri, fuck !!
// $son_file = $file_storage->load($fid);
// $son_file = File::load($son_fid);
// $son_uri = $son_file->url();
// $son_uri = \Drupal\file\Entity\File::load($son_fid);//->getFileUri();
// $son_uri = file_create_url($node->get('field_son')->entity->getFileUri());
$nodes_data[] = array(
"nid" => $node->get('nid')->getString(),
"title" => $node->get('title')->getString(),
"description" => $node->get('field_description')->getString(),
"son_fid" => $son_fid,
// "son" => $son_file,
"entrees" => $entrees,
);
}
$data = array(
'date' => time(),
'site_name' => $config->get('name'),
'count' => count($nodes),
'nodes' => $nodes_data,
);
$response->setData($data);
return $response;
}
}
sites/all/themes/custom/edlptheme/.gitignore
+1
View File
@@ -1,3 +1,4 @@
node_modules/
.npm-debug-log
package-lock.json
bower_components/
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+2 -1
View File
@@ -19,7 +19,8 @@ div.layout-container {
height: 100%;
padding: 1em;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
box-sizing: border-box;
z-index: 1; }
header[role="banner"] {
outline: 1px solid blue; }
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+1
View File
@@ -20,6 +20,7 @@ div.layout-container{
width:100%; height:100%;
padding:1em;
box-sizing: border-box;
z-index: 1;
}
header[role="banner"]{