diff --git a/sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js b/sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js index 164835504..c066de377 100644 --- a/sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js +++ b/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); + }; + + // ___ _ _ _ _ // / __| |_ _ _ __| (_)___ ___ _ _(_) // \__ \ _| || / _` | / _ \___| || | | diff --git a/sites/all/modules/figli/edlp_studio/includes/edlp_compositions_list.inc b/sites/all/modules/figli/edlp_studio/includes/edlp_compositions_list.inc index 0756c3be8..7ca779f90 100644 --- a/sites/all/modules/figli/edlp_studio/includes/edlp_compositions_list.inc +++ b/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)), + ), + ), + ) ); } diff --git a/sites/all/modules/figli/edlp_studio/src/Controller/CompositionController.php b/sites/all/modules/figli/edlp_studio/src/Controller/CompositionController.php index f8cda0046..a137cc378 100644 --- a/sites/all/modules/figli/edlp_studio/src/Controller/CompositionController.php +++ b/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(); + } } diff --git a/sites/all/themes/custom/edlptheme/assets/dist/img/delete.svg b/sites/all/themes/custom/edlptheme/assets/dist/img/delete.svg new file mode 100644 index 000000000..13c83cf0b --- /dev/null +++ b/sites/all/themes/custom/edlptheme/assets/dist/img/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css index cff0bcb9f..50eab55ef 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css +++ b/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; diff --git a/sites/all/themes/custom/edlptheme/assets/img/delete.svg b/sites/all/themes/custom/edlptheme/assets/img/delete.svg new file mode 100644 index 000000000..f4a42b7ae --- /dev/null +++ b/sites/all/themes/custom/edlptheme/assets/img/delete.svg @@ -0,0 +1,78 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index d2cfc5457..fda0bf508 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/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{