edlp_d8/web/modules/custom/edlp_studio/assets/scripts/edlp_studio.js

(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', 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(){
    //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 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
  };

  //   ___                    ___
  //  / _ \ _ __  ___ _ _    / __|___ _ __  _ __  ___
  // | (_) | '_ \/ -_) ' \  | (__/ _ \ '  \| '_ \/ _ \
  //  \___/| .__/\___|_||_|  \___\___/_|_|_| .__/\___/
  //       |_|                             |_|
  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('onOpenCompoDone',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();
    initUsedChutierInCompo();
    $('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')
        .after($('<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 compo deletion
    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 item 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);
    initUsedChutierInCompo();
    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);