From 76dd9ddbc9cd0848902519a183f2a9c3a59d1555 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Mon, 12 Mar 2018 18:33:48 +0100 Subject: [PATCH] studio chutier is updating when documents added or removed, also added remove link in document list --- .../edlp_studio/assets/js/edlp_studio.js | 63 +++++++- .../figli/edlp_studio/edlp_studio.module | 7 +- .../figli/edlp_studio/edlp_studio.routing.yml | 8 + .../edlp_studio/includes/edlp_chutier_ui.inc | 53 +++++-- .../src/Controller/StudioUIController.php | 40 +++-- .../src/Entity/ChutierInterface.php | 1 - .../edlptheme/assets/dist/scripts/main.min.js | 10 ++ .../edlptheme/assets/dist/styles/app.min.css | 139 ++++++++++-------- .../custom/edlptheme/assets/scripts/main.js | 10 ++ .../custom/edlptheme/assets/styles/app.scss | 27 +++- .../content/edlp-studio-ui.html.twig | 2 +- 11 files changed, 253 insertions(+), 107 deletions(-) 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 98475f61d..3942fdbb7 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 @@ -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); diff --git a/sites/all/modules/figli/edlp_studio/edlp_studio.module b/sites/all/modules/figli/edlp_studio/edlp_studio.module index 3cc7c9a9e..99292a5c5 100644 --- a/sites/all/modules/figli/edlp_studio/edlp_studio.module +++ b/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 diff --git a/sites/all/modules/figli/edlp_studio/edlp_studio.routing.yml b/sites/all/modules/figli/edlp_studio/edlp_studio.routing.yml index ab541630e..819dbe54d 100644 --- a/sites/all/modules/figli/edlp_studio/edlp_studio.routing.yml +++ b/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' diff --git a/sites/all/modules/figli/edlp_studio/includes/edlp_chutier_ui.inc b/sites/all/modules/figli/edlp_studio/includes/edlp_chutier_ui.inc index fc9b2c7c2..fd616fc67 100644 --- a/sites/all/modules/figli/edlp_studio/includes/edlp_chutier_ui.inc +++ b/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 .= ''; } + // + // 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' => '
'.$entrees.'
', - '#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() + ), + ), + ), ); } diff --git a/sites/all/modules/figli/edlp_studio/src/Controller/StudioUIController.php b/sites/all/modules/figli/edlp_studio/src/Controller/StudioUIController.php index 64751e6ce..ad427e813 100644 --- a/sites/all/modules/figli/edlp_studio/src/Controller/StudioUIController.php +++ b/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; } } diff --git a/sites/all/modules/figli/edlp_studio/src/Entity/ChutierInterface.php b/sites/all/modules/figli/edlp_studio/src/Entity/ChutierInterface.php index 0a65d006b..560e52263 100644 --- a/sites/all/modules/figli/edlp_studio/src/Entity/ChutierInterface.php +++ b/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); - } diff --git a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js index 264715f7b..3e18a8f20 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js +++ b/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'}); + }; // ___ 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 7d093f89d..3f8723435 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 @@ -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%; } diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js index a0116fde1..269bf569c 100644 --- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js +++ b/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'}); + }; // ___ diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index aadf1a06f..b982a7d2e 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/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; } } diff --git a/sites/all/themes/custom/edlptheme/templates/content/edlp-studio-ui.html.twig b/sites/all/themes/custom/edlptheme/templates/content/edlp-studio-ui.html.twig index 04c4853fa..d151fa00b 100644 --- a/sites/all/themes/custom/edlptheme/templates/content/edlp-studio-ui.html.twig +++ b/sites/all/themes/custom/edlptheme/templates/content/edlp-studio-ui.html.twig @@ -1,5 +1,5 @@
-
+
{{ chutier_ui }}