studio improvement, fixe #537

web/modules/custom/edlp_studio/assets/scripts/edlp_studio.js

@@ -1,7 +1,7 @@
 (function ($, Drupal, drupalSettings) {
 
   var _settings = drupalSettings.edlp_studio;
-  var $composer;
+  var _$composer;
 
   // audio play is handled by edlp_theme
 
@@ -21,10 +21,11 @@
 
   function initStudio(){
     if($('#studio-ui').length){
-      $composer = $('.composition_ui .composer', '#studio-ui');
+      _$composer = $('.composition_ui .composer', '#studio-ui');
       initAjaxChutierLinks();
       initAjaxCompoLinks();
       initDragAndDropUI();
+      initUsedChutierInCompo();
       $('body').trigger({'type':'studio-initialized'});
     }else{
       $('body').trigger({'type':'studio-not-active'});
@@ -95,6 +96,19 @@
       .addClass('ajax-enabled');
   };
 
+  function initUsedChutierInCompo(){
+    console.log('initUsedChutierInCompo');
+    $('.chutier-link.on-compo', '#studio-ui .chutier_ui').removeClass('on-compo');
+    var nid;
+    $('.audio-link', _$composer).each(function(index, el) {
+      nid = $(el).attr('nid');
+      console.log('compo item', nid);
+      $('.chutier-link[target_id="'+nid+'"]', '#studio-ui .chutier_ui').addClass('on-compo');
+    });
+
+    //audio-link
+  };
+
   //   ___                    ___
   //  / _ \ _ __  ___ _ _    / __|___ _ __  _ __  ___
   // | (_) | '_ \/ -_) ' \  | (__/ _ \ '  \| '_ \/ _ \
@@ -111,7 +125,7 @@
     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');
+    _$composer.addClass('ajax-loading');
     $.getJSON(path, {})
       .done(function(data){
         onOpenCompoDone(data, $link);
@@ -121,16 +135,17 @@
       });
   };
   function onOpenCompoDone(data, $link){
-    //console.log('onActionToCompoDone',data);
+    console.log('onOpenCompoDone',data);
     $('.composition-link').removeClass('is-active');
     $link.removeClass('ajax-loading').addClass('is-active');
-    if($('.composition', $composer).length){
-      $('.composition', $composer).replaceWith(data.compo);
+    if($('.composition', _$composer).length){
+      $('.composition', _$composer).replaceWith(data.compo);
     }else{
-      $('header', $composer).after(data.compo);
+      $('header', _$composer).after(data.compo);
     }
-    $composer.removeClass('ajax-loading');
+    _$composer.removeClass('ajax-loading');
     initDragAndDropUI();
+    initUsedChutierInCompo();
     $('body').trigger({
       'type':'on-studio-compo-opened'
     });
@@ -233,7 +248,7 @@
       if($('.composition-link').length){
         openCompo($('.composition-link').eq(0));
       }else{
-        $('.composition', $composer).html();
+        $('.composition', _$composer).html();
       }
     }else{
       console.warn(data.message);
@@ -342,7 +357,7 @@
       containment:$('#studio-ui'),
       scroll:false,
       helper:function(e){
-        // we reproduce here the irem structure of destination sortable elements
+        // we reproduce here the item structure of destination sortable elements
         // var $audio_link = $('.audio-link',this);
         return $('<div>').addClass('field__item')
           .append(
@@ -374,6 +389,7 @@
       documents[i] = $(this).attr('nid');
     });
     // console.log(documents);
+    initUsedChutierInCompo();
     recordCompoList(cid, documents);
   };
   function recordCompoList(cid, docs){

web/modules/custom/edlp_studio/includes/edlp_chutier_ui.inc

@@ -41,12 +41,17 @@ function template_preprocess_edlp_chutier_ui(&$vars){
     $remove_url = Chutier::getActionsUrl($node->id(), $vars['uid']);
 
     // build the link
-    $vars['documents']['#items'][] = array(
+    array_unshift($vars['documents']['#items'], array(
       '#type' => 'container',
-      'entrees' => array(
-        '#type' => 'container',
-        '#attributes'=>['class'=>['entrees']],
-        '#markup'=>$entrees,
+      'remove_link' => array(
+        '#title' => t("Chutier."),
+        '#type' => 'link',
+        '#url' => $remove_url,
+        '#options'=>array(
+          'attributes' => array(
+            'data-drupal-link-system-path' => $remove_url->getInternalPath()
+          ),
+        ),
       ),
       'link'=>array(
         '#title' => $trunc_title,
@@ -64,17 +69,12 @@ function template_preprocess_edlp_chutier_ui(&$vars){
           ),
         ),
       ),
-      'remove_link' => array(
-        '#title' => t("Chutier."),
-        '#type' => 'link',
-        '#url' => $remove_url,
-        '#options'=>array(
-          'attributes' => array(
-            'data-drupal-link-system-path' => $remove_url->getInternalPath()
-          ),
-        ),
-      ),
-    );
+      'entrees' => array(
+        '#type' => 'container',
+        '#attributes'=>['class'=>['entrees']],
+        '#markup'=>$entrees,
+      )
+    ));
   }
 
 }

web/themes/custom/edlptheme/assets/styles/app.scss

@@ -1220,9 +1220,15 @@ main[role="main"]{
         margin:0; padding:0;
         line-height: 1.2;
       }
+      ul{
+        display: grid;
+        grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
+      }
       li{
-        display: inline-block; vertical-align: top;
-        width:49%; margin-bottom: 0.5em;
+        // grid-auto-flow: row;
+        // display: inline-block; vertical-align: top;
+        // width:32%;
+        margin-bottom: 0.3em;
         white-space: nowrap;
         >div{
           display:inline-block;
@@ -1231,8 +1237,14 @@ main[role="main"]{
             cursor:grab;
           }
         }
-        .entrees{
-          @include entree-micro-square;
+        .chutier-icon{
+          display: inline-block;
+          width:0.7em; height:0.7em;
+          margin-right: 0.3em;
+          opacity: 0.8;
+          &.on-compo{
+            background-image: url(../img/favori-oncompo.svg);
+          }
         }
         a.audio-link{
           // text-transform: capitalize;
@@ -1240,10 +1252,9 @@ main[role="main"]{
           margin-right: 0.5em;
           white-space: normal;
         }
-        .chutier-icon{
-          display: inline-block;
-          width:0.7em; height:0.7em;
-          opacity: 0.8;
+        .entrees{
+          display:inline-block;
+          @include entree-micro-square;
         }
       }