enregistrement transcription interface is ok

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

@@ -194,7 +194,11 @@
         console.log('selector', state.selector);
         $('a[selector="'+state.selector+'"]').addClass('is-active');
       }else{
-        $('a[data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');
+        if(typeof state.view_mode != 'undefined'){
+          $('a[viewmode="'+state.view_mode+'"][data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');
+        }else{
+          $('a[data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');
+        }
         // as new content is not related to entree, we trigger close entree
         _$body.trigger({'type':'new-content-not-entree-ajax-loaded'});
       }
@@ -228,6 +232,12 @@
         addCloseModalBtnToCols();
       }
 
+      // enregistrement transcription
+      if(data.entity_type == "node" && data.bundle == "enregistrement" && data.view_mode == "transcript"){
+        // window.requestAnimationFrame(initEnregistrementTranscript);
+        initEnregistrementTranscript();
+      }
+
       // update the language switcher block if it comes in the response
       if(typeof data.translations_links != 'undefined'){
         console.log('state',state);
@@ -261,7 +271,6 @@
       _$body.attr('booted', 'booted');
       _$body.removeClass('ajax-loading');
 
-
       // url is null means that we are loading content on popState event
       // so we don't record the state again
       if(state.url){
@@ -271,7 +280,7 @@
         // };
         // console.log('url:'+url+' ; state',state);
         // console.log(window.location);
-        // we can not pushestate with absolute url
+        // /!\ we can not pushestate with absolute url /!\
         history.pushState(state, null, state.url);
       }
     };
@@ -713,6 +722,7 @@
       stop(){
         // console.log('AudioPlayer stop()');
         this.audio.pause();
+        // TODO: don't close player if article or transcript is open
         this.timeOutToHide();
       },
       // audio events
@@ -1201,6 +1211,30 @@
       });
     };
 
+
+    //  ___                   _    _                         _
+    // | __|_ _  _ _ ___ __ _(_)__| |_ _ _ ___ _ __  ___ _ _| |_
+    // | _|| ' \| '_/ -_) _` | (_-<  _| '_/ -_) '  \/ -_) ' \  _|
+    // |___|_||_|_| \___\__, |_/__/\__|_| \___|_|_|_\___|_||_\__|
+    //                  |___/
+    function initEnregistrementTranscript(){
+      console.log('initEnregistrementTranscript');
+      var $node = _$row.find('article.node--type-enregistrement.node--view-mode-transcript');
+      var $nav = $('<nav>').prependTo($node);
+      $node.find('.field--name-field-transcript-vo').addClass('visible').find('.field__label')
+        .clone().appendTo($nav).addClass('is-active')
+        .attr('field_target', '.field--name-field-transcript-vo');
+      $node.find('.field--name-field-transcript-trad').find('.field__label')
+        .clone().appendTo($nav)
+        .attr('field_target', '.field--name-field-transcript-trad');
+      $nav.find('.field__label').on('click', function(){
+        var $this = $(this).addClass('is-active');
+        $this.siblings('.is-active').removeClass('is-active');
+        $this.parents('article.node').find('.field.visible').removeClass('visible');
+        $this.parents('article.node').find($this.attr('field_target')).addClass('visible');
+      });
+    };
+
     //  __  __         _      _
     // |  \/  |___  __| |__ _| |___
     // | |\/| / _ \/ _` / _` | (_-<

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

@@ -1306,14 +1306,59 @@ main[role="main"] .layout-content {
   main[role="main"] .layout-content .field.text-formatted a.audio-link {
     border-bottom: 1px dotted red; }
 
-main[role="main"] article.node > h2, main[role="main"] h2.title {
+main[role="main"] h3.sur-title {
+  font-size: 0.9em;
+  font-weight: normal;
+  text-transform: uppercase;
+  margin: 0.9em 0 0; }
+
+main[role="main"] article.node:not(.node--type-enregistrement) > h2, main[role="main"] h2.title {
+  font-size: 0.9em;
+  font-weight: normal;
+  text-transform: uppercase; }
+
+main[role="main"] article.node.node--type-enregistrement > h2 {
+  font-size: 0.82em;
+  font-weight: 600;
+  line-height: 1.6;
+  margin: 0.9em 0 0 0; }
+
+html.js main[role="main"] article.node.node--type-enregistrement h3.sur-title {
+  display: none; }
+
+main[role="main"] article.node.node--type-enregistrement .field--name-field-transcript-vo .field__label, main[role="main"] article.node.node--type-enregistrement .field--name-field-transcript-trad .field__label {
   font-size: 0.9em;
   font-weight: normal;
   text-transform: uppercase; }
+  html.js main[role="main"] article.node.node--type-enregistrement .field--name-field-transcript-vo .field__label, html.js main[role="main"] article.node.node--type-enregistrement .field--name-field-transcript-trad .field__label {
+    display: none; }
+
+main[role="main"] article.node.node--type-enregistrement .field--name-field-transcript-vo:not(.visible), main[role="main"] article.node.node--type-enregistrement .field--name-field-transcript-trad:not(.visible) {
+  display: none; }
+
+main[role="main"] article.node.node--type-enregistrement nav {
+  padding: 1em 0 0; }
+  main[role="main"] article.node.node--type-enregistrement nav div.field__label {
+    font-size: 0.9em;
+    font-weight: normal;
+    text-transform: uppercase;
+    display: inline-block;
+    cursor: pointer;
+    margin-right: 1em; }
+    main[role="main"] article.node.node--type-enregistrement nav div.field__label:before {
+      content: "";
+      display: inline-block;
+      width: 7px;
+      height: 7px;
+      border: 1px solid red;
+      margin-right: 0.5em; }
+    main[role="main"] article.node.node--type-enregistrement nav div.field__label:hover:before, main[role="main"] article.node.node--type-enregistrement nav div.field__label.is-active:before {
+      background-color: red; }
 
 main[role="main"] article.node p {
-  font-size: 0.75em;
-  font-weight: normal; }
+  font-size: 0.82em;
+  font-weight: normal;
+  line-height: 1.6; }
 
 main[role="main"] img {
   max-width: 100%;

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

@@ -194,7 +194,11 @@
         console.log('selector', state.selector);
         $('a[selector="'+state.selector+'"]').addClass('is-active');
       }else{
-        $('a[data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');
+        if(typeof state.view_mode != 'undefined'){
+          $('a[viewmode="'+state.view_mode+'"][data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');
+        }else{
+          $('a[data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');
+        }
         // as new content is not related to entree, we trigger close entree
         _$body.trigger({'type':'new-content-not-entree-ajax-loaded'});
       }
@@ -228,6 +232,12 @@
         addCloseModalBtnToCols();
       }
 
+      // enregistrement transcription
+      if(data.entity_type == "node" && data.bundle == "enregistrement" && data.view_mode == "transcript"){
+        // window.requestAnimationFrame(initEnregistrementTranscript);
+        initEnregistrementTranscript();
+      }
+
       // update the language switcher block if it comes in the response
       if(typeof data.translations_links != 'undefined'){
         console.log('state',state);
@@ -261,7 +271,6 @@
       _$body.attr('booted', 'booted');
       _$body.removeClass('ajax-loading');
 
-
       // url is null means that we are loading content on popState event
       // so we don't record the state again
       if(state.url){
@@ -271,7 +280,7 @@
         // };
         // console.log('url:'+url+' ; state',state);
         // console.log(window.location);
-        // we can not pushestate with absolute url
+        // /!\ we can not pushestate with absolute url /!\
         history.pushState(state, null, state.url);
       }
     };
@@ -713,6 +722,7 @@
       stop(){
         // console.log('AudioPlayer stop()');
         this.audio.pause();
+        // TODO: don't close player if article or transcript is open
         this.timeOutToHide();
       },
       // audio events
@@ -1201,6 +1211,30 @@
       });
     };
 
+
+    //  ___                   _    _                         _
+    // | __|_ _  _ _ ___ __ _(_)__| |_ _ _ ___ _ __  ___ _ _| |_
+    // | _|| ' \| '_/ -_) _` | (_-<  _| '_/ -_) '  \/ -_) ' \  _|
+    // |___|_||_|_| \___\__, |_/__/\__|_| \___|_|_|_\___|_||_\__|
+    //                  |___/
+    function initEnregistrementTranscript(){
+      console.log('initEnregistrementTranscript');
+      var $node = _$row.find('article.node--type-enregistrement.node--view-mode-transcript');
+      var $nav = $('<nav>').prependTo($node);
+      $node.find('.field--name-field-transcript-vo').addClass('visible').find('.field__label')
+        .clone().appendTo($nav).addClass('is-active')
+        .attr('field_target', '.field--name-field-transcript-vo');
+      $node.find('.field--name-field-transcript-trad').find('.field__label')
+        .clone().appendTo($nav)
+        .attr('field_target', '.field--name-field-transcript-trad');
+      $nav.find('.field__label').on('click', function(){
+        var $this = $(this).addClass('is-active');
+        $this.siblings('.is-active').removeClass('is-active');
+        $this.parents('article.node').find('.field.visible').removeClass('visible');
+        $this.parents('article.node').find($this.attr('field_target')).addClass('visible');
+      });
+    };
+
     //  __  __         _      _
     // |  \/  |___  __| |__ _| |___
     // | |\/| / _ \/ _` / _` | (_-<

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

@@ -254,8 +254,53 @@ main[role="main"]{
       }
     }
   }
-  article.node>h2, h2.title{
+  h3.sur-title{
     @include content_titles;
+    margin:0.9em 0 0;
+  }
+  article.node:not(.node--type-enregistrement)>h2, h2.title{
+    @include content_titles;
+  }
+  article.node.node--type-enregistrement{
+    >h2{
+      @include content_subtitles;
+      margin:0.9em 0 0 0;
+    }
+    html.js &{
+      h3.sur-title{display:none;}
+    }
+    .field--name-field-transcript-vo, .field--name-field-transcript-trad{
+      .field__label{
+        @include content_titles;
+        html.js &{
+          display: none;
+        }
+      }
+      &:not(.visible){
+        display:none;
+      }
+    }
+    nav{
+      padding:1em 0 0;
+      div.field__label{
+        @include content_titles;
+        display: inline-block;
+        cursor:pointer;
+        margin-right: 1em;
+        &:before{
+          content: "";
+          display:inline-block;
+          $sq:7px;
+          width: $sq; height:$sq;
+          border: 1px solid red;
+          margin-right: 0.5em;
+        }
+        &:hover:before,
+        &.is-active:before{
+          background-color: red;
+        }
+      }
+    }
   }
   article.node p{
     @include content_courant;

sites/all/themes/custom/edlptheme/assets/styles/base/_fonts.scss

@@ -3,7 +3,15 @@
   font-weight: normal;
   text-transform: uppercase;
 }
+
+@mixin content_subtitles {
+  font-size: 0.82em;
+  font-weight: 600;
+  line-height: 1.6;
+}
+
 @mixin content_courant {
-  font-size: 0.75em;
+  font-size: 0.82em;
   font-weight: normal;
+  line-height: 1.6;
 }

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

@@ -36,6 +36,11 @@ function edlptheme_preprocess_node(&$vars){
   $vars['link_attributes'] = new Attribute(array(
     'data-drupal-link-system-path' => $system_path=='' ? '<front>' : $system_path
   ));
+
+  if($node->bundle() == 'enregistrement' && in_array($vars['view_mode'], ['article','transcript'])){
+    $vars['page'] = true;
+    $vars['sur_title'] = $vars['view_mode'];
+  }
 }
 
 /**

sites/all/themes/custom/edlptheme/templates/content/node.html.twig

@@ -83,12 +83,17 @@
 {{ attach_library('classy/node') }}
 <article{{ attributes.addClass(classes) }}>
 
+  {% if sur_title %}
+    <h3 class="sur-title">{{ sur_title }}</h3>
+  {% endif %}
   {{ title_prefix }}
-  {% if not page %}
     <h2{{ title_attributes.addClass('node-title') }}>
-      <a href="{{ url }}" rel="bookmark" {{ link_attributes }}>{{ label }}</a>
+      {% if not page %}
+        <a href="{{ url }}" rel="bookmark" {{ link_attributes }}>{{ label }}</a>
+      {% else %}
+        {{ label }}
+      {% endif %}
     </h2>
-  {% endif %}
   {{ title_suffix }}
 
   {% if display_submitted %}

sites/default/config/sync/field.field.node.enregistrement.field_transcript_trad.yml

@@ -11,7 +11,7 @@ id: node.enregistrement.field_transcript_trad
 field_name: field_transcript_trad
 entity_type: node
 bundle: enregistrement
-label: 'Transcription (Traduction)'
+label: Traduction
 description: ''
 required: false
 translatable: true

sites/default/config/sync/field.field.node.enregistrement.field_transcript_vo.yml

@@ -11,7 +11,7 @@ id: node.enregistrement.field_transcript_vo
 field_name: field_transcript_vo
 entity_type: node
 bundle: enregistrement
-label: 'Transcription (Version Originale)'
+label: Transcription
 description: ''
 required: false
 translatable: false