source: spip-zone/_plugins_/saisies/formulaires/construire_formulaire.html @ 54888

Last change on this file since 54888 was 54888, checked in by marcimat@…, 8 years ago

Divers changements éparses en corrélation avec des tests de Champs Extras 3.
Certains changements sont à tester pour vérifier qu'ils ne créent pas d'incompatibilité :

  • simplification de l'utilisation de saisies_chaine2tableau (le code écrit faisait pareil que la fonction !)(à simplifier partout ?)
  • mise en place de saisies_valeur2tableau (un peu pour CE tout de même !) : il permet en plus d'exploser une chaine ayant une virgule comme séparateur si chaine2tableau n'a pas renvoyé d'élément probant.

Dans ce dépot également :

  • correction du drag n drop : j'avais oublié un commit !
  • corrections de CSS pour afficher correctement les onglets et réduire leur taille dans le formulaire de formulaire...
  • possibilité de changer le type de saisie via le constructeur de formulaire (utilisé par champs extras 3).
File size: 7.4 KB
Line 
1[(#ENV{erreurs}|table_valeur{positionner}|oui)
2        <a name="ajax_ancre" href="[(#ENV{erreurs}|table_valeur{positionner})]"></a>
3]
4<div class="formulaire_spip formulaire_editer formulaire_#ENV{form}">
5        [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
6        <p id="message_attention" class="reponse_formulaire reponse_formulaire_ok[ (#ENV{formulaire_modifie}|non) invisible]">#ENV*{_message_attention}</p>
7        [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
8       
9        <BOUCLE_editable(CONDITION){si #ENV{editable}|oui}>
10        <form method='post' action='#ENV{action}' enctype='multipart/form-data'><div>
11                [(#REM) declarer les hidden qui declencheront le service du formulaire
12                parametre : url d'action ]
13                #ACTION_FORMULAIRE{#ENV{action}}
14                <input style="display:none;" type="submit" class="submit" name="enregistrer" value="<:bouton_enregistrer:>" />
15
16                <ul id="deplacable">
17                       
18                        <li id="reinitialiser" class="actions_formulaire[ (#ENV{formulaire_modifie}|non) invisible]">
19                                <button type="submit" class="submit" name="reinitialiser" value="oui" onclick="return confirm('<:saisies:construire_reinitialiser_confirmer:>')">
20                                        <img src="#CHEMIN{images/formulaire-reinitialiser-24.png}" alt="" />
21                                        <:saisies:construire_reinitialiser:>
22                                </button>
23                        </li>
24
25                        <BOUCLE_contenu(POUR){tableau #ENV{_contenu}}>
26                        [(#VAL{saisie}|array_key_exists{#VALEUR}|oui)
27                                [(#VALEUR**|formidable_generer_saisie_configurable{#ENV**|unserialize})]
28                        ]
29                        </BOUCLE_contenu>
30                        <li class="aucun"><em class="attention"><:saisies:construire_aucun_champs:></em></li>
31                        <//B_contenu>
32                       
33                        <B_saisies_disponibles>
34                        <li class="editer haut saisies_disponibles" id="attrapable">
35                                <label><:saisies:construire_ajouter_champ:></label>
36                                <BOUCLE_saisies_disponibles(POUR){tableau #ENV{_saisies_disponibles}}>
37                                <button type="submit" name="ajouter_saisie" value="#CLE" class="submit ajouter_saisie"[ title="(#VALEUR|table_valeur{description})"] [style="background-image:url((#VALEUR|table_valeur{icone}|sinon{#CHEMIN{images/formulaire-saisie-defaut.png}}))"]>
38                                        <span>[(#VALEUR|table_valeur{titre})]</span>
39                                </button>
40                                </BOUCLE_saisies_disponibles>
41                        </li>
42                        </B_saisies_disponibles>
43                </ul>
44
45               
46                [(#REM) ajouter les saisies supplementaires : extra et autre, a cet endroit ]
47                <!--extra-->
48               
49                <span class='image_loading'></span>
50        </div></form>
51
52        <script type="text/javascript">
53                $(function(){
54                        $('.formulaire_construire_formulaire li.configurable')
55                                .hover(
56                                        function(){
57                                                $(this)
58                                                        .addClass('hover')
59                                                        .find('> .actions')
60                                                                .show()
61                                                        .end()
62                                                        .parents('li.configurable:not(.en_configuration)')
63                                                                .mouseout();
64                                        },
65                                        function(){
66                                                if (!$(this).is('.en_configuration'))
67                                                        $(this)
68                                                                .removeClass('hover')
69                                                                .find('> .actions')
70                                                                        .hide()
71                                                                .end()
72                                                                .parents('li.configurable').eq('0')
73                                                                        .mouseover();
74                                        }
75                                )
76                                .filter(':not(.en_configuration)')
77                                        .find('> .actions')
78                                                .hide()
79                                        .end()
80                                .end();
81                       
82                        // On lance la création des onglets
83                        formulaire_configurer_onglets();
84                       
85                        // Gérer la liste des vérifications
86                        $('.liste_verifications')
87                                .each(function(){
88                                        var options = $(this).siblings('.options_verifier').hide();
89                                        var select = $(this).find('select');
90                                       
91                                        select
92                                                .change(function(){
93                                                        var montrer = $(this).val() ? $(this).val() : 'soigfeg';
94                                                        options.hide().filter('.'+montrer).show();
95                                                })
96                                                .change();
97                                });
98                       
99                        // On déplie toujours les fieldsets plés par défaut
100                        $('li.fieldset.plie')
101                                .each(function(){
102                                        $(this)
103                                                .removeClass('plie')
104                                                .find('> fieldset > ul').show();
105                                });
106                               
107                        [(#ENV{erreurs}|non)
108                                [(#CHEMIN{javascript/ui/jquery.ui.sortable.js}|oui)
109                                        [(#SET{sortable,1})]
110                                ]
111                        ]
112                        [(#ENV{erreurs}|non|et{#GET{sortable}})
113                                $.getScript("#CHEMIN{javascript/ui/jquery.ui.core.js}", function(){
114                                $.getScript("#CHEMIN{javascript/ui/jquery.ui.widget.js}", function(){
115                                $.getScript("#CHEMIN{javascript/ui/jquery.ui.mouse.js}", function(){
116                                $.getScript("#CHEMIN{javascript/ui/jquery.ui.sortable.js}", function(){
117                                        if ($.fn.sortable) {
118                                                $( "#deplacable, #deplacable ul" ).sortable({
119                                                        revert: true,
120                                                        containment: '#deplacable',
121                                                        connectWith: "#deplacable, #deplacable ul",
122                                                        placeholder: "ui-state-highlight",
123                                                        handle: '>.actions .deplacer_saisie',
124                                                        start: function(event, ui) {
125                                                                $('.ui-state-highlight')
126                                                                        .css('height', ui.item.css('height'))
127                                                                        .css('height', '+=20px');
128                                                        },
129                                                        update: function(event, ui) {
130                                                                id = ui.item.data('id');
131                                                                ou = ui.item.next().data('id');
132                                                                // avant le suivant
133                                                                if (!ou) {
134                                                                        // sinon dans le parent
135                                                                        ou = ui.item.closest('.fieldset').data('id');
136                                                                        if (ou) {
137                                                                                ou = '[(#VAL{91}|chr)]' + ou + '[(#VAL{93}|chr)]';
138                                                                        }
139                                                                }
140                                                                url = "#URL_ECRIRE";
141                                                                $.get(url, {
142                                                                        session: '#ENV{_identifiant_session}',
143                                                                        action: 'deplacer_saisie',
144                                                                        saisie: id,
145                                                                        ou: ou
146                                                                }, function() {
147                                                                        //$('input.vide').submit();
148                                                                        $('#reinitialiser').removeClass('invisible');
149                                                                        $('#message_attention').removeClass('invisible');
150                                                                });
151                                                        }
152                                                });
153                                        }
154                                });});});});
155                        ]
156                        [(#ENV{erreurs}|non)
157                                [(#CHEMIN{javascript/ui/jquery.ui.draggable.js}|oui)
158                                        [(#SET{draggable,1})]
159                                ]
160                        ]
161                        [(#ENV{erreurs}|non|et{#GET{draggable}})
162                                $.getScript("#CHEMIN{javascript/ui/jquery.ui.core.js}", function(){
163                                $.getScript("#CHEMIN{javascript/ui/jquery.ui.widget.js}", function(){
164                                $.getScript("#CHEMIN{javascript/ui/jquery.ui.mouse.js}", function(){
165                                $.getScript("#CHEMIN{javascript/ui/jquery.ui.draggable.js}", function(){
166                                        if ($.fn.draggable) {
167                                                $( "#attrapable" ).draggable({
168                                                        connectToSortable: "#deplacable, #deplacable ul",
169                                                        helper: "clone"
170                                                });
171                                        }
172                                });});});});
173                        ]                       
174                });
175               
176                function formulaire_configurer_onglets(){
177                        var formulaire_configurer = $('.formulaire_configurer');
178                        var onglets = $('<ul class="formulaire_configurer-onglets"></ul>');
179                        var contenus = formulaire_configurer.find('> ul > li.fieldset');
180                       
181                        // On ajoute le conteneur des onglets
182                        formulaire_configurer
183                                .prepend(onglets);
184                       
185                        // On parcourt les contenus pour générer les onglets
186                        contenus
187                                .each(function(i){
188                                        // On ajoute un identifiant et une classe
189                                        $(this)
190                                                .attr('id', 'formulaire_configurer-contenu-'+i)
191                                                .addClass('formulaire_configurer-contenu');
192                                        // On récupère le titre (en le cachant au passage)
193                                        var titre = $(this).find('h3').eq(0).hide().text();
194                                        // On crée un onglet
195                                        var onglet = $('<li><a href="#formulaire_configurer-contenu-'+i+'">'+titre+'</a></li>');
196                                        onglet
197                                                .click(function(){
198                                                        contenus.hide();
199                                                        $(
200                                                                $(this)
201                                                                        .siblings()
202                                                                                .removeClass('actif')
203                                                                        .end()
204                                                                        .addClass('actif')
205                                                                        .find('a')
206                                                                                .attr('href')
207                                                        ).show();
208                                                        return false;
209                                                });
210                                       
211                                        // On active le premier onglet au démarrage
212                                        if (i == 0) onglet.addClass('actif');
213                                       
214                                        // S'il y a des erreurs dans cette partie du contenu, on met une classe "erreurs" à l'onglet aussi
215                                        if ($(this).find('li.erreur').length > 0)
216                                                onglet.addClass('erreur');
217                                       
218                                        // On ajoute l'onglet
219                                        onglets
220                                                .append(onglet);
221                                })
222                                .hide()
223                                .eq(0)
224                                        .show();
225                }
226        </script>
227        </BOUCLE_editable>
228</div>
Note: See TracBrowser for help on using the repository browser.