bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-12 18:33:48 +01:00
parent 119f89abca
commit 76dd9ddbc9
11 changed files with 253 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js
+55 -8
View File
@@ -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
+3 -4
View File
@@ -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
+8
View File
@@ -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
+38 -15
View File
@@ -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
+27 -13
View File
@@ -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
-1
View File
@@ -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
Vendored
+10
View File
@@ -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
Vendored
+78 -61
View File
@@ -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
+10
View File
@@ -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
+23 -4
View File
@@ -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 -1
View File
@@ -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 }}