28 //Si elle est déjà affichée on quitte. |
28 //Si elle est déjà affichée on quitte. |
29 if(this.helpDisplayed) |
29 if(this.helpDisplayed) |
30 { |
30 { |
31 return; |
31 return; |
32 } |
32 } |
|
33 |
|
34 //Tous les noms d'images des gestes de recherche. |
|
35 var all_gestures_img = ['arret', 'chute', 'contact', 'group_spin', 'bend', 'knee_up', 'port_de_bras', 'grandjete', 'jump', 'spin', 'up_down', 'wave']; |
|
36 |
|
37 //Emplacement des images pour l'aide. |
|
38 var imgPath = './pictos/help/'; |
33 |
39 |
34 //On enlève les autres notifications. |
40 //On enlève les autres notifications. |
35 this.removeNotifications(); |
41 this.removeNotifications(); |
36 |
42 |
37 //On indique qu'elle est affiché. |
43 //On indique qu'elle est affiché. |
172 //Panneau d'aide. |
178 //Panneau d'aide. |
173 var notification_help = "<div id='notify_help'>" + help_search + "<div id='help_sep'></div>" + help_controls + "</div>"; |
179 var notification_help = "<div id='notify_help'>" + help_search + "<div id='help_sep'></div>" + help_controls + "</div>"; |
174 |
180 |
175 //On les ajoute à la mosaïque. |
181 //On les ajoute à la mosaïque. |
176 $('body').append(notification_help); |
182 $('body').append(notification_help); |
177 |
183 |
|
184 var notify_help = $('#notify_help'); |
|
185 |
|
186 var notify_imgs_width = $('#notify_imgs_small').css('margin-leftf') |
|
187 |
|
188 $('.notify_imgs').css( |
|
189 { |
|
190 width: $('#notify_imgs_small') |
|
191 }); |
|
192 |
178 if(this.isTablet) |
193 if(this.isTablet) |
179 { |
194 { |
180 //On rétrécit certaines images si on est sur une tablette. |
195 //On rétrécit certaines images si on est sur une tablette. |
181 $('#search_img, #controls_img').css( |
196 $('#search_img, #controls_img').css( |
182 { |
197 { |
196 } |
211 } |
197 |
212 |
198 //On calcule leurs coordonnées et dimensions. |
213 //On calcule leurs coordonnées et dimensions. |
199 var notify_width = $(window).width(), notify_height = $(window).height(); |
214 var notify_width = $(window).width(), notify_height = $(window).height(); |
200 var notify_margin = parseInt($('#notify_help').css('margin-left')); |
215 var notify_margin = parseInt($('#notify_help').css('margin-left')); |
201 var notify_ = 10; |
216 //var notify_ = 10; |
202 |
217 |
203 //On les positionne. |
218 //On les positionne. |
204 $('#notify_help').css( |
219 notify_help.css( |
205 { |
220 { |
206 left: "0px", |
221 left: "0px", |
207 top: "0px", |
222 top: "0px", |
208 width: notify_width - notify_margin * 2, |
223 width: notify_width - notify_margin * 2, |
209 height: notify_height - notify_margin * 2, |
224 height: notify_height - notify_margin * 2, |
210 'z-index': 1000 |
225 'z-index': 1000 |
211 }); |
226 }); |
212 |
227 |
|
228 //Position horizontale du séparateur de colonnes. |
|
229 var sep_left = $('#help_sep').position().left; |
|
230 //Marge du panneau d'aide. |
|
231 var help_margin = parseInt(notify_help.css('margin-left')); |
|
232 //On calcule la taille d'une zone de recherche (une des deux parties). |
|
233 var help_column_width = sep_left - help_margin; |
|
234 |
213 //Taille des marges des images. |
235 //Taille des marges des images. |
214 var margins = parseInt($('.notify_imgs_small').css('margin-left')); |
236 var margins = parseInt($('.notify_imgs_small').css('margin-left')); |
215 //Largeur des images. |
237 //Largeur des images. |
216 var widths = $('.notify_imgs_small').width(); |
238 var widths = help_column_width / 5 - 4 * margins * 2;// $('.notify_imgs_small').width(); |
217 //Hauteur des images. |
239 //Hauteur des images. |
218 var heights = $('.notify_imgs_small').height(); |
240 var heights = widths;//$('.notify_imgs_small').height(); |
219 //Position horizontale du séparateur de colonnes. |
241 |
220 var sep_left = $('#help_sep').position().left; |
242 $('.notify_imgs_small').css( |
221 //Marge du panneau d'aide. |
243 { |
222 var help_margin = parseInt($('#notify_help').css('margin-left')); |
244 width: widths, |
223 |
245 height: heights, |
224 //On calcule la taille d'une zone de recherche (une des deux parties). |
246 'background-size': widths + 'px ' + heights + 'px', |
225 var help_column_width = sep_left - help_margin; |
247 'font-size': widths / 5 + 'px', |
|
248 'padding-left': '0px' |
|
249 }); |
|
250 |
226 //Longueur d'une image. |
251 //Longueur d'une image. |
227 var img_width = (margins * 2 + widths); |
252 var img_width = (margins * 2 + widths); |
228 |
253 |
229 //On récupère le nombre d'images affichables horizontalement pour les gestures de recherche à deux mains dans une des parties de l'aide. |
254 //On récupère le nombre d'images affichables horizontalement pour les gestures de recherche à deux mains dans une des parties de l'aide. |
230 var search_2hands_n_imgs = Math.floor(help_column_width / img_width); |
255 var search_2hands_n_imgs = Math.floor(help_column_width / img_width); |
328 for(var i = 0 ; i < controls_1hand_tab.length ; i++) |
353 for(var i = 0 ; i < controls_1hand_tab.length ; i++) |
329 { |
354 { |
330 $("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('" + img_directory + controls_1hand_tab[i] + ".png')"); |
355 $("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('" + img_directory + controls_1hand_tab[i] + ".png')"); |
331 $("#1hand_" + controls_1hand_tab[i]).html(this.helpText[controls_1hand_tab_text[i]]); |
356 $("#1hand_" + controls_1hand_tab[i]).html(this.helpText[controls_1hand_tab_text[i]]); |
332 } |
357 } |
333 |
358 |
334 //On les fait apparaître. |
359 //On les fait apparaître. |
335 $('#notify_help').css( |
360 notify_help.css( |
336 { |
361 { |
337 opacity: "1" |
362 opacity: "1" |
338 }); |
363 }); |
339 |
364 |
340 $('.notify_imgs_big').css( |
365 $('.notify_imgs_big').css( |
341 { |
366 { |
342 opacity: "1" |
367 opacity: "1" |
343 }); |
368 }); |
|
369 |
|
370 //Si on est en mode d'interaction souris, on rajoute les détails. |
|
371 if(this.config.mouseInteractions) |
|
372 { |
|
373 //Dimensions des flèches. |
|
374 var arrowWidth = 50, arrowHeight = 50; |
|
375 |
|
376 //On ajoute les flèches pour accéder aux détails du panneau d'aide. |
|
377 var help_details_arrows = "<div id='help_details_upArrow' class='help_details_arrows'></div><div id='help_details_downArrow' class='help_details_arrows'></div>"; |
|
378 |
|
379 //On ajoute les gestes des détails de l'aide. |
|
380 //On remplit le div des détails par les éléments. |
|
381 var help_details_gestures = "<div id='help_details_container'>"; |
|
382 |
|
383 for(var i = 0 ; i < this.helpDetailsGestures.length ; i++) |
|
384 { |
|
385 help_details_gestures += "<table border='0'><tr><td rowspan='4'><img class='helpDetailsImgs' src='" + imgPath + MI + all_gestures_img[i] + ".png' /></td><td><b>" + |
|
386 this.helpDetailsGesturesMetadata.name + '</b> : ' + this.helpDetailsGestures[i].name + "</td></tr><tr><td><b>" + |
|
387 this.helpDetailsGesturesMetadata.usage + '</b> : ' + this.helpDetailsGestures[i].usage + "</td></tr><tr><td><b>" + |
|
388 this.helpDetailsGesturesMetadata.desc + '</b> : ' + this.helpDetailsGestures[i].desc + "</td></tr></table><br /><br />"; |
|
389 } |
|
390 |
|
391 help_details_gestures += "</div>"; |
|
392 |
|
393 notify_help.append(help_details_arrows + help_details_gestures); |
|
394 |
|
395 //On positionne les flèches même si elles sont invisibles pour l'instant. |
|
396 $('#help_details_upArrow').css( |
|
397 { |
|
398 top: 0, |
|
399 left: notify_help.width() / 2 - arrowWidth / 2 |
|
400 }); |
|
401 $('#help_details_downArrow').css( |
|
402 { |
|
403 top: notify_help.height() - arrowHeight, |
|
404 left: notify_help.width() / 2 - arrowWidth / 2 |
|
405 }); |
|
406 |
|
407 $('.helpDetailsImg').css( |
|
408 { |
|
409 |
|
410 }); |
|
411 |
|
412 var helpDetailsColumnWidth = (notify_help.width() - 2 * notify_margin) / 2 - 100; |
|
413 |
|
414 //On spécifie les colonnes. |
|
415 $('#help_details_container').css( |
|
416 { |
|
417 position: 'absolute', |
|
418 '-moz-column-width': helpDetailsColumnWidth, |
|
419 '-webkit-column-width': helpDetailsColumnWidth, |
|
420 '-moz-column-gap': 0, |
|
421 '-webkit-column-gap': 0, |
|
422 '-moz-column-rule': '1px solid #ddccb5', |
|
423 '-webkit-column-rule': '1px solid #ddccb5' |
|
424 }); |
|
425 } |
344 } |
426 } |
345 |
427 |
346 /* |
428 /* |
347 * Supprime l'aide. |
429 * Supprime l'aide. |
348 * Est appelé dans les fichiers : |
430 * Est appelé dans les fichiers : |
2047 //Panneau des crédits. |
2129 //Panneau des crédits. |
2048 //On crée les flèches au niveau du container en cas d'overflow du texte. |
2130 //On crée les flèches au niveau du container en cas d'overflow du texte. |
2049 var credits = "<div id='notify_credits'><div id='credits_upArrow' class='credits_arrows'></div><div id='credits_container'></div><div id='credits_downArrow' class='credits_arrows'></div></div>"; |
2131 var credits = "<div id='notify_credits'><div id='credits_upArrow' class='credits_arrows'></div><div id='credits_container'></div><div id='credits_downArrow' class='credits_arrows'></div></div>"; |
2050 |
2132 |
2051 //Pied de page des crédits. |
2133 //Pied de page des crédits. |
2052 var credits_footer = "<div id='credits_footer'><div id='credits_footer_BBM'></div><div id='credits_footer_text'>" + this.creditsMetadata.footer + "</div><div id='credits_footer_partners'></div></div>"; |
2134 var credits_footer = "<div id='credits_footer'><div id='credits_footer_BBM'></div><div id='credits_footer_text'>" + this.creditsMetadata.footer_line1 + "<br />" + this.creditsMetadata.footer_line2 + "</div><div id='credits_footer_partners'></div></div>"; |
2053 |
2135 |
2054 $('body').append(credits); |
2136 $('body').append(credits); |
2055 |
2137 |
2056 //On récupère les éléments css du div des crédits. |
2138 //On récupère les éléments css du div des crédits. |
2057 var notify_credits = $('#notify_credits'), window_width = $(window).width(), window_height = $(window).height(), notify_margin = parseInt(notify_credits.css('margin-left')), notify_padding = parseInt(notify_credits.css('padding-left')); |
2139 var notify_credits = $('#notify_credits'), window_width = $(window).width(), window_height = $(window).height(), notify_margin = parseInt(notify_credits.css('margin-left')), notify_padding = parseInt(notify_credits.css('padding-left')); |