source: spip-zone/_plugins_/chatbox2/formulaires/editer_message_chat.html @ 112523

Last change on this file since 112523 was 112523, checked in by pierre.troller@…, 2 years ago

nettoyage de champs inutiles du formulaire qui provoquaientt un problème d'affichage + cosmétique générale

File size: 8.4 KB
Line 
1<style>
2    .contenu_chatbox2 {
3         position:relative;
4         max-height: 300px;
5         min-height: 150px;
6         width:100%;
7         overflow:auto;
8    }
9    .formulaire_editer_message_chat label[for='texte'] {
10    display:none
11    }
12    .formulaire_editer_message_chat .cs_blocs {
13    padding:0;
14    margin:0;
15    }
16    .formulaire_editer_message_chat h4.cs_done {
17    padding:0;
18    margin:0;
19    }
20    .formulaire_editer_message_chat form {
21    padding:0;
22    margin:0;
23    }
24    .no_message{ 
25    text-align:center;
26    color:#333;
27    letter-spacing:0;
28    }
29    .formulaire_editer_message_chat .editer_destinataires,
30    .formulaire_editer_message_chat .editer_titre,
31    .formulaire_editer_message_chat .editer_antispam {
32    position:absolute;
33    top:-2000px;
34    }
35    .formulaire_editer_message_chat textarea {
36    padding:0.35em 0 0.15em 0.3em;
37    line-height:1.2em;
38    min-height:1.2em;
39    font-size:0.95em;
40    border:1px solid #ccc;
41    color:#333;
42    }
43    table.formulaire_chat {width:100%;background:transparent;border-collapse: collapse;border:0;font-weight:normal;margin:0;}
44    table.formulaire_chat tr, table.formulaire_chat td {border:0;padding:0;vertical-align:top;line-height:1.2em;}
45    table.formulaire_chat td.tdsubmit {
46    width:30px;
47    font-size:1em;
48    padding-right:1px:
49    }
50    td.tdCamera {
51    width:33px;
52    }
53    .camera {
54    position:relative;
55    }
56    .camera i {
57    position:absolute;
58    left:10px;
59    top:5px;
60    z-index:-1;
61    color:rgba(52, 53, 90, 0.8);
62    }
63    .formulaire_editer_message_chat,    .formulaire_editer_message_chat form {
64    padding:0;margin:0;
65    }
66    .formulaire_editer_message_chat button.send {
67    width:100%;
68    border-radius:3px;
69    outline:none;
70    padding: 0.35em 0.8em;
71    height: 1.85em;
72    background-color: rgba(52, 53, 90, 0.8);
73    }
74    .formulaire_editer_message_chat .send:hover,btn-default:hover{
75    color:#fff;
76    border:#00b0ff
77    }
78    .smileys  {
79    display:block;
80    }
81</style>
82
83        #SET{dests,#ARRAY}
84        <BOUCLE_d(POUR){tableau #ENV{destinataires}}>
85          #SET{dests,#GET{dests}|push{#VALEUR}}
86        </BOUCLE_d>
87
88    <div class="ajax formulaire_spip formulaire_editer formulaire_#FORM formulaire_#FORM-#ENV{id,nouveau}" id="#formulaire_chatbox_[(#GET{dests}|implode{''})]">
89
90        <div class="contenu_chatbox2" id="contenu_chatbox2_[(#GET{dests}|implode{''})]">
91            #INCLURE{fond=inc-chatbox,dests=#GET{dests}|implode{","}}
92        </div>
93
94        [(#REM)[(#ENV**{message_ok}|oui)
95        <p class="reponse_formulaire reponse_formulaire_ok">
96            <:organiseur_public:info_1_message_envoye:>
97        </p>
98        ]] [
99
100        <p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
101
102        <form method='post' action='#ENV{action}'>
103            <div>
104                [(#REM) declarer les hidden qui declencheront le service du formulaire parametre : url d'action ]
105         #ACTION_FORMULAIRE
106        #SET{fl,chatbox2}
107
108               <div class="editer-groupe" style="padding:0;margin:0;">
109                    [(#ENV{_destiner}|oui) #SET{name,destinataires}#SET{obli,'obligatoire'}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
110                    <div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
111                        <label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)] </label>
112                #INCLURE{fond=formulaires/inc-destinataires-message,name=#GET{name},env}
113                    </div>
114                    ]
115                #SET{name,titre}#SET{obli,'obligatoire'}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
116                    <div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
117                        <label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
118                        <span class='erreur_message'>(#GET{erreurs})</span> ] [(#REM)titre]
119                        <input type="text" class="text" name="#GET{name}" value="#ENV*{#GET{name}}" id="#GET{name}" [(#HTML5|et{#GET{obli}})required="required" ] />
120                    </div>
121                #SET{name,texte}#SET{obli,'obligatoire'}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
122
123                 #SET{form_id, textarea_#GET{dests}|implode{"_"}}
124                        <table class="formulaire_chat">
125                            <tr>
126                                <td class="tdCamera">
127                                    <div class="camera"><i class="fa fa-camera" aria-hidden="true"></i>
128                                    </div>
129                                </td>
130                                <td>
131                                    <textarea placeholder="chat..." name="#GET{name}" class="no_barre" style="" id="#GET{form_id}"></textarea>
132                                </td>
133                                <td class="tdsubmit">
134                                    <button type="submit" name="send" class="btn spip send"><i class="fa fa-send fa-2" aria-hidden="true"></i></button>
135                                </td>
136                            </tr>
137                        </table>
138                        <script type="text/javascript">
139                            (function($, window) {
140                            $('##GET{form_id}').keyup(function (e) {
141                                autoheight(this);
142                            });                   
143                            function autoheight(a) {
144                                if (!$(a).prop('scrollTop')) {
145                                    do {
146                                        var b = $(a).prop('scrollHeight');
147                                        var h = $(a).height();
148                                        $(a).height(h - 5);
149                                    }
150                                    while (b && (b != $(a).prop('scrollHeight')));
151                                };
152                                $(a).height($(a).prop('scrollHeight') + 20);
153                            }
154                            autoheight($('##GET{form_id}'));
155                            })(jQuery, window);
156                        </script>
157 
158
159                    [(#REM) Piege a robots spammeurs ] #SET{name,antispam}#SET{obli,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
160                    <div class="editer none editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
161                        <label for="nobotnobot-#ID"><:antispam_champ_vide:></label>[
162                        <span class='erreur_message'>(#GET{erreurs})</span> ]
163                        <input type="text" class="text" name="#GET{name}" value="#ENV*{#GET{name}}" id="nobotnobot-#ID" />
164                    </div>
165
166                </div>
167
168            </div>
169        </form>
170    </div>
171
172    <script>
173        (function($, window) {
174        $("#contenu_chatbox2_[(#GET{dests}|implode{''})]").animate({ scrollTop: $(document).height() }, "slow");
175         return false;
176        })(jQuery, window);
177    </script>
178
179    <script type='text/javascript' src='#CHEMIN{js/jquery.labelhide.js}'></script>
180    <script type='text/javascript'>
181        <!--
182        if (window.jQuery) (function($){
183                // adresse du fragment ajax
184                var url = 'spip.php?page=inc-chatbox\x26dests=[(#GET{dests}|implode{','})]\x26nb_messages_recus=[(#GET{nb_messages_recus})]';
185                // reload : au debut, toutes les 20s, puis 22, 24... 60s
186                // si on participe on revient a 5s, puis 7, 9... 60s
187                var r = 10;
188                var reload = function() {
189                $("#contenu_chatbox2_[(#GET{dests}|implode{''})]")
190                        .load(url,function(){setTimeout(reload,1000*(r=Math.min(r+2,60)));});
191                }
192                setTimeout(reload, r);
193       
194                $("#formulaire_chatbox_[(#GET{dests}|implode{''})] form")
195                .ajaxForm({
196                        url: url,
197                        target: "#contenu_chatbox2_[(#GET{dests}|implode{''})]",
198                        beforeSubmit: function(){
199                                $("#contenu_chatbox2_[(#GET{dests}|implode{''})]")
200                                .css('opacity', 0.5);
201                        },
202                        success: function(){
203                                $("#contenu_chatbox2_[(#GET{dests}|implode{''})]")
204                                .css('opacity', 1);
205                                r = 5;
206                        }
207                });
208       
209                // Masquer le champ de saisie du nick sous son label
210                $('label.labelhide').labelhide();
211       
212        })(jQuery);
213        // -->
214    </script>
Note: See TracBrowser for help on using the repository browser.