studio chutier is updating when documents added or removed, also added remove link in document list

sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js

@@ -1,23 +1,33 @@
-(function ($, Drupal) {
+(function ($, Drupal, drupalSettings) {
+
+  var settings = drupalSettings.edlp_studio;
 
   function init(){
     console.log('Studio Init');
     initEvents();
-    initAjax();
+    initAjaxChutier();
   };
 
   function initEvents(){
-    $('body').on('new-audio-cartel-loaded', initAjax);
+    $('body')
+      .on('new-audio-cartel-loaded', initAjaxChutier)
+      .on('new-content-ajax-loaded', initAjaxChutier);
   };
 
-  function initAjax(){
+
+  //   ___ _        _   _           _  _         _       _    _      _
+  //  / __| |_ _  _| |_(_)___ _ _  | \| |___  __| |___  | |  (_)_ _ | |__ ___
+  // | (__| ' \ || |  _| / -_) '_| | .` / _ \/ _` / -_) | |__| | ' \| / /(_-<
+  //  \___|_||_\_,_|\__|_\___|_|   |_|\_\___/\__,_\___| |____|_|_||_|_\_\/__/
+
+  function initAjaxChutier(){
     console.log('studio initAjax chutier');
     $('.chutier-ajax-link:not(.ajax-enabled)')
       .addClass('ajax-enabled')
-      .on('click', onClickAjaxLink);
+      .on('click', onClickChutierAjaxLink);
   };
 
-  function onClickAjaxLink(e){
+  function onClickChutierAjaxLink(e){
     console.log('studio onClickAjaxLink chutier');
     e.preventDefault();
     addRemoveToChutier($(this));
@@ -47,7 +57,8 @@
       'target_id':$link.attr('target_id'),
     });
     $link.replaceWith(data.new_link);
-    initAjax();
+    initAjaxChutier();
+    updateStudioChutier();
     // TODO: reload Studio chutier_ui's documents list
   };
 
@@ -55,5 +66,41 @@
     console.warn('add to chuttier 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);
+    initAjaxChutier();
+    $('body').trigger({
+      'type':'on-studio-chutier-updated'
+    });
+  }
+
+  function onLoadChutierError(jqxhr, textStatus, error, $studioChutier){
+    console.warn('Chutier load failed', jqxhr.responseText);
+    $studioChutier.removeClass('loading');
+
+  }
+
   init();
-})(jQuery, Drupal);
+})(jQuery, Drupal, drupalSettings);

sites/all/modules/figli/edlp_studio/edlp_studio.module

@@ -30,9 +30,10 @@ function edlp_studio_help($route_name, RouteMatchInterface $route_match) {
  */
 function edlp_studio_page_attachments(array &$attachments) {
   $attachments['#attached']['library'][] = 'edlp_studio/edlp_studio-library';
+  $url = Url::fromRoute('edlp_studio.studio_chutier_ui_ajax', [], ['absolute' => TRUE]);
+  $attachments['#attached']['drupalSettings']['edlp_studio']['chutier_ui_ajax'] = $url->getInternalPath();
 }
 
-
 /**
  * Implements hook_theme().
  */
@@ -45,6 +46,7 @@ function edlp_studio_theme($existing, $type, $theme, $path) {
       'variables' => array(
         'title' => t('Chutier'),
         'document_nodes' => array(),
+        'uid' => null,
       ),
     ),
     'edlp_composition_ui' => array(
@@ -64,8 +66,6 @@ function edlp_studio_theme($existing, $type, $theme, $path) {
   );
 }
 
-
-
 /**
 * hook_entity_extra_field_info()
 *
@@ -82,7 +82,6 @@ function edlp_studio_entity_extra_field_info(){
   return $extra;
 }
 
-
 /**
  * Implements hook_ENTITY_TYPE_view().
  * @see https://www.amazeelabs.com/en/render-menu-tree-custom-code-drupal-8

sites/all/modules/figli/edlp_studio/edlp_studio.routing.yml

@@ -30,3 +30,11 @@ edlp_studio.studio_ui_ajax:
     _title: 'Studio User Interface'
   requirements:
     _permission: 'use chutier'
+
+edlp_studio.studio_chutier_ui_ajax:
+  path: '/edlp/studio/chutier-ui/ajax'
+  defaults:
+    _controller: '\Drupal\edlp_studio\Controller\StudioUIController::StudioChutierUIJson'
+    _title: 'Chutier of Studio User Interface'
+  requirements:
+    _permission: 'use chutier'

sites/all/modules/figli/edlp_studio/includes/edlp_chutier_ui.inc

@@ -3,6 +3,8 @@
 use \Drupal\Core\Url;
 use Drupal\Component\Utility\Unicode;
 
+use Drupal\edlp_studio\Entity\Chutier;
+
 function template_preprocess_edlp_chutier_ui(&$vars){
   // dpm($vars);
   // $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
@@ -34,23 +36,44 @@ function template_preprocess_edlp_chutier_ui(&$vars){
     foreach ($node->get('field_entrees')->getValue() as $key => $term) {
       $entrees .= '<span class="entree" tid="'.$term['target_id'].'"></span>';
     }
+    //
+    // get the remove url (obviously as we are in chutier all contents actions are remove ;)
+    $remove_url = Chutier::getActionsUrl($node->id(), $vars['uid']);
+
     // build the link
     $vars['documents']['#items'][] = array(
-      '#prefix' => '<div class="entrees">'.$entrees.'</div>',
-      '#title' => $trunc_title,
-      '#type' => 'link',
-      '#url' => $url,
-      '#options'=>array(
-        'attributes' => array(
-          'data-drupal-link-system-path' => $url->getInternalPath(),
-          'audio_url' => $son_url,
-          'nid' => $node->id(),
-          // 'tid' => $entrees[mt_rand(0, count($entrees) - 1)],
-          // 'entries_size' => count($entrees),
-          'class' => $classes,
-          'title'=>$title,
-        )
-      )
+      '#type' => 'container',
+      'entrees' => array(
+        '#type' => 'container',
+        '#attributes'=>['class'=>['entrees']],
+        '#markup'=>$entrees,
+      ),
+      'link'=>array(
+        '#title' => $trunc_title,
+        '#type' => 'link',
+        '#url' => $url,
+        '#options'=>array(
+          'attributes' => array(
+            'data-drupal-link-system-path' => $url->getInternalPath(),
+            'audio_url' => $son_url,
+            'nid' => $node->id(),
+            // 'tid' => $entrees[mt_rand(0, count($entrees) - 1)],
+            // 'entries_size' => count($entrees),
+            'class' => $classes,
+            'title'=>$title,
+          ),
+        ),
+      ),
+      'remove_link' => array(
+        '#title' => t("Chutier."),
+        '#type' => 'link',
+        '#url' => $remove_url,
+        '#options'=>array(
+          'attributes' => array(
+            'data-drupal-link-system-path' => $remove_url->getInternalPath()
+          ),
+        ),
+      ),
     );
   }
 

sites/all/modules/figli/edlp_studio/src/Controller/StudioUIController.php

@@ -56,7 +56,7 @@ class StudioUIController extends ControllerBase {
    *   Return renderable array.
    */
   public function StudioUIJson() {
-    $renderable = $this->buildUI();
+    $renderable = $this->buildStudioUI();
     $rendered = render($renderable);
 
     // JSON
@@ -68,11 +68,27 @@ class StudioUIController extends ControllerBase {
 
   }
 
-  public function buildUI(){
-    // get current user
-    // done by DependencyInjection of AccountInterface
-    // dpm($this->user->id());
+  public function StudioChutierUIJson(){
+    $renderable = $this->buildChutierUI();
+    $rendered = render($renderable);
+
+    // JSON
+    $response = new JsonResponse();
+    $response->setData([
+      'rendered'=> $rendered,
+    ]);
+    return $response;
+  }
+
+  private function buildStudioUI(){
+    return [
+      '#theme' => 'edlp_studio_ui',
+      '#chutier_ui' => $this->buildChutierUI(),
+      '#composition_ui' => $this->buildCompostionUI(),
+    ];
+  }
 
+  private function buildChutierUI(){
     // get his docs in chutier
     $documents_nids = Chutier::getUserChutiersContents($this->user->id());
     // dpm($documents_nids);
@@ -84,8 +100,13 @@ class StudioUIController extends ControllerBase {
       "#theme"=>'edlp_chutier_ui',
       '#title' => t('Chutier'),
       "#document_nodes" => $documents,
+      '#uid' => $this->user->id(),
     );
 
+    return $chutier_ui;
+  }
+
+  private function buildCompostionUI(){
     // TODO: get compositions
     // TODO: add compositions theme, preprocess, twig template to studio module
     // TODO: build content renderable array
@@ -95,13 +116,6 @@ class StudioUIController extends ControllerBase {
       "#compositions" => array('#markup'=>'TODO : compositions UI'),
     );
 
-    // TODO: add studio theme, preprocess, twig template to studio module
-    // TODO: build global studio renderable array
-
-    return [
-      '#theme' => 'edlp_studio_ui',
-      '#chutier_ui' => $chutier_ui,
-      '#composition_ui' => $composition_ui,
-    ];
+    return $composition_ui;
   }
 }

sites/all/modules/figli/edlp_studio/src/Entity/ChutierInterface.php

@@ -102,5 +102,4 @@ interface ChutierInterface extends ContentEntityInterface, EntityChangedInterfac
    */
   public static function getActionsURL($id, $uid);
 
-
 }

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

@@ -46,9 +46,17 @@ edlp_vars = {
       }
 
       initScrollbars();
+
+      initEvents();
     };
 
 
+    function initEvents(){
+      $('body').on('on-studio-chutier-updated', function(e){
+        initAjaxLinks();
+      });
+    }
+
     //    _          _ _
     //   /_\ _  _ __| (_)___
     //  / _ \ || / _` | / _ \
@@ -368,6 +376,8 @@ edlp_vars = {
 
       initAjaxLinks();
 
+      _$body.trigger({'type':'new-content-ajax-loaded'});
+
     };
 
     //   ___

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

@@ -1503,71 +1503,88 @@ body.ajax-loading main[role="main"]:before {
   height: 100%; }
   #studio-ui .chutier_ui {
     height: 50%;
-    border-bottom: 1px solid red; }
+    border-bottom: 1px solid red;
+    position: relative; }
     #studio-ui .chutier_ui > h2 {
-      margin: 0.5em 0;
+      z-index: 10;
+      position: absolute;
+      width: calc(100% - 20px);
+      margin: 0;
+      padding: 0.5em 0;
       font-size: 1em;
       font-weight: 500;
-      text-transform: uppercase; }
-    #studio-ui .chutier_ui .documents ul, #studio-ui .chutier_ui .documents li {
-      margin: 0;
-      padding: 0;
-      line-height: 1.2; }
-    #studio-ui .chutier_ui .documents li {
-      display: inline-block;
-      vertical-align: top;
-      width: 49%;
-      margin-bottom: 0.5em; }
-      #studio-ui .chutier_ui .documents li .entrees {
-        line-height: 0;
-        display: inline-block; }
-        #studio-ui .chutier_ui .documents li .entrees span {
+      text-transform: uppercase;
+      background-color: white; }
+    #studio-ui .chutier_ui .documents {
+      padding-top: 35px;
+      height: calc(100% - 35px);
+      overflow-y: auto; }
+      #studio-ui .chutier_ui .documents ul, #studio-ui .chutier_ui .documents li {
+        margin: 0;
+        padding: 0;
+        line-height: 1.2; }
+      #studio-ui .chutier_ui .documents li {
+        display: inline-block;
+        vertical-align: top;
+        width: 49%;
+        margin-bottom: 0.5em;
+        white-space: nowrap; }
+        #studio-ui .chutier_ui .documents li .entrees {
+          line-height: 0; }
+          #studio-ui .chutier_ui .documents li .entrees span {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            background-color: black;
+            margin-right: 3px; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='134'] {
+              background-color: #2b8f2f; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='121'] {
+              background-color: #3a33b6; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='125'] {
+              background-color: #2c9f57; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='119'] {
+              background-color: #c48978; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='132'] {
+              background-color: #5270bb; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='122'] {
+              background-color: #fb54d3; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='129'] {
+              background-color: #e07483; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='120'] {
+              background-color: #655845; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='130'] {
+              background-color: #7e0868; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='118'] {
+              background-color: #0e7121; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='127'] {
+              background-color: #dabd42; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='133'] {
+              background-color: #0399bb; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='128'] {
+              background-color: #399a1c; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='124'] {
+              background-color: #708540; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='116'] {
+              background-color: #191bff; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='117'] {
+              background-color: #279d84; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='131'] {
+              background-color: #5219ab; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='126'] {
+              background-color: #d49cb6; }
+            #studio-ui .chutier_ui .documents li .entrees span[tid='123'] {
+              background-color: #497715; }
+        #studio-ui .chutier_ui .documents li a.audio-link {
+          text-transform: capitalize;
+          font-size: 0.756em;
+          margin-right: 0.5em;
+          white-space: normal; }
+        #studio-ui .chutier_ui .documents li .chutier-icon {
           display: inline-block;
-          width: 8px;
-          height: 8px;
-          background-color: black;
-          margin-right: 3px; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='134'] {
-            background-color: #2b8f2f; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='121'] {
-            background-color: #3a33b6; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='125'] {
-            background-color: #2c9f57; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='119'] {
-            background-color: #c48978; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='132'] {
-            background-color: #5270bb; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='122'] {
-            background-color: #fb54d3; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='129'] {
-            background-color: #e07483; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='120'] {
-            background-color: #655845; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='130'] {
-            background-color: #7e0868; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='118'] {
-            background-color: #0e7121; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='127'] {
-            background-color: #dabd42; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='133'] {
-            background-color: #0399bb; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='128'] {
-            background-color: #399a1c; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='124'] {
-            background-color: #708540; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='116'] {
-            background-color: #191bff; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='117'] {
-            background-color: #279d84; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='131'] {
-            background-color: #5219ab; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='126'] {
-            background-color: #d49cb6; }
-          #studio-ui .chutier_ui .documents li .entrees span[tid='123'] {
-            background-color: #497715; }
-      #studio-ui .chutier_ui .documents li a {
-        text-transform: capitalize;
-        font-size: 1em; }
+          width: 0.7em;
+          height: 0.7em;
+          opacity: 0.8; }
   #studio-ui .composition_ui {
     height: 50%; }
 

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

@@ -23,9 +23,17 @@
       }
 
       initScrollbars();
+
+      initEvents();
     };
 
 
+    function initEvents(){
+      $('body').on('on-studio-chutier-updated', function(e){
+        initAjaxLinks();
+      });
+    }
+
     //    _          _ _
     //   /_\ _  _ __| (_)___
     //  / _ \ || / _` | / _ \
@@ -345,6 +353,8 @@
 
       initAjaxLinks();
 
+      _$body.trigger({'type':'new-content-ajax-loaded'});
+
     };
 
     //   ___

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

@@ -434,13 +434,25 @@ main[role="main"]{
   .chutier_ui{
     height: 50%;
     border-bottom: 1px solid red;
+    position: relative;
     &>h2{
-      margin:0.5em 0;
+      z-index: 10;
+      position: absolute;
+      width: calc(100% - 20px);
+      margin: 0;
+      padding:0.5em 0;
       font-size: 1em;
       font-weight: 500;
       text-transform: uppercase;
+      // outline: 1px solid orange;
+      background-color: white;
     }
     .documents{
+      padding-top: 35px;
+      height:calc(100% - 35px);
+      overflow-y: auto;
+      // box-sizing: content-box;
+      // outline: 1px solid green;
       ul,li{
         margin:0; padding:0;
         line-height: 1.2;
@@ -448,16 +460,23 @@ main[role="main"]{
       li{
         display: inline-block; vertical-align: top;
         width:49%; margin-bottom: 0.5em;
+        white-space: nowrap;
         .entrees{
           line-height: 0;
-          display:inline-block;
           span{
             @include entrie-micro-square;
           }
         }
-        a{
+        a.audio-link{
           text-transform: capitalize;
-          font-size: 1em;
+          font-size: 0.756em;
+          margin-right: 0.5em;
+          white-space: normal;
+        }
+        .chutier-icon{
+          display: inline-block;
+          width:0.7em; height:0.7em;
+          opacity: 0.8;
         }
       }
 

sites/all/themes/custom/edlptheme/templates/content/edlp-studio-ui.html.twig

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col small-col-12 med-col-6 large-col-6">
+  <div class="col small-col-12 med-col-12 large-col-6">
     <div class="wrapper studio-ui-wrapper">
       <div id="studio-ui">
         {{ chutier_ui }}