studio improvement, fixe #537

This commit is contained in:
2019-12-02 19:38:48 +01:00
parent 4d89162957
commit 55f7def7cb
7 changed files with 137 additions and 40 deletions
@@ -1,10 +1,10 @@
(function($,Drupal,drupalSettings){var _settings=drupalSettings.edlp_studio;var $composer;function init(){initEvents();initStudio();};function initEvents(){$('body').on('new-audio-cartel-loaded',initAjaxChutierLinks).on('new-content-ajax-loaded',initAjaxChutierLinks).on('new-content-ajax-loaded',initStudio).on('all-modal-closed',initStudio);};function initStudio(){if($('#studio-ui').length){$composer=$('.composition_ui .composer','#studio-ui');initAjaxChutierLinks();initAjaxCompoLinks();initDragAndDropUI();$('body').trigger({'type':'studio-initialized'});}else{$('body').trigger({'type':'studio-not-active'});}}
function initAjaxChutierLinks(){$('.chutier-ajax-link:not(.ajax-enabled)').addClass('ajax-enabled').on('click',onClickChutierAjaxLink);};function onClickChutierAjaxLink(e){e.preventDefault();addRemoveToChutier($(this));return false;};function addRemoveToChutier($link){var ajax_path=$link.attr('data-drupal-link-system-path');var path=window.location.origin+drupalSettings.path.baseUrl+ajax_path;$link.addClass('ajax-loading');$.getJSON(path,{}).done(function(data){onActionToChutierDone($link,data);}).fail(function(jqxhr,textStatus,error){onErrorActionToChutier(jqxhr,textStatus,error,$link);});};function onActionToChutierDone($link,data){$('body').trigger({'type':'chutier-action-done','action_done':data.action_done,'new_action':data.action_done=='add'?'remove':'add','target_id':$link.attr('target_id'),});$link.replaceWith(data.new_link);initAjaxChutierLinks();updateStudioChutier();};function onErrorActionToChutier(jqxhr,textStatus,error,$link){void 0;};function initAjaxCompoLinks(){$('.new-composition-link:not(.ajax-enabled)').on('click',onClickNewCompoLink).addClass('ajax-enabled');$('.composition-link:not(.ajax-enabled)').on('click',onClickCompoLink).addClass('ajax-enabled');$('.delete-composition-link:not(.ajax-enabled)').on('click',onClickDeleteCompoLink).addClass('ajax-enabled');};function onClickCompoLink(e){e.preventDefault();openCompo($(this));return false;};function openCompo($link){var cid=$link.attr('cid');var ajax_path=_settings.open_compo_ajax_url+'/'+cid;var path=window.location.origin+Drupal.url(ajax_path);$link.addClass('ajax-loading');$composer.addClass('ajax-loading');$.getJSON(path,{}).done(function(data){onOpenCompoDone(data,$link);}).fail(function(jqxhr,textStatus,error){onErrorOpenCompo(jqxhr,textStatus,error,$link);});};function onOpenCompoDone(data,$link){$('.composition-link').removeClass('is-active');$link.removeClass('ajax-loading').addClass('is-active');if($('.composition',$composer).length){$('.composition',$composer).replaceWith(data.compo);}else{$('header',$composer).after(data.compo);}
$composer.removeClass('ajax-loading');initDragAndDropUI();$('body').trigger({'type':'on-studio-compo-opened'});};function onErrorOpenCompo(jqxhr,textStatus,error,$link){$link.removeClass('ajax-loading');void 0;};function onClickNewCompoLink(e){e.preventDefault();setInputForNewCompoName($(this));return false;};function setInputForNewCompoName($link){var $form=$('<form>').addClass('new-compo-form').append($('<input>').attr('type','text').attr('placeholder','new name')).append($('<button>').attr('type','submit').html('+')).submit(function(e){onNewCompoFormSubmit(e,$link,$(this));});$link.after($form).addClass('folded');$form.children('input[type="text"]').focus();};function onNewCompoFormSubmit(e,$link,$form){var name=$('input[type="text"]',$form).val();if(name!=''){$form.addClass('ajax-loading').children('*').attr('disabled','disabled');createNewCompo(name,$link,$form);}
e.preventDefault();};function createNewCompo(name,$link,$form){var ajax_path=$link.attr('data-drupal-link-system-path');var path=window.location.origin+drupalSettings.path.baseUrl+ajax_path;$.getJSON(path,{'new_name':name}).done(function(data){onCreateCompoDone(data,$link,$form);}).fail(function(jqxhr,textStatus,error){onErrorCreateCompo(jqxhr,textStatus,error,$link);});};function onCreateCompoDone(data,$link,$form){var $new_link=$(data.new_link);var $delete_link=$(data.delete_link);$link.removeClass('folded').parents('li').after($('<li>').append($new_link).append($delete_link));$form.remove();initAjaxCompoLinks();openCompo($new_link);};function onErrorCreateCompo(jqxhr,textStatus,error,$link){void 0;};function onClickDeleteCompoLink(e){e.preventDefault();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){if(data.status=="ok"){$link.parents('li').remove();if($('.composition-link').length){openCompo($('.composition-link').eq(0));}else{$('.composition',$composer).html();}}else{void 0;}};function onErrorDeleteCompo(jqxhr,textStatus,error,$link){$link.parents('li').removeClass('ajax-loading');void 0;};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);initAjaxChutierLinks();setChutierDraggable();$('body').trigger({'type':'on-studio-chutier-updated'});}
(function($,Drupal,drupalSettings){var _settings=drupalSettings.edlp_studio;var _$composer;function init(){initEvents();initStudio();};function initEvents(){$('body').on('new-audio-cartel-loaded',initAjaxChutierLinks).on('new-content-ajax-loaded',initAjaxChutierLinks).on('new-content-ajax-loaded',initStudio).on('all-modal-closed',initStudio);};function initStudio(){if($('#studio-ui').length){_$composer=$('.composition_ui .composer','#studio-ui');initAjaxChutierLinks();initAjaxCompoLinks();initDragAndDropUI();initUsedChutierInCompo();$('body').trigger({'type':'studio-initialized'});}else{$('body').trigger({'type':'studio-not-active'});}}
function initAjaxChutierLinks(){$('.chutier-ajax-link:not(.ajax-enabled)').addClass('ajax-enabled').on('click',onClickChutierAjaxLink);};function onClickChutierAjaxLink(e){e.preventDefault();addRemoveToChutier($(this));return false;};function addRemoveToChutier($link){var ajax_path=$link.attr('data-drupal-link-system-path');var path=window.location.origin+drupalSettings.path.baseUrl+ajax_path;$link.addClass('ajax-loading');$.getJSON(path,{}).done(function(data){onActionToChutierDone($link,data);}).fail(function(jqxhr,textStatus,error){onErrorActionToChutier(jqxhr,textStatus,error,$link);});};function onActionToChutierDone($link,data){$('body').trigger({'type':'chutier-action-done','action_done':data.action_done,'new_action':data.action_done=='add'?'remove':'add','target_id':$link.attr('target_id'),});$link.replaceWith(data.new_link);initAjaxChutierLinks();updateStudioChutier();};function onErrorActionToChutier(jqxhr,textStatus,error,$link){void 0;};function initAjaxCompoLinks(){$('.new-composition-link:not(.ajax-enabled)').on('click',onClickNewCompoLink).addClass('ajax-enabled');$('.composition-link:not(.ajax-enabled)').on('click',onClickCompoLink).addClass('ajax-enabled');$('.delete-composition-link:not(.ajax-enabled)').on('click',onClickDeleteCompoLink).addClass('ajax-enabled');};function initUsedChutierInCompo(){void 0;$('.chutier-link.on-compo','#studio-ui .chutier_ui').removeClass('on-compo');var nid;$('.audio-link',_$composer).each(function(index,el){nid=$(el).attr('nid');void 0;$('.chutier-link[target_id="'+nid+'"]','#studio-ui .chutier_ui').addClass('on-compo');});};function onClickCompoLink(e){e.preventDefault();openCompo($(this));return false;};function openCompo($link){var cid=$link.attr('cid');var ajax_path=_settings.open_compo_ajax_url+'/'+cid;var path=window.location.origin+Drupal.url(ajax_path);$link.addClass('ajax-loading');_$composer.addClass('ajax-loading');$.getJSON(path,{}).done(function(data){onOpenCompoDone(data,$link);}).fail(function(jqxhr,textStatus,error){onErrorOpenCompo(jqxhr,textStatus,error,$link);});};function onOpenCompoDone(data,$link){void 0;$('.composition-link').removeClass('is-active');$link.removeClass('ajax-loading').addClass('is-active');if($('.composition',_$composer).length){$('.composition',_$composer).replaceWith(data.compo);}else{$('header',_$composer).after(data.compo);}
_$composer.removeClass('ajax-loading');initDragAndDropUI();initUsedChutierInCompo();$('body').trigger({'type':'on-studio-compo-opened'});};function onErrorOpenCompo(jqxhr,textStatus,error,$link){$link.removeClass('ajax-loading');void 0;};function onClickNewCompoLink(e){e.preventDefault();setInputForNewCompoName($(this));return false;};function setInputForNewCompoName($link){var $form=$('<form>').addClass('new-compo-form').append($('<input>').attr('type','text').attr('placeholder','new name')).append($('<button>').attr('type','submit').html('+')).submit(function(e){onNewCompoFormSubmit(e,$link,$(this));});$link.after($form).addClass('folded');$form.children('input[type="text"]').focus();};function onNewCompoFormSubmit(e,$link,$form){var name=$('input[type="text"]',$form).val();if(name!=''){$form.addClass('ajax-loading').children('*').attr('disabled','disabled');createNewCompo(name,$link,$form);}
e.preventDefault();};function createNewCompo(name,$link,$form){var ajax_path=$link.attr('data-drupal-link-system-path');var path=window.location.origin+drupalSettings.path.baseUrl+ajax_path;$.getJSON(path,{'new_name':name}).done(function(data){onCreateCompoDone(data,$link,$form);}).fail(function(jqxhr,textStatus,error){onErrorCreateCompo(jqxhr,textStatus,error,$link);});};function onCreateCompoDone(data,$link,$form){var $new_link=$(data.new_link);var $delete_link=$(data.delete_link);$link.removeClass('folded').parents('li').after($('<li>').append($new_link).append($delete_link));$form.remove();initAjaxCompoLinks();openCompo($new_link);};function onErrorCreateCompo(jqxhr,textStatus,error,$link){void 0;};function onClickDeleteCompoLink(e){e.preventDefault();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){if(data.status=="ok"){$link.parents('li').remove();if($('.composition-link').length){openCompo($('.composition-link').eq(0));}else{$('.composition',_$composer).html();}}else{void 0;}};function onErrorDeleteCompo(jqxhr,textStatus,error,$link){$link.parents('li').removeClass('ajax-loading');void 0;};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);initAjaxChutierLinks();setChutierDraggable();$('body').trigger({'type':'on-studio-chutier-updated'});}
function onLoadChutierError(jqxhr,textStatus,error,$studioChutier){void 0;$studioChutier.removeClass('loading');}
function initDragAndDropUI(){if(!$('.composition_ui .composer .composition .field--name-documents').length){$field_documents=$('<div>').addClass('field').addClass('field--name-documents').appendTo('.composition_ui .composer .composition');}else{$field_documents=$('.composition_ui .composer .composition .field--name-documents');$('.field__item',$field_documents).each(function(i){$(this).prepend($('<span>').addClass('handler'));});}
var $remove_zone=$('<div>').addClass('remove-drop-zone').appendTo('.composition_ui .composer .composition').droppable({tolerance:'pointer',over:function(e,ui){ui.draggable.addClass('ready-to-remove');},out:function(e,ui){ui.draggable.removeClass('ready-to-remove');},drop:function(e,ui){ui.draggable.remove();}});$field_documents.sortable({revert:false,handle:".handler",receive:function(e,ui){$('.field__item',this).attr('style','');},update:function(e,ui){onOrderChanged(e,ui);},connectWith:$remove_zone,});setChutierDraggable();};function setChutierDraggable(){$('.chutier_ui .item-list li>div').draggable({containment:$('#studio-ui'),scroll:false,helper:function(e){return $('<div>').addClass('field__item').append($('<article>').addClass('node').append($('<h2>').addClass('node-title').append($('.audio-link',this).clone().removeClass('ajax-enable')))).prepend($('<span>').addClass('handler'));},cursorAt:{bottom:10,left:10},zIndex:999,revert:true,revertDuration:0,connectToSortable:$('.composition_ui .composer .composition .field--name-documents'),});}
function onOrderChanged(e,ui){var cid=$(e.target).parents('.composition').attr('cid');var documents={};$('a',e.target).each(function(i){documents[i]=$(this).attr('nid');});recordCompoList(cid,documents);};function recordCompoList(cid,docs){var ajax_path=_settings.save_compo_ajax_url+'/'+cid;var path=window.location.origin+Drupal.url(ajax_path);$.getJSON(path,{documents:docs}).done(function(data){onRecordCompoDone(data);}).fail(function(jqxhr,textStatus,error){onErrorRecordCompo(jqxhr,textStatus,error);});$('body').trigger({'type':'on-studio-compo-updated'});}
function onOrderChanged(e,ui){var cid=$(e.target).parents('.composition').attr('cid');var documents={};$('a',e.target).each(function(i){documents[i]=$(this).attr('nid');});initUsedChutierInCompo();recordCompoList(cid,documents);};function recordCompoList(cid,docs){var ajax_path=_settings.save_compo_ajax_url+'/'+cid;var path=window.location.origin+Drupal.url(ajax_path);$.getJSON(path,{documents:docs}).done(function(data){onRecordCompoDone(data);}).fail(function(jqxhr,textStatus,error){onErrorRecordCompo(jqxhr,textStatus,error);});$('body').trigger({'type':'on-studio-compo-updated'});}
function onRecordCompoDone(data){if(data.status=="ok"){}else{void 0;}};function onErrorRecordCompo(jqxhr,textStatus,error){void 0;};init();})(jQuery,Drupal,drupalSettings);
@@ -1,7 +1,7 @@
(function ($, Drupal, drupalSettings) {
var _settings = drupalSettings.edlp_studio;
var $composer;
var _$composer;
// audio play is handled by edlp_theme
@@ -21,10 +21,11 @@
function initStudio(){
if($('#studio-ui').length){
$composer = $('.composition_ui .composer', '#studio-ui');
_$composer = $('.composition_ui .composer', '#studio-ui');
initAjaxChutierLinks();
initAjaxCompoLinks();
initDragAndDropUI();
initUsedChutierInCompo();
$('body').trigger({'type':'studio-initialized'});
}else{
$('body').trigger({'type':'studio-not-active'});
@@ -95,6 +96,19 @@
.addClass('ajax-enabled');
};
function initUsedChutierInCompo(){
console.log('initUsedChutierInCompo');
$('.chutier-link.on-compo', '#studio-ui .chutier_ui').removeClass('on-compo');
var nid;
$('.audio-link', _$composer).each(function(index, el) {
nid = $(el).attr('nid');
console.log('compo item', nid);
$('.chutier-link[target_id="'+nid+'"]', '#studio-ui .chutier_ui').addClass('on-compo');
});
//audio-link
};
// ___ ___
// / _ \ _ __ ___ _ _ / __|___ _ __ _ __ ___
// | (_) | '_ \/ -_) ' \ | (__/ _ \ ' \| '_ \/ _ \
@@ -111,7 +125,7 @@
var ajax_path = _settings.open_compo_ajax_url+'/'+cid;
var path = window.location.origin + Drupal.url(ajax_path);
$link.addClass('ajax-loading');
$composer.addClass('ajax-loading');
_$composer.addClass('ajax-loading');
$.getJSON(path, {})
.done(function(data){
onOpenCompoDone(data, $link);
@@ -121,16 +135,17 @@
});
};
function onOpenCompoDone(data, $link){
//console.log('onActionToCompoDone',data);
console.log('onOpenCompoDone',data);
$('.composition-link').removeClass('is-active');
$link.removeClass('ajax-loading').addClass('is-active');
if($('.composition', $composer).length){
$('.composition', $composer).replaceWith(data.compo);
if($('.composition', _$composer).length){
$('.composition', _$composer).replaceWith(data.compo);
}else{
$('header', $composer).after(data.compo);
$('header', _$composer).after(data.compo);
}
$composer.removeClass('ajax-loading');
_$composer.removeClass('ajax-loading');
initDragAndDropUI();
initUsedChutierInCompo();
$('body').trigger({
'type':'on-studio-compo-opened'
});
@@ -233,7 +248,7 @@
if($('.composition-link').length){
openCompo($('.composition-link').eq(0));
}else{
$('.composition', $composer).html();
$('.composition', _$composer).html();
}
}else{
console.warn(data.message);
@@ -342,7 +357,7 @@
containment:$('#studio-ui'),
scroll:false,
helper:function(e){
// we reproduce here the irem structure of destination sortable elements
// we reproduce here the item structure of destination sortable elements
// var $audio_link = $('.audio-link',this);
return $('<div>').addClass('field__item')
.append(
@@ -374,6 +389,7 @@
documents[i] = $(this).attr('nid');
});
// console.log(documents);
initUsedChutierInCompo();
recordCompoList(cid, documents);
};
function recordCompoList(cid, docs){
@@ -41,12 +41,17 @@ function template_preprocess_edlp_chutier_ui(&$vars){
$remove_url = Chutier::getActionsUrl($node->id(), $vars['uid']);
// build the link
$vars['documents']['#items'][] = array(
array_unshift($vars['documents']['#items'], array(
'#type' => 'container',
'entrees' => array(
'#type' => 'container',
'#attributes'=>['class'=>['entrees']],
'#markup'=>$entrees,
'remove_link' => array(
'#title' => t("Chutier."),
'#type' => 'link',
'#url' => $remove_url,
'#options'=>array(
'attributes' => array(
'data-drupal-link-system-path' => $remove_url->getInternalPath()
),
),
),
'link'=>array(
'#title' => $trunc_title,
@@ -64,17 +69,12 @@ function template_preprocess_edlp_chutier_ui(&$vars){
),
),
),
'remove_link' => array(
'#title' => t("Chutier."),
'#type' => 'link',
'#url' => $remove_url,
'#options'=>array(
'attributes' => array(
'data-drupal-link-system-path' => $remove_url->getInternalPath()
),
),
),
);
'entrees' => array(
'#type' => 'container',
'#attributes'=>['class'=>['entrees']],
'#markup'=>$entrees,
)
));
}
}