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

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

ajaxer la liste des auteurs et css par ci par là...

File size: 12.7 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        top: -7px;
9    }
10   
11   
12    .formulaire_editer_message_chat label[for='texte'] {
13    display:none
14    }
15    .formulaire_editer_message_chat .editer_destinataires,
16    .formulaire_editer_message_chat .editer_titre,
17    .formulaire_editer_message_chat .editer_rv,
18    .formulaire_editer_message_chat .brouillon,
19    .formulaire_editer_message_chat .draft,
20    .formulaire_editer_message_chat .boutons {
21    position:absolute;
22    top:-2000px;
23    padding:0;
24    margin:0;
25    }
26   
27    .formulaire_editer_message_chat .cs_blocs {
28    padding:0;
29    margin:0;
30    }
31    .formulaire_editer_message_chat h4.cs_done {
32    padding:0;
33    margin:0;
34    }
35    .formulaire_editer_message_chat form {
36    padding:0;
37    margin:0;
38    }
39    .no_message{ 
40    text-align:center;
41    color:#333;
42    letter-spacing:0;
43    }
44    .formulaire_editer_message_chat textarea {
45    padding:0.35em 0 0.15em 0.3em;
46    line-height:1.2em;
47    min-height:1.2em;
48    font-size:0.95em;
49    border:1px solid #ccc;
50    color:#333;
51    /*background-color: rgba(18, 23, 70, 1);*/
52    }
53    /*position:absolute;bottom:0;*/
54    table.formulaire_chat {width:100%;background:transparent;border-collapse: collapse;border:0;font-weight:normal;margin:0;}
55    table.formulaire_chat tr, table.formulaire_chat td {border:0;padding:0;vertical-align:top;line-height:1.2em;}
56   
57    table.formulaire_chat td.tdsubmit {
58    width:30px;
59    font-size:1em;
60    padding-right:1px:
61    }
62   
63    td.tdDraft {
64    width:33px;
65    }
66    .camera {
67    position:relative;
68    }
69    input.draft {
70    width:33px;
71    padding: 0.2em 1em;
72    font-size:1em;
73    line-height:1em;
74    height:1.9em;
75    border:0;
76    background-color:rgba(52, 53, 90, 0.8);
77   
78    }
79    .camera i {
80    position:absolute;
81    left:10px;
82    top:5px;
83    z-index:-1;
84    color:rgba(52, 53, 90, 0.8);
85    }
86   
87    .formulaire_editer_message_chat {
88    padding:0;margin:0;
89    }
90   
91    .formulaire_editer_message_chat button.send {
92    width:100%;
93    border-radius:3px;
94   
95    outline:none;
96    padding: 0.35em 0.8em;
97    height: 1.85em;
98    background-color: rgba(52, 53, 90, 0.8);
99    }
100   
101    .formulaire_editer_message_chat .send:hover,btn-default:hover{color:#fff;border:#00b0ff}
102   
103    .smileys  {
104    dispaly:block;
105    }
106</style>
107
108#SET{dests,#ARRAY}
109<BOUCLE_d(POUR){tableau #ENV{destinataires}}>
110    #SET{dests,#GET{dests}|push{#VALEUR}}
111    </BOUCLE_d>
112
113    <div class="ajax formulaire_spip formulaire_editer formulaire_#FORM formulaire_#FORM-#ENV{id,nouveau}" id="#formulaire_chatbox_[(#GET{dests}|implode{''})]">
114
115        <div class="contenu_chatbox2" id="contenu_chatbox2_[(#GET{dests}|implode{''})]">
116            #INCLURE{fond=inc-chatbox,dests=#GET{dests}|implode{","}}
117        </div>
118
119        [(#REM)[(#ENV**{message_ok}|oui)
120        <p class="reponse_formulaire reponse_formulaire_ok">
121            <:organiseur_public:info_1_message_envoye:>
122        </p>
123        ]] [
124
125        <p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
126
127        <form method='post' action='#ENV{action}'>
128            <div>
129                [(#REM) declarer les hidden qui declencheront le service du formulaire parametre : url d'action ] #ACTION_FORMULAIRE #SET{fl,organiseur_public}
130
131                <input type="hidden" class="text" name="id_message_origine" value="#ENV*{id_message_origine}" />
132
133                <div class="editer-groupe" style="padding:0;margin:0;">
134                    [(#ENV{_destiner}|oui) #SET{name,destinataires}#SET{obli,'obligatoire'}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
135                    <div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
136                        <label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)] <span class="small normal">(autocomplete, type 2 letters min)</span></label>[
137                        <span class='erreur_message'>(#GET{erreurs})</span> ] #INCLURE{fond=formulaires/inc-destinataires-message,name=#GET{name},env}
138                    </div>
139                    ] #SET{name,titre}#SET{obli,'obligatoire'}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
140                    <div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
141                        <label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
142                        <span class='erreur_message'>(#GET{erreurs})</span> ] [(#REM)titre]
143                        <input type="text" class="text" name="#GET{name}" value="#ENV*{#GET{name}}" id="#GET{name}" [(#HTML5|et{#GET{obli}})required="required" ] />
144                    </div>
145                    <div class="editer editer_rv[ (#ENV**{erreurs}|table_valeur{rv}|oui)erreur]">
146                        <div class="choix">
147                            <input type='checkbox' name='rv' id='rv' value='oui' [(#ENV{rv}|=={oui}|oui)checked='checked' ] onclick="if (this.checked==true) { $('.editer_date_debut_fin').show('fast');} else {$('.editer_date_debut_fin').hide('fast');}" />
148                            <label for="rv"><:item_afficher_calendrier:></label>[
149                            <span class='erreur_message'>(#ENV**{erreurs}|table_valeur{rv})</span> ]
150                        </div>
151                    </div>
152                    <div class="editer editer_date_debut editer_date_debut_fin[ (#ENV**{erreurs}|table_valeur{date_debut}|oui)erreur][(#ENV{rv}|=={oui}|non)none]">
153                        <label for="date_debut"><:organiseur:info_message_date_debut:></label>[
154                        <span class='erreur_message'>(#ENV**{erreurs}|table_valeur{date_debut})</span> ]
155                        <input type='text' class='text date' name='date_debut' id='date_debut' size='10' maxlength='10' value="[(#ENV{date_debut})]" />
156                        <input type='text' class='text heure' name='heure_debut' id='heure_debut' size='4' maxlength='5' value="[(#ENV{heure_debut})]" />
157                    </div>
158                    <div class="editer editer_date_fin editer_date_debut_fin[ (#ENV**{erreurs}|table_valeur{date_fin}|oui)erreur][(#ENV{rv}|=={oui}|non)none]">
159                        <label for="date_fin" class='date_fin'><:organiseur:info_message_date_fin:></label>[
160                        <span class='erreur_message'>(#ENV**{erreurs}|table_valeur{date_fin})</span> ]
161                        <input type='text' class='text date' name='date_fin' id='date_fin' size='10' maxlength='10' value="[(#ENV{date_fin})]" />
162                        <input type='text' class='text heure' name='heure_fin' id='heure_fin' size='4' maxlength='5' value="[(#ENV{heure_fin})]" />
163                    </div>
164
165                    [(#REM)///////////////////////////texte//////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////] #SET{name,texte}#SET{obli,'obligatoire'}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
166                    <div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]" style="padding:0;margin:0;">
167                        <label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
168                        <span class='erreur_message'>(#GET{erreurs})</span> ] [(#REM)/////////////////////////// champs ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////] #SET{form_id, textarea_#GET{dests}|implode{"_"}}
169                        <table class="formulaire_chat">
170                            <tr>
171                                <td class="tdDraft">
172                                    <div class="camera"><i class="fa fa-camera" aria-hidden="true"></i> [(#REM) <input type="submit" class="draft" name="draft" value="&nbsp;" />]
173                                    </div>
174                                </td>
175                                <td>
176                                    <textarea placeholder="chat..." name="#GET{name}" class="no_barre" style="" id="#GET{form_id}"></textarea>
177                                </td>
178                                <td class="tdsubmit">
179                                    <button type="submit" name="send" class="btn spip send"><i class="fa fa-send fa-2" aria-hidden="true"></i></button>
180                                </td>
181                            </tr>
182                        </table>
183                        <script type="text/javascript">
184                            (function($, window) {
185                            $('##GET{form_id}').keyup(function (e) {
186                                autoheight(this);
187                            });
188                           
189                            function autoheight(a) {
190                                if (!$(a).prop('scrollTop')) {
191                                    do {
192                                        var b = $(a).prop('scrollHeight');
193                                        var h = $(a).height();
194                                        $(a).height(h - 5);
195                                    }
196                                    while (b && (b != $(a).prop('scrollHeight')));
197                                };
198                                $(a).height($(a).prop('scrollHeight') + 20);
199                            }
200                            autoheight($('##GET{form_id}'));
201                            })(jQuery, window);
202                        </script>
203
204                    </div>
205
206                    [(#REM) Piege a robots spammeurs ] #SET{name,antispam}#SET{obli,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
207                    <div class="editer none editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
208                        <label for="nobotnobot-#ID"><:antispam_champ_vide:></label>[
209                        <span class='erreur_message'>(#GET{erreurs})</span> ]
210                        <input type="text" class="text" name="#GET{name}" value="#ENV*{#GET{name}}" id="nobotnobot-#ID" />
211                    </div>
212
213                </div>
214
215                <div class='boutons'>
216                    <!--extra-->
217                    <span class='image_loading'>&nbsp;</span>
218                    <input type='submit' class='btn spip brouillon' name="draft" value='<:organiseur_public:bouton_enregistrer_brouillon:>' />
219                    <input type='submit' class='btn spip draft' name="draft" value='<:titre_joindre_document:>' />
220                </div>
221
222            </div>
223        </form>
224    </div>
225
226    <script>
227        (function($, window) {
228        $("#contenu_chatbox2_[(#GET{dests}|implode{''})]").animate({ scrollTop: $(document).height() }, "slow");
229         return false;
230        })(jQuery, window);
231    </script>
232
233    <script type='text/javascript' src='#CHEMIN{js/jquery.labelhide.js}'></script>
234    <script type='text/javascript'>
235        <!--
236        if (window.jQuery) (function($){
237                // adresse du fragment ajax
238                var url = 'spip.php?page=inc-chatbox\x26dests=[(#GET{dests}|implode{','})]\x26nb_messages_recus=[(#GET{nb_messages_recus})]';
239        //      var url = 'spip.php?page=compteur_messages_chat\x26dests=[(#GET{dests}|implode{','})]\x26nb_messages_affiches=[(#GET{nb_messages_affiches})]';
240                // reload : au debut, toutes les 20s, puis 22, 24... 60s
241                // si on participe on revient a 5s, puis 7, 9... 60s
242                var r = 10;
243                var reload = function() {
244                $("#contenu_chatbox2_[(#GET{dests}|implode{''})]")
245                        .load(url,function(){setTimeout(reload,1000*(r=Math.min(r+2,60)));});
246                }
247                setTimeout(reload, r);
248       
249                $("#formulaire_chatbox_[(#GET{dests}|implode{''})] form")
250                .ajaxForm({
251                        url: url,
252                        target: "#contenu_chatbox2_[(#GET{dests}|implode{''})]",
253                        beforeSubmit: function(){
254        //                      $("#chatbox_[(#GET{dests}|implode{''})]").val('');
255        //                      $("#chatbox_nick_[(#GET{dests}|implode{''})]").blur();
256                                $("#contenu_chatbox2_[(#GET{dests}|implode{''})]")
257                                .css('opacity', 0.5);
258                        },
259                        success: function(){
260                                $("#contenu_chatbox2_[(#GET{dests}|implode{''})]")
261                                .css('opacity', 1);
262                                r = 5;
263        //                      $("input#chatbox_[(#GET{dests}|implode{''})]").focus();
264                        }
265                });
266       
267                // Masquer le champ de saisie du nick sous son label
268                $('label.labelhide').labelhide();
269       
270        })(jQuery);
271        // -->
272    </script>
Note: See TracBrowser for help on using the repository browser.