123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408 |
- (function ($, Drupal, drupalSettings) {
- var _settings = drupalSettings.edlp_studio;
- var $composer;
- // audio play is handled by edlp_theme
- function init(){
- // console.log('Studio Init');
- initEvents();
- initStudio();
- };
- function initEvents(){
- $('body')
- .on('new-audio-cartel-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(){
- //console.log('studio initAjaxChutierLinks');
- $('.chutier-ajax-link:not(.ajax-enabled)')
- .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');
- 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){
- //console.log('onActionToChutierDone',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();
- // reload Studio chutier_ui's documents list
- updateStudioChutier();
- };
- function onErrorActionToChutier(jqxhr, textStatus, error, $link){
- console.warn('action to chuttier load failed : '+error, jqxhr.responseText);
- };
- // ___ _ _ _
- // / __|___ _ __ _ __ ___ __(_) |_(_)___ _ _ ___
- // | (__/ _ \ ' \| '_ \/ _ (_-< | _| / _ \ ' \(_-<
- // \___\___/_|_|_| .__/\___/__/_|\__|_\___/_||_/__/
- // |_|
- function initAjaxCompoLinks(){
- //console.log('studio 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();
- //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');
- 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');
- 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'))
- .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();
- //console.log('onNewCompoFormSubmit', name);
- 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;
- // $link.addClass('ajax-loading');
- $.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){
- //console.log('onActionToCompoDone',data);
- var $new_link = $(data.new_link);
- var $delete_link = $(data.delete_link);
- $link
- .removeClass('folded')
- .parents('li')
- .before($('<li>').append($new_link).append($delete_link));
- $form.remove();
- // open new composition to composer
- initAjaxCompoLinks();
- openCompo($new_link);
- };
- function onErrorCreateCompo(jqxhr, textStatus, error, $link){
- console.warn('action to compo load failed : '+error, jqxhr.responseText);
- };
- // ___ _ _
- // | \ ___| |___| |_ ___ __ ___ _ __ _ __ ___
- // | |) / -_) / -_) _/ -_) / _/ _ \ ' \| '_ \/ _ \
- // |___/\___|_\___|\__\___| \__\___/_|_|_| .__/\___/
- // |_|
- function onClickDeleteCompoLink(e){
- e.preventDefault();
- // TODO: confirm
- 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){
- //console.log('onDeleteCompoDone',data);
- if(data.status == "ok"){
- $link.parents('li').remove();
- //console.log("$('.composition-link').length", $('.composition-link').length);
- if($('.composition-link').length){
- openCompo($('.composition-link').eq(0));
- }else{
- $('.composition', $composer).html();
- }
- }else{
- console.warn(data.message);
- }
- };
- function onErrorDeleteCompo(jqxhr, textStatus, error, $link){
- $link.parents('li').removeClass('ajax-loading');
- console.warn('delete compo 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);
- initAjaxChutierLinks();
- // set chutier element draggable again
- setChutierDraggable();
- $('body').trigger({
- 'type':'on-studio-chutier-updated'
- });
- }
- function onLoadChutierError(jqxhr, textStatus, error, $studioChutier){
- console.warn('Chutier load failed', jqxhr.responseText);
- $studioChutier.removeClass('loading');
- }
- // ___ __ ___ _ _ ___
- // | \ _ _ __ _ __ _ / _|___ | \ _ _ ___ _ __ | | | |_ _|
- // | |) | '_/ _` / _` | > _|_ _| | |) | '_/ _ \ '_ \ | |_| || |
- // |___/|_| \__,_\__, | \_____| |___/|_| \___/ .__/ \___/|___|
- // |___/ |_|
- function initDragAndDropUI(){
- // check if field--name-documents exists
- if (!$('.composition_ui .composer .composition .field--name-documents').length) {
- // if not create it
- $field_documents = $('<div>')
- .addClass('field').addClass('field--name-documents')
- .appendTo('.composition_ui .composer .composition');
- }else{
- // add real dom square element to handle sorting
- $field_documents = $('.composition_ui .composer .composition .field--name-documents'); $('.field__item', $field_documents).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
- $field_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
- setChutierDraggable();
- };
- function setChutierDraggable(){
- $('.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'),
- });
- }
- function onOrderChanged(e, ui){
- //console.log('onOrderChanged : e', e);
- var cid = $(e.target).parents('.composition').attr('cid');
- var documents = {};
- $('a', e.target).each(function(i) {
- // console.log(this);
- documents[i] = $(this).attr('nid');
- });
- // console.log(documents);
- recordCompoList(cid, documents);
- };
- function recordCompoList(cid, docs){
- //console.log('recordCompoList '+cid, docs);
- var ajax_path = _settings.save_compo_ajax_url+'/'+cid;
- var path = window.location.origin + Drupal.url(ajax_path);
- //console.log('path', 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){
- //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);
|