refactored edlp_history redirection system, incorporated audio links in it

sites/all/modules/figli/edlp_ajax/edlp_ajax.module

@@ -24,6 +24,29 @@ function edlp_ajax_page_attachments(array &$attachments) {
   $current_language = \Drupal::languageManager()->getCurrentLanguage()->getId();
   $is_front = \Drupal::service('path.matcher')->isFrontPage();
 
+  $entity_type = null;
+  $entity_bundle = null;
+  $entity_id = null;
+  $audio_url = null;
+  foreach (['node', 'taxonomy_term'] as $type) {
+    $entity = \Drupal::routeMatch()->getParameter($type);
+    if($entity){
+      $entity_type = $type;
+      $entity_bundle = $entity->bundle();
+      $entity_id = $entity->id();
+      if($entity_bundle == 'enregistrement'){
+        $field_son_values = $entity->get('field_son')->getValue();
+        $audio_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : null;
+        if($audio_fid){
+          $audio_file = \Drupal\file\Entity\File::load($audio_fid);
+          $son_uri = $audio_file->getFileUri();
+          $audio_url = file_create_url($son_uri);
+        }
+      }
+      break;
+    }
+  }
+
   // do not redirect if not node, term, or custom routing
   // FIXME: check with routes instead of path as path can change !!!
   if(preg_match('/^\/?node\/\d+/', $current_path)
@@ -41,6 +64,10 @@ function edlp_ajax_page_attachments(array &$attachments) {
     is_front:".($is_front ? 'true':'false').",\n
     redirect:".($redirect ? 'true':'false').",\n
     lang_code:'".$current_language."',\n
+    entity_type:'".$entity_type."',\n
+    entity_bundle:'".$entity_bundle."',\n
+    entity_id:'".$entity_id."',\n
+    audio_url:'".$audio_url."',\n
   };";
 
   $attachments['#attached']['html_head'][] = [

sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css

@@ -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:.4em;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.4em;
+    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); }

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -155,7 +155,7 @@
     // | .` / _ \/ _` / -_|_-<
     // |_|\_\___/\__,_\___/__/
     function buildNodes(nodes){
-      //console.log("buildNodes", nodes);
+      // console.log("buildNodes", nodes);
       var d;
       for (var i in nodes) {
         d = i < 1 ? true : false;
@@ -791,11 +791,7 @@
               // console.log("corpus : click on node", _nodes[_node_hover_id]);
               var event = {
                 'type':'corpus-cliked-on-node',
-                'target_node':{
+                'target_node':_nodes[_node_hover_id],
-                  'id':_node_hover_id,
-                  'nid':_nodes[_node_hover_id].nid,
-                  'audio_url':_nodes[_node_hover_id].audio_url
-                },
               };
               _$canvas.trigger(event);
               // instead of directly opening the doc, create an event listener (e.g. : audio played from random)

sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php

@@ -8,6 +8,7 @@ use Drupal\File\Entity\File;
 // use Symfony\Component\HttpFoundation\JsonResponse;
 use Drupal\Core\Cache\CacheableJsonResponse;
 use Drupal\Core\Cache\CacheableMetadata;
+use Drupal\core\render\RenderContext;
 use Drupal\Core\Ajax\AjaxResponse;
 
 
@@ -77,6 +78,10 @@ class CorpusController extends ControllerBase {
       // if($has_article && $article_value[0]['value'] == "")
       //   dpm($article_value);
 
+      $document_url = \Drupal::service('renderer')->executeInRenderContext(new RenderContext(), function () use ($node) {
+        return $node->toUrl()->toString();
+      });
+
       // favoris marker
       $nodes_data[] = array(
         "nid" => $node->get('nid')->getString(),
@@ -87,6 +92,7 @@ class CorpusController extends ControllerBase {
         "audio_url" => $audio_url,
         "has_article" => $has_article,
         "chutier_action" => 'add',
+        "document_url" => $document_url,
       );
     }
 

sites/all/modules/figli/edlp_search/assets/dist/scripts/edlp_search.min.js

@@ -1,4 +1,109 @@
+(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="langues"]',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);}
+  var settings = drupalSettings.edlp_search;
-_$body.trigger({'type':'search-results-loaded','results':data.results_nids});};function onResultsLoadFail(jqxhr,textStatus,error){void 0;};function onSearchClosed(e){$('div[theme="edlp_search_results"]').remove();_$body.trigger({'type':'search-closed'});}
+  var _$body = $('body');
-init();})(jQuery,Drupal,drupalSettings);
+  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="langues"]', 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
+    });
+
+  };
+
+  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);

sites/all/modules/figli/edlp_studio/assets/dist/scripts/edlp_studio.min.js

@@ -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'});}}
+  var _settings = drupalSettings.edlp_studio;
-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);}
+  var $composer;
-$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'});}
+  // audio play is handled by edlp_theme
-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'));});}
+  function init(){
-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'),});}
+    // console.log('Studio Init');
-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'});}
+    initEvents();
-function onRecordCompoDone(data){if(data.status=="ok"){}else{void 0;}};function onErrorRecordCompo(jqxhr,textStatus,error){void 0;};init();})(jQuery,Drupal,drupalSettings);
+    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);

sites/all/themes/custom/edlptheme/assets/dist/scripts/history.min.js

@@ -1,2 +1,21 @@
+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;window.localStorage.setItem('edlp_origin_path',edlp.sys_path.replace(/^\//,''));window.localStorage.setItem('edlp_origin_url',window.location.pathname);window.localStorage.setItem('edlp_origin_hash',window.location.hash);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
+  // debugger;
+  window.location.replace(window.location.origin+'/'+edlp.lang_code);
+}else{
+  console.log('history do not redirect');
+}

sites/all/themes/custom/edlptheme/assets/scripts/history.js

@@ -3,10 +3,18 @@ console.log('EDLP THEME HISTORY.js');
 if(edlp.redirect){
   console.log('history redirect', edlp);
   console.log('window.location', window.location);
-  window.localStorage.setItem('edlp_origin_path', edlp.sys_path.replace(/^\//, ''));
+  // window.localStorage.setItem('edlp_origin_path', edlp.sys_path.replace(/^\//, ''));
-  window.localStorage.setItem('edlp_origin_url', window.location.pathname);
+  edlp.sys_path = edlp.sys_path.replace(/^\//, '');
-  window.localStorage.setItem('edlp_origin_hash', window.location.hash);
+
+  // 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
+  // debugger;
   window.location.replace(window.location.origin+'/'+edlp.lang_code);
 }else{
   console.log('history do not redirect');

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -3,7 +3,7 @@
   EdlpTheme = function(){
     var _ajax_settings = drupalSettings.edlp_ajax;
     var _$body = $('body');
-    var _is_front = _$body.is('.path-frontpage');
+    // var _is_front = drupalSettings.path.isFront;
     var _corpus_ready = false;
     var _$corpus_canvas;
     var _$row = $('main[role="main"]>.layout-content>.row');
@@ -19,6 +19,9 @@
     function init(){
       console.log("EdlpTheme init()");
 
+      _audioPlayer = new AudioPlayer();
+      _compoPlayer = new CompoPlayer();
+
       initAjaxLinks();
 
       initHistory();
@@ -28,9 +31,6 @@
 
       initEvents();
 
-      _audioPlayer = new AudioPlayer();
-      _compoPlayer = new CompoPlayer();
-
     };
 
     //  ___             _
@@ -118,6 +118,8 @@
       var term_match = state.ajax_path.match(/^\/?(taxonomy\/term\/(\d+))$/i);
       console.log('term_match', term_match);
       if(node_match){
+        // TODO: detect audio links which will open audioplayer and wont load any ajax content unless view_mode "article" or "transcript"
+
         state.ajax_path = _ajax_settings.entityjson_path+'/'+node_match[1];
         state.node_nid = node_match[2];
         // check for viewmode attribute
@@ -340,6 +342,7 @@
         $(block.id).replaceWith(block.rendered);
       }
     };
+
     //  _  _ _    _
     // | || (_)__| |_ ___ _ _ _  _
     // | __ | (_-<  _/ _ \ '_| || |
@@ -352,18 +355,22 @@
     function initFirstLoad(){
       console.log('theme : initFirstLoad()');
 
-      var origin_sys_path = window.localStorage.getItem('edlp_origin_path');
+      // var origin_sys_path = window.localStorage.getItem('edlp_origin_path');
-      if(origin_sys_path){
+      var edlp_origin = JSON.parse(window.localStorage.getItem('edlp_origin'));
-        var origin_url = window.localStorage.getItem('edlp_origin_url');
+
+      if(edlp_origin.sys_path){
+        // var origin_url = window.localStorage.getItem('edlp_origin_url');
         // origin_hash is used as viewmode for taxonomy term entrees load (index or notice)
-        var origin_hash = window.localStorage.getItem('edlp_origin_hash');
+        // var origin_hash = window.localStorage.getItem('edlp_origin_hash');
-        var view_mode = origin_hash.replace('#', '');
+        var view_mode = edlp_origin.hash.replace('#', '');
+
+        // // TODO: refactorize with new infos from edlp_origin
         if(view_mode){
-          // TODO first load with index or notice do not activate the right link (activate all)
+          var $link = $('[href="'+edlp_origin.url+'"][viewmode="'+view_mode+'"]');
-          var $link = $('[href="'+origin_url+'"][viewmode="'+view_mode+'"]');
           var selector = $link.attr('selector') || null;
           if(selector){
             // in case of entree link (actualy, selector is used only for entries links)
+            // TODO: use a promise
             if(_corpus_ready){
               _$corpus_canvas.trigger({
                 type:'open-entree',
@@ -372,33 +379,49 @@
             }else{
               // else : EdlpCorpus will check when ready if entry item (notice or index) is already .is-active
               // .is-active class is added by onAjaxLoaded() (when content is loaded)
-              // but what if corpus ready before onAjaxLoaded
+              // but what if corpus ready before onAjaxLoaded >> use a promise !!
               $('li.entree[tid="'+$link.attr('tid')+'"] a.term-link').addClass('is-active');
             }
           }
         }
 
         // create history state
-        var state = getSysPathState(origin_sys_path, view_mode);
+        var state = getSysPathState(edlp_origin.sys_path, view_mode);
 
+        // check if audio link
+        if(edlp_origin.audio_url){
+          var node = {
+            nid:edlp_origin.entity_id,
+            audio_url:edlp_origin.audio_url
+          };
+          _audioPlayer.openDocument(node, 'history_first_load');
+          if(view_mode == ""){
+            // if audio only record in state
+            state.audio = true;
+            state.node = node;
+          }else{
+            // ajax load content for audio only if article or transcript
+            ajaxLoadContent(state);
+          }
+        }
         // only if not entree path
-        if(state.ajax_path){
+        // only if not audio (without article or transcript) path
+        else if(state.ajax_path){
           // load content through ajax
           // ajaxLoadContent(null, state.sys_path, state.ajax_path, selector);
           ajaxLoadContent(state);
         }
 
-        // TODO what about entree alone (without notice or index)
         if(state.entree_tid){
           openEntree(state.entree_tid);
         }
 
         // record history state
-        history.replaceState(state, null, origin_url+origin_hash);
+        history.replaceState(state, null, edlp_origin.url+edlp_origin.hash);
 
         // reset the storage
-        window.localStorage.removeItem("edlp_origin_path");
+        window.localStorage.removeItem("edlp_origin");
-        window.localStorage.removeItem("edlp_origin_url");
+        // window.localStorage.removeItem("edlp_origin_url");
 
       }else{
         history.replaceState({home:true}, null, window.location.pathname);
@@ -409,7 +432,11 @@
       console.log('onPopState',e.state);
       if(e.state.home){
         backToFrontPage(true);
-      }else{
+      }
+      else if (e.state.audio) {
+          _audioPlayer.openDocument(e.state.node, 'popstate', e.state.historic_index);
+      }
+      else{
         if(e.state.entree_tid){
           openEntree(e.state.entree_tid);
         }
@@ -631,7 +658,7 @@
         this.$playpause.on('click', this.togglePlayPause.bind(this));
         this.$next.on('click', this.playNext.bind(this));
       },
-      openDocument(node, caller){
+      openDocument(node, caller, historic_index){
         // console.log('AudioPlayer openDocument', node);
         if(typeof node == 'undefined'
           || typeof node.nid ==  'undefined'
@@ -639,11 +666,27 @@
           console.warn('AudioPlayer openDocument() node is malformed', node);
           return false;
         }
-        this.historic.push(node);
-        this.currentHistoricIndex = this.historic.length-1;
-        // this.shuffle_mode = shuffle_mode || false;
 
-        // TODO: add an hash tag to be able to share and play audio from any where
+        // if we don't come from history popstate
+        if(typeof caller == 'undefined' || caller != 'popstate'){
+          this.historic.push(node);
+          this.currentHistoricIndex = this.historic.length-1;
+          // this.shuffle_mode = shuffle_mode || false;
+
+          // add the document opening to history to be able to share and play audio from any where
+          if(caller != "history_first_load"){
+            state = {
+              audio:true,
+              node:node,
+              historic_index : this.currentHistoricIndex,
+            };
+
+            history.pushState(state, null, node.document_url);
+          }
+        }else{
+          // if the call commes from popstate, we update the current position of index
+          this.currentHistoricIndex = historic_index;
+        }
 
         this.emmit('audio-open-document', {caller:caller});
 
@@ -721,9 +764,12 @@
       },
       stop(){
         // console.log('AudioPlayer stop()');
+        // debugger;
         this.audio.pause();
-        // TODO: don't close player if article or transcript is open
+        // don't close player if article or transcript is open
-        this.timeOutToHide();
+        if(!_$body.is('.path-node-'+this.historic[this.currentHistoricIndex].nid)){
+          this.timeOutToHide();
+        }
       },
       // audio events
       onPlaying(){
@@ -746,6 +792,7 @@
         this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
       },
       onEnded(){
+        console.log('AudioPlayer onEnded()');
         this.emmit('audio-ended');
         this.stop();
       },
@@ -1040,7 +1087,9 @@
         }
       },
       stop(){
-        _audioPlayer.stop();
+        if(this.playing){
+          _audioPlayer.stop();
+        }
         this.reset();
       },
       reset(){
@@ -1151,7 +1200,7 @@
       // close entrees
       _$corpus_canvas.trigger({'type':'close-all-entree'});
       if(!pop_state){
-        history.pushState({home:true}, null, window.location.origin);
+        history.pushState({home:true}, null, drupalSettings.path.baseUrl+drupalSettings.path.currentLanguage);
       }
     }
 
@@ -1269,7 +1318,9 @@
   } // end EdlpTheme()
 
   $(document).ready(function($) {
-    var edlptheme = new EdlpTheme();
+    if(drupalSettings.path.isFront){
+      var edlptheme = new EdlpTheme();
+    }
   });
 
 })(jQuery, Drupal, drupalSettings);

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -273,6 +273,8 @@ main[role="main"]{
       @include content_subtitles;
       margin:0.9em 0 0 0;
     }
+  }
+  article.node.node--type-enregistrement.node--view-mode-transcript{
     html.js &{
       h3.sur-title{display:none;}
     }
@@ -393,6 +395,7 @@ main[role="main"]{
     opacity: 1;
     pointer-events:all;
   }
+  white-space: nowrap;
   &>*{
     display: inline-block;
     vertical-align: middle;
@@ -400,6 +403,7 @@ main[role="main"]{
     padding:0;
     max-height: 100%;
     // outline: 1px solid green;
+    white-space: normal;
   }
   .btns{
     @include audio_controls;

sites/default/config/sync/pathauto.pattern.documents.yml

@@ -0,0 +1,22 @@
+uuid: 4974717e-ade6-4010-951e-fa1d78d84a00
+langcode: fr
+status: true
+dependencies:
+  module:
+    - node
+id: documents
+label: Documents
+type: 'canonical_entities:node'
+pattern: 'documents/[node:title]'
+selection_criteria:
+  88beab32-c4e4-446a-99f7-aaa33b66a902:
+    id: node_type
+    bundles:
+      enregistrement: enregistrement
+    negate: false
+    context_mapping:
+      node: node
+    uuid: 88beab32-c4e4-446a-99f7-aaa33b66a902
+selection_logic: and
+weight: -5
+relationships: {  }