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 @@