Carnet Wiki

Tuto Mise en place de sélecteurs génériques

En cours de rédaction

Objectif :

Ajouter un formulaire avec auto-completion, en utilisant les sélecteurs génériques.

Préparer le terrain :

Activer le htaccess de spip, ainsi que les appels aux api (cf. la doc du plugin selecteur_generique).

paquet.xml

Dans le paquet.xml du plugin ou squelette, ajouter le nécessite

  1. <necessite nom="selecteurgenerique" compatibilite="[1.1.8;]" />

_options.php

Depuis spip 3.2 (méthode recommandé) :

Dans le fichier options, activer l’utilisation des sélecteurs coté public.

  1. define('_SELECTEUR_GENERIQUE_ACTIVER_PUBLIC',true);

Avant (méthode obsolète) :

  1. function prefix_inserer_javascript($flux){
  2.         if(test_plugin_actif('selecteurgenerique')){
  3.                 include_spip('selecteurgenerique_fonctions');
  4.                 $flux .= selecteurgenerique_verifier_js($flux);
  5.         }
  6.         return $flux;
  7. }

Télécharger

Selecteurs

Créer un dossier selecteurs, qui contiendra les fichiers générant les datas (au format json), renvoyées lors de la saisie.

Fichier générique de data :

  1. #HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET}
  2. #CACHE{0}
  3. #SET{resultats, #LISTE}
  4. [(#REM)<!-- Chercher les mots correspondant a la requete  -->]
  5. <BOUCLE_s(OBJET){titre LIKE %(#ENV*{q})%}
  6. {0,20}{par titre}>
  7.  [(#SET{resultats, [(#GET{resultats}|push{#ARRAY{label,#TITRE,value, #TITRE,id,#ID_MOT,groupe,#ID_GROUPE}})]})]
  8. </BOUCLE_s>
  9. [(#GET{resultats}|json_encode)]
  10. #FILTRE{trim}

Télécharger

Ajouter l’auto-completion aux saisies

attribut valeur explication
data-selecteur article,mot,generique fonction php ou squelette json
data-select-php oui chercher une fonction PHP au lieu d’un squelette dans le dossier selecteurs
data-select-params objet JSON paramètres transmis au selecteur et utilisables dans le skel ou la fonction php.
Par exemple pour le selecteur generique :
« limite » => limiter le nombre de résultats
« objets » => liste d’objets pour filtrer ceux qui seront sélectionnables
« objets_exclus » => l’inverse
data-select-callback string nom de la fonction javascript de callback

Références

https://zone.spip.net/trac/spip-zone/browser/spip-zone/_plugins_/selecteur_generique/trunk/action/api_selecteur.php?rev=93512

https://zone.spip.net/trac/spip-zone/browser/spip-zone/_plugins_/selecteur_generique/trunk/javascript/selecteur_generique_functions.js?rev=95926

Exemple tiré du plugin Sélection éditoriales :

  1. #SET{params, #ARRAY{objets_exclus, #LISTE{selections, selections_contenus}}|json_encode{1}|attribut_html}
  2. [(#SET{attributs, data-selecteur="generique" data-select-php="oui" data-select-params="[(#GET{params})]"})]
  3. [(#SAISIE{input, url,
  4.  label=<:selections_contenu:champ_url_label:>,
  5.  explication=<:selections_contenu:champ_url_explication:>,
  6.  attributs=#GET{attributs}})]

Télécharger

  1. [(#REM)<!-- Formulaire de recherche
  2.  
  3. Formulaire a 2 entrée Liste
  4. - categorie
  5. - liste des points de localisation
  6.  
  7. Action : envoie sur la page listing
  8. paramètre :
  9.  secteur d'activité, localisation choisie
  10. -->]
  11. <div class='formulaire_spip formulaire_recherche formulaire_#FORM'>
  12.         [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV**{message_ok})</p>]
  13.         [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
  14.  
  15.         [(#ENV{editable})
  16.         <form method="post" action="#ENV{action}">
  17.     <div>
  18.                 #ACTION_FORMULAIRE{#ENV{action}}
  19. [(#REM)<!--
  20.  
  21. Ajouter en config les groupes de mots
  22. des catégories et localisation
  23.  
  24. categorie:
  25.         liste les mots-clefs des groupes de mots categorie/secteurs d'activité
  26.  
  27. localisations
  28.         liste les points gis associés au mot clef localisation
  29. -->]
  30.                         <input type="hidden" name="id_groupe" id="id_groupe" value="#ENV{id_groupe}">
  31.                         <input type="hidden" name="id_categorie" id="id_categorie" value="#ENV{id_categorie}">
  32.                         <input type="hidden" name="id_localite" id="id_localite" value="#ENV{id_localite}">
  33.       [(#SAISIE{input, categorie,
  34.         label=Je recherche pour,
  35.                                 attributs='data-selecteur="categories" data-select-callback="cb_categorie"',
  36.                                 placeholder='Saisissez une catégorie'
  37.                         })]
  38.  
  39.                         [(#SAISIE{input,localisation,
  40.         label= Près de ,
  41.                                 attributs='data-selecteur="localisations" data-select-callback="cb_localite"',
  42.                                 placeholder='Saisissez une localité'
  43.                         })]
  44.  
  45.       <!--extra-->
  46.                 <p class="boutons">
  47.         <input type="submit" class="btn btn-success" value="Chercher" />
  48.       </p>
  49.           </div>
  50.   </form>]
  51. </div>
  52. <script type="text/javascript">
  53. function cb_localite(event, ui){
  54.         $('#id_localite').val(ui.item.id);
  55. }
  56.  
  57. function cb_categorie(event, ui){
  58.         $('#id_categorie').val(ui.item.id);
  59.         $('#id_groupe').val(ui.item.groupe);
  60. }
  61. </script>

Télécharger

Mist. GraphX - Mise à jour :16 octobre 2018 à 16h02min