added genres an langues condition to search, added close column bouton

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

@@ -634,9 +634,7 @@
     // | _|| ' \  _| '_/ -_) -_|_-<
     // |___|_||_\__|_| \___\___/__/
     function filterEntree(t){
-      // shuydown articles if active
-      if(_$articles_link.is('.is-active'))
-        _$articles_link.trigger('click');
+      shutDownArticles();
 
       _nodes_centered = [];
       for (var n = 0; n < _nodes.length; n++) {
@@ -661,6 +659,28 @@
       }
     };
 
+
+    //  ___                  _
+    // / __| ___ __ _ _ _ __| |_
+    // \__ \/ -_) _` | '_/ _| ' \
+    // |___/\___\__,_|_| \__|_||_|
+    function filterSearchResults(nids){
+      shutDownArticles();
+
+      _nodes_centered = [];
+      for (var n = 0; n < _nodes.length; n++) {
+        if(nids.indexOf(_nodes[n].nid) == -1){
+          _nodes[n].setAside();
+        }else{
+          _nodes[n].setCentered();
+          // record centered nodes for inter node repulsions
+          _nodes_centered.push(_nodes[n]);
+        }
+      }
+      createNodesRepulsions();
+    };
+
+
     //  ___                    _    _ _
     // / __| __ _ _ __ _ _ __ | |__| (_)_ _  __ _
     // \__ \/ _| '_/ _` | '  \| '_ \ | | ' \/ _` |
@@ -733,7 +753,11 @@
         _no_articles_nodes[i].unFade();
       }
     };
-
+    function shutDownArticles(){
+      // shutdown articles if active
+      if(_$articles_link.is('.is-active'))
+        _$articles_link.trigger('click');
+    };
     //  ___             _
     // | __|_ _____ _ _| |_ ___
     // | _|\ V / -_) ' \  _(_-<
@@ -808,6 +832,10 @@
         .on('search-results-loaded', function(e){
           console.log("Edlp Corpus, search-results-loaded",e.results);
           // TODO: filter map's nodes
+          filterSearchResults(e.results);
+        })
+        .on('search-closed', function(e){
+          scrambleCollection();
         });
     };
 

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

@@ -634,9 +634,7 @@
     // | _|| ' \  _| '_/ -_) -_|_-<
     // |___|_||_\__|_| \___\___/__/
     function filterEntree(t){
-      // shuydown articles if active
-      if(_$articles_link.is('.is-active'))
-        _$articles_link.trigger('click');
+      shutDownArticles();
 
       _nodes_centered = [];
       for (var n = 0; n < _nodes.length; n++) {
@@ -661,6 +659,28 @@
       }
     };
 
+
+    //  ___                  _
+    // / __| ___ __ _ _ _ __| |_
+    // \__ \/ -_) _` | '_/ _| ' \
+    // |___/\___\__,_|_| \__|_||_|
+    function filterSearchResults(nids){
+      shutDownArticles();
+
+      _nodes_centered = [];
+      for (var n = 0; n < _nodes.length; n++) {
+        if(nids.indexOf(_nodes[n].nid) == -1){
+          _nodes[n].setAside();
+        }else{
+          _nodes[n].setCentered();
+          // record centered nodes for inter node repulsions
+          _nodes_centered.push(_nodes[n]);
+        }
+      }
+      createNodesRepulsions();
+    };
+
+
     //  ___                    _    _ _
     // / __| __ _ _ __ _ _ __ | |__| (_)_ _  __ _
     // \__ \/ _| '_/ _` | '  \| '_ \ | | ' \/ _` |
@@ -733,7 +753,11 @@
         _no_articles_nodes[i].unFade();
       }
     };
-
+    function shutDownArticles(){
+      // shutdown articles if active
+      if(_$articles_link.is('.is-active'))
+        _$articles_link.trigger('click');
+    };
     //  ___             _
     // | __|_ _____ _ _| |_ ___
     // | _|\ V / -_) ' \  _(_-<
@@ -808,6 +832,10 @@
         .on('search-results-loaded', function(e){
           console.log("Edlp Corpus, search-results-loaded",e.results);
           // TODO: filter map's nodes
+          filterSearchResults(e.results);
+        })
+        .on('search-closed', function(e){
+          scrambleCollection();
         });
     };
 

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

@@ -13,7 +13,8 @@
 
   function initEvents(){
     $('body')
-      .on('new-content-ajax-loaded', initAjax);
+      .on('new-content-ajax-loaded', initAjax)
+      .on('edlp_search_search_form-col-closed', onSearchClosed);
   };
 
   function initAjax(){
@@ -41,7 +42,15 @@
       args.entries.push($(this).val());
     });
 
-    loadResults(args)
+    // 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;
   };
@@ -49,6 +58,8 @@
   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){
@@ -61,6 +72,9 @@
 
   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){
@@ -68,7 +82,7 @@
     }else{
       _$container.append(data.rendered);
     }
-    
+
     // trigger event
     _$body.trigger({
       'type':'search-results-loaded',
@@ -81,5 +95,12 @@
     console.warn('EdlpSearch : search results ajax load failed : '+error, jqxhr.responseText);
   };
 
+  function onSearchClosed(e){
+    console.log('Edlp Search onSearchClosed()', e);
+    $('div[theme="edlp_search_results"]').remove();
+    // trigger event
+    _$body.trigger({'type':'search-closed'});
+  }
+
   init();
 })(jQuery, Drupal, drupalSettings);

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

@@ -273,6 +273,16 @@ class EdlpSearchController extends ControllerBase {
       $query->keys($this->keys);
     }
 
+    // TODO: langues
+    if (!empty($this->langues)) {
+      $query->addCondition('field_langues', $this->langues, "=");
+    }
+
+    // TODO: genres
+    if (!empty($this->genres)) {
+      $query->addCondition('field_genres', $this->genres, "=");
+    }
+
     // entries
     if (!empty($this->entries)){
       $entries_condition_group = $query->createConditionGroup();
@@ -283,13 +293,8 @@ class EdlpSearchController extends ControllerBase {
       $query->addConditionGroup($entries_condition_group);
     }
 
-
-    // TODO: genres
-
     // TODO: locuteurs
 
-    // TODO: langues
-
     $result = $query->execute();
     $items = $result->getResultItems();
     // dpm($items);
@@ -318,6 +323,8 @@ class EdlpSearchController extends ControllerBase {
   private function getRequestSearchArgs(){
     // dpm($this->request);
     $this->keys = $this->request->query->get('keys');
+    $this->langues = $this->request->query->get('langues');
+    $this->genres = $this->request->query->get('genres');
     $this->entries = $this->request->query->get('entries');
   }
 

sites/all/themes/custom/edlptheme/assets/dist/img/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 2.6458333 2.6458334"><g fill="none"><g stroke="#000" stroke-width=".265"><path d="M.111.111l2.424 2.424M.111 2.535L2.535.11" stroke-width=".15170455000000002"/></g><path style="isolation:auto;mix-blend-mode:normal" d="M1.883 0H.763A.76.76 0 0 0 0 .762v1.121c0 .423.34.763.762.763h1.121a.76.76 0 0 0 .763-.763V.763A.76.76 0 0 0 1.883 0z" color="#000" overflow="visible"/></g></svg>

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

@@ -24,10 +24,14 @@
 
       initAjaxLinks();
 
-      if (_$body.is('.path-productions')) {
+      if (_$body.is('.path-productions')){
         initProductions();
       }
 
+      if(_$body.is('.path-frontpage')){
+        addCloseBtnToCols();
+      }
+
       // initScrollbars();
       initEvents();
     };
@@ -50,7 +54,7 @@
         })
         .on('close_entree', function(e){
           // e.tid available
-          closeAllModals();
+          backToFrontPage();
         });
     }
 
@@ -392,7 +396,7 @@
       //   return drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix + path;
       // };
 
-      var path = window.location.origin + drupalSettings.path.baseUrl + ajax_path;
+      var path = window.location.origin + Drupal.url(ajax_path);
       $.getJSON(path, {})
         .done(function(data){
           onAjaxLinkLoaded(data, $link, sys_path);
@@ -414,9 +418,13 @@
 
       // replace all content with newly loaded
       // TODO: build a system to replace or append contents (like studio + search)
-
       _$row.html(data.rendered);
 
+      // add close btn
+      if(sys_path != 'procuction'){
+        addCloseBtnToCols();
+      }
+
       // add body class for currently loaded content
       var body_classes = [
         'path-'+sys_path.replace(/\//g, '-'),
@@ -452,11 +460,37 @@
 
       _$body.trigger({'type':'new-content-ajax-loaded'});
 
-      // TODO: call behaviours
+      // call behaviours
       Drupal.attachBehaviors(_$row[0]);
 
     };
 
+    function addCloseBtnToCols(){
+      $('.col', _$row).each(function(index, el) {
+
+        if($('span.close-col-btn', this).length)
+          return true;
+
+        $(this).children('.wrapper').append($('<span>')
+          .addClass('close-col-btn')
+          .on('click', function(e){
+            // check for theme attribute and emmit event
+            var $col = $(this).parents('.col');
+            var theme = $col.attr('theme');
+            if(theme != ''){
+              _$body.trigger({'type':theme+'-col-closed'});
+            }
+            // remove the col
+            $col.remove();
+            // if row is empty call closeAllModals()
+            if(!$('.col', _$row).length){
+              backToFrontPage();
+            }
+          })
+        );
+      });
+    };
+
     //   ___
     //  / __|___ _ _ _ __ _  _ ___
     // | (__/ _ \ '_| '_ \ || (_-<

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1303,7 +1303,7 @@ main[role="main"] .layout-content {
   transition: opacity 0.5s ease-in-out;
   opacity: 1; }
 
-body.ajax-loading main[role="main"] .layout-content {
+body.ajax-loading main[role="main"] .layout-content .col:not([theme="edlp_search_search_form"]) {
   opacity: 0.2; }
 
 body.ajax-loading main[role="main"]:before {
@@ -1321,6 +1321,22 @@ body.ajax-loading main[role="main"]:before {
   background-repeat: no-repeat;
   background-position: center; }
 
+main[role="main"] span.close-col-btn {
+  pointer-events: all;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 !important;
+  margin: 0.5em;
+  display: block;
+  width: 10px;
+  height: 10px;
+  background-image: url(../img/close.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain; }
+
 #audio-player {
   position: absolute;
   top: 0;
@@ -1805,58 +1821,69 @@ body.ajax-loading main[role="main"]:before {
     font-size: 0.756em;
     padding: 0.1em;
     margin: 1em 0 0 0;
-    float: right; }
+    float: right;
+    opacity: 1;
+    -webkit-transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.3s ease-in-out; }
+  #edlp-search-form.ajax-loading input[type="submit"] {
+    opacity: 0.2;
+    pointer-events: none; }
 
-.col[theme="edlp_search_results"] article .entrees span {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  background-color: black;
-  margin-right: 3px; }
-  .col[theme="edlp_search_results"] article .entrees span[tid='134'] {
-    background-color: var(--e-col-134); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='121'] {
-    background-color: var(--e-col-121); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='125'] {
-    background-color: var(--e-col-125); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='119'] {
-    background-color: var(--e-col-119); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='132'] {
-    background-color: var(--e-col-132); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='122'] {
-    background-color: var(--e-col-122); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='129'] {
-    background-color: var(--e-col-129); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='120'] {
-    background-color: var(--e-col-120); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='130'] {
-    background-color: var(--e-col-130); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='118'] {
-    background-color: var(--e-col-118); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='127'] {
-    background-color: var(--e-col-127); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='133'] {
-    background-color: var(--e-col-133); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='128'] {
-    background-color: var(--e-col-128); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='124'] {
-    background-color: var(--e-col-124); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='116'] {
-    background-color: var(--e-col-116); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='117'] {
-    background-color: var(--e-col-117); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='131'] {
-    background-color: var(--e-col-131); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='126'] {
-    background-color: var(--e-col-126); }
-  .col[theme="edlp_search_results"] article .entrees span[tid='123'] {
-    background-color: var(--e-col-123); }
-
-.col[theme="edlp_search_results"] article h2.node-title {
-  margin: 0 0 0.3em 0;
-  font-size: 1em;
-  font-weight: 500;
-  text-transform: none; }
+.col[theme="edlp_search_results"] {
+  opacity: 1;
+  -webkit-transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out; }
+  .col[theme="edlp_search_results"].ajax-loading {
+    opacity: 0.2; }
+  .col[theme="edlp_search_results"] article .entrees span {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: black;
+    margin-right: 3px; }
+    .col[theme="edlp_search_results"] article .entrees span[tid='134'] {
+      background-color: var(--e-col-134); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='121'] {
+      background-color: var(--e-col-121); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='125'] {
+      background-color: var(--e-col-125); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='119'] {
+      background-color: var(--e-col-119); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='132'] {
+      background-color: var(--e-col-132); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='122'] {
+      background-color: var(--e-col-122); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='129'] {
+      background-color: var(--e-col-129); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='120'] {
+      background-color: var(--e-col-120); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='130'] {
+      background-color: var(--e-col-130); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='118'] {
+      background-color: var(--e-col-118); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='127'] {
+      background-color: var(--e-col-127); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='133'] {
+      background-color: var(--e-col-133); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='128'] {
+      background-color: var(--e-col-128); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='124'] {
+      background-color: var(--e-col-124); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='116'] {
+      background-color: var(--e-col-116); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='117'] {
+      background-color: var(--e-col-117); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='131'] {
+      background-color: var(--e-col-131); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='126'] {
+      background-color: var(--e-col-126); }
+    .col[theme="edlp_search_results"] article .entrees span[tid='123'] {
+      background-color: var(--e-col-123); }
+  .col[theme="edlp_search_results"] article h2.node-title {
+    margin: 0 0 0.3em 0;
+    font-size: 0.8em;
+    font-weight: 500;
+    text-transform: none; }
 
 body.path-agenda main .col > .wrapper {
   height: 100%; }

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

@@ -24,10 +24,14 @@
 
       initAjaxLinks();
 
-      if (_$body.is('.path-productions')) {
+      if (_$body.is('.path-productions')){
         initProductions();
       }
 
+      if(_$body.is('.path-frontpage')){
+        addCloseBtnToCols();
+      }
+
       // initScrollbars();
       initEvents();
     };
@@ -50,7 +54,7 @@
         })
         .on('close_entree', function(e){
           // e.tid available
-          closeAllModals();
+          backToFrontPage();
         });
     }
 
@@ -392,7 +396,7 @@
       //   return drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix + path;
       // };
 
-      var path = window.location.origin + drupalSettings.path.baseUrl + ajax_path;
+      var path = window.location.origin + Drupal.url(ajax_path);
       $.getJSON(path, {})
         .done(function(data){
           onAjaxLinkLoaded(data, $link, sys_path);
@@ -414,9 +418,13 @@
 
       // replace all content with newly loaded
       // TODO: build a system to replace or append contents (like studio + search)
-
       _$row.html(data.rendered);
 
+      // add close btn
+      if(sys_path != 'procuction'){
+        addCloseBtnToCols();
+      }
+
       // add body class for currently loaded content
       var body_classes = [
         'path-'+sys_path.replace(/\//g, '-'),
@@ -452,11 +460,37 @@
 
       _$body.trigger({'type':'new-content-ajax-loaded'});
 
-      // TODO: call behaviours
+      // call behaviours
       Drupal.attachBehaviors(_$row[0]);
 
     };
 
+    function addCloseBtnToCols(){
+      $('.col', _$row).each(function(index, el) {
+
+        if($('span.close-col-btn', this).length)
+          return true;
+
+        $(this).children('.wrapper').append($('<span>')
+          .addClass('close-col-btn')
+          .on('click', function(e){
+            // check for theme attribute and emmit event
+            var $col = $(this).parents('.col');
+            var theme = $col.attr('theme');
+            if(theme != ''){
+              _$body.trigger({'type':theme+'-col-closed'});
+            }
+            // remove the col
+            $col.remove();
+            // if row is empty call closeAllModals()
+            if(!$('.col', _$row).length){
+              backToFrontPage();
+            }
+          })
+        );
+      });
+    };
+
     //   ___
     //  / __|___ _ _ _ __ _  _ ___
     // | (__/ _ \ '_| '_ \ || (_-<

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -215,7 +215,7 @@ main[role="main"]{
     opacity: 1;
   }
   body.ajax-loading &{
-    .layout-content{
+    .layout-content .col:not([theme="edlp_search_search_form"]){
       opacity:0.2;
     }
     &:before{
@@ -235,6 +235,21 @@ main[role="main"]{
       // border-radius: $s/2;
     }
   }
+  span.close-col-btn{
+    // z-index: 10;
+    pointer-events: all;
+    cursor: pointer;
+    position:absolute;
+    top:0; right:0;
+    padding:0!important; margin:0.5em;
+    display: block;
+    $s:10px;
+    width:$s; height:$s;
+    background-image: url(../img/close.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+  }
 }
 
 
@@ -729,10 +744,22 @@ main[role="main"]{
     padding:0.1em;
     margin:1em 0 0 0;
     float:right;
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  &.ajax-loading input[type="submit"]{
+    opacity:0.2;
+    pointer-events: none;
   }
 }
 
 .col[theme="edlp_search_results"]{
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+  &.ajax-loading{
+    opacity:0.2;
+  }
   article{
     .entrees{
       span{
@@ -741,7 +768,7 @@ main[role="main"]{
     }
     h2.node-title{
       margin:0 0 0.3em 0;
-      font-size: 1em;
+      font-size: 0.8em;
       font-weight: 500;
       text-transform: none;
     }

sites/all/themes/custom/edlptheme/templates/content/edlp-search-results.html.twig

@@ -1,4 +1,4 @@
-<div theme="{{ theme_hook_original }}" class="col small-col-12 med-col-4 large-col-3 float-right">
+<div theme="{{ theme_hook_original }}" class="col small-col-12 med-col-4 large-col-2 float-right">
   <div class="wrapper">
     {{ items }}
     {{ no_results_found }}

sites/all/themes/custom/edlptheme/templates/content/edlp-search-search-form.html.twig

@@ -1,4 +1,4 @@
-<div theme="{{ theme_hook_original }}" class="col small-col-12 med-col-4 large-col-3 float-right">
+<div theme="{{ theme_hook_original }}" class="col small-col-12 med-col-4 large-col-2 float-right">
   <div class="wrapper">
     {{ form }}
   </div>