refactoring (gulp and libraries) + some fixing

sites/all/modules/figli/.gitignore

@@ -0,0 +1 @@
+node_modules

sites/all/modules/figli/edlp_ajax/edlp_ajax.module

@@ -22,13 +22,14 @@ function edlp_ajax_page_attachments(array &$attachments) {
   $current_path = \Drupal::service('path.current')->getPath();
   $is_front = \Drupal::service('path.matcher')->isFrontPage();
 
-  // do not redirect if note node, term, or custom routing
+  // do not redirect if not node, term, or custom routing
+  // FIXME: check with routes instead of path as path can change !!!
   if(preg_match('/^\/?node\/\d+/', $current_path)
     || preg_match('/^\/?taxonomy\/term\/\d+/', $current_path)
     || preg_match('/^\/?productions/', $current_path)
     || preg_match('/^\/?agenda/', $current_path)
-    || preg_match('/^\/?studio/', $current_path)){
+    || preg_match('/^\/?studio/', $current_path)
-      // TODO: search url
+    || preg_match('/^\/?search/', $current_path)){
       $redirect = true;
     }
 

sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css

@@ -1 +1,71 @@
-canvas#corpus-map{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;top:0;left:0;z-index:0}canvas#corpus-map.de-activated{background-color:#f4f4f4}div.node-popup{z-index:10;position:absolute;-webkit-box-sizing:content-box;box-sizing:content-box;width:300px;min-height:30px;top:60%;left:30%;pointer-events:none}div.node-popup .inner{padding:1em;outline:red solid 1px;background-color:#fff}div.node-popup:before{content:"";position:absolute;width:60px;height:0;border-top:1px solid red}div.node-popup[pos=bottom-right]{-webkit-transform:translateY(42px) translateX(42px);transform:translateY(42px) translateX(42px)}div.node-popup[pos=bottom-right]:before{top:-1px;left:-61px;-webkit-transform-origin:bottom right;transform-origin:bottom right;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}div.node-popup[pos=bottom-left]{-webkit-transform:translateX(-100%) translateY(42px) translateX(-42px);transform:translateX(-100%) translateY(42px) translateX(-42px)}div.node-popup[pos=bottom-left]:before{top:calc(100% +1px);left:100%;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg)}div.node-popup[pos=top-left]{-webkit-transform:translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px);transform:translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px)}div.node-popup[pos=top-left]:before{bottom:0;left:100%;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}div.node-popup[pos=top-right]{-webkit-transform:translateY(-100%) translateY(-42px) translateX(42px);transform:translateY(-100%) translateY(-42px) translateX(42px)}div.node-popup[pos=top-right]:before{top:calc(100% + 1px);left:-61px;-webkit-transform-origin:top right;transform-origin:top right;-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg)}
+canvas#corpus-map {
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  z-index: 0; }
+  canvas#corpus-map.de-activated {
+    background-color: #f4f4f4; }
+
+div.node-popup {
+  z-index: 10;
+  position: absolute;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  width: 300px;
+  min-height: 30px;
+  pointer-events: none;
+  top: 60%;
+  left: 30%;
+  pointer-events: none; }
+  div.node-popup .inner {
+    padding: 1em;
+    outline: 1px solid red;
+    background-color: white; }
+  div.node-popup:before {
+    content: "";
+    position: absolute;
+    width: 60px;
+    height: 0;
+    border-top: 1px solid red; }
+  div.node-popup[pos="bottom-right"] {
+    -webkit-transform: translateY(42px) translateX(42px);
+    transform: translateY(42px) translateX(42px); }
+    div.node-popup[pos="bottom-right"]:before {
+      top: -1px;
+      left: -61px;
+      -webkit-transform-origin: bottom right;
+      transform-origin: bottom right;
+      -webkit-transform: rotateZ(45deg);
+      transform: rotateZ(45deg); }
+  div.node-popup[pos="bottom-left"] {
+    -webkit-transform: translateX(-100%) translateY(42px) translateX(-42px);
+    transform: translateX(-100%) translateY(42px) translateX(-42px); }
+    div.node-popup[pos="bottom-left"]:before {
+      top: calc(100% +1px);
+      left: 100%;
+      -webkit-transform-origin: top left;
+      transform-origin: top left;
+      -webkit-transform: rotateZ(-45deg);
+      transform: rotateZ(-45deg); }
+  div.node-popup[pos="top-left"] {
+    -webkit-transform: translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px);
+    transform: translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px); }
+    div.node-popup[pos="top-left"]:before {
+      bottom: 0;
+      left: 100%;
+      -webkit-transform-origin: top left;
+      transform-origin: top left;
+      -webkit-transform: rotateZ(45deg);
+      transform: rotateZ(45deg); }
+  div.node-popup[pos="top-right"] {
+    -webkit-transform: translateY(-100%) translateY(-42px) translateX(42px);
+    transform: translateY(-100%) translateY(-42px) translateX(42px); }
+    div.node-popup[pos="top-right"]:before {
+      top: calc(100% + 1px);
+      left: -61px;
+      -webkit-transform-origin: top right;
+      transform-origin: top right;
+      -webkit-transform: rotateZ(-45deg);
+      transform: rotateZ(-45deg); }

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -923,8 +923,6 @@
             .append('<h2 class="title">'+this.node.title+'</h2>')
             .append('<section class="description">'+this.node.description+'</section>')
             .append($chutier_action);
-
-          // TODO: favoris marker
         };
 
         NodePopUp.prototype.removeNode = function(){

sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss

@@ -25,7 +25,6 @@ canvas#corpus-map{
 //                            |_|        |_|
 div.node-popup{
   // display:none;
-  // outline: 1px dotted green;
   z-index: 10;
   position: absolute;
   box-sizing: content-box;

sites/all/modules/figli/edlp_corpus/bower.json

@@ -14,7 +14,6 @@
     "tests"
   ],
   "dependencies": {
-    "physics": "latest",
+    "physics": "latest"
-    "EaselJS": "latest"
   }
 }

sites/all/modules/figli/edlp_corpus/edlp_corpus.libraries.yml

@@ -14,8 +14,7 @@ corpus:
 
   version: VERSION
   js:
-    assets/dist/bower/physics.min.js: { scope: footer }
+    assets/dist/scripts/physics.min.js: { scope: footer }
-    # assets/dist/bower/easeljs.min.js: { scope: footer }
     assets/dist/scripts/corpus.min.js: { scope: footer }
   dependencies:
     - core/drupalSettings

sites/all/modules/figli/edlp_corpus/gulpfile.js

@@ -74,8 +74,11 @@ gulp.task('bower', function() {
 });
 
 // default gulp task
-gulp.task('default', ['bower', 'scripts', 'styles'], function() {
+// gulp.task('default', ['bower', 'scripts', 'styles'], function() {
-  gulp.watch('./assets/styles/*.scss', ['styles']);
+//   gulp.watch('./assets/styles/*.scss', ['styles']);
-  // gulp.watch('./assets/styles/*/*.scss', ['styles']);
+//   // gulp.watch('./assets/styles/*/*.scss', ['styles']);
-  gulp.watch('./assets/scripts/*.js', ['scripts']);
+//   gulp.watch('./assets/scripts/*.js', ['scripts']);
+// });
+gulp.task('default', function() {
+  console.log('Not used anymore, use the global, multi module gulp file one folder ahead');
 });

sites/all/modules/figli/edlp_search/assets/scripts/edlp_search.js

@@ -0,0 +1,109 @@
+(function ($, Drupal, drupalSettings) {
+
+  var settings = drupalSettings.edlp_search;
+  var _$body = $('body');
+  var _$container;
+  var _$form;
+
+  function init(){
+    // console.log('EdlpSearch Init', settings);
+    initEvents();
+    initAjax();
+  };
+
+  function initEvents(){
+    $('body')
+      .on('new-content-ajax-loaded', initAjax)
+      .on('edlp_search_search_form-col-closed', onSearchClosed);
+  };
+
+  function initAjax(){
+    _$form = $('#edlp-search-form:not(.ajax-enabled)');
+    if(!_$form.length) return false;
+
+    //console.log('EdlpSearch initAjaxForm()');
+    _$form = $('#edlp-search-form:not(.ajax-enabled)')
+      .on('submit', onSubmitForm)
+      .addClass('ajax-enabled');
+    _$container = _$form.parents('.row');
+    if(!_$container.length){
+      _$container = _$form.parent();
+    }
+  };
+
+  function onSubmitForm(e){
+    e.preventDefault();
+    // console.log('onSubmitForm',e);
+    var args = {};
+
+    // search for key words
+    args.keys = $('input[type="search"]', this).val();
+
+    // entries filter
+    args.entries = [];
+    $('input[type="checkbox"]:checked', '#edit-entries').each(function(index, el) {
+      args.entries.push($(this).val());
+    });
+
+    // langues
+    args.langues = $('input[name="langues"]', this).val();
+
+    // genres
+    args.genres = $('input[name="genres"]', this).val();
+
+    //console.log('EdlpSearch onSubmitForm() : args',args);
+
+    loadResults(args);
+
+    return false;
+  };
+
+  function loadResults(args){
+    //console.log('EdlpSearch loadResults() : args', args);
+    _$form.addClass('ajax-loading');
+    _$body.addClass('ajax-loading');
+    $('[theme="edlp_search_results"]', _$container).addClass('ajax-loading');
+    var path = window.location.origin + drupalSettings.path.baseUrl +settings.results_ajax_url;
+    $.getJSON(path, args)
+      .done(function(data){
+        onResultsLoaded(data);
+      })
+      .fail(function(jqxhr, textStatus, error){
+        onResultsLoadFail(jqxhr, textStatus, error);
+      });
+  };
+
+  function onResultsLoaded(data){
+    // console.log('EdlpSearch onResultsLoaded()', data);
+    _$form.removeClass('ajax-loading');
+    _$body.removeClass('ajax-loading');
+
+    // insert results col
+    $prev_results = $('[theme="edlp_search_results"]', _$container);
+    if($prev_results.length){
+      $prev_results.replaceWith(data.rendered);
+    }else{
+      _$container.append(data.rendered);
+    }
+
+    // trigger event
+    _$body.trigger({
+      'type':'search-results-loaded',
+      'results':data.results_nids
+    });
+
+  };
+
+  function onResultsLoadFail(jqxhr, textStatus, error){
+    console.warn('EdlpSearch : search results ajax load failed : '+error, jqxhr.responseText);
+  };
+
+  function onSearchClosed(e){
+    // console.log('Edlp Search onSearchClosed()');
+    $('div[theme="edlp_search_results"]').remove();
+    // trigger event
+    _$body.trigger({'type':'search-closed'});
+  }
+
+  init();
+})(jQuery, Drupal, drupalSettings);

sites/all/modules/figli/edlp_search/edlp_search.libraries.yml

@@ -1,6 +1,7 @@
 edlp_search-library:
   js:
-    assets/js/edlp_search.js: { scope: footer }
+    assets/scripts/edlp_search.js: { scope: footer }
   dependencies:
     - core/drupalSettings
     - core/jquery
+    - core/drupal.autocomplete

sites/all/modules/figli/edlp_search/edlp_search.routing.yml

@@ -1,6 +1,6 @@
 
 edlp_search.edlp_search_controller_searchForm:
-  path: '/edlp_search/searchform'
+  path: '/search'
   defaults:
     _controller: '\Drupal\edlp_search\Controller\EdlpSearchController::searchForm'
     _title: 'Search Form'
@@ -8,7 +8,7 @@ edlp_search.edlp_search_controller_searchForm:
     _permission: 'access content'
 
 edlp_search.edlp_search_controller_searchForm_ajax:
-  path: '/edlp_search/searchform/ajax'
+  path: '/search/ajax'
   defaults:
     _controller: '\Drupal\edlp_search\Controller\EdlpSearchController::searchFormJson'
     _title: 'Search Form'

sites/all/modules/figli/edlp_search/src/Controller/EdlpSearchController.php

@@ -73,6 +73,7 @@ class EdlpSearchController extends ControllerBase {
 
     $rendered = render($this->renderable);
 
+    // TODO: make respponse cachable
     $response = new JsonResponse();
     $response->setData([
       'rendered'=> $rendered,

sites/all/modules/figli/edlp_search/src/Plugin/Block/EdlpSearchLinkBlock.php

@@ -20,7 +20,7 @@ class EdlpSearchLinkBlock extends BlockBase {
    */
   public function build() {
     $build = [];
-    $url = Url::fromRoute('edlp_search.edlp_search_controller_searchForm', [], ['absolute' => TRUE]);
+    $url = Url::fromRoute('edlp_search.edlp_search_controller_searchForm');
     $build['edlp_search_link_block'] = array(
       '#title' => "Search",
       '#type' => 'link',

sites/all/modules/figli/edlp_studio/assets/dist/scripts/edlp_studio.min.js

@@ -0,0 +1,408 @@
+(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 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 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);

sites/all/modules/figli/edlp_studio/assets/scripts/edlp_studio.js

@@ -208,7 +208,7 @@
   //                                       |_|
   function onClickDeleteCompoLink(e){
     e.preventDefault();
-    // TODO: confirm
+    // TODO: confirm compo deletion
     deleteCompo($(this));
     return false;
   };

sites/all/modules/figli/edlp_studio/edlp_studio.libraries.yml

@@ -1,6 +1,6 @@
 edlp_studio-library:
   js:
-    assets/js/edlp_studio.js: { scope: footer }
+    assets/scripts/edlp_studio.js: { scope: footer }
   dependencies:
     - core/drupalSettings
     - core/jquery

sites/all/modules/figli/edlp_studio/src/Controller/StudioUIController.php

@@ -72,7 +72,7 @@ class StudioUIController extends ControllerBase {
   public function StudioChutierUIJson(){
     $renderable = $this->buildChutierUI();
     $rendered = render($renderable);
-
+    // TODO: make response cachable
     // JSON
     $response = new JsonResponse();
     $response->setData([

sites/all/modules/figli/gulpfile.js

@@ -0,0 +1,69 @@
+/**
+ * @Author: Bachir Soussi Chiadmi <bach>
+ * @Date:   20-12-2017
+ * @Email:  bachir@figureslibres.io
+ * @Filename: gulpfile.js
+ * @Last modified by:   bach
+ * @Last modified time: 20-12-2017
+ * @License: GPL-V3
+ */
+
+'use strict';
+
+var gulp = require('gulp');
+var gulpif = require('gulp-if');
+var sass = require('gulp-sass');
+var watch = require('gulp-watch');
+var autoprefixer = require('gulp-autoprefixer');
+var jsmin = require('gulp-jsmin');
+var cssmin = require('gulp-cssmin');
+var rename = require('gulp-rename');
+// var mainBowerFiles = require('main-bower-files');
+var es = require('event-stream');
+
+var modules = ['edlp_corpus', 'edlp_studio', 'edlp_search'];
+
+// to get minified assets run `gulp --env=prod`
+var argv = require('minimist')(process.argv.slice(2));
+console.dir(argv);
+var prod = argv.env == 'prod' ? true : false;
+
+function handleError(err) {
+  console.log(err.toString());
+}
+
+gulp.task('scripts', function () {
+  var tasks = modules.map(function(module) {
+    return gulp.src('./'+module+'/assets/scripts/*.js')
+      .pipe(gulpif(prod, jsmin()))
+      // .pipe(jsmin())
+      .pipe(rename({suffix: '.min'}))
+      .pipe(gulp.dest('./'+module+'/assets/dist/scripts/'));
+  });
+  return es.merge.apply(null, tasks);
+});
+
+gulp.task('styles', function () {
+  var tasks = modules.map(function(module) {
+    return gulp.src('./'+module+'/assets/styles/*.scss')
+      .pipe(sass().on('error', sass.logError))
+      .pipe(autoprefixer({
+          browsers: ['last 2 versions'],
+          cascade: false
+      })).on('error', handleError)
+      .pipe(gulpif(prod, cssmin()))
+      // .pipe(cssmin())
+      .pipe(rename({suffix: '.min'}))
+      .pipe(gulp.dest('./'+module+'/assets/dist/styles/'));
+  });
+  return es.merge.apply(null, tasks);
+});
+
+// default gulp task
+gulp.task('default', ['scripts', 'styles'], function() { //'bower',
+  for (var i = 0; i < modules.length; i++) {
+    // gulp.watch('./assets/styles/*/*.scss', ['styles']);
+    gulp.watch('./'+modules[i]+'/assets/styles/*.scss', ['styles']);
+    gulp.watch('./'+modules[i]+'/assets/scripts/*.js', ['scripts']);
+  }
+});

sites/all/modules/figli/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "edlpd8theme",
+  "version": "0.0.1",
+  "description": "A theme for drupal.",
+  "main": "gulpfile.js",
+  "author": "Bachir Soussi Chiadmi",
+  "license": "GPLv3",
+  "homepage": "https://encyclopediedelaparole.org",
+  "devDependencies": {
+    "event-stream": "^3.3.4",
+    "gulp": "latest",
+    "gulp-autoprefixer": "latest",
+    "gulp-cssmin": "latest",
+    "gulp-if": "^2.0.2",
+    "gulp-jsmin": "latest",
+    "gulp-json-to-sass": "0.0.4",
+    "gulp-rename": "latest",
+    "gulp-sass": "latest",
+    "gulp-strip-debug": "latest",
+    "gulp-watch": "latest",
+    "minimist": "^1.2.0"
+  },
+  "dependencies": {}
+}

sites/all/themes/custom/edlptheme/assets/dist/scripts/history.min.js

@@ -1,3 +1,19 @@
+// https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
+function setCookie(name, value, days) {
+  var d = new Date;
+  d.setTime(d.getTime() + 24*60*60*1000*days);
+  document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
+}
 
-function setCookie(name,value,days){var d=new Date;d.setTime(d.getTime()+24*60*60*1000*days);document.cookie=name+"="+value+";path=/;expires="+d.toGMTString();}
+// var edlp is provided by edlp_ajax.module file
-if(edlp.redirect){document.body.style.visibility='hidden';var cookiename="edlp_origin_path";var cookie_value=edlp.sys_path.replace(/^\//,'')+'~~'+window.location.pathname;setCookie(cookiename,cookie_value,1);window.location.replace(window.location.origin);}else{document.body.style.visibility='visible';}
+if(edlp.redirect){
+  document.body.style.visibility = 'hidden';
+  // record current (will be origin) sys_path in cookie
+  var cookiename = "edlp_origin_path";
+  var cookie_value = edlp.sys_path.replace(/^\//, '') + '~~' + window.location.pathname;
+  setCookie(cookiename, cookie_value, 1);
+  // redirect to home
+  window.location.replace(window.location.origin);
+}else{
+  document.body.style.visibility = 'visible';
+}

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -18,22 +18,21 @@
     function init(){
       // console.log("EdlpTheme init()");
 
-      // redirect all no-front pages to front with right url ajax load
       initHistory();
 
-      _$body.on('corpus-map-ready', onCorpusMapReady);
+      if(!drupalSettings.path.isFront)
+        return;
+
+      initEvents();
 
       _audioPlayer = new AudioPlayer();
       _compoPlayer = new CompoPlayer();
 
       initAjaxLinks();
 
-      if (_$body.is('.path-productions')) initProductions();
+      // if (_$body.is('.path-productions')) initProductions();
-
+      // if(_$body.is('.path-frontpage')) initHome();
-      if(_$body.is('.path-frontpage')) initHome();
-
       // initScrollbars();
-      initEvents();
     };
 
     //  ___             _
@@ -41,7 +40,8 @@
     // | _|\ V / -_) ' \  _(_-<
     // |___|\_/\___|_||_\__/__/
     function initEvents(){
-      $('body')
+      _$body
+        .on('corpus-map-ready', onCorpusMapReady)
         .on('on-studio-chutier-updated', initAjaxLinks)
         .on('studio-initialized', function(e){
           _compoPlayer.newCompo();
@@ -118,32 +118,18 @@
       var path = window.location.origin + Drupal.url(ajax_path);
       $.getJSON(path, {})
         .done(function(data){
-          onAjaxLoaded(data, sys_path, selector);
+          onAjaxLoaded(data, url, ajax_path, sys_path, selector);
         })
         .fail(function(jqxhr, textStatus, error){
           onAjaxLoadError(jqxhr, textStatus, error, sys_path);
         });
-
-
-      var state = {
-        ajax_path:ajax_path,
-        sys_path:sys_path,
-      };
-      // url is null means that we are loading content on popState event
-      // so we don't record the state again
-      if(url){
-        // console.log('url:'+url+' ; state',state);
-        // we can not pushestate with absolute url
-        history.pushState(state, null, url);
-      }
-
     };
     function onAjaxLoadError(jqxhr, textStatus, error, sys_path){
       console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
       $('.ajax-loading').removeClass('ajax-loading');
       _$body.removeClass('ajax-loading');
     };
-    function onAjaxLoaded(data, sys_path, selector){
+    function onAjaxLoaded(data, url, ajax_path, sys_path, selector){
       // console.log('ajax loaded : data', data);
 
       // reset all style may been added by other pages (like masonry for productions)
@@ -217,6 +203,18 @@
       _$body.attr('booted', 'booted');
       _$body.removeClass('ajax-loading');
 
+
+      var state = {
+        ajax_path:ajax_path,
+        sys_path:sys_path,
+      };
+      // url is null means that we are loading content on popState event
+      // so we don't record the state again
+      if(url){
+        // console.log('url:'+url+' ; state',state);
+        // we can not pushestate with absolute url
+        history.pushState(state, null, url);
+      }
     };
 
     function addCloseBtnToCols(){
@@ -304,10 +302,8 @@
         .add('a', '.productions-subtree')
         .add('a', '.productions-parent')
         // .add('a.index-link, a.notice-link', '#block-edlpentreesblock')
-        // .addClass('use-ajax')
         .addClass('ajax-link');
 
-      Drupal.ajax.bindAjaxLinks('#block-footer.menu--footer');
       _$ajaxLinks = $('.ajax-link:not(.ajax-enabled)')
         .each(function(i,e){
           var $this = $(this);
@@ -464,7 +460,6 @@
         this.$previous.on('click', this.playPrevious.bind(this));
         this.$playpause.on('click', this.togglePlayPause.bind(this));
         this.$next.on('click', this.playNext.bind(this));
-        // TODO: previous and next btns
       },
       openDocument(node, caller){
         // console.log('AudioPlayer openDocument', node);
@@ -796,7 +791,7 @@
 
           this.refresh();
 
-          this.active = true; // TODO: set active false
+          this.active = true;
           // this.newCompo();
         }
       },
@@ -1069,7 +1064,6 @@
       d.setTime(d.getTime() + 24*60*60*1000*days);
       document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
     }
-
     function deleteCookie(name) { setCookie(name, '', -1); }
 
     init();

sites/all/themes/custom/edlptheme/edlptheme.libraries.yml

@@ -18,14 +18,18 @@ global-js:
     assets/dist/scripts/main.min.js: { scope: footer }
   dependencies:
     - core/drupal
-    - core/drupal.autocomplete
+    # - core/drupal.ajax
+    # - core/drupal.autocomplete
     - core/matchmedia
     - core/matchmedia.addListener
     - core/jquery
-    - core/jquery.once
+    # - core/jquery.once
-    - core/jquery.ui.draggable
+    # - core/jquery.ui.draggable
-    - core/jquery.ui.dropable
+    # - core/jquery.ui.dropable
-    - core/jquery.ui.sortable
+    # - core/jquery.ui.sortable
+    - edlp_corpus/corpus
+    - edlp_studio/edlp_studio-library
+    - edlp_search/edlp_search-library
     - url_to_video_filter/player_embed
     - url_to_video_filter/vimeo_embed
     - url_to_video_filter/youtube_embed

sites/all/themes/custom/edlptheme/gulpfile.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var gulp = require('gulp');
-var util = require('gulp-util');
+var gulpif = require('gulp-if');
 var sass = require('gulp-sass');
 var watch = require('gulp-watch');
 var autoprefixer = require('gulp-autoprefixer');
@@ -11,7 +11,6 @@ var rename = require('gulp-rename');
 var mainBowerFiles = require('main-bower-files');
 // var jsonToSass = require('gulp-json-to-sass');
 // var concat = require('gulp-concat');
-// var through = require('through2');
 var svgmin = require('gulp-svgmin');
 // var fs = require('fs');
 // var json2js = require('gulp-json2js');
@@ -19,20 +18,20 @@ var svgmin = require('gulp-svgmin');
 
 // var shared_variables = JSON.parse(fs.readFileSync('./assets/json/shared_variables.json'));
 
+// to get minified assets run `gulp --env=prod`
+var argv = require('minimist')(process.argv.slice(2));
+console.dir(argv);
+var prod = argv.env == 'prod' ? true : false;
+
 function handleError(err) {
   console.log(err.toString());
 }
 
-var config = {
-  assetsDir : './assets',
-  production: !!util.env.production
-}
-
 gulp.task('scripts', function () {
   gulp.src(['./assets/scripts/main.js', './assets/scripts/history.js']) // './assets/scripts/shared_variables.js',
     // .pipe(concat('main.js'))
-    // .pipe(config.production ? jsmin() : util.noop())
+    .pipe(gulpif(prod, jsmin()))
-    .pipe(jsmin())
+    // .pipe(jsmin())
     .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest('./assets/dist/scripts/'));
 });
@@ -44,8 +43,9 @@ gulp.task('styles', function () {
         browsers: ['last 2 versions'],
         cascade: false
     })).on('error', handleError)
-    // .pipe(config.production ? cssmin() : util.noop())
+    // .pipe(prod ? cssmin() : util.noop())
-    .pipe(cssmin())
+    .pipe(gulpif(prod, cssmin()))
+    // .pipe(cssmin())
     .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest('./assets/dist/styles/'));
 });

sites/all/themes/custom/edlptheme/package.json

@@ -11,16 +11,18 @@
     "gulp-autoprefixer": "latest",
     "gulp-concat": "latest",
     "gulp-cssmin": "latest",
+    "gulp-if": "^2.0.2",
     "gulp-jsmin": "latest",
     "gulp-json-to-sass": "latest",
     "gulp-json2js": "latest",
     "gulp-rename": "latest",
     "gulp-sass": "latest",
     "gulp-strip-debug": "latest",
-    "gulp-svgmin": "latest",
+    "gulp-svgmin": "^1.2.4",
     "gulp-util": "latest",
     "gulp-watch": "latest",
-    "main-bower-files": "latest"
+    "main-bower-files": "latest",
+    "minimist": "^1.2.0"
   },
   "dependencies": {}
 }