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

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

Faire marcher le glisser-déplacer en 2.1 aussi quand on a jQuery UI. Et coder la détection de UI un peu mieux.

Du coup si on a pas UI, ça n'affiche pas la flèche de déplacement pour rien. (Mais en vrai il faudrait carrément l'ajouter en Javascript pour être propre.)

File size: 7.2 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|et{#ENV{_chemin_ui}})
108                                $.getScript("#CHEMIN{#ENV{_chemin_ui}jquery.ui.core.js}", function(){
109                                $.getScript("#CHEMIN{#ENV{_chemin_ui}jquery.ui.widget.js}", function(){
110                                $.getScript("#CHEMIN{#ENV{_chemin_ui}jquery.ui.mouse.js}", function(){
111                                $.getScript("#CHEMIN{#ENV{_chemin_ui}jquery.ui.sortable.js}", function(){
112                                        if ($.fn.sortable) {
113                                                $( "#deplacable, #deplacable ul" ).sortable({
114                                                        revert: true,
115                                                        containment: '#deplacable',
116                                                        connectWith: "#deplacable, #deplacable ul",
117                                                        placeholder: "ui-state-highlight",
118                                                        handle: '>.actions .deplacer_saisie',
119                                                        start: function(event, ui) {
120                                                                $('.ui-state-highlight')
121                                                                        .css('height', ui.item.css('height'))
122                                                                        .css('height', '+=20px');
123                                                        },
124                                                        update: function(event, ui) {
125                                                                id = ui.item.data('id');
126                                                                ou = ui.item.next().data('id');
127                                                                // avant le suivant
128                                                                if (!ou) {
129                                                                        // sinon dans le parent
130                                                                        ou = ui.item.closest('.fieldset').data('id');
131                                                                        if (ou) {
132                                                                                ou = '[(#VAL{91}|chr)]' + ou + '[(#VAL{93}|chr)]';
133                                                                        }
134                                                                }
135                                                                url = "#URL_ECRIRE";
136                                                                $.get(url, {
137                                                                        session: '#ENV{_identifiant_session}',
138                                                                        action: 'deplacer_saisie',
139                                                                        saisie: id,
140                                                                        ou: ou
141                                                                }, function() {
142                                                                        //$('input.vide').submit();
143                                                                        $('#reinitialiser').removeClass('invisible');
144                                                                        $('#message_attention').removeClass('invisible');
145                                                                });
146                                                        }
147                                                });
148                                        }
149                                });});});});
150                               
151                                $.getScript("#CHEMIN{#ENV{_chemin_ui}jquery.ui.core.js}", function(){
152                                $.getScript("#CHEMIN{#ENV{_chemin_ui}jquery.ui.widget.js}", function(){
153                                $.getScript("#CHEMIN{#ENV{_chemin_ui}jquery.ui.mouse.js}", function(){
154                                $.getScript("#CHEMIN{#ENV{_chemin_ui}jquery.ui.draggable.js}", function(){
155                                        if ($.fn.draggable) {
156                                                $( "#attrapable" ).draggable({
157                                                        connectToSortable: "#deplacable, #deplacable ul",
158                                                        helper: "clone"
159                                                });
160                                        }
161                                });});});});
162                        ]
163                });
164               
165                function formulaire_configurer_onglets(){
166                        var formulaire_configurer = $('.formulaire_configurer');
167                        var onglets = $('<ul class="formulaire_configurer-onglets"></ul>');
168                        var contenus = formulaire_configurer.find('> ul > li.fieldset');
169                       
170                        // On ajoute le conteneur des onglets
171                        formulaire_configurer
172                                .prepend(onglets);
173                       
174                        // On parcourt les contenus pour générer les onglets
175                        contenus
176                                .each(function(i){
177                                        // On ajoute un identifiant et une classe
178                                        $(this)
179                                                .attr('id', 'formulaire_configurer-contenu-'+i)
180                                                .addClass('formulaire_configurer-contenu');
181                                        // On récupère le titre (en le cachant au passage)
182                                        var titre = $(this).find('h3').eq(0).hide().text();
183                                        // On crée un onglet
184                                        var onglet = $('<li><a href="#formulaire_configurer-contenu-'+i+'">'+titre+'</a></li>');
185                                        onglet
186                                                .click(function(){
187                                                        contenus.hide();
188                                                        $(
189                                                                $(this)
190                                                                        .siblings()
191                                                                                .removeClass('actif')
192                                                                        .end()
193                                                                        .addClass('actif')
194                                                                        .find('a')
195                                                                                .attr('href')
196                                                        ).show();
197                                                        return false;
198                                                });
199                                       
200                                        // On active le premier onglet au démarrage
201                                        if (i == 0) onglet.addClass('actif');
202                                       
203                                        // S'il y a des erreurs dans cette partie du contenu, on met une classe "erreurs" à l'onglet aussi
204                                        if ($(this).find('li.erreur').length > 0)
205                                                onglet.addClass('erreur');
206                                       
207                                        // On ajoute l'onglet
208                                        onglets
209                                                .append(onglet);
210                                })
211                                .hide()
212                                .eq(0)
213                                        .show();
214                }
215        </script>
216        </BOUCLE_editable>
217</div>
Note: See TracBrowser for help on using the repository browser.