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

composer is almost finished, ramins to record compos order through ajax

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-26 21:21:00 +02:00
parent 0fedff7573
commit 90c9c68dcd
26 changed files with 1048 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js
+163 -29
View File
@@ -1,22 +1,25 @@
(function ($, Drupal, drupalSettings) {
var settings = drupalSettings.edlp_studio;
var composer;
function init(){
console.log('Studio Init');
initEvents();
initAjaxLinks();
initStudio();
};
function initEvents(){
$('body')
.on('new-audio-cartel-loaded', initAjaxChutierLinks)
.on('new-content-ajax-loaded', initAjaxLinks);
.on('new-content-ajax-loaded', initStudio);
};
function initAjaxLinks(){
function initStudio(){
$composer = $('.composition_ui .composer', '#studio-ui');
initAjaxChutierLinks();
initAjaxCompoLinks();
initDragAndDropUI();
}
// ___ _ _ _ _ _ _ _ _ _
// / __| |_ _ _| |_(_)___ _ _ | \| |___ __| |___ | | (_)_ _ | |__ ___
@@ -29,14 +32,12 @@
.addClass('ajax-enabled')
.on('click', onClickChutierAjaxLink);
};
function onClickChutierAjaxLink(e){
console.log('studio onClickAjaxLink chutier');
e.preventDefault();
addRemoveToChutier($(this));
return false;
};
function addRemoveToChutier($link){
// var ajax_path = 'edlp_studio/ajax/chutier/add/'+id; // + '/' +cid;
var ajax_path = $link.attr('data-drupal-link-system-path');
@@ -50,7 +51,6 @@
onErrorActionToChutier(jqxhr, textStatus, error, $link);
});
};
function onActionToChutierDone($link, data){
console.log('onActionToChutierDone',data);
$('body').trigger({
@@ -64,7 +64,6 @@
// reload Studio chutier_ui's documents list
updateStudioChutier();
};
function onErrorActionToChutier(jqxhr, textStatus, error, $link){
console.warn('action to chuttier load failed : '+error, jqxhr.responseText);
};
@@ -77,18 +76,16 @@
function initAjaxCompoLinks(){
console.log('studio initAjaxCompoLinks');
$('.new-composition-link:not(.ajax-enabled)')
.addClass('ajax-enabled')
.on('click', onClickNewCompoLink);
.on('click', onClickNewCompoLink)
.addClass('ajax-enabled');
$('.composition-link:not(.ajax-enabled)')
.addClass('ajax-enabled')
.on('click', onClickCompoLink);
.on('click', onClickCompoLink)
.addClass('ajax-enabled');
$('.delete-composition-link:not(.ajax-enabled)')
.addClass('ajax-enabled')
.on('click', onClickDeleteCompoLink);
.on('click', onClickDeleteCompoLink)
.addClass('ajax-enabled');
};
// ___ ___
// / _ \ _ __ ___ _ _ / __|___ _ __ _ __ ___
// | (_) | '_ \/ -_) ' \ | (__/ _ \ ' \| '_ \/ _ \
@@ -97,21 +94,46 @@
function onClickCompoLink(e){
e.preventDefault();
console.log('onClickCompoLink');
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){
console.log('onActionToCompoDone',data);
$('.composition-link').removeClass('is-active');
$link.removeClass('ajax-loading').addClass('is-active');
$composer.html(data.compo);
$composer.removeClass('ajax-loading');
initDragAndDropUI();
};
function onErrorOpenCompo(jqxhr, textStatus, error, $link){
$link.removeClass('ajax-loading');
console.warn('open compo load failed : '+error, jqxhr.responseText);
};
// _ _ _____ __ __ __ ___ _ __ _ __ ___
// | ' \/ -_) V V / / _/ _ \ ' \| '_ \/ _ \
// |_||_\___|\_/\_/ \__\___/_|_|_| .__/\___/
// |_|
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'))
@@ -125,7 +147,6 @@
.addClass('folded');
$form.children('input[type="text"]').focus();
};
function onNewCompoFormSubmit(e, $link, $form){
var name = $('input[type="text"]',$form).val();
console.log('onNewCompoFormSubmit', name);
@@ -135,7 +156,6 @@
}
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;
@@ -144,14 +164,13 @@
'new_name':name
})
.done(function(data){
onActionToCompoDone(data, $link, $form);
onCreateCompoDone(data, $link, $form);
})
.fail(function(jqxhr, textStatus, error){
onErrorActionToCompo(jqxhr, textStatus, error, $link);
onErrorCreateCompo(jqxhr, textStatus, error, $link);
});
};
function onActionToCompoDone(data, $link, $form){
function onCreateCompoDone(data, $link, $form){
console.log('onActionToCompoDone',data);
$link
.removeClass('folded')
@@ -160,12 +179,10 @@
$form.remove();
// TODO: open new composition to composer
};
function onErrorActionToCompo(jqxhr, textStatus, error, $link){
function onErrorCreateCompo(jqxhr, textStatus, error, $link){
console.warn('action to compo load failed : '+error, jqxhr.responseText);
};
// ___ _ _
// | \ ___| |___| |_ ___ __ ___ _ __ _ __ ___
// | |) / -_) / -_) _/ -_) / _/ _ \ ' \| '_ \/ _ \
@@ -223,7 +240,6 @@
});
}
};
function onLoadedChutier($studioChutier, data){
$studioChutier.replaceWith(data.rendered);
initAjaxChutierLinks();
@@ -231,12 +247,130 @@
'type':'on-studio-chutier-updated'
});
}
function onLoadChutierError(jqxhr, textStatus, error, $studioChutier){
console.warn('Chutier load failed', jqxhr.responseText);
$studioChutier.removeClass('loading');
}
// ___ __ ___ _ _ ___
// | \ _ _ __ _ __ _ / _|___ | \ _ _ ___ _ __ | | | |_ _|
// | |) | '_/ _` / _` | > _|_ _| | |) | '_/ _ \ '_ \ | |_| || |
// |___/|_| \__,_\__, | \_____| |___/|_| \___/ .__/ \___/|___|
// |___/ |_|
function initDragAndDropUI(){
// add real dom square element to handle sorting
$('.composition_ui .composer .composition .field--name-documents .field__item').each(function(i){
$(this).prepend($('<span>').addClass('handler'));
});
// create remove dropzone
var $remove_zone = $('<div>').addClass('remove-drop-zone')
.appendTo('.composition_ui .composer .composition')
.droppable({
tolerance:'pointer',
// scope:'composition_ui',
over:function(e,ui){
// console.log('on over remove : ui', ui);
ui.draggable.addClass('ready-to-remove');
},
out:function(e,ui){
// console.log('on over remove : ui', ui);
ui.draggable.removeClass('ready-to-remove');
},
drop:function(e,ui){
// console.log('on drop remove : ui', ui);
ui.draggable.remove();
// onOrderChanged(ui);
}
});
// create sortable
$('.composition_ui .composer .composition .field--name-documents').sortable({
revert:false,
handle: ".handler",
receive:function(e, ui){
$('.field__item', this).attr('style', '');
// TODO: trigger event to enable new audiolink player
},
update:function(e, ui){
onOrderChanged(e, ui);
},
connectWith : $remove_zone,
});
// set chutier element draggable
$('.chutier_ui .item-list li>div').draggable({
containment:$('#studio-ui'),
scroll:false,
helper:function(e){
// we reproduce here the irem structure of destination sortable elements
// var $audio_link = $('.audio-link',this);
return $('<div>').addClass('field__item')
.append(
$('<article>').addClass('node').append(
$('<h2>').addClass('node-title').append(
// $('<a>')
// .attr('nid', $audio_link.attr('nid'))
// .html($audio_link.html())
$('.audio-link',this).clone().removeClass('ajax-enable')
)
)
)
.prepend($('<span>').addClass('handler'));
},
// cursor:'grab',
cursorAt:{bottom:10,left:10},
zIndex:999,
revert:true,
revertDuration:0,
connectToSortable:$('.composition_ui .composer .composition .field--name-documents'),
});
};
// TODO: how to remove an item
function onOrderChanged(e, ui){
console.log('onOrderChanged : e', e);
// TODO: record the current order through ajax
var documents = [];
$('a', e.target).each(function(i) {
// console.log(this);
documents.push($(this).attr('nid'));
});
console.log(documents);
// recordCompoList(cid, documents);
};
function recordCompoList(cid, docs){
var ajax_path = 'path';
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);
});
}
function onRecordCompoDone(data){
console.log('onDeleteCompoDone',data);
if(data.status == "ok"){
}else{
console.warn(data.message);
}
};
function onErrorRecordCompo(jqxhr, textStatus, error){
console.warn('record compo failed : '+error, jqxhr.responseText);
};
init();
})(jQuery, Drupal, drupalSettings);