feat: Utiliser Select2 sur les input[data-selecteur] à la place de ui.autocomplete

action/api_selecteur.php

@@ -13,26 +13,45 @@ if (!defined('_ECRIRE_INC_VERSION')) return;
  * array('machin', 'truc', array('label' => 'Un mot', value => 123))
  */
 function action_api_selecteur_dist() {
-	// Il faut au moins le sélecteur dans l'argument sinon rien
-	if (!$selecteur = _request('arg')){
+
+	$response_404 = function() {
+		http_response_code(404);
 		header('Status: 404 Not Found');
 		exit;
-	}
-	
-	// On cherche le JSON en passant les params de l'URL
-	if (
-		(_request('php') and $fonction = charger_fonction($selecteur, 'selecteurs', true) and $json = $fonction())
-		or $json = recuperer_fond("selecteurs/$selecteur", $_GET)
-	) {
+	};
+
+	$response_200 = function($json) {
 		// On renvoie une ressource JSON
 		header('Status: 200 OK');
 		header("Content-type: application/json; charset=utf-8");
 		echo $json;
 		exit;
+	};
+
+	// Il faut au moins le sélecteur dans l'argument sinon rien
+	if (!$selecteur = _request('arg')) {
+		$response_404();
 	}
-	// Si on ne trouve rien c'est que ça n'existe pas
-	else{
-		header('Status: 404 Not Found');
-		exit;
+
+	// API traitée en PHP
+	if (_request('php')) {
+		$selecteur_php = charger_fonction($selecteur, 'selecteurs', true);
+		if ($selecteur_php) {
+			$json = $selecteur_php($_GET ?? []);
+			if (is_string($json)) {
+				$response_200($json);
+			}
+		}
+		$response_404();
 	}
+	
+	// Api traitée en squelettes
+	if (trouver_fond("selecteurs/$selecteur")) {
+		$json = recuperer_fond("selecteurs/$selecteur", $_GET ?? []);
+		if (is_string($json)) {
+			$response_200($json);
+		}
+	}
+
+	$response_404();
 }

formulaires/tester_selecteur_generique_php_multiple.php

@@ -9,7 +9,7 @@ function formulaires_tester_selecteur_generique_php_multiple_charger_dist() {
         'article' => '',
         'exclus' => '',
         'callback' => '',
-        'seperateur' => '',
+        'separateur' => '',
     ];
 }
 

javascript/SelecteurGenerique.js

@@ -33,9 +33,9 @@ class SelecteurGenerique {
 	 * @param {Node} input 
 	 * @return {Object}
 	 */
-	static formulaire_editer_liens_data(input) {
+	static formulaire_editer_liens_params(input) {
 		const form = input.closest('.formulaire_editer_liens');
-		const data = {
+		const params = {
 			'objet': null, 
 			'id_objet': null, 
 			'objet_source': null, 
@@ -43,10 +43,10 @@ class SelecteurGenerique {
 		if (form) {
 			// SPIP 5
 			if (form.dataset.objet || '') {
-				data.objet = form.dataset.objet;
-				data.id_objet = form.dataset.idObjet;
-				data.objet_source = form.dataset.objetSource;
-				return data;
+				params.objet = form.dataset.objet;
+				params.id_objet = form.dataset.idObjet;
+				params.objet_source = form.dataset.objetSource;
+				return params;
 			} 
 			// before SPIP 5…
 			form.classList.forEach(cls => {
@@ -55,16 +55,16 @@ class SelecteurGenerique {
 					const expr = cls.split('-');
 					if (expr.length === 5) {
 						const source = expr[1];
-						data.objet = expr[2];
-						data.id_objet = expr[3];
+						params.objet = expr[2];
+						params.id_objet = expr[3];
 						// perfectible
-						data.objet_source = (source[source.length - 1] === 's') ? source.substring(0, source.length - 1) : source;
-						return data;
+						params.objet_source = (source[source.length - 1] === 's') ? source.substring(0, source.length - 1) : source;
+						return params;
 					}
 				}
 			});
 		}
-		return data;
+		return params;
 	}
 
 	/** 
@@ -74,14 +74,14 @@ class SelecteurGenerique {
 	 */
 	static formulaire_spip_hidden_ids(input) {
 		const hiddens = input.closest('form').querySelector('.form-hidden');
-		const data = {};
+		const params = {};
 		if (hiddens.querySelector('input[name=objet]')) {
-			data['objet'] = hiddens.querySelector('input[name=objet]').value;
+			params['objet'] = hiddens.querySelector('input[name=objet]').value;
 		}
 		hiddens.querySelectorAll('input[name^=id_]').forEach(input => {
-			data[input.name] = input.value;
+			params[input.name] = input.value;
 		});
-		return data;
+		return params;
 	}
 
 	/**
@@ -91,11 +91,11 @@ class SelecteurGenerique {
 	 * @param {object} params 
 	 */
 	static formulaire_editer_liens_autocomplete(input, api, params = {}) {
-		const data = SelecteurGenerique.formulaire_editer_liens_data(input);
+		const args = SelecteurGenerique.formulaire_editer_liens_params(input);
 		input.spip_select2_on_input({
             ajax: {
                 url: api,
-				data: (p) => { return {...data, ...params, q: p.term}; },
+				data: (p) => { return {...args, ...params, q: p.term}; },
 				processResults: data => SelecteurGenerique.processData(data),
             },
             events: {
@@ -122,4 +122,41 @@ class SelecteurGenerique {
             }
         });
 	}
+
+	/**
+	 * Applique un autocomplete sur un input
+	 * 
+	 * @param {Node} input 
+	 * @param {string} api URL d’API d’autocomplete
+	 * @param {object} params 
+	 */
+	static on_input = function(input, api, params = {}) {
+		const callback = input.dataset.selectCallback;
+		const separator = input.dataset.selectSep || ',';
+		const multiple = input.hasAttribute('multiple');
+	
+		let args = input.dataset.selectParams || {};
+		if (typeof args === 'string') {
+			try {
+				args = JSON.parse(args);
+			} catch (e) {
+				console && console.error('Erreur dans l’analyse des paramètres supplémentaires', e);
+			}
+		}
+		if (typeof args !== 'object') {
+			args = {};
+		}
+
+		if (multiple) {
+			input.dataset.separator = separator;
+		}
+
+		input.spip_select2_on_input({
+            ajax: {
+                url: api,
+				data: (p) => { return {...params, ...args, q: p.term}; },
+				processResults: data => SelecteurGenerique.processData(data),
+            }
+		});
+	};
 }

javascript/SelecteurGeneriqueLoader.js

@@ -15,6 +15,17 @@ class SelecteurGeneriqueLoader {
 		});
 	};
 
+	static inputs_data_selecteur() {
+		document.querySelectorAll('input[data-selecteur]:not([autocomplete=off])')
+		.forEach(input => {
+			const selecteur = input.dataset.selecteur || 'generique';
+			const php = input.dataset.selectPhp || ((selecteur === 'generique') ? 'oui' : '');
+			SelecteurGenerique.on_input(input, SelecteurGenerique.api(selecteur), {
+				"php": php
+			});
+		});
+	}
+
 	static onReady(fn) {
 		if (document.readyState !== 'loading') {
 			fn();
@@ -26,6 +37,7 @@ class SelecteurGeneriqueLoader {
 	static load() {
 		SelecteurGeneriqueLoader.formulaire_editer_liens_auteurs();
 		SelecteurGeneriqueLoader.formulaire_editer_liens_mots();
+		SelecteurGeneriqueLoader.inputs_data_selecteur();
 	}
 }
 

javascript/selecteur_generique_functions.js

@@ -115,7 +115,7 @@ function extractLast(list, sep) {
 			if (typeof(params) != 'object') {
 				params = {};
 			}
-			
+
 			me
 				// appliquer l'autocomplete dessus
 				.autocomplete({

prive/squelettes/contenu/tester_selecteur_generique.html

@@ -35,7 +35,7 @@
                 document.addEventListener('DOMContentLoaded', fn);
             }
         }
-    
+
         const spip_selecteur_generique_afficher_options = function() {
             document.querySelectorAll(':where(select, input)[data-selecteur]').forEach(select => {
                 if (
@@ -48,6 +48,9 @@
                     details.appendChild(document.createElement('ul'));
                     details.querySelector('summary').textContent = 'Options présentes';
                     Object.keys(select.dataset).forEach(key => {
+                        if (['separator', 'select2Activated'].includes(key)) {
+                            return;
+                        }
                         const code = document.createElement('code');
                         code.textContent = 'data-' + key + ' = "' + select.dataset[key] + '"';
                         const li = document.createElement('li');
@@ -58,7 +61,7 @@
                 }
             });	
         }
-    
+
         const spip_selecteur_generique_afficher_input_value = function() {
             document.querySelectorAll('input[data-selecteur]:not([data-show-input-value])').forEach(input => {
                 input.dataset.showInputValue = "on";
@@ -75,17 +78,17 @@
                 });
             })
         }
-    
+
         onReady(spip_selecteur_generique_afficher_options);
         onReady(spip_selecteur_generique_afficher_input_value);
         onAjaxLoad(spip_selecteur_generique_afficher_options);
         onAjaxLoad(spip_selecteur_generique_afficher_input_value);
-    
+
     })();
-    
+
     </script>
     <style>
-    
+
     body.tester_selecteur_generique #conteneur {
       grid-template-areas:
       "navigation contenu contenu" 

selecteurgenerique_pipelines.php

@@ -30,18 +30,8 @@ function selecteurgenerique_inserer_javascript($flux) {
 	}
 
 	$js = "\n";
-
-	// jquery.ui.autocomplete.html : code html dans le sélecteur et l'interprète (Par exemple des images / icones)
-	// TODO: remove (use Select2)
-	if (strpos($flux, 'autocomplete.html') === false) {
-		$autocompleter_html = find_in_path('javascript/ui/autocomplete.html.js');
-		$js .= "<script type='text/javascript' src='$autocompleter_html'></script>\n";
-	}
-
 	// Classe SelecteurGenerique
 	$js .= "<script type='text/javascript' src='" . find_in_path('javascript/SelecteurGenerique.js') . "'></script>\n";
-	// TODO: remove _functions
-	$js .= "<script type='text/javascript' src='" . find_in_path('javascript/selecteur_generique_functions.js') . "'></script>\n";
 	$js .= "<script type='text/javascript' src='" . find_in_path('javascript/SelecteurGeneriqueLoader.js') . "'></script>\n";
 
 	return $flux . $js;

selecteurs/generique.php

@@ -15,7 +15,7 @@ function selecteurs_generique_dist() {
 	$limite = 5;
 
 	if (!$search) {
-		return $resultats;
+		return json_encode($resultats);
 	}
 
 	// Pouvoir personnaliser le nombre de résultats