more corpus optimizations

pre rendering each node in owne virtual canvas, then just move this canvas into the main scene
corpus removed hardcoded _dpi value to 2 to window.devicePixelRatio
2018-04-19 22:48:51 +02:00 · 2018-04-19 21:12:53 +02:00 · 2018-04-19 18:25:19 +02:00 · 2018-04-18 21:58:52 +02:00 · 2018-04-18 21:47:29 +02:00 · 2018-04-18 17:41:01 +02:00
13 changed files with 7378 additions and 240 deletions
@@ -1 +1,71 @@
-canvas#corpus-map{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;top:0;left:0;z-index:0}canvas#corpus-map.de-activated{background-color:#f4f4f4}div.node-popup{z-index:10;position:absolute;-webkit-box-sizing:content-box;box-sizing:content-box;width:300px;min-height:30px;top:60%;left:30%;pointer-events:none}div.node-popup .inner{padding:.6em;outline:red solid 1px;background-color:#fff}div.node-popup:before{content:"";position:absolute;width:60px;height:0;border-top:1px solid red}div.node-popup[pos=bottom-right]{-webkit-transform:translateY(42px) translateX(42px);transform:translateY(42px) translateX(42px)}div.node-popup[pos=bottom-right]:before{top:-1px;left:-61px;-webkit-transform-origin:bottom right;transform-origin:bottom right;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}div.node-popup[pos=bottom-left]{-webkit-transform:translateX(-100%) translateY(42px) translateX(-42px);transform:translateX(-100%) translateY(42px) translateX(-42px)}div.node-popup[pos=bottom-left]:before{top:calc(100% +1px);left:100%;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg)}div.node-popup[pos=top-left]{-webkit-transform:translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px);transform:translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px)}div.node-popup[pos=top-left]:before{bottom:0;left:100%;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}div.node-popup[pos=top-right]{-webkit-transform:translateY(-100%) translateY(-42px) translateX(42px);transform:translateY(-100%) translateY(-42px) translateX(42px)}div.node-popup[pos=top-right]:before{top:calc(100% + 1px);left:-61px;-webkit-transform-origin:top right;transform-origin:top right;-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg)}
+canvas#corpus-map {
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  z-index: 0; }
+  canvas#corpus-map.de-activated {
+    background-color: #f4f4f4; }
+
+div.node-popup {
+  z-index: 10;
+  position: absolute;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  width: 300px;
+  min-height: 30px;
+  pointer-events: none;
+  top: 60%;
+  left: 30%;
+  pointer-events: none; }
+  div.node-popup .inner {
+    padding: 0.6em;
+    outline: 1px solid red;
+    background-color: white; }
+  div.node-popup:before {
+    content: "";
+    position: absolute;
+    width: 60px;
+    height: 0;
+    border-top: 1px solid red; }
+  div.node-popup[pos="bottom-right"] {
+    -webkit-transform: translateY(42px) translateX(42px);
+    transform: translateY(42px) translateX(42px); }
+    div.node-popup[pos="bottom-right"]:before {
+      top: -1px;
+      left: -61px;
+      -webkit-transform-origin: bottom right;
+      transform-origin: bottom right;
+      -webkit-transform: rotateZ(45deg);
+      transform: rotateZ(45deg); }
+  div.node-popup[pos="bottom-left"] {
+    -webkit-transform: translateX(-100%) translateY(42px) translateX(-42px);
+    transform: translateX(-100%) translateY(42px) translateX(-42px); }
+    div.node-popup[pos="bottom-left"]:before {
+      top: calc(100% +1px);
+      left: 100%;
+      -webkit-transform-origin: top left;
+      transform-origin: top left;
+      -webkit-transform: rotateZ(-45deg);
+      transform: rotateZ(-45deg); }
+  div.node-popup[pos="top-left"] {
+    -webkit-transform: translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px);
+    transform: translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px); }
+    div.node-popup[pos="top-left"]:before {
+      bottom: 0;
+      left: 100%;
+      -webkit-transform-origin: top left;
+      transform-origin: top left;
+      -webkit-transform: rotateZ(45deg);
+      transform: rotateZ(45deg); }
+  div.node-popup[pos="top-right"] {
+    -webkit-transform: translateY(-100%) translateY(-42px) translateX(42px);
+    transform: translateY(-100%) translateY(-42px) translateX(42px); }
+    div.node-popup[pos="top-right"]:before {
+      top: calc(100% + 1px);
+      left: -61px;
+      -webkit-transform-origin: top right;
+      transform-origin: top right;
+      -webkit-transform: rotateZ(-45deg);
+      transform: rotateZ(-45deg); }
@@ -24,11 +24,16 @@
    var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
    var _canvas = _$canvas[0];
    var _ctx = _canvas.getContext('2d');
-    var _canvas_props = {
+    var _dpi = window.devicePixelRatio;
+    var _scene_props = {
+      width:0,
+      height:0,
      // 'margin_top':90, // with red border on head
-      'margin_top':75, // without red border on head
+      // 'margin_top':75, // without red border on head
+      'margin_top':0,
      'margin_right':0,
-      'margin_bottom':65,
+      // 'margin_bottom':65,
+      'margin_bottom':0,
      'margin_left':0
    };
    var _physics = new Physics();
@@ -92,10 +97,20 @@
      onResizeCanvas();
    };
    function onResizeCanvas() {
-      _canvas.width = window.innerWidth;
-      _canvas.height = window.innerHeight;
-      for (var i = 0; i < _nodes.length; i++) {
-        _nodes[i].onResizeCanvas();
+      // _dpi = 2;
+      _scene_props.width = window.innerWidth;
+      _scene_props.height = window.innerHeight;
+      _canvas.style.width = _scene_props.width+'px';
+      _canvas.style.height = _scene_props.height+'px';
+      _canvas.width = _scene_props.width*_dpi;
+      _canvas.height = _scene_props.height*_dpi;
+      _ctx.scale(_dpi, _dpi);
+
+
+      if(_nodes.length){
+        for (var i = 0; i < _nodes.length; i++) {
+          _nodes[i].onResizeCanvas();
+        }
        // move _attracter and _repulser to the center again
        resizePhysics();
      }
@@ -149,7 +164,7 @@
    };
    function resizePhysics(){
      // attracters
-      _attracter.position = {x:_canvas.width/2, y:_canvas.height/2};
+      _attracter.position = {x:_scene_props.width/2, y:_scene_props.height/2};
    };

    //  _  _         _
@@ -211,9 +226,23 @@
          this.r = 3;//4;
          break;
      }
+      this.d = this.r*2;

      this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];

+      this.canvas = document.createElement('canvas');
+      this.canvas_ctx = this.canvas.getContext('2d');
+
+      this.line_width = 1.5;
+      this.canvas_w = this.r*2+this.line_width*2;
+      this.canvas.width = this.canvas_w;
+      this.canvas.height = this.canvas_w;
+      this.canvas_ctx.fillStyle = 'rgb(255,255,255)';
+      this.canvas_ctx.lineWidth = this.line_width;
+
+      this.wall_bouncing_elasticity = 0.75;
+
+      // node states
      this.hover = false;
      this.opened = false;
      this.faded = false;
@@ -221,7 +250,6 @@
      this.aside = false;
      this.scrambling = false;

-      this.wall_bouncing_elasticity = 0.75;
      // this.n_repulses = {};

      // prototypes
@@ -236,10 +264,44 @@
          this.ori_pos = {x:this.x,y:this.y};
          // TODO: don't forget to move ori_pos on window resize

+          this.draw();
          this.initPhysics();

        };

+        Node.prototype.draw = function(){
+          _ctx.clearRect(0, 0, this.canvas_w, this.canvas_w);
+
+          this.canvas_ctx.beginPath();
+          // white background
+          this.canvas_ctx.fillRect(0,0,this.canvas_w,this.canvas_w);
+
+          this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1;
+
+          if(this.opened){
+            // carre plein
+            // this.canvas_ctx.lineWidth = '1px';
+            // this.canvas_ctx.strokeStyle = 'rgb(255,0,0)';
+            // this.canvas_ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
+            // ou carre contour
+            this.canvas_ctx.save(); // save the normal context state (fill white)
+            this.canvas_ctx.fillStyle = _ecolors[this.e_color];
+            this.canvas_ctx.fillRect(this.line_width,this.line_width,this.d,this.d);
+            this.canvas_ctx.restore(); // restore the normal context state (fill white)
+          }
+          // else{
+          //   // carre plein
+          //   // this.canvas_ctx.fillStyle = _ecolors[this.e_color];
+          //   // this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.d,this.d);
+          //   // ou carre contour
+          //   this.canvas_ctx.fillRect(this.line_width,this.line_width,this.d,this.d);
+          // }
+          this.canvas_ctx.strokeStyle = _ecolors[this.e_color];
+          this.canvas_ctx.strokeRect(this.line_width,this.line_width,this.d,this.d);
+          // this.canvas_ctx.globalAlpha = 1;
+          this.canvas_ctx.closePath();
+        };
+
        Node.prototype.initPhysics = function(){
          // particule
          this.p = _physics.makeParticle(this.mass, this.x, this.y);
@@ -248,19 +310,19 @@
          this.ori_p = _physics.makeParticle(1000, this.ori_pos.x, this.ori_pos.y);
          this.ori_p.fixed = true;
          // TODO: don't forget to move ori_p on window resize
-          this.ori_p_attract = _physics.makeAttraction(this.ori_p, this.p, 1000, _canvas.width*2);
+          this.ori_p_attract = _physics.makeAttraction(this.ori_p, this.p, 1000, _scene_props.width*2);
          this.ori_p_attract.on = false;
          // attracter
-          this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
+          this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _scene_props.width*2);
          this.attract.on = false;
        };

        Node.prototype.calcWallLimits = function(){
          this.wall_limits = {
-            top:    _canvas_props.margin_top  +this.r,
-            right:  _canvas.width  -_canvas_props.margin_right  -this.r,
-            bottom: _canvas.height -_canvas_props.margin_bottom -this.r,
-            left:   _canvas_props.margin_left +this.r
+            top:    _scene_props.margin_top  +this.r,
+            right:  _scene_props.width  -_scene_props.margin_right  -this.r,
+            bottom: _scene_props.height -_scene_props.margin_bottom -this.r,
+            left:   _scene_props.margin_left +this.r
          }
        };

@@ -302,7 +364,7 @@

          // if(this.debug)
          //   console.log("Node pos: ", {x:this.x, y:this.y});
-          this.draw();
+          this.move();
        };

        Node.prototype.checkVelocityThreshold = function(){
@@ -380,16 +442,20 @@
        Node.prototype.open = function(){
          this.opened = true;
          _node_opened_id = this.id;
+          this.draw();
        };
        Node.prototype.close = function(){
          this.opened = false;
+          this.draw();
        };

        Node.prototype.fade = function(){
          this.faded = true;
+          this.draw();
        };
        Node.prototype.unFade = function(){
          this.faded = false;
+          this.draw();
        };

        Node.prototype.setCenteredOnEntree = function(tid){
@@ -402,6 +468,7 @@
          this.stopScrambling();
          this.unsetAside();
          this.attract.on = true;
+          this.draw();
        }
        Node.prototype.unsetCentered = function(){
          this.center = false;
@@ -413,13 +480,13 @@
          // if(this.id == 1)
          //   console.log('this.p.velocity', this.p.velocity);
          this.dist_to_attracter = this.p.distanceTo(_attracter);
-          if( this.dist_to_attracter < _canvas.width/4){
+          if( this.dist_to_attracter < _scene_props.width/4){
            if( this.p.velocity.length() > 0.4 ){
              this.p.velocity.multiplyScalar(0.995);
            }
          }
-          if( Math.abs(_attracter.position.x - this.x) > _canvas.width/3
-              || Math.abs(_attracter.position.y - this.y) > _canvas.height/3){
+          if( Math.abs(_attracter.position.x - this.x) > _scene_props.width/3
+              || Math.abs(_attracter.position.y - this.y) > _scene_props.height/3){
            this.attract.on = true;
          }else{
            this.attract.on = false;
@@ -431,7 +498,7 @@
          // this.fade();
          this.stopScrambling();
          this.unsetCentered();
-          this.ori_p.position.x = this.x < _canvas.width /2 ? this.wall_limits.left : this.wall_limits.right;
+          this.ori_p.position.x = this.x < _scene_props.width /2 ? this.wall_limits.left : this.wall_limits.right;
          this.ori_p_attract.on = true;
          this.wall_bouncing_elasticity = 0.15;
        }
@@ -468,38 +535,9 @@
          // this.scramble_CL.on = false;
        }

-        Node.prototype.draw = function(){
-          // carre plein
-          // clouleur aléatoire ds les entrees
-          // 3 tailles :
-          // - 1 entree : petit carre 5px
-          // - 2-3 entrees : moyen 7.5px
-          // - >3 entrees : grand 10px
-          // actif entouré de rouge
-
-          _ctx.beginPath();
-          _ctx.globalAlpha = this.faded ? 0.15 : 1;
-          // carre plein
-          // _ctx.fillStyle = _ecolors[this.e_color];
-          // _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          // ou carre contour
-          _ctx.lineWidth = '2px';
-          _ctx.fillStyle = 'rgb(255,255,255)';
-          _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          _ctx.strokeStyle = _ecolors[this.e_color];
-          _ctx.strokeRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-
-          if(this.opened){
-            // carre plein
-            // _ctx.lineWidth = '1px';
-            // _ctx.strokeStyle = 'rgb(255,0,0)';
-            // _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
-            // ou carre contour
-            _ctx.fillStyle = _ecolors[this.e_color];
-            _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          }
-          _ctx.globalAlpha = 1;
-          _ctx.closePath();
+        Node.prototype.move = function(){
+          // just draw the virtual node canvas into the main scene canvas at the right position
+          _ctx.drawImage(this.canvas, this.x-this.r, this.y-this.r);
        };

        Node.initialized = true;
@@ -515,26 +553,28 @@
          ma,mb,
          w,h,dx,dy,
          makeup,
-          newVelX1, newVelY1, newVelX2, newVelY2;
+          newVelX1, newVelY1, newVelX2, newVelY2,
+          Smamb;
          // , angle;
      // colisions between _particules
      for (var n = 0, l = _nodes.length; n < l; n++) {
        na = _nodes[n];
-        ma = na.p.mass;
        // avoid colliding for centered nodes
        // if(_nodes[n].center) continue;
-
        // avoid colliding for scrambling nodes
        if(na.scrambling) continue;

+        ma = na.p.mass;
+
        for (var q = n+1; q < l; q++) {
          nb = _nodes[q];
-          mb = nb.p.mass;
          // avoid impact between center and aside particules
+          // if((na.center && nb.aside) || (na.aside && nb.center))
          // and between aside particules
-          if((na.center && nb.aside) || (na.aside && nb.center) || (na.aside && nb.aside))
+          if(na.aside || nb.aside)
            continue;

+
          // avoid impact between two centered particulses that comes to the center
          if(na.center && nb.center){
            if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){
@@ -546,14 +586,18 @@
          // if(!na.aside && !nb.aside){
            w = h += 4; // add a saftey zone around squares eccept for aside squares
          // }
-          dx = na.p.position.x - nb.p.position.x;
-          dy = na.p.position.y - nb.p.position.y;

          // if both dx and dy are inferior to w & h so squares are colliding (overlapping)
          // if( Math.abs(dx) <= w && Math.abs(dy) <= h){ console.log('colliding'); }
          // else not so skip
-          if( Math.abs(dx) > w || Math.abs(dy) > h) continue;
+          // if( Math.abs(dx) > w || Math.abs(dy) > h) continue;
+          dx = na.p.position.x - nb.p.position.x;
+          if( Math.abs(dx) > w ) continue;
+          dy = na.p.position.y - nb.p.position.y;
+          if(Math.abs(dy) > h) continue

+          mb = nb.p.mass;
+          Smamb = ma+mb;
          if(Math.abs(dx) < Math.abs(dy)){ // vertical collision
            makeup = (h - Math.abs(dy))/2;
            if(dy > 0){ // a is upper than b
@@ -565,8 +609,8 @@
            }
            // bounce
            // https://en.wikipedia.org/wiki/Elastic_collision#One-dimensional_Newtonian
-            newVelY1 = (ma-mb)/(ma+mb)*na.p.velocity.y+2*mb/(ma+mb)*nb.p.velocity.y;
-            newVelY2 = (mb-ma)/(mb+ma)*nb.p.velocity.y+2*ma/(mb+ma)*na.p.velocity.y;
+            newVelY1 = (ma-mb)/Smamb*na.p.velocity.y+2*mb/Smamb*nb.p.velocity.y;
+            newVelY2 = (mb-ma)/Smamb*nb.p.velocity.y+2*ma/Smamb*na.p.velocity.y;

            na.p.velocity.y = newVelY1;
            nb.p.velocity.y = newVelY2;
@@ -582,8 +626,8 @@
            }
            // bounce
            // https://en.wikipedia.org/wiki/Elastic_collision#One-dimensional_Newtonian
-            newVelX1 = (ma-mb)/(ma+mb)*na.p.velocity.x+2*mb/(ma+mb)*nb.p.velocity.x;
-            newVelX2 = (mb-ma)/(mb+ma)*nb.p.velocity.x+2*ma/(mb+ma)*na.p.velocity.x;
+            newVelX1 = (ma-mb)/Smamb*na.p.velocity.x+2*mb/Smamb*nb.p.velocity.x;
+            newVelX2 = (mb-ma)/Smamb*nb.p.velocity.x+2*ma/Smamb*na.p.velocity.x;

            na.p.velocity.x = newVelX1;
            nb.p.velocity.x = newVelX2;
@@ -1045,7 +1089,7 @@
    // |   / -_) ' \/ _` / -_) '_|
    // |_|_\___|_||_\__,_\___|_|
    function render(){
-      _ctx.clearRect(0, 0, _canvas.width, _canvas.height);
+      _ctx.clearRect(0, 0, _scene_props.width, _scene_props.height);

      checkParticulesCollisions();

@@ -8,6 +8,7 @@ namespace Drupal\edlp_corpus\Plugin\Block;
 use Drupal\Core\Block\BlockBase;
 use Drupal\Core\Link;
 use Drupal\Core\Url;
+use Drupal\taxonomy\Entity\Term;
 use Drupal\workflow\Entity\WorkflowManager;

 /**
@@ -24,26 +25,40 @@ class BlockEntrees extends BlockBase {
   */
  public function build() {

+    $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
+
    $query = \Drupal::entityQuery('taxonomy_term')
+      // ->sort('weight', 'DESC')
+      // ->sort('name', 'DESC')
      ->condition('vid', 'entrees');

    $tids = $query->execute();
-    $terms = entity_load_multiple('taxonomy_term', $tids);
-    // dsm($terms);
-    foreach ($terms as $term) {
-      // dpm($term->toArray());
-      $tid = $term->id();
-      $name = $term->getName();
+    // $terms = entity_load_multiple('taxonomy_term', $tids);
+    // $terms = \Drupal::entityManager()->getStorage('taxonomy_term')->loadMultiple($t‌erms);
+    $terms = Term::loadMultiple($tids);

+    $ordered_terms = [];
+    foreach ($terms as $term) {
      // remove masqué
      $sid = WorkflowManager::getCurrentStateId($term, 'field_workflow');
      if($sid == 'generique_masque') continue;
+      // translate the term
+      $term = \Drupal::service('entity.repository')->getTranslationFromContext($term, $language);
+      $name = $term->getName();
+      $ordered_trans_terms[$name] = $term;
+    }
+
+    ksort($ordered_trans_terms);
+
+    // dsm($terms);
+    foreach ($ordered_trans_terms as $name => $term) {
+      $tid = $term->id();

      $entree = array(
        'tid'=>$tid
      );

-      // term name
+      // term link
      $url = Url::fromRoute('entity.taxonomy_term.canonical', ['taxonomy_term'=>$tid]);
      $url->setOptions(array(
        'attributes' => array(
@@ -1,7 +1,125 @@
+(function ($, Drupal, drupalSettings) {

-(function($,Drupal,drupalSettings){var settings=drupalSettings.edlp_search;var _$body=$('body');var _$container;var _$form;function init(){initEvents();initAjax();};function initEvents(){$('body').on('new-content-ajax-loaded',initAjax).on('edlp_search_search_form-col-closed',onSearchClosed);};function initAjax(){_$form=$('#edlp-search-form:not(.ajax-enabled)');if(!_$form.length)return false;_$form=$('#edlp-search-form:not(.ajax-enabled)').on('submit',onSubmitForm).addClass('ajax-enabled');_$container=_$form.parents('.row');if(!_$container.length){_$container=_$form.parent();}};function onSubmitForm(e){e.preventDefault();var args={};args.keys=$('input[type="search"]',this).val();args.entries=[];$('input[type="checkbox"]:checked','#edit-entries').each(function(index,el){args.entries.push($(this).val());});args.langues=$('input[name="language"]',this).val();args.genres=$('input[name="genres"]',this).val();loadResults(args);return false;};function loadResults(args){_$form.addClass('ajax-loading');_$body.addClass('ajax-loading');$('[theme="edlp_search_results"]',_$container).addClass('ajax-loading');var path=window.location.origin+drupalSettings.path.baseUrl+settings.results_ajax_url;$.getJSON(path,args).done(function(data){onResultsLoaded(data);}).fail(function(jqxhr,textStatus,error){onResultsLoadFail(jqxhr,textStatus,error);});};function onResultsLoaded(data){_$form.removeClass('ajax-loading');_$body.removeClass('ajax-loading');$prev_results=$('[theme="edlp_search_results"]',_$container);if($prev_results.length){$prev_results.replaceWith(data.rendered);}else{_$container.append(data.rendered);}
-_$body.trigger({'type':'search-results-loaded','results':data.results_nids});if(typeof _paq!=='undefined'){var search_name='keys:'+data.keys
-+';langues:'+data.langues
-+';genres:'+data.genres
-+';entries:'+data.entry_names.join(',');_paq.push(['trackEvent','AjaxSearch','Results',search_name,data.results_nids.length]);}};function onResultsLoadFail(jqxhr,textStatus,error){void 0;};function onSearchClosed(e){$('div[theme="edlp_search_results"]').remove();_$body.trigger({'type':'search-closed'});}
-init();})(jQuery,Drupal,drupalSettings);
+  var settings = drupalSettings.edlp_search;
+  var _$body = $('body');
+  var _$container;
+  var _$form;
+
+  function init(){
+    // console.log('EdlpSearch Init', settings);
+    initEvents();
+    initAjax();
+  };
+
+  function initEvents(){
+    $('body')
+      .on('new-content-ajax-loaded', initAjax)
+      .on('edlp_search_search_form-col-closed', onSearchClosed);
+  };
+
+  function initAjax(){
+    _$form = $('#edlp-search-form:not(.ajax-enabled)');
+    if(!_$form.length) return false;
+
+    //console.log('EdlpSearch initAjaxForm()');
+    _$form = $('#edlp-search-form:not(.ajax-enabled)')
+      .on('submit', onSubmitForm)
+      .addClass('ajax-enabled');
+    _$container = _$form.parents('.row');
+    if(!_$container.length){
+      _$container = _$form.parent();
+    }
+  };
+
+  function onSubmitForm(e){
+    e.preventDefault();
+    // console.log('onSubmitForm',e);
+    var args = {};
+
+    // search for key words
+    args.keys = $('input[type="search"]', this).val();
+
+    // entries filter
+    args.entries = [];
+    $('input[type="checkbox"]:checked', '#edit-entries').each(function(index, el) {
+      args.entries.push($(this).val());
+    });
+
+    // langues
+    args.langues = $('input[name="language"]', this).val();
+
+    // genres
+    args.genres = $('input[name="genres"]', this).val();
+
+    //console.log('EdlpSearch onSubmitForm() : args',args);
+
+    loadResults(args);
+
+    return false;
+  };
+
+  function loadResults(args){
+    //console.log('EdlpSearch loadResults() : args', args);
+    _$form.addClass('ajax-loading');
+    _$body.addClass('ajax-loading');
+    $('[theme="edlp_search_results"]', _$container).addClass('ajax-loading');
+    var path = window.location.origin + drupalSettings.path.baseUrl +settings.results_ajax_url;
+    $.getJSON(path, args)
+      .done(function(data){
+        onResultsLoaded(data);
+      })
+      .fail(function(jqxhr, textStatus, error){
+        onResultsLoadFail(jqxhr, textStatus, error);
+      });
+  };
+
+  function onResultsLoaded(data){
+    // console.log('EdlpSearch onResultsLoaded()', data);
+    _$form.removeClass('ajax-loading');
+    _$body.removeClass('ajax-loading');
+
+    // insert results col
+    $prev_results = $('[theme="edlp_search_results"]', _$container);
+    if($prev_results.length){
+      $prev_results.replaceWith(data.rendered);
+    }else{
+      _$container.append(data.rendered);
+    }
+
+    // trigger event
+    _$body.trigger({
+      'type':'search-results-loaded',
+      'results':data.results_nids
+    });
+
+
+    // piwik
+    if(typeof _paq !== 'undefined'){
+      // page tracking
+      // https://matomo.org/blog/2017/02/how-to-track-single-page-websites-using-piwik-analytics/
+      // _paq.push(['setCustomUrl', state.url]);
+      // _paq.push(['setDocumentTitle', data.title]);
+      // _paq.push(['trackPageView']);
+
+      // trackEvent(category, action, [name], [value])
+      var search_name = data.keys+';'+data.langues+';'+data.genres+';'+data.entry_names.join(',');
+      // _paq.push(['trackEvent', 'AjaxSearch', 'Results', search_name, data.results_nids.length]);
+      // piwik track searches
+      // trackSiteSearch(keyword, [category], [resultsCount])
+      _paq.push(['trackSiteSearch', search_name, 'search', data.results_nids.length]);
+    }
+  };
+
+  function onResultsLoadFail(jqxhr, textStatus, error){
+    console.warn('EdlpSearch : search results ajax load failed : '+error, jqxhr.responseText);
+  };
+
+  function onSearchClosed(e){
+    // console.log('Edlp Search onSearchClosed()');
+    $('div[theme="edlp_search_results"]').remove();
+    // trigger event
+    _$body.trigger({'type':'search-closed'});
+  }
+
+  init();
+})(jQuery, Drupal, drupalSettings);
@@ -102,11 +102,11 @@
      // _paq.push(['trackPageView']);

      // trackEvent(category, action, [name], [value])
-      var search_name = 'keys:'+data.keys
-        +';langues:'+data.langues
-        +';genres:'+data.genres
-        +';entries:'+data.entry_names.join(',');
-      _paq.push(['trackEvent', 'AjaxSearch', 'Results', search_name, data.results_nids.length]);
+      var search_name = data.keys+';'+data.langues+';'+data.genres+';'+data.entry_names.join(',');
+      // _paq.push(['trackEvent', 'AjaxSearch', 'Results', search_name, data.results_nids.length]);
+      // piwik track searches
+      // trackSiteSearch(keyword, [category], [resultsCount])
+      _paq.push(['trackSiteSearch', search_name, 'search', data.results_nids.length]);
    }
  };

@@ -1,10 +1,408 @@
+(function ($, Drupal, drupalSettings) {

-(function($,Drupal,drupalSettings){var _settings=drupalSettings.edlp_studio;var $composer;function init(){initEvents();initStudio();};function initEvents(){$('body').on('new-audio-cartel-loaded',initAjaxChutierLinks).on('new-content-ajax-loaded',initStudio).on('all-modal-closed',initStudio);};function initStudio(){if($('#studio-ui').length){$composer=$('.composition_ui .composer','#studio-ui');initAjaxChutierLinks();initAjaxCompoLinks();initDragAndDropUI();$('body').trigger({'type':'studio-initialized'});}else{$('body').trigger({'type':'studio-not-active'});}}
-function initAjaxChutierLinks(){$('.chutier-ajax-link:not(.ajax-enabled)').addClass('ajax-enabled').on('click',onClickChutierAjaxLink);};function onClickChutierAjaxLink(e){e.preventDefault();addRemoveToChutier($(this));return false;};function addRemoveToChutier($link){var ajax_path=$link.attr('data-drupal-link-system-path');var path=window.location.origin+drupalSettings.path.baseUrl+ajax_path;$link.addClass('ajax-loading');$.getJSON(path,{}).done(function(data){onActionToChutierDone($link,data);}).fail(function(jqxhr,textStatus,error){onErrorActionToChutier(jqxhr,textStatus,error,$link);});};function onActionToChutierDone($link,data){$('body').trigger({'type':'chutier-action-done','action_done':data.action_done,'new_action':data.action_done=='add'?'remove':'add','target_id':$link.attr('target_id'),});$link.replaceWith(data.new_link);initAjaxChutierLinks();updateStudioChutier();};function onErrorActionToChutier(jqxhr,textStatus,error,$link){void 0;};function initAjaxCompoLinks(){$('.new-composition-link:not(.ajax-enabled)').on('click',onClickNewCompoLink).addClass('ajax-enabled');$('.composition-link:not(.ajax-enabled)').on('click',onClickCompoLink).addClass('ajax-enabled');$('.delete-composition-link:not(.ajax-enabled)').on('click',onClickDeleteCompoLink).addClass('ajax-enabled');};function onClickCompoLink(e){e.preventDefault();openCompo($(this));return false;};function openCompo($link){var cid=$link.attr('cid');var ajax_path=_settings.open_compo_ajax_url+'/'+cid;var path=window.location.origin+Drupal.url(ajax_path);$link.addClass('ajax-loading');$composer.addClass('ajax-loading');$.getJSON(path,{}).done(function(data){onOpenCompoDone(data,$link);}).fail(function(jqxhr,textStatus,error){onErrorOpenCompo(jqxhr,textStatus,error,$link);});};function onOpenCompoDone(data,$link){$('.composition-link').removeClass('is-active');$link.removeClass('ajax-loading').addClass('is-active');if($('.composition',$composer).length){$('.composition',$composer).replaceWith(data.compo);}else{$('header',$composer).after(data.compo);}
-$composer.removeClass('ajax-loading');initDragAndDropUI();$('body').trigger({'type':'on-studio-compo-opened'});};function onErrorOpenCompo(jqxhr,textStatus,error,$link){$link.removeClass('ajax-loading');void 0;};function onClickNewCompoLink(e){e.preventDefault();setInputForNewCompoName($(this));return false;};function setInputForNewCompoName($link){var $form=$('<form>').addClass('new-compo-form').append($('<input>').attr('type','text').attr('placeholder','new name')).append($('<button>').attr('type','submit').html('+')).submit(function(e){onNewCompoFormSubmit(e,$link,$(this));});$link.after($form).addClass('folded');$form.children('input[type="text"]').focus();};function onNewCompoFormSubmit(e,$link,$form){var name=$('input[type="text"]',$form).val();if(name!=''){$form.addClass('ajax-loading').children('*').attr('disabled','disabled');createNewCompo(name,$link,$form);}
-e.preventDefault();};function createNewCompo(name,$link,$form){var ajax_path=$link.attr('data-drupal-link-system-path');var path=window.location.origin+drupalSettings.path.baseUrl+ajax_path;$.getJSON(path,{'new_name':name}).done(function(data){onCreateCompoDone(data,$link,$form);}).fail(function(jqxhr,textStatus,error){onErrorCreateCompo(jqxhr,textStatus,error,$link);});};function onCreateCompoDone(data,$link,$form){var $new_link=$(data.new_link);var $delete_link=$(data.delete_link);$link.removeClass('folded').parents('li').before($('<li>').append($new_link).append($delete_link));$form.remove();initAjaxCompoLinks();openCompo($new_link);};function onErrorCreateCompo(jqxhr,textStatus,error,$link){void 0;};function onClickDeleteCompoLink(e){e.preventDefault();deleteCompo($(this));return false;};function deleteCompo($link){var ajax_path=$link.attr('data-drupal-link-system-path');var path=window.location.origin+Drupal.url(ajax_path);$link.parents('li').addClass('ajax-loading');$.getJSON(path,{}).done(function(data){onDeleteCompoDone(data,$link);}).fail(function(jqxhr,textStatus,error){onErrorDeleteCompo(jqxhr,textStatus,error,$link);});};function onDeleteCompoDone(data,$link,$form){if(data.status=="ok"){$link.parents('li').remove();if($('.composition-link').length){openCompo($('.composition-link').eq(0));}else{$('.composition',$composer).html();}}else{void 0;}};function onErrorDeleteCompo(jqxhr,textStatus,error,$link){$link.parents('li').removeClass('ajax-loading');void 0;};function updateStudioChutier(){$studioChutier=$('#studio-ui .chutier_ui');if($studioChutier.length){var ajax_path=_settings.chutier_ui_ajax;var path=window.location.origin+drupalSettings.path.baseUrl+ajax_path;$studioChutier.addClass('loading');$.getJSON(path,{}).done(function(data){onLoadedChutier($studioChutier,data);}).fail(function(jqxhr,textStatus,error){onLoadChutierError(jqxhr,textStatus,error,$studioChutier);});}};function onLoadedChutier($studioChutier,data){$studioChutier.replaceWith(data.rendered);initAjaxChutierLinks();setChutierDraggable();$('body').trigger({'type':'on-studio-chutier-updated'});}
-function onLoadChutierError(jqxhr,textStatus,error,$studioChutier){void 0;$studioChutier.removeClass('loading');}
-function initDragAndDropUI(){if(!$('.composition_ui .composer .composition .field--name-documents').length){$field_documents=$('<div>').addClass('field').addClass('field--name-documents').appendTo('.composition_ui .composer .composition');}else{$field_documents=$('.composition_ui .composer .composition .field--name-documents');$('.field__item',$field_documents).each(function(i){$(this).prepend($('<span>').addClass('handler'));});}
-var $remove_zone=$('<div>').addClass('remove-drop-zone').appendTo('.composition_ui .composer .composition').droppable({tolerance:'pointer',over:function(e,ui){ui.draggable.addClass('ready-to-remove');},out:function(e,ui){ui.draggable.removeClass('ready-to-remove');},drop:function(e,ui){ui.draggable.remove();}});$field_documents.sortable({revert:false,handle:".handler",receive:function(e,ui){$('.field__item',this).attr('style','');},update:function(e,ui){onOrderChanged(e,ui);},connectWith:$remove_zone,});setChutierDraggable();};function setChutierDraggable(){$('.chutier_ui .item-list li>div').draggable({containment:$('#studio-ui'),scroll:false,helper:function(e){return $('<div>').addClass('field__item').append($('<article>').addClass('node').append($('<h2>').addClass('node-title').append($('.audio-link',this).clone().removeClass('ajax-enable')))).prepend($('<span>').addClass('handler'));},cursorAt:{bottom:10,left:10},zIndex:999,revert:true,revertDuration:0,connectToSortable:$('.composition_ui .composer .composition .field--name-documents'),});}
-function onOrderChanged(e,ui){var cid=$(e.target).parents('.composition').attr('cid');var documents={};$('a',e.target).each(function(i){documents[i]=$(this).attr('nid');});recordCompoList(cid,documents);};function recordCompoList(cid,docs){var ajax_path=_settings.save_compo_ajax_url+'/'+cid;var path=window.location.origin+Drupal.url(ajax_path);$.getJSON(path,{documents:docs}).done(function(data){onRecordCompoDone(data);}).fail(function(jqxhr,textStatus,error){onErrorRecordCompo(jqxhr,textStatus,error);});$('body').trigger({'type':'on-studio-compo-updated'});}
-function onRecordCompoDone(data){if(data.status=="ok"){}else{void 0;}};function onErrorRecordCompo(jqxhr,textStatus,error){void 0;};init();})(jQuery,Drupal,drupalSettings);
+  var _settings = drupalSettings.edlp_studio;
+  var $composer;
+
+  // audio play is handled by edlp_theme
+
+  function init(){
+    // console.log('Studio Init');
+    initEvents();
+    initStudio();
+  };
+
+  function initEvents(){
+    $('body')
+      .on('new-audio-cartel-loaded', initAjaxChutierLinks)
+      .on('new-content-ajax-loaded', initStudio)
+      .on('all-modal-closed', initStudio);
+  };
+
+  function initStudio(){
+    if($('#studio-ui').length){
+      $composer = $('.composition_ui .composer', '#studio-ui');
+      initAjaxChutierLinks();
+      initAjaxCompoLinks();
+      initDragAndDropUI();
+      $('body').trigger({'type':'studio-initialized'});
+    }else{
+      $('body').trigger({'type':'studio-not-active'});
+    }
+  }
+
+  //   ___ _        _   _           _  _         _       _    _      _
+  //  / __| |_ _  _| |_(_)___ _ _  | \| |___  __| |___  | |  (_)_ _ | |__ ___
+  // | (__| ' \ || |  _| / -_) '_| | .` / _ \/ _` / -_) | |__| | ' \| / /(_-<
+  //  \___|_||_\_,_|\__|_\___|_|   |_|\_\___/\__,_\___| |____|_|_||_|_\_\/__/
+  function initAjaxChutierLinks(){
+    //console.log('studio initAjaxChutierLinks');
+    $('.chutier-ajax-link:not(.ajax-enabled)')
+      .addClass('ajax-enabled')
+      .on('click', onClickChutierAjaxLink);
+  };
+  function onClickChutierAjaxLink(e){
+    //console.log('studio onClickAjaxLink chutier');
+    e.preventDefault();
+    addRemoveToChutier($(this));
+    return false;
+  };
+  function addRemoveToChutier($link){
+    // var ajax_path = 'edlp_studio/ajax/chutier/add/'+id; // + '/' +cid;
+    var ajax_path = $link.attr('data-drupal-link-system-path');
+    var path = window.location.origin + drupalSettings.path.baseUrl + ajax_path;
+    $link.addClass('ajax-loading');
+    $.getJSON(path, {})
+      .done(function(data){
+        onActionToChutierDone($link, data);
+      })
+      .fail(function(jqxhr, textStatus, error){
+        onErrorActionToChutier(jqxhr, textStatus, error, $link);
+      });
+  };
+  function onActionToChutierDone($link, data){
+    //console.log('onActionToChutierDone',data);
+    $('body').trigger({
+      'type':'chutier-action-done',
+      'action_done':data.action_done,
+      'new_action':data.action_done == 'add' ? 'remove' : 'add',
+      'target_id':$link.attr('target_id'),
+    });
+    $link.replaceWith(data.new_link);
+    initAjaxChutierLinks();
+    // reload Studio chutier_ui's documents list
+    updateStudioChutier();
+  };
+  function onErrorActionToChutier(jqxhr, textStatus, error, $link){
+    console.warn('action to chuttier load failed : '+error, jqxhr.responseText);
+  };
+
+  //   ___                        _ _   _
+  //  / __|___ _ __  _ __  ___ __(_) |_(_)___ _ _  ___
+  // | (__/ _ \ '  \| '_ \/ _ (_-< |  _| / _ \ ' \(_-<
+  //  \___\___/_|_|_| .__/\___/__/_|\__|_\___/_||_/__/
+  //                |_|
+  function initAjaxCompoLinks(){
+    //console.log('studio initAjaxCompoLinks');
+    $('.new-composition-link:not(.ajax-enabled)')
+    .on('click', onClickNewCompoLink)
+      .addClass('ajax-enabled');
+    $('.composition-link:not(.ajax-enabled)')
+    .on('click', onClickCompoLink)
+      .addClass('ajax-enabled');
+    $('.delete-composition-link:not(.ajax-enabled)')
+      .on('click', onClickDeleteCompoLink)
+      .addClass('ajax-enabled');
+  };
+
+  //   ___                    ___
+  //  / _ \ _ __  ___ _ _    / __|___ _ __  _ __  ___
+  // | (_) | '_ \/ -_) ' \  | (__/ _ \ '  \| '_ \/ _ \
+  //  \___/| .__/\___|_||_|  \___\___/_|_|_| .__/\___/
+  //       |_|                             |_|
+  function onClickCompoLink(e){
+    e.preventDefault();
+    //console.log('onClickCompoLink');
+    openCompo($(this));
+    return false;
+  };
+  function openCompo($link){
+    var cid = $link.attr('cid');
+    var ajax_path = _settings.open_compo_ajax_url+'/'+cid;
+    var path = window.location.origin + Drupal.url(ajax_path);
+    $link.addClass('ajax-loading');
+    $composer.addClass('ajax-loading');
+    $.getJSON(path, {})
+      .done(function(data){
+        onOpenCompoDone(data, $link);
+      })
+      .fail(function(jqxhr, textStatus, error){
+        onErrorOpenCompo(jqxhr, textStatus, error, $link);
+      });
+  };
+  function onOpenCompoDone(data, $link){
+    //console.log('onActionToCompoDone',data);
+    $('.composition-link').removeClass('is-active');
+    $link.removeClass('ajax-loading').addClass('is-active');
+    if($('.composition', $composer).length){
+      $('.composition', $composer).replaceWith(data.compo);
+    }else{
+      $('header', $composer).after(data.compo);
+    }
+    $composer.removeClass('ajax-loading');
+    initDragAndDropUI();
+    $('body').trigger({
+      'type':'on-studio-compo-opened'
+    });
+  };
+  function onErrorOpenCompo(jqxhr, textStatus, error, $link){
+    $link.removeClass('ajax-loading');
+    console.warn('open compo load failed : '+error, jqxhr.responseText);
+  };
+
+  //  _ _  _____ __ __  __ ___ _ __  _ __  ___
+  // | ' \/ -_) V  V / / _/ _ \ '  \| '_ \/ _ \
+  // |_||_\___|\_/\_/  \__\___/_|_|_| .__/\___/
+  //                                |_|
+  function onClickNewCompoLink(e){
+    e.preventDefault();
+    setInputForNewCompoName($(this));
+    return false;
+  };
+  function setInputForNewCompoName($link){
+    var $form = $('<form>').addClass('new-compo-form')
+      .append($('<input>').attr('type', 'text').attr('placeholder', 'new name'))
+      .append($('<button>').attr('type', 'submit').html('+'))
+      .submit(function(e){
+        onNewCompoFormSubmit(e, $link, $(this));
+      });
+
+    $link
+      .after($form)
+      .addClass('folded');
+    $form.children('input[type="text"]').focus();
+  };
+  function onNewCompoFormSubmit(e, $link, $form){
+    var name = $('input[type="text"]',$form).val();
+    //console.log('onNewCompoFormSubmit', name);
+    if(name != ''){
+      $form.addClass('ajax-loading').children('*').attr('disabled', 'disabled');
+      createNewCompo(name, $link, $form);
+    }
+    e.preventDefault();
+  };
+  function createNewCompo(name,$link, $form){
+    var ajax_path = $link.attr('data-drupal-link-system-path');
+    var path = window.location.origin + drupalSettings.path.baseUrl + ajax_path;
+    // $link.addClass('ajax-loading');
+    $.getJSON(path, {
+        'new_name':name
+      })
+      .done(function(data){
+        onCreateCompoDone(data, $link, $form);
+      })
+      .fail(function(jqxhr, textStatus, error){
+        onErrorCreateCompo(jqxhr, textStatus, error, $link);
+      });
+  };
+  function onCreateCompoDone(data, $link, $form){
+    //console.log('onActionToCompoDone',data);
+    var $new_link = $(data.new_link);
+    var $delete_link = $(data.delete_link);
+    $link
+      .removeClass('folded')
+      .parents('li')
+        .before($('<li>').append($new_link).append($delete_link));
+    $form.remove();
+    // open new composition to composer
+    initAjaxCompoLinks();
+    openCompo($new_link);
+  };
+  function onErrorCreateCompo(jqxhr, textStatus, error, $link){
+    console.warn('action to compo load failed : '+error, jqxhr.responseText);
+  };
+
+  // ___      _     _
+  // |   \ ___| |___| |_ ___   __ ___ _ __  _ __  ___
+  // | |) / -_) / -_)  _/ -_) / _/ _ \ '  \| '_ \/ _ \
+  // |___/\___|_\___|\__\___| \__\___/_|_|_| .__/\___/
+  //                                       |_|
+  function onClickDeleteCompoLink(e){
+    e.preventDefault();
+    // TODO: confirm compo deletion
+    deleteCompo($(this));
+    return false;
+  };
+  function deleteCompo($link){
+    var ajax_path = $link.attr('data-drupal-link-system-path');
+    var path = window.location.origin + Drupal.url(ajax_path);
+    $link.parents('li').addClass('ajax-loading');
+    $.getJSON(path, {})
+      .done(function(data){
+        onDeleteCompoDone(data, $link);
+      })
+      .fail(function(jqxhr, textStatus, error){
+        onErrorDeleteCompo(jqxhr, textStatus, error, $link);
+      });
+  };
+  function onDeleteCompoDone(data, $link, $form){
+    //console.log('onDeleteCompoDone',data);
+    if(data.status == "ok"){
+      $link.parents('li').remove();
+      //console.log("$('.composition-link').length", $('.composition-link').length);
+      if($('.composition-link').length){
+        openCompo($('.composition-link').eq(0));
+      }else{
+        $('.composition', $composer).html();
+      }
+    }else{
+      console.warn(data.message);
+    }
+  };
+  function onErrorDeleteCompo(jqxhr, textStatus, error, $link){
+    $link.parents('li').removeClass('ajax-loading');
+    console.warn('delete compo load failed : '+error, jqxhr.responseText);
+  };
+
+  //  ___ _           _ _              _
+  // / __| |_ _  _ __| (_)___ ___ _  _(_)
+  // \__ \  _| || / _` | / _ \___| || | |
+  // |___/\__|\_,_\__,_|_\___/    \_,_|_|
+  // this seems dirty
+  function updateStudioChutier(){
+    $studioChutier = $('#studio-ui .chutier_ui');
+    if($studioChutier.length){
+      var ajax_path = _settings.chutier_ui_ajax;
+      var path = window.location.origin + drupalSettings.path.baseUrl + ajax_path;
+      $studioChutier.addClass('loading');
+      $.getJSON(path, {})
+        .done(function(data){
+          onLoadedChutier($studioChutier, data);
+        })
+        .fail(function(jqxhr, textStatus, error){
+          onLoadChutierError(jqxhr, textStatus, error, $studioChutier);
+        });
+    }
+  };
+  function onLoadedChutier($studioChutier, data){
+    $studioChutier.replaceWith(data.rendered);
+    initAjaxChutierLinks();
+    // set chutier element draggable again
+    setChutierDraggable();
+    $('body').trigger({
+      'type':'on-studio-chutier-updated'
+    });
+  }
+  function onLoadChutierError(jqxhr, textStatus, error, $studioChutier){
+    console.warn('Chutier load failed', jqxhr.responseText);
+    $studioChutier.removeClass('loading');
+
+  }
+
+  //  ___                  __       ___                 _   _ ___
+  // |   \ _ _ __ _ __ _  / _|___  |   \ _ _ ___ _ __  | | | |_ _|
+  // | |) | '_/ _` / _` | > _|_ _| | |) | '_/ _ \ '_ \ | |_| || |
+  // |___/|_| \__,_\__, | \_____|  |___/|_| \___/ .__/  \___/|___|
+  //               |___/                        |_|
+  function initDragAndDropUI(){
+    // check if field--name-documents exists
+    if (!$('.composition_ui .composer .composition .field--name-documents').length) {
+      // if not create it
+      $field_documents = $('<div>')
+        .addClass('field').addClass('field--name-documents')
+        .appendTo('.composition_ui .composer .composition');
+    }else{
+      // add real dom square element to handle sorting
+      $field_documents = $('.composition_ui .composer .composition .field--name-documents'); $('.field__item', $field_documents).each(function(i){
+        $(this).prepend($('<span>').addClass('handler'));
+      });
+    }
+
+    // create remove dropzone
+    var $remove_zone = $('<div>').addClass('remove-drop-zone')
+      .appendTo('.composition_ui .composer .composition')
+      .droppable({
+        tolerance:'pointer',
+        // scope:'composition_ui',
+        over:function(e,ui){
+          // console.log('on over remove : ui', ui);
+          ui.draggable.addClass('ready-to-remove');
+        },
+        out:function(e,ui){
+          // console.log('on over remove : ui', ui);
+          ui.draggable.removeClass('ready-to-remove');
+        },
+        drop:function(e,ui){
+          // console.log('on drop remove : ui', ui);
+          ui.draggable.remove();
+          // onOrderChanged(ui);
+        }
+      });
+
+    // create sortable
+    $field_documents.sortable({
+      revert:false,
+      handle: ".handler",
+      receive:function(e, ui){
+        $('.field__item', this).attr('style', '');
+        // TODO: trigger event to enable new audiolink player
+      },
+      update:function(e, ui){
+        onOrderChanged(e, ui);
+      },
+      connectWith : $remove_zone,
+    });
+
+    // set chutier element draggable
+    setChutierDraggable();
+
+  };
+  function setChutierDraggable(){
+    $('.chutier_ui .item-list li>div').draggable({
+      containment:$('#studio-ui'),
+      scroll:false,
+      helper:function(e){
+        // we reproduce here the irem structure of destination sortable elements
+        // var $audio_link = $('.audio-link',this);
+        return $('<div>').addClass('field__item')
+          .append(
+            $('<article>').addClass('node').append(
+              $('<h2>').addClass('node-title').append(
+                // $('<a>')
+                //   .attr('nid', $audio_link.attr('nid'))
+                //   .html($audio_link.html())
+                $('.audio-link',this).clone().removeClass('ajax-enable')
+              )
+            )
+          )
+          .prepend($('<span>').addClass('handler'));
+      },
+      // cursor:'grab',
+      cursorAt:{bottom:10,left:10},
+      zIndex:999,
+      revert:true,
+      revertDuration:0,
+      connectToSortable:$('.composition_ui .composer .composition .field--name-documents'),
+    });
+  }
+  function onOrderChanged(e, ui){
+    //console.log('onOrderChanged : e', e);
+    var cid = $(e.target).parents('.composition').attr('cid');
+    var documents = {};
+    $('a', e.target).each(function(i) {
+      // console.log(this);
+      documents[i] = $(this).attr('nid');
+    });
+    // console.log(documents);
+    recordCompoList(cid, documents);
+  };
+  function recordCompoList(cid, docs){
+    //console.log('recordCompoList '+cid, docs);
+    var ajax_path = _settings.save_compo_ajax_url+'/'+cid;
+    var path = window.location.origin + Drupal.url(ajax_path);
+    //console.log('path', path);
+    $.getJSON(path, {
+        documents:docs
+      })
+      .done(function(data){
+        onRecordCompoDone(data);
+      })
+      .fail(function(jqxhr, textStatus, error){
+        onErrorRecordCompo(jqxhr, textStatus, error);
+      });
+    $('body').trigger({
+      'type':'on-studio-compo-updated'
+    });
+  }
+  function onRecordCompoDone(data){
+    //console.log('onDeleteCompoDone',data);
+    if(data.status == "ok"){
+    }else{
+      console.warn(data.message);
+    }
+  };
+  function onErrorRecordCompo(jqxhr, textStatus, error){
+    console.warn('record compo failed : '+error, jqxhr.responseText);
+  };
+
+  init();
+})(jQuery, Drupal, drupalSettings);
@@ -1,2 +1,20 @@
+console.log('EDLP THEME HISTORY.js');
+// var edlp is provided by edlp_ajax.module file
+if(edlp.redirect){
+  console.log('history redirect', edlp);
+  console.log('window.location', window.location);
+  // window.localStorage.setItem('edlp_origin_path', edlp.sys_path.replace(/^\//, ''));
+  edlp.sys_path = edlp.sys_path.replace(/^\//, '');

-void 0;if(edlp.redirect){void 0;void 0;edlp.sys_path=edlp.sys_path.replace(/^\//,'');edlp.url=window.location.pathname;edlp.hash=window.location.hash;window.localStorage.setItem('edlp_origin',JSON.stringify(edlp));window.location.replace(window.location.origin+'/'+edlp.lang_code);}else{void 0;}
+  // window.localStorage.setItem('edlp_origin_url', window.location.pathname);
+  edlp.url = window.location.pathname;
+
+  // window.localStorage.setItem('edlp_origin_hash', window.location.hash);
+  edlp.hash = window.location.hash;
+
+  window.localStorage.setItem('edlp_origin', JSON.stringify(edlp));
+  // redirect to home
+  window.location.replace(window.location.origin+'/'+edlp.lang_code);
+}else{
+  console.log('history do not redirect');
+}
@@ -11,6 +11,10 @@
    var _audioPlayer;
    var _randomPlayer;
    var _compoPlayer;
+    var _ajax_timing = {
+      start:0,
+      end:0
+    };

    //  ___      _ _
    // |_ _|_ _ (_) |_
@@ -163,7 +167,7 @@
    function ajaxLoadContent(state){
      console.log('ajaxLoadContent : state', state);
      _$body.addClass('ajax-loading');
-
+      _ajax_timing.start = performance.now();
      var path = window.location.origin + Drupal.url(state.ajax_path);
      $.getJSON(path, {})
        .done(function(data){
@@ -318,10 +322,14 @@
          // https://matomo.org/blog/2017/02/how-to-track-single-page-websites-using-piwik-analytics/
          _paq.push(['setCustomUrl', state.url]);
          _paq.push(['setDocumentTitle', data.title]);
+          // TODO: piwik track load time
+          _ajax_timing.end = performance.now();
+          _paq.push(['setGenerationTimeMs', _ajax_timing.end-_ajax_timing.start]);
          _paq.push(['trackPageView']);
+
          // js event
          // trackEvent(category, action, [name], [value])
-          _paq.push(['trackEvent', 'AjaxNav', 'loaded', state.url]);
+          // _paq.push(['trackEvent', 'AjaxNav', 'loaded', state.url]);
        }
      }
    };
@@ -720,8 +728,9 @@
    };
    AudioPlayer.prototype = {
      init(){
+        this.$container_parent = $('header[role="banner"] .region-header');
        // append ui to document
-        this.$container.appendTo('header[role="banner"] .region-header');
+        this.$container.appendTo(this.$container_parent);
        // record timeline width
        this.timeline_w = parseInt(this.$timeline.width());
        // init audio events
@@ -744,7 +753,8 @@
        // console.log('AudioPlayer openDocument', node);
        if(typeof node == 'undefined'
          || typeof node.nid ==  'undefined'
-          || typeof node.audio_url == 'undfined'){
+          || typeof node.audio_url == 'undfined'
+          || typeof node.document_url == 'undfined'){
          console.warn('AudioPlayer openDocument() node is malformed', node);
          return false;
        }
@@ -757,9 +767,14 @@

          // add the document opening to history to be able to share and play audio from any where
          if(caller != "history_first_load"){
-            state = {
+            var state = {
              audio:true,
-              node:node,
+              node:{
+                nid:node.nid,
+                audio_url:node.audio_url,
+                document_url:node.document_url,
+                title:node.title || null,
+              },
              historic_index : this.currentHistoricIndex,
            };

@@ -931,6 +946,7 @@
      },
      // global
      show(){
+        this.$container_parent.addClass('audio-player-visible');
        this.$container.addClass('visible');
      },
      showHidePreviousBtn(){
@@ -961,6 +977,7 @@
      },
      hide(){
        // console.log('AudioPlayer hide()');
+        this.$container_parent.removeClass('audio-player-visible');
        this.$container.removeClass('visible');
        // trigger highlighted node remove on corpus map
        try {
@@ -54,7 +54,11 @@
  }
 }

-
+@mixin btn {
+  padding: 3px;
+  background-color: white;
+  border-radius: 3px;
+}
 // .layout-container{
 //   pointer-events: none;
 // }
@@ -79,7 +83,7 @@ header[role="banner"]{
      width:$w; height:$w * 0.22;
      margin-top: 0.15em;
      background-image: url(../img/logo.svg);
-      background-color: white;
+      // background-color: white;
      background-repeat:no-repeat;
      background-size: contain;
      white-space: nowrap;
@@ -87,6 +91,12 @@ header[role="banner"]{
      overflow: hidden;
    }
  }
+  opacity: 1;
+  transition: opacity 0.7s ease-in-out;
+
+  .audio-player-visible &{
+    opacity: 0;
+  }
 }

 #block-mainnavigation{
@@ -104,6 +114,7 @@ header[role="banner"]{
        text-decoration: none;
        text-transform: uppercase;
        margin-left: 1em;
+        @include btn;
        &:before{
          content: "";
          display:inline-block;
@@ -141,6 +152,7 @@ header[role="banner"]{
        text-decoration: none;
        text-transform: capitalize;
        margin-left: 0.8em;
+        @include btn;
        &:before{
          content: "";
          display:inline-block;
@@ -497,8 +509,8 @@ main[role="main"]{
 #audio-player{
  position: absolute;
  top:0; left:0;
-  padding-left:1.2em;
-  background-color: white;
+  padding-left:0.7em;
+  // background-color: white;
  height:100%; min-width:300px;
  z-index: 20;
  opacity: 0;
@@ -518,11 +530,14 @@ main[role="main"]{
    max-height: 100%;
    // outline: 1px solid green;
    white-space: normal;
+    @include btn;
  }
  .btns{
    @include audio_controls;
  }
  .time-line-container{
+    // height:50%;
+    background:transparent;
    .time-line{
      position: relative;
      width:70px; height:1px;
@@ -1408,6 +1423,7 @@ footer{
        }
        a{
          font-size: 0.756em;
+          @include btn;
          &:before{
            content: "";
            display:inline-block;
@@ -1442,6 +1458,7 @@ footer{
          margin-left: 1em;
        }
        a{
+          @include btn;
          &:before{
            content: "";
            display:inline-block;
@@ -1511,7 +1528,7 @@ footer{
        a{
          // outline: 1px solid blue;
          pointer-events: all;
-          background-color: #fff;
+          @include btn;
          padding-right: 0.4em;
          &:before{
            content: "";
@@ -1563,7 +1580,8 @@ footer{
            // outline: 1px solid blue;
            pointer-events: all;
            // background-color: #fff;
-            background-color: rgba(255,255,255, 0.6);
+            // background-color: rgba(255,255,255, 0.6);
+            @include btn;
            padding-right: 0.4em;
            color:black;
            transition: color 0.3s ease-in-out;
@@ -1739,7 +1757,9 @@ footer{
  @mixin iconlinkblock($bgimgurl) {
    pointer-events: all;
    margin-left: 0.5em;
+    // @include btn;
    a{
+      box-sizing: border-box;
      $wh:$icons_w;
      display: block;
      width:$wh; height:$wh;
@@ -1772,12 +1792,14 @@ footer{
    margin-bottom: 1em;
    pointer-events: all;
    margin-left: 0.2em;
-    // outline: 1px solid blue;
    $wh:$icons_w;
    position: relative;
+    // box-sizing: border-box;
    width:$wh; height: $wh;
-    // background-color: blue;
    h2{
+      box-sizing: content-box;
+      // @include btn;
+      // padding:0;
      position: relative;
      width:$wh; height:$wh;
      background-image: url(../img/studio.svg);
Author	SHA1	Message	Date
bachir	6d40f860e4	more corpus optimizations	2018-04-19 22:48:51 +02:00
bachir	fcb7677cfc	pre rendering each node in owne virtual canvas, then just move this canvas into the main scene	2018-04-19 21:12:53 +02:00
bachir	86dcf68f62	corpus removed hardcoded _dpi value to 2 to window.devicePixelRatio	2018-04-19 18:25:19 +02:00
bachir	eddb96cb2e	trying to fix corpus map canvas resolution	2018-04-18 21:58:52 +02:00
bachir	2df8d15d91	fixed corpus map canvas resolution	2018-04-18 21:47:29 +02:00
bachir	f515e7682a	mignified assets for prod	2018-04-18 17:41:01 +02:00
bachir	6e56bf1799	fixed entrees menu : translation and order	2018-04-18 17:40:08 +02:00
bachir	613ea5fc02	fixed blured corpus map	2018-04-18 16:41:01 +02:00
bachir	a9cd74b3fb	bug fix	2018-04-18 11:42:11 +02:00
bachir	bcd129a961	removed redondant events from piwik tracking : ajaxload and search	2018-04-18 11:40:15 +02:00
bachir	35eadafe3e	improved piwik search tracking	2018-04-18 11:34:17 +02:00
bachir	74f4c09eb1	added piwik tracking for: ajax loading timing, site search	2018-04-18 11:24:28 +02:00