delete composition ajax link is working !

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

@@ -77,11 +77,36 @@
   function initAjaxCompoLinks(){
     console.log('studio initAjaxCompoLinks');
     $('.new-composition-link:not(.ajax-enabled)')
+      .addClass('ajax-enabled')
+      .on('click', onClickNewCompoLink);
+    $('.composition-link:not(.ajax-enabled)')
       .addClass('ajax-enabled')
       .on('click', onClickCompoLink);
+    $('.delete-composition-link:not(.ajax-enabled)')
+      .addClass('ajax-enabled')
+      .on('click', onClickDeleteCompoLink);
   };
 
+
+
+  //   ___                    ___
+  //  / _ \ _ __  ___ _ _    / __|___ _ __  _ __  ___
+  // | (_) | '_ \/ -_) ' \  | (__/ _ \ '  \| '_ \/ _ \
+  //  \___/| .__/\___|_||_|  \___\___/_|_|_| .__/\___/
+  //       |_|                             |_|
   function onClickCompoLink(e){
+    e.preventDefault();
+    console.log('onClickCompoLink');
+
+    return false;
+  };
+
+  //  _ _  _____ __ __  __ ___ _ __  _ __  ___
+  // | ' \/ -_) V  V / / _/ _ \ '  \| '_ \/ _ \
+  // |_||_\___|\_/\_/  \__\___/_|_|_| .__/\___/
+  //                                |_|
+
+  function onClickNewCompoLink(e){
     e.preventDefault();
     setInputForNewCompoName($(this));
     return false;
@@ -141,6 +166,43 @@
   };
 
 
+  // ___      _     _
+  // |   \ ___| |___| |_ ___   __ ___ _ __  _ __  ___
+  // | |) / -_) / -_)  _/ -_) / _/ _ \ '  \| '_ \/ _ \
+  // |___/\___|_\___|\__\___| \__\___/_|_|_| .__/\___/
+  //                                       |_|
+  function onClickDeleteCompoLink(e){
+    e.preventDefault();
+    // TODO: confirm
+    deleteCompo($(this));
+    return false;
+  };
+  function deleteCompo($link){
+    var ajax_path = $link.attr('data-drupal-link-system-path');
+    var path = window.location.origin + Drupal.url(ajax_path);
+    $link.parents('li').addClass('ajax-loading');
+    $.getJSON(path, {})
+      .done(function(data){
+        onDeleteCompoDone(data, $link);
+      })
+      .fail(function(jqxhr, textStatus, error){
+        onErrorDeleteCompo(jqxhr, textStatus, error, $link);
+      });
+  };
+  function onDeleteCompoDone(data, $link, $form){
+    console.log('onDeleteCompoDone',data);
+    if(data.status == "ok"){
+      $link.parents('li').remove();
+    }else{
+      console.warn(data.message);
+    }
+  };
+  function onErrorDeleteCompo(jqxhr, textStatus, error, $link){
+    $link.parents('li').removeClass('ajax-loading');
+    console.warn('delete compo load failed : '+error, jqxhr.responseText);
+  };
+
+
   //  ___ _           _ _              _
   // / __| |_ _  _ __| (_)___ ___ _  _(_)
   // \__ \  _| || / _` | / _ \___| || | |

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

@@ -11,20 +11,41 @@ function template_preprocess_edlp_compositions_list(&$vars){
   );
   foreach($vars['composition_entities'] as $entity){
     // get the url
-    $url = Url::fromRoute('entity.composition.canonical', ['composition' => $entity->id()], ['absolute' => TRUE]);
+    $url = Url::fromRoute('entity.composition.canonical',
+            ['composition' => $entity->id()], ['absolute' => TRUE]);
+    // get the delete url
+    $delete_url = Url::fromRoute('edlp_studio.composition_controller_action_ajax',
+                  ['action' => 'delete', 'cid'=>$entity->id()], ['absolute' => TRUE]);
+
     $title = $entity->getName();
+
     $vars['compositions']['#items'][] = array(
-      '#title' => $title,
-      '#type' => 'link',
-      '#url' => $url,
-      '#options'=>array(
-        'attributes' => array(
-          'data-drupal-link-system-path' => $url->getInternalPath(),
-          'nid' => $entity->id(),
-          'class' => ['composition-link'],
-          'title'=>$title,
+      'compo_link' => array(
+        '#title' => $title,
+        '#type' => 'link',
+        '#url' => $url,
+        '#options'=>array(
+          'attributes' => array(
+            'data-drupal-link-system-path' => $url->getInternalPath(),
+            'nid' => $entity->id(),
+            'class' => ['composition-link'],
+            'title'=>$title,
+          ),
         ),
       ),
+      'delete_link' => array(
+        '#title' => "delete",
+        '#type' => 'link',
+        '#url' => $delete_url,
+        '#options'=>array(
+          'attributes' => array(
+            'data-drupal-link-system-path' => $delete_url->getInternalPath(),
+            'nid' => $entity->id(),
+            'class' => ['delete-composition-link'],
+            'title'=> t('Delete @title', array('@title'=>$title)),
+          ),
+        ),
+      )
     );
   }
 

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

@@ -61,9 +61,13 @@ class CompositionController extends ControllerBase {
           $this->error_message = t("Composition creation needs a name as query paramater!");
         }
         break;
-      // case 'delete':
-      //
-      //   break;
+      case 'delete':
+        if($cid){
+          $this->deleteComposition($cid);
+        }else{
+          $this->error_message = t("Composition deletion needs a cid as url paramater!");
+        }
+        break;
       // case 'rename':
       //
       //   break;
@@ -71,39 +75,46 @@ class CompositionController extends ControllerBase {
 
     if($this->error_message){
       $status = 'error';
-    }
-
-    if($status == 'error'){
       $message = $this->error_message;
-    }else{
-      $url = Url::fromRoute('entity.composition.canonical', ['composition' => $this->compo->id()], ['absolute' => TRUE]);
-      $title = $this->compo->getName();
-      $new_link_build = array(
-        '#title' => $title,
-        '#type' => 'link',
-        '#url' => $url,
-        '#options'=>array(
-          'attributes' => array(
-            'data-drupal-link-system-path' => $url->getInternalPath(),
-            'nid' => $this->compo->id(),
-            'class' => ['composition-link'],
-            'title'=>$title,
-          ),
-        ),
-      );
-      $new_link = render($new_link_build);
     }
 
-
     // JSON
     $response = new JsonResponse();
     $data = array(
       'action' => $action,
       'status' => $status,
-      'message' => $this->error_message,
-      'new_name' => $request->query->get('new_name'),
-      'new_link' => $new_link,
+      'message' => $this->error_message
     );
+    if($status == 'ok'){
+      switch ($action) {
+        case 'create':
+          $url = Url::fromRoute('entity.composition.canonical', ['composition' => $this->compo->id()], ['absolute' => TRUE]);
+          $title = $this->compo->getName();
+          $new_link_build = array(
+            '#title' => $title,
+            '#type' => 'link',
+            '#url' => $url,
+            '#options'=>array(
+              'attributes' => array(
+                'data-drupal-link-system-path' => $url->getInternalPath(),
+                'nid' => $this->compo->id(),
+                'class' => ['composition-link'],
+                'title'=>$title,
+              ),
+            ),
+          );
+
+          $data += array(
+            'new_name' => $title,
+            'new_link' => render($new_link_build),
+          );
+          break;
+        // case 'delete':
+        //   # code...
+        //   break;
+      }
+    }
+
     $response->setData($data);
     return $response;
 
@@ -124,4 +135,8 @@ class CompositionController extends ControllerBase {
     $this->compo->save();
   }
 
+  private function deleteComposition($cid){
+    $this->compo = entity_load('composition', $cid);
+    $this->compo->delete();
+  }
 }

sites/all/themes/custom/edlptheme/assets/dist/img/delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 2.6458333 2.6458334"><g fill="none"><g stroke="#000" stroke-width=".726"><path d="M.182.182l2.282 2.282M.182 2.464L2.464.182" stroke-width=".41561322"/></g><path style="isolation:auto;mix-blend-mode:normal" d="M1.883 0H.763A.76.76 0 0 0 0 .762v1.121c0 .423.34.763.762.763h1.121a.76.76 0 0 0 .763-.763V.763A.76.76 0 0 0 1.883 0z" color="#000" overflow="visible"/></g></svg>

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

@@ -1659,8 +1659,33 @@ main[role="main"] span.close-col-btn {
         width: 30%;
         height: 100%;
         overflow-y: auto; }
+        #studio-ui .composition_ui > .wrapper .compositions-list li {
+          opacity: 1;
+          -webkit-transition: opacity 0.3s ease-in-out;
+          transition: opacity 0.3s ease-in-out; }
+          #studio-ui .composition_ui > .wrapper .compositions-list li:hover a.delete-composition-link {
+            opacity: 1; }
+          #studio-ui .composition_ui > .wrapper .compositions-list li.ajax-loading {
+            opacity: 0.4; }
         #studio-ui .composition_ui > .wrapper .compositions-list a {
           font-size: 0.756em; }
+          #studio-ui .composition_ui > .wrapper .compositions-list a.composition-link {
+            display: inline-block;
+            width: calc(100% - 14px); }
+          #studio-ui .composition_ui > .wrapper .compositions-list a.delete-composition-link {
+            display: inline-block;
+            vertical-align: middle;
+            width: 7px;
+            height: 7px;
+            margin-left: 5px;
+            text-indent: 300px;
+            overflow: hidden;
+            background-image: url("../img/delete.svg");
+            background-repeat: no-repeat;
+            background-size: contain;
+            opacity: 0;
+            -webkit-transition: opacity 0.3s ease-in-out;
+            transition: opacity 0.3s ease-in-out; }
           #studio-ui .composition_ui > .wrapper .compositions-list a.new-composition-link {
             display: inline-block;
             vertical-align: top;

sites/all/themes/custom/edlptheme/assets/img/delete.svg

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10"
+   height="10"
+   viewBox="0 0 2.6458333 2.6458334"
+   version="1.1"
+   id="svg18014"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   sodipodi:docname="delete.svg">
+  <defs
+     id="defs18008" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="63.356767"
+     inkscape:cx="0.51510874"
+     inkscape:cy="5.3735394"
+     inkscape:document-units="mm"
+     inkscape:current-layer="g5677-6"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1025"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata18011">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-294.35415)">
+    <g
+       style="display:inline"
+       transform="matrix(0.57246602,0,0,0.57246602,-27.152497,260.5372)"
+       id="g5677-6">
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.72608751;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 47.749012,59.390676 3.985308,3.985307"
+         id="path5673-2"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path5675-7"
+         d="M 47.749012,63.375983 51.73432,59.390676"
+         style="fill:none;stroke:#000000;stroke-width:0.72608751;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+    <path
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.05833328;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 1.8834657,294.35415 H 0.7623677 C 0.340016,294.35415 0,294.69418 0,295.11654 v 1.1211 c 0,0.42234 0.340016,0.76235 0.7623677,0.76235 h 1.121098 c 0.4223516,0 0.7623677,-0.34001 0.7623677,-0.76235 v -1.1211 c 0,-0.42236 -0.3400161,-0.76239 -0.7623677,-0.76239 z"
+       id="rect18590"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

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

@@ -549,8 +549,37 @@ main[role="main"]{
       .compositions-list{
         width:30%; height:100%;
         overflow-y: auto;
+        li{
+          opacity: 1;
+          transition: opacity 0.3s ease-in-out;
+          &:hover{
+            a.delete-composition-link{
+              opacity: 1;
+            }
+          }
+          &.ajax-loading{
+            opacity: 0.4;
+          }
+        }
         a{
           font-size: 0.756em;
+          $s:7px; $m:5px;
+          &.composition-link{
+            display: inline-block;
+            width: calc(100% - #{$s +$m +2});
+          }
+          &.delete-composition-link{
+            display: inline-block;
+            vertical-align: middle;
+            $s:7px; width:$s; height:$s;
+            margin-left: $m;
+            text-indent: 300px; overflow: hidden;
+            background-image: url('../img/delete.svg');
+            background-repeat: no-repeat;
+            background-size: contain;
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out;
+          }
           &.new-composition-link{
             // padding-left: 1em;
             &:before{