Browse Source

optimized corpus map behaviours, now scrambling

Bachir Soussi Chiadmi 6 years ago
parent
commit
af9c95ad97

+ 77 - 45
sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js

@@ -143,10 +143,14 @@
       _attracter.fixed = true;
       _repulser_center = _physics.makeParticle(100, _canvas.width/2, _canvas.height/2);
       _repulser_center.fixed = true;
-      _repulser_top = _physics.makeParticle(100, _canvas.width/2, 100);
-      _repulser_top.fixed = true;
-      _repulser_bottom = _physics.makeParticle(100, _canvas.width/2, _canvas.height-100);
-      _repulser_bottom.fixed = true;
+      _scrambler_TL = _physics.makeParticle(100, -100, -100);
+      _scrambler_TL.fixed = true;
+      _scrambler_TR = _physics.makeParticle(100, _canvas.width+100, -100);
+      _scrambler_TR.fixed = true;
+      _scrambler_BR = _physics.makeParticle(100, _canvas.width+100, _canvas.height+100);
+      _scrambler_BR.fixed = true;
+      _scrambler_BL = _physics.makeParticle(100, -100, _canvas.height+100);
+      _scrambler_BL.fixed = true;
       // TODO: move _attracter and _repulser on window resize
     };
 
@@ -196,14 +200,14 @@
       this.velocity_threshold = 0.01;
       // define radius regarding entries length
       switch(true){
-        case this.entrees.length > 1 & this.entrees.length <= 3:
-          this.r = 7.5;
-          break;
         case this.entrees.length > 3:
           this.r = 10;
           break;
+        case this.entrees.length > 1 && this.entrees.length <= 3:
+          this.r = 7;
+          break;
         default:
-          this.r = 5;
+          this.r = 4;
           break;
       }
 
@@ -214,6 +218,7 @@
       this.faded = false;
       this.center = false;
       this.aside = false;
+      this.scrambling = false;
 
       // prototypes
       if (typeof Node.initialized == "undefined") {
@@ -224,7 +229,14 @@
           this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
           this.y = this.wall_limits.top  + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
 
-          // physics
+          this.initPhysics();
+
+          // if(this.id == '620'){
+          //   _node_pop_up.setNode(this);
+          // }
+        };
+
+        Node.prototype.initPhysics = function(){
           // particule
           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);
@@ -234,14 +246,15 @@
           // repulsers
           this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
           this.repulse_center.on = false;
-          // this.repulse_left = _physics.makeAttraction(_repulser_top, this.p, -100, _canvas.height/3);
-          // this.repulse_left.on = false;
-          // this.repulse_right = _physics.makeAttraction(_repulser_bottom, this.p, -100, _canvas.height/3);
-          // this.repulse_right.on = false;
 
-          // if(this.id == '620'){
-          //   _node_pop_up.setNode(this);
-          // }
+          this.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/3);
+          this.scramble_TL.on = false;
+          this.scramble_TR = _physics.makeAttraction(_scrambler_TR, this.p, -100, _canvas.height/3);
+          this.scramble_TR.on = false;
+          this.scramble_BR = _physics.makeAttraction(_scrambler_BR, this.p, -100, _canvas.height/3);
+          this.scramble_BR.on = false;
+          this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/3);
+          this.scramble_BL.on = false;
         };
 
         Node.prototype.calcWallLimits = function(){
@@ -262,11 +275,11 @@
 
           // this.p.velocity.multiplyScalar(0.99);
 
-          // if(!this.p.resting()){
-          //   this.checkVelocityThreshold();
+          if(!this.p.resting()){
+            // this.checkVelocityThreshold();
             this.checkWallBouncing();
             this.updatePos();
-          // }
+          }
           if(!this.aside)
             this.checkMouse();
 
@@ -276,10 +289,12 @@
         };
 
         Node.prototype.checkVelocityThreshold = function(){
-          if (Math.abs(this.p.velocity.x) < this.velocity_threshold
-           && Math.abs(this.p.velocity.y) < this.velocity_threshold){
+          if(!this.centered || !this.aside){
+            if (Math.abs(this.p.velocity.x) < this.velocity_threshold
+            && Math.abs(this.p.velocity.y) < this.velocity_threshold){
               this.p.velocity.multiplyScalar(0);
               // this.p.makeFixed();
+            }
           }
         };
 
@@ -358,29 +373,50 @@
           this.faded = false;
         };
 
+        Node.prototype.setCenteredOnEntree = function(tid){
+          this.e_color = 'e_col_'+tid;
+          this.setCentered();
+        };
+
         Node.prototype.setCentered = function(){
           this.center = true;
+          this.stopScrambling();
           this.unsetAside();
-          this.unFade();
           this.attract.on = true;
         }
         Node.prototype.unsetCentered = function(){
           this.center = false;
           this.attract.on = false;
         }
+
         Node.prototype.setAside = function(){
           this.aside = true;
           this.fade();
+          this.stopScrambling();
           this.unsetCentered();
           this.repulse_center.on = true;
-          // this.repulse_left.on = true;
-          // this.repulse_right.on = true;
         }
         Node.prototype.unsetAside = function(){
           this.aside = false;
+          this.unFade();
           this.repulse_center.on = false;
-          // this.repulse_left.on = false;
-          // this.repulse_right.on = false;
+        }
+
+        Node.prototype.scramble = function(){
+          this.scrambling = true;
+          this.unsetCentered();
+          this.unsetAside();
+          this.scramble_TL.on = true;
+          this.scramble_TR.on = true;
+          this.scramble_BR.on = true;
+          this.scramble_BL.on = true;
+        }
+        Node.prototype.stopScrambling = function(){
+          this.scrambling = false;
+          this.scramble_TL.on = false;
+          this.scramble_TR.on = false;
+          this.scramble_BR.on = false;
+          this.scramble_BL.on = false;
         }
 
         Node.prototype.draw = function(){
@@ -421,6 +457,8 @@
       // colisions between _particules
       for (var n = 0; n < _nodes.length; n++) {
 
+        if(_nodes[n].scrambling) continue;
+
         for (var q = n+1; q < _nodes.length; q++) {
           if(q===n) continue;
 
@@ -458,8 +496,8 @@
           _nodes[q].p.velocity.y = newVelY2;
 
           // slow down particule on impact
-          _nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.95 : 0.90);
-          _nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.95 : 0.90);
+          _nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.90 : 0.90);
+          _nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.90 : 0.90);
 
 
           // move particles if they overlap
@@ -500,31 +538,25 @@
     // | _|| ' \  _| '_/ -_) -_|_-<
     // |___|_||_\__|_| \___\___/__/
     function filterEntree(t){
-      // for (tid of _nodes_by_entries) {
-
       for (var n = 0; n < _nodes.length; n++) {
         if(_nodes[n].entrees.indexOf(t) == -1){
           _nodes[n].setAside();
         }else{
-          _nodes[n].setCentered();
+          _nodes[n].setCenteredOnEntree(t);
         }
       }
-      // for (var i = 0; i < _nodes_by_entries[t].length; i++) {
-      //   // _nodes_by_entries[t][i].unsetAside();
-      //   _nodes_by_entries[t][i].setCentered();
-      // }
-      // for (var tid in _nodes_by_entries) {
-      //   if (tid == t) continue;
-      //   for (var i = 0; i < _nodes_by_entries[tid].length; i++) {
-      //     // _nodes_by_entries[tid][i].unsetCentered();
-      //     _nodes_by_entries[tid][i].setAside();
-      //   }
-      // }
     };
 
-    function resetFilterEntree(){
+    function scrambleCollection(){
+      for (var i = 0; i < _nodes.length; i++) {
+        _nodes[i].scramble();
+      }
+      setTimeout(stopScrambling, 5000);
+    };
+
+    function stopScrambling(){
       for (var i = 0; i < _nodes.length; i++) {
-        _nodes[i].unsetAside();
+        _nodes[i].stopScrambling();
       }
     };
 
@@ -628,7 +660,7 @@
           filterEntree(tid);
         }else{
           $li.removeClass('opened');
-          resetFilterEntree(tid);
+          scrambleCollection();
         }
         return false;
       });

+ 77 - 45
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -143,10 +143,14 @@
       _attracter.fixed = true;
       _repulser_center = _physics.makeParticle(100, _canvas.width/2, _canvas.height/2);
       _repulser_center.fixed = true;
-      _repulser_top = _physics.makeParticle(100, _canvas.width/2, 100);
-      _repulser_top.fixed = true;
-      _repulser_bottom = _physics.makeParticle(100, _canvas.width/2, _canvas.height-100);
-      _repulser_bottom.fixed = true;
+      _scrambler_TL = _physics.makeParticle(100, -100, -100);
+      _scrambler_TL.fixed = true;
+      _scrambler_TR = _physics.makeParticle(100, _canvas.width+100, -100);
+      _scrambler_TR.fixed = true;
+      _scrambler_BR = _physics.makeParticle(100, _canvas.width+100, _canvas.height+100);
+      _scrambler_BR.fixed = true;
+      _scrambler_BL = _physics.makeParticle(100, -100, _canvas.height+100);
+      _scrambler_BL.fixed = true;
       // TODO: move _attracter and _repulser on window resize
     };
 
@@ -196,14 +200,14 @@
       this.velocity_threshold = 0.01;
       // define radius regarding entries length
       switch(true){
-        case this.entrees.length > 1 & this.entrees.length <= 3:
-          this.r = 7.5;
-          break;
         case this.entrees.length > 3:
           this.r = 10;
           break;
+        case this.entrees.length > 1 && this.entrees.length <= 3:
+          this.r = 7;
+          break;
         default:
-          this.r = 5;
+          this.r = 4;
           break;
       }
 
@@ -214,6 +218,7 @@
       this.faded = false;
       this.center = false;
       this.aside = false;
+      this.scrambling = false;
 
       // prototypes
       if (typeof Node.initialized == "undefined") {
@@ -224,7 +229,14 @@
           this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
           this.y = this.wall_limits.top  + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
 
-          // physics
+          this.initPhysics();
+
+          // if(this.id == '620'){
+          //   _node_pop_up.setNode(this);
+          // }
+        };
+
+        Node.prototype.initPhysics = function(){
           // particule
           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);
@@ -234,14 +246,15 @@
           // repulsers
           this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
           this.repulse_center.on = false;
-          // this.repulse_left = _physics.makeAttraction(_repulser_top, this.p, -100, _canvas.height/3);
-          // this.repulse_left.on = false;
-          // this.repulse_right = _physics.makeAttraction(_repulser_bottom, this.p, -100, _canvas.height/3);
-          // this.repulse_right.on = false;
 
-          // if(this.id == '620'){
-          //   _node_pop_up.setNode(this);
-          // }
+          this.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/3);
+          this.scramble_TL.on = false;
+          this.scramble_TR = _physics.makeAttraction(_scrambler_TR, this.p, -100, _canvas.height/3);
+          this.scramble_TR.on = false;
+          this.scramble_BR = _physics.makeAttraction(_scrambler_BR, this.p, -100, _canvas.height/3);
+          this.scramble_BR.on = false;
+          this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/3);
+          this.scramble_BL.on = false;
         };
 
         Node.prototype.calcWallLimits = function(){
@@ -262,11 +275,11 @@
 
           // this.p.velocity.multiplyScalar(0.99);
 
-          // if(!this.p.resting()){
-          //   this.checkVelocityThreshold();
+          if(!this.p.resting()){
+            // this.checkVelocityThreshold();
             this.checkWallBouncing();
             this.updatePos();
-          // }
+          }
           if(!this.aside)
             this.checkMouse();
 
@@ -276,10 +289,12 @@
         };
 
         Node.prototype.checkVelocityThreshold = function(){
-          if (Math.abs(this.p.velocity.x) < this.velocity_threshold
-           && Math.abs(this.p.velocity.y) < this.velocity_threshold){
+          if(!this.centered || !this.aside){
+            if (Math.abs(this.p.velocity.x) < this.velocity_threshold
+            && Math.abs(this.p.velocity.y) < this.velocity_threshold){
               this.p.velocity.multiplyScalar(0);
               // this.p.makeFixed();
+            }
           }
         };
 
@@ -358,29 +373,50 @@
           this.faded = false;
         };
 
+        Node.prototype.setCenteredOnEntree = function(tid){
+          this.e_color = 'e_col_'+tid;
+          this.setCentered();
+        };
+
         Node.prototype.setCentered = function(){
           this.center = true;
+          this.stopScrambling();
           this.unsetAside();
-          this.unFade();
           this.attract.on = true;
         }
         Node.prototype.unsetCentered = function(){
           this.center = false;
           this.attract.on = false;
         }
+
         Node.prototype.setAside = function(){
           this.aside = true;
           this.fade();
+          this.stopScrambling();
           this.unsetCentered();
           this.repulse_center.on = true;
-          // this.repulse_left.on = true;
-          // this.repulse_right.on = true;
         }
         Node.prototype.unsetAside = function(){
           this.aside = false;
+          this.unFade();
           this.repulse_center.on = false;
-          // this.repulse_left.on = false;
-          // this.repulse_right.on = false;
+        }
+
+        Node.prototype.scramble = function(){
+          this.scrambling = true;
+          this.unsetCentered();
+          this.unsetAside();
+          this.scramble_TL.on = true;
+          this.scramble_TR.on = true;
+          this.scramble_BR.on = true;
+          this.scramble_BL.on = true;
+        }
+        Node.prototype.stopScrambling = function(){
+          this.scrambling = false;
+          this.scramble_TL.on = false;
+          this.scramble_TR.on = false;
+          this.scramble_BR.on = false;
+          this.scramble_BL.on = false;
         }
 
         Node.prototype.draw = function(){
@@ -421,6 +457,8 @@
       // colisions between _particules
       for (var n = 0; n < _nodes.length; n++) {
 
+        if(_nodes[n].scrambling) continue;
+
         for (var q = n+1; q < _nodes.length; q++) {
           if(q===n) continue;
 
@@ -458,8 +496,8 @@
           _nodes[q].p.velocity.y = newVelY2;
 
           // slow down particule on impact
-          _nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.95 : 0.90);
-          _nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.95 : 0.90);
+          _nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.90 : 0.90);
+          _nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.90 : 0.90);
 
 
           // move particles if they overlap
@@ -500,31 +538,25 @@
     // | _|| ' \  _| '_/ -_) -_|_-<
     // |___|_||_\__|_| \___\___/__/
     function filterEntree(t){
-      // for (tid of _nodes_by_entries) {
-
       for (var n = 0; n < _nodes.length; n++) {
         if(_nodes[n].entrees.indexOf(t) == -1){
           _nodes[n].setAside();
         }else{
-          _nodes[n].setCentered();
+          _nodes[n].setCenteredOnEntree(t);
         }
       }
-      // for (var i = 0; i < _nodes_by_entries[t].length; i++) {
-      //   // _nodes_by_entries[t][i].unsetAside();
-      //   _nodes_by_entries[t][i].setCentered();
-      // }
-      // for (var tid in _nodes_by_entries) {
-      //   if (tid == t) continue;
-      //   for (var i = 0; i < _nodes_by_entries[tid].length; i++) {
-      //     // _nodes_by_entries[tid][i].unsetCentered();
-      //     _nodes_by_entries[tid][i].setAside();
-      //   }
-      // }
     };
 
-    function resetFilterEntree(){
+    function scrambleCollection(){
+      for (var i = 0; i < _nodes.length; i++) {
+        _nodes[i].scramble();
+      }
+      setTimeout(stopScrambling, 5000);
+    };
+
+    function stopScrambling(){
       for (var i = 0; i < _nodes.length; i++) {
-        _nodes[i].unsetAside();
+        _nodes[i].stopScrambling();
       }
     };
 
@@ -628,7 +660,7 @@
           filterEntree(tid);
         }else{
           $li.removeClass('opened');
-          resetFilterEntree(tid);
+          scrambleCollection();
         }
         return false;
       });

+ 2 - 0
sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php

@@ -53,6 +53,8 @@ class CorpusController extends ControllerBase {
       foreach ($node->get('field_entrees')->getValue() as $key => $term) {
         $entrees[] = $term['target_id'];
       }
+      // remove if no entries
+      if(!count($entrees)) continue;
 
       $description_values = $node->get('field_description')->getValue();
       $description = count($description_values) ? $description_values[0]['value'] : "";