release(2.4.0): refactoring search filters

ouitoulia · May 8, 2024 · ea043be · ea043be
1 parent 38c5397
commit ea043be
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 37 deletions.
diff --git a/skenografia.info.yml b/skenografia.info.yml
@@ -18,10 +18,6 @@ libraries:
 #  - bootstrap_italia/load-fonts
   - skenografia/version
 
-# Check these settings, they must match the "libraries" choices.
-# ckeditor_stylesheets:
-#   - dist/css/bootstrap-italia.min.css
-
 ckeditor5-stylesheets:
  - /libraries/ouitoulia-skenografia/css/ckeditor5.min.css
 

diff --git a/skenografia.libraries.yml b/skenografia.libraries.yml
@@ -29,7 +29,17 @@ toc:
     - core/drupal
     - toc_js/tocjs
 
-# Bootstrap-italia library if you use a CDN
+# Skenografia search-filters
+search-filters:
+  version: 2.3.1
+  js:
+    /libraries/ouitoulia-skenografia/js/search-api--submit-filters.min.js: { minified: true }
+    #dist/js/search-api--submit-filters.min.js: { }
+  dependencies:
+    - core/drupal
+    - core/once
+
+# theme version for compliance C.SC.1.3
 version:
   version: 2.3.1
   css:

diff --git a/src/js/custom/search-api--submit-filters.js b/src/js/custom/search-api--submit-filters.js
@@ -0,0 +1,44 @@
+(function (Drupal, once) {
+  'use strict';
+
+  Drupal.behaviors.searchAPISubmitFilters = {
+    attach: function (context, settings) {
+      // Tutti i submit nella form di ricerca o nelle form di ricerca.
+      let submitButtons = once('searchAPISubmitFilters', context.querySelectorAll('[data-search-api-submit-filters]'));
+
+      // Intercetto l'evento click sui submit.
+      submitButtons.forEach(function(button) {
+        button.addEventListener('click', function(event) {
+          // Evito il submit per poter fare cose.
+          event.preventDefault();
+
+          // La form su cui operare
+          let form = button.closest('form');
+
+          if (form) {
+            // Prendo i valori dei filtri dagli attributi del submit.
+            let values = JSON.parse(button.getAttribute('data-search-api-submit-filters'));
+
+            // Il nodo, o i nodi, a cui devo aggiungere le informazioni sui filtri da applicare.
+            let filters = form.querySelectorAll('[data-search-filter-id]');
+
+            // Aggiunta dei filtri.
+            filters.forEach(function(filter) {
+              values.forEach(function(value) {
+                let input = document.createElement('input');
+                input.type = 'hidden';
+                input.name = 'f[]';
+                input.value = value;
+                filter.parentNode.insertBefore(input, filter);
+              });
+            });
+
+            form.submit();
+          }
+
+        });
+      });
+    }
+  };
+
+})(Drupal,once);
diff --git a/templates/views/search/input--submit--id--edit-submit-risultati-ricerca.html.twig b/templates/views/search/input--submit--id--edit-submit-risultati-ricerca.html.twig
@@ -13,6 +13,7 @@
  */
 #}
 {% apply spaceless %}
+  {{ attach_library('skenografia/search-filters') }}
   <div class="text-center">
     {% set _attributes = attributes
       .removeClass('btn-primary')
@@ -21,68 +22,57 @@
     %}
 
     <button{{ _attributes
-      .removeClass('btn-outline-bluelectric')
       .addClass('btn-outline-primary')
       .setAttribute('aria-label', 'Avvia la ricerca')
       .setAttribute('data-element', 'search-submit')
-      .setAttribute('onclick', 'addHiddenValues(["tutti_i_valori"])')
+      .setAttribute('data-search-api-submit-filters', '["all"]')
     }}>
       Cerca in
       <strong class="text-uppercase text-small-bold">tutto il sito</strong>
     </button>
 
     <button{{ _attributes
+      .removeClass('btn-outline-primary')
+      .removeAttribute('id')
+      .removeAttribute('data-element')
       .addClass('btn-outline-redbrown')
       .setAttribute('aria-label', 'Avvia la ricerca nella sezione scuola')
-      .setAttribute('onclick', 'addHiddenValues(["scuola:documento", "scuola:luogo", "scuola:struttura_organizzativa"])')
+      .setAttribute('data-search-api-submit-filters', '["scuola:documento", "scuola:persona", "scuola:luogo", "scuola:struttura_organizzativa"]')
     }}>
       Cerca nella sezione
       <strong class="text-uppercase text-small-bold">Scuola</strong>
     </button>
 
     <button{{ _attributes
-      .removeClass('btn-outline-redbrown')
+      .removeClass('btn-outline-primary')
+      .addClass('btn-outline-purplelight')
+      .setAttribute('aria-label', 'Avvia la ricerca nella sezione servizi')
+      .setAttribute('data-search-api-submit-filters', '["servizi:1201", "servizi:1202", "servizi:1203"]')
+    }}>
+      Cerca nei
+      <strong class="text-uppercase text-small-bold">Servizi</strong>
+    </button>
+
+    <button{{ _attributes
+      .removeClass('btn-outline-purplelight')
       .addClass('btn-outline-greendark')
       .setAttribute('aria-label', 'Avvia la ricerca nella sezione novità')
-      .setAttribute('onclick', 'addHiddenValues(["novita:article", "novita:circolare", "novita:evento"])')
+      .setAttribute('data-search-api-submit-filters', '["novita:article", "novita:circolare", "novita:evento"]')
     }}>
       Cerca tra le
       <strong class="text-uppercase text-small-bold">{{ 'Novità' }}</strong>
     </button>
 
     <button{{ _attributes
       .removeClass('btn-outline-greendark')
-      .addClass('btn-outline-purplelight')
-      .setAttribute('aria-label', 'Avvia la ricerca nella sezione Servizi')
-      .setAttribute('onclick', 'addHiddenValues(["servizi:1201", "servizi:1202", "servizi:1203"])')
-    }}>
-      Cerca nei
-      <strong class="text-uppercase text-small-bold">Servizi</strong>
-    </button>
-
-    <button{{ _attributes
-      .removeClass('btn-outline-purplelight')
       .addClass('btn-outline-bluelectric')
-      .setAttribute('aria-label', 'Avvia la ricerca nella sezione Servizi')
-      .setAttribute('onclick', 'addHiddenValues(["didattica:progetto", "didattica:scheda_didattica"])')
+      .setAttribute('aria-label', 'Avvia la ricerca nella sezione didattica')
+      .setAttribute('data-search-api-submit-filters', '["didattica:progetto", "didattica:scheda_didattica"]')
     }}>
       Cerca nella
       <strong class="text-uppercase text-small-bold">Didattica</strong>
     </button>
 
-    <input type="hidden" name="f[]" id="hidden-field" value="">
+    <input type="hidden" name="f[]" data-search-filter-id="search-api-submit-search-filters-{{ random() }}" value="">
   </div>
 {% endapply %}
-
-<script>
-  function addHiddenValues(values) {
-    let hiddenField = document.getElementById('hidden-field');
-    values.forEach(function(value) {
-      let input = document.createElement('input');
-      input.type = 'hidden';
-      input.name = 'f[]';
-      input.value = value;
-      hiddenField.parentNode.insertBefore(input, hiddenField);
-    });
-  }
-</script>
diff --git a/webpack.common.js b/webpack.common.js
@@ -12,7 +12,8 @@ module.exports = {
   entry: {
     "bootstrap-italia": [paths.src + '/js/index.js', paths.src + '/scss/theme.scss'],
     "ckeditor5": paths.src + '/scss/ckeditor5.scss',
-    "toc_js_loader": [paths.src + '/js/custom/toc_js.js']
+    "toc_js_loader": [paths.src + '/js/custom/toc_js.js'],
+    "search-api--submit-filters": [paths.src + '/js/custom/search-api--submit-filters.js']
   },
 
   // Output