Changeset 66198 in spip-zone


Ignore:
Timestamp:
Sep 24, 2012, 3:51:39 PM (7 years ago)
Author:
rastapopoulos@…
Message:

Un premier jet à tester pour rendre le sélecteur générique *vraiment* générique, c'est-à-dire sans recoder un JS personnalisé à chaque fois.

Le principe est de déclarer le sélecteur à utiliser pour une autocomplétion directement dans le HTML avec un attribut personnalisé.

<input name="truc" data-selecteur="bidule" />
activera l'autocomplétion sur ce champ en utilisant le squelette "selecteurs/bidule.html".

Les sélecteurs utilisés avec ce système doivent renvoyer un tableau JSON comme l'indique la doc de UI.autocomplete : la liste contient des chaînes simples ou des tableaux avec les clés "label" et "value".

En sus, il est possible de gérer une liste multiple dans le champ texte en ajoutant l'attribut "multiple" au HTML : dans ce cas seul le dernier terme après la dernière virgule sera envoyé au sélecteur pour la recherche :
<input name="tags" data-selecteur="mes_tags" multiple="multiple" />

En sus de sus, il est possible de personnaliser le comportement qui s'activera lors de la sélection d'un élément dans la liste : il suffit alors de déclarer le nom de la fonction JS à appeler dans le HTML :
<input name="truc" data-selecteur="bidule" data-select-callback="ma_fonction_de_selection" />

Cette fonction reçoit les arguments (event, ui) et le tableau décrivant le résultat sélectionné se trouve dans "ui.item".

Location:
_plugins_/selecteur_generique/trunk
Files:
2 added
4 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/selecteur_generique/trunk/javascript/selecteur_generique_functions.js

    r63330 r66198  
    2222}
    2323
    24 function split_multiple(val){
    25         return val.split( /;\s*/ );
     24/*
     25 * Découper une chaine en tableau suivant un séparateur
     26 *
     27 * @param string val Chaîne de caractère à découper
     28 * @param string sep Chaîne considérée comme le séparateur de la liste (par défaut ";" pour garder la compatibilité)
     29 * return array Retourne une liste de chaînes, sans espaces autour
     30 */
     31function split_multiple(val, sep){
     32        if (!sep){ var sep = ';' }
     33        sep = '\\s*' + sep + '\\s*';
     34        //console.log(sep);
     35        return val.split(new RegExp(sep));
    2636}
    2737
    28 function extractLast( term ) {
    29         return split_multiple( term ).pop();
     38/*
     39 * Renvoie le dernier terme d'une liste caractérisée par un séparateur
     40 *
     41 * @param string list Chaîne de caractères constituée d'une liste de termes séparés par un séparateur quelconque
     42 * @param string sep Chaîne considérée comme le séparateur de la liste
     43 * @return string Retourne le dernier terme de la liste
     44 */
     45function extractLast(list, sep) {
     46        return split_multiple(list, sep).pop();
    3047}
     48
     49/*
     50 * Chercher et appliquer l'autocomplétion sur les champs déclarés comme tel
     51 */
     52(function($){
     53        // Comportement par défaut lors de la sélection dans l'autocomplétion
     54        var selecteurgenerique_select_callback_dist = function(event, ui){
     55                // Si le champ est déclaré comme "multiple" on ne remplace que la fin
     56                if ($(this).attr('multiple')){
     57                        // On récupère la liste des termes séparés par une VIRGULE (cas le plus courant)
     58                        var terms = split_multiple(this.value, ',');
     59                        // On supprime le terme qui était en train d'être tapé
     60                        terms.pop();
     61                        // On ajoute à la fin ce qui a été sélectionné
     62                        terms.push(ui.item.value);
     63                        // On ajoute une entrée vide pour avoir le séparateur lors de la jointure
     64                        terms.push("");
     65                        // On joint tout les termes
     66                        this.value = terms.join(", ");
     67                }
     68                // Sinon on remplace tout
     69                else{
     70                        this.value = ui.item.value;
     71                }
     72               
     73                return false;
     74        };
     75       
     76        var selecteurgenerique_chercher_selecteurs = function(){
     77                // chercher tous les inputs déclarés explicitement comme sélecteurs
     78                var inputs = $('input[data-selecteur][autocomplete!=off]');
     79                var api = 'selecteur.api/';
     80                if (selecteurgenerique_test_espace_prive){ api = '../' + api; }
     81       
     82                inputs.each(function(){
     83                        // L'input en question
     84                        var me = $(this);
     85                        // Quel sélecteur appeler
     86                        var quoi = me.data('selecteur');
     87                        var select_callback = me.data('select-callback');
     88                        if (!select_callback){ select_callback = selecteurgenerique_select_callback_dist; }
     89                       
     90                        me
     91                                // appliquer l'autocomplete dessus
     92                                .autocomplete({
     93                                        source: function(request, response) {
     94                                                if (me.attr('multiple')){ var term = extractLast(request.term, ','); }
     95                                                else { var term = request.term; }
     96                                                //console.log('"'+term+'"');
     97                                                $.getJSON(api+quoi, {q:term}, response);
     98                                        },
     99                                        delay: 300,
     100                                        html: true,
     101                                        select: select_callback,
     102                                        focus: function(event, ui){
     103                                                // prevent value inserted on focus
     104                                                return false;
     105                                        }
     106                                });
     107                });
     108        };
     109       
     110        $(function(){
     111                selecteurgenerique_chercher_selecteurs();
     112                onAjaxLoad(selecteurgenerique_chercher_selecteurs);
     113        });
     114})(jQuery);
  • _plugins_/selecteur_generique/trunk/paquet.xml

    r63246 r66198  
    22        prefix="selecteurgenerique"
    33        categorie="outil"
    4         version="0.7.3"
     4        version="0.8.0"
    55        etat="dev"
    66        compatibilite="[3.0.0;3.0.99]"
  • _plugins_/selecteur_generique/trunk/selecteurgenerique_fonctions.php

    r63328 r66198  
    66 * Vérifier la présence des scripts nécessaires au sélecteur générique dans une page
    77 * @param string $flux Le contenu de la page
     8 * @return string Retourne une liste de <script> et de <link> à insérer dans le <head> de la page
    89 */
    910function selecteurgenerique_verifier_js($flux){
  • _plugins_/selecteur_generique/trunk/selecteurgenerique_pipelines.php

    r63295 r66198  
    223223
    224224        $js = '';
    225         $js_final = '';
     225        $js_final = "\n".'<script type="text/javascript">var selecteurgenerique_test_espace_prive = '.(test_espace_prive() ? 'true':'false').';</script>';
    226226
    227227        if (_request('exec') == 'articles'
     
    246246                if(strpos($flux,'selecteur_generique_functions')===FALSE){
    247247                        $functions = find_in_path('javascript/selecteur_generique_functions.js');
    248                         $js_final .= "
    249 <script type='text/javascript' src='$functions'></script>
    250 ";
     248                        $js_final .= "\n<script type='text/javascript' src='$functions'></script>\n";
    251249                };
    252250                $js_final .= '<script type="text/javascript"><!--'
Note: See TracChangeset for help on using the changeset viewer.