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/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':{
-                  'id':_node_hover_id,
-                  'nid':_nodes[_node_hover_id].nid,
-                  'audio_url':_nodes[_node_hover_id].audio_url
-                },
+                'target_node':_nodes[_node_hover_id],
               };
               _$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/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_url', window.location.pathname);
-  window.localStorage.setItem('edlp_origin_hash', window.location.hash);
+  // window.localStorage.setItem('edlp_origin_path', edlp.sys_path.replace(/^\//, ''));
+  edlp.sys_path = edlp.sys_path.replace(/^\//, '');
+
+  // 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');
-      if(origin_sys_path){
-        var origin_url = window.localStorage.getItem('edlp_origin_url');
+      // var origin_sys_path = window.localStorage.getItem('edlp_origin_path');
+      var edlp_origin = JSON.parse(window.localStorage.getItem('edlp_origin'));
+
+      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 view_mode = origin_hash.replace('#', '');
+        // var origin_hash = window.localStorage.getItem('edlp_origin_hash');
+        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="'+origin_url+'"][viewmode="'+view_mode+'"]');
+          var $link = $('[href="'+edlp_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_url");
+        window.localStorage.removeItem("edlp_origin");
+        // 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
-        this.timeOutToHide();
+        // don't close player if article or transcript is open
+        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: {  }