fix: Ne pas recharger un 'select' qui a déjà un select2 actif

javascript/SpipSelect2.js

@@ -25,17 +25,32 @@ class SpipSelect2 {
 			const request = (typeof jQuery.spip.intercepted.ajax === "function")
 				? jQuery.spip.intercepted.ajax(params)
 				: jQuery.ajax(params);
-			
+
 			request.then(success);
 			request.fail(failure);
 			return request;
 		}
 	};
 
+	/**
+	 * Retourne true uniquement au premier chargement de ce node
+	 * @param {node} node
+	 * @returns bool
+	 */
+	static started(node) {
+		if (node.dataset.select2On === "on") {
+			return true;
+		}
+		node.dataset.select2On = "on";
+		return false;
+	}
+
     // Appel de Select2, en prenant en compte quelques options en plus
     // SpipSelect2.on_select(document.querySelector('select'), {...});
-    static on_select = function(select, options) {
-		options = options || {};
+    static on_select = function(select, options = {}) {
+		if (SpipSelect2.started(select)) {
+			return;
+		}
 
 		// Éviter des onAjaxLoad() sur les hits autocomplete
 		if (options.ajax?.url || select.dataset['ajax-Url'] || select.dataset['ajaxUrl']) {
@@ -67,8 +82,8 @@ class SpipSelect2 {
 
 		// sortAlpha : trier les <option> par ordre alphabétique
 		if (options.sortAlpha || select.dataset['sortAlpha']) {
-			options = jQuery.extend(true, { 
-				sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)) 
+			options = jQuery.extend(true, {
+				sorter: data => data.sort((a, b) => a.text.localeCompare(b.text))
 			}, options);
 		}
 
@@ -103,13 +118,10 @@ class SpipSelect2 {
 	// Préparation de Select2, sur un input
 	// On crée un <select> spécifique relié à l’input
 	// SpipSelect2.on_input(document.querySelector('input.select2'), {...});
-	static on_input = function (input, options) {
-		options = options || {};
-
-		if (input.dataset.select2Activated === "on") {
+	static on_input = function (input, options = {}) {
+		if (SpipSelect2.started(input)) {
 			return;
 		}
-		input.dataset.select2Activated = "on";
 
 		const reword = input.outerHTML.replace('<input', '<select');
 		const template = document.createElement('template');
@@ -117,7 +129,7 @@ class SpipSelect2 {
 		const select = template.content.firstChild;
 		select.classList.remove('select2'); // ne pas être relancé sur le select sur un ajax
 		select.removeAttribute('name'); // ne pas le poster
-		delete select.dataset.select2Activated;
+		delete select.dataset.select2On;
 		select.setAttribute('multiple', true);
 		if (select.hasAttribute('id')) {
 			select.setAttribute('id', select.getAttribute('id').trim() + ':select2');
@@ -176,8 +188,8 @@ class SpipSelect2 {
         };
 
 		// on évite de gérer une délégation d’événement sur un node hors DOM
-		options.events = { 
-			...{'change': update_input}, 
+		options.events = {
+			...{'change': update_input},
 			...(options.events || {})
 		};
 		// select.setAttribute('onChange', 'this.spip_select2_update_input();')
@@ -189,7 +201,7 @@ class SpipSelect2 {
 
 }
 
-// document.querySelector('select').spip_select2() 
+// document.querySelector('select').spip_select2()
 HTMLElement.prototype.spip_select2 = function (options) {
     SpipSelect2.on_select(this, options);
 }
@@ -202,4 +214,4 @@ HTMLElement.prototype.spip_select2 = function (options) {
 	jQuery.fn.spip_select2 = function(options) {
         SpipSelect2.on_select(this.get(), options);
 	};
-})();
+})();

javascript/SpipSelect2Loader.js

@@ -2,14 +2,9 @@ class SpipSelect2Loader {
 
 	static on_select = function() {
 		let selector = 'select.select2';
-		if (
-			typeof select2 !== 'undefined'
-			&& typeof select2.selector !== 'undefined'
-			&& !!select2.selector
-		) {
-			selector += ', ' + select2.selector;
+		if (spipConfig?.select2?.selector) {
+			selector += ', ' + spipConfig.select2.selector;
 		}
-
 		// Select2 avec quelques options en plus...
         document.querySelectorAll(selector).forEach(select => SpipSelect2.on_select(select));
 	};
@@ -40,4 +35,4 @@ class SpipSelect2Loader {
 
 SpipSelect2Loader.onReady(SpipSelect2Loader.load);
 onAjaxLoad(SpipSelect2Loader.load);
-SpipSelect2Loader.onReady(SpipSelect2Loader.fix_focus);
+SpipSelect2Loader.onReady(SpipSelect2Loader.fix_focus);

select2_pipelines.php

@@ -49,13 +49,33 @@ function select2_jquery_plugins($flux) {
  */
 function select2_header_prive($flux) {
 	include_spip('inc/config');
-	$flux .= '<script type="text/javascript">/* <![CDATA[ */
-			var select2 = select2 || {};
-			select2.selector = "' . trim((lire_config('select2/selecteur_commun') !== null) ? lire_config('select2/selecteur_commun') : '') . '";
-/* ]]> */</script>'."\n";
+	$config = lire_config('select2', []);
+	$selector = trim($config['selecteur_commun'] ?? '');
+	$flux .= <<<JAVASCRIPT
+	<script type="text/javascript">
+		spipConfig ??= {};
+		spipConfig.select2 ??= {};
+		spipConfig.select2.selector ??= '$selector';
+	</script>
+	JAVASCRIPT;
 	return $flux;
 }
 
+/**
+ * Ajoute Select2 aux css chargées dans le public
+ *
+ * @param string $flux  Contenu du head HTML concernant les CSS
+ * @return string       Contenu du head HTML concernant les CSS
+ **/
+function select2_insert_head($flux) {
+	include_spip('inc/config');
+	if (lire_config('select2/active') === 'oui') {
+		$flux = select2_header_prive($flux);
+	}
+	return $flux;
+}
+
+
 /**
  * Ajoute Select2 aux css chargées dans le privé
  *
@@ -88,21 +108,3 @@ function select2_insert_head_css($flux) {
 	}
 	return $flux;
 }
-
-/**
- * Ajoute Select2 aux css chargées dans le public
- *
- * @param string $flux  Contenu du head HTML concernant les CSS
- * @return string       Contenu du head HTML concernant les CSS
- **/
-function select2_insert_head($flux) {
-	include_spip('inc/config');
-	$config = lire_config('select2', array());
-	if (isset($config['active']) and $config['active']=='oui') {
-		$flux .= '<script type="text/javascript">/* <![CDATA[ */
-			var select2 = select2 || {};
-			select2.selector = "' . trim(isset($config['selecteur_commun']) ? $config['selecteur_commun'] : '') . '";
-/* ]]> */</script>'."\n";
-	}
-	return $flux;
-}