audio links in entree index launch the audio player

sites/all/modules/figli/edlp_corpus/edlp_corpus.module

@@ -36,7 +36,7 @@ function edlp_corpus_entity_extra_field_info(){
     'label' => t('Index'),
     'description' => 'Display index of all documents tagued with the term',
     'weight' => 99,
-    'visible' => FALSE,
+    // 'visible' => FALSE,
   ];
   return $extra;
 }
@@ -59,7 +59,6 @@ function edlp_corpus_taxonomy_term_view(array &$build, \Drupal\Core\Entity\Entit
       ->condition('field_entrees', $entity->id());
 
     $documents_nids = $query->execute();
-    // dpm($documents_nids);
     $documents = entity_load_multiple('node', $documents_nids);
 
     $documents_list = array (
@@ -70,21 +69,25 @@ function edlp_corpus_taxonomy_term_view(array &$build, \Drupal\Core\Entity\Entit
       $documents_list['#items'][] = $view_builder->view($doc, 'index');
     }
 
-
     // And the last step is to actually build the tree.
     $build['index'] = array(
       '#type'=>"container",
       '#attributes'=>array(
         'class'=>'index'
       ),
+      'label'=>array(
+        '#type' => 'container',
+        "#markup"=> t("Index"),
+        '#attributes'=>array(
+          'class'=>'field__label'
+        ),
+      ),
       'documents'=> $documents_list
     );
-
-
-
   }
 }
 
+
 /**
  * Implements hook_page_attachments().
  * @param array $attachments

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

@@ -37,12 +37,15 @@ edlp_vars = {
       // TODO: redirect all no-front pages to front with write hash
 
       _$body.on('corpus-map-ready', onCorpusMapReady);
-      initScrollbars();
+      initAudioPlayer();
+
       initAjaxLinks();
+
       if (_$body.is('.path-productions')) {
         initProductions();
       }
-      initAudioPlayer();
+
+      initScrollbars();
     };
 
 
@@ -233,7 +236,7 @@ edlp_vars = {
     //      |__/
     // TODO: add url hash nav
     // TODO: implement history.js
-    function  initAjaxLinks(){
+    function initAjaxLinks(){
       console.log('initAjaxLinks');
 
       $('a', '#block-mainnavigation')
@@ -264,6 +267,16 @@ edlp_vars = {
       if($link.is('.is-active'))
         return false;
 
+      // Audio links
+      if($link.is('.audio-link')){
+        _audio_player.openDocument({
+          nid:$link.attr('nid'),
+          audio_url:$link.attr('audio_url')
+        });
+        return false;
+      }
+
+      // other links
       var sys_path = $(this).attr('data-drupal-link-system-path');
       var ajax_path = sys_path;
       if(sys_path == '<front>'){

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1742,7 +1742,7 @@ footer {
         footer .block-block-edlp-entrees ul li[tid='123'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='123'] .entree-content span.oblique-wrapper a:before {
           border-color: #497715;
           background-color: #497715; }
-        footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:not(:hover):before {
+        footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:not(:hover):not(.is-active):before {
           background-color: #fff !important; }
         footer .block-block-edlp-entrees ul li:not(.opened) a.term-link:not(:hover):not(.highlighted):before {
           background-color: #fff !important; }

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

@@ -14,12 +14,15 @@
       // TODO: redirect all no-front pages to front with write hash
 
       _$body.on('corpus-map-ready', onCorpusMapReady);
-      initScrollbars();
+      initAudioPlayer();
+
       initAjaxLinks();
+
       if (_$body.is('.path-productions')) {
         initProductions();
       }
-      initAudioPlayer();
+
+      initScrollbars();
     };
 
 
@@ -210,7 +213,7 @@
     //      |__/
     // TODO: add url hash nav
     // TODO: implement history.js
-    function  initAjaxLinks(){
+    function initAjaxLinks(){
       console.log('initAjaxLinks');
 
       $('a', '#block-mainnavigation')
@@ -241,6 +244,16 @@
       if($link.is('.is-active'))
         return false;
 
+      // Audio links
+      if($link.is('.audio-link')){
+        _audio_player.openDocument({
+          nid:$link.attr('nid'),
+          audio_url:$link.attr('audio_url')
+        });
+        return false;
+      }
+
+      // other links
       var sys_path = $(this).attr('data-drupal-link-system-path');
       var ajax_path = sys_path;
       if(sys_path == '<front>'){

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

@@ -728,7 +728,7 @@ footer{
         //     color: red;
         //   }
         // }
-        .entree-content span.oblique-wrapper a:not(:hover):before{background-color: #fff!important;}
+        .entree-content span.oblique-wrapper a:not(:hover):not(.is-active):before{background-color: #fff!important;}
 
         &:not(.opened){
           a.term-link:not(:hover):not(.highlighted):before{

sites/all/themes/custom/edlptheme/edlptheme.theme

@@ -54,7 +54,31 @@ function edlptheme_preprocess_edlp_productions(&$vars){
   // dpm($vars);
 }
 
-function edlptheme_preprocess_node__player_cartel(&$vars){
+function edlptheme_preprocess_node__enregistrement__index(&$vars){
+  $node = $vars['elements']['#node'];
+  $options = ['absolute' => TRUE];
+  $url = Url::fromRoute('entity.node.canonical', ['node' => $node->id()], $options);
+  $system_path = $url->getInternalPath();
+  // get the audio file url
+  $field_son_values = $node->get('field_son')->getValue();
+  $son_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : "";
+  $son_file = \Drupal\file\Entity\File::load($son_fid);
+  $son_url = null;
+  if($son_file){
+    $son_uri = $son_file->getFileUri();
+    $son_url = file_create_url($son_uri);
+  }
+
+  $vars['link_attributes'] = new Attribute(array(
+    'data-drupal-link-system-path' => $system_path=='' ? '<front>' : $system_path,
+    'audio_url' => $son_url,
+    'nid' => $node->id(),
+    'class' => array('audio-link', 'ajax-link')
+  ));
+  // dpm($vars['link_attributes']);
+}
+
+function edlptheme_preprocess_node__enregistrement__player_cartel(&$vars){
   // dpm($vars);
   // if transcript not empty
   $url = Url::fromRoute('entity.node.canonical', ['node'=>$vars['node']->id()], array(

sites/all/themes/custom/edlptheme/templates/content/__node--enregistrement--index.html.twig

@@ -0,0 +1,78 @@
+{#
+/**
+ * @file
+ * Theme override to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: Themed creation date field.
+ * - author_name: Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ */
+#}
+<h2{{ title_attributes.addClass('node-title') }}>
+  <a href="{{ url }}" rel="bookmark" {{ link_attributes }}>{{ label }}</a>
+</h2>
+<div{{ content_attributes.addClass('node__content') }}>
+  {{ content }}
+</div>