174 var help_controls; |
174 var help_controls; |
175 |
175 |
176 help_controls = "<div id='help_controls'>" + controls_title + controls_img + controls_1hand_text + controls_1hand_imgs + "</div>"; |
176 help_controls = "<div id='help_controls'>" + controls_title + controls_img + controls_1hand_text + controls_1hand_imgs + "</div>"; |
177 |
177 |
178 //Panneau d'aide. |
178 //Panneau d'aide. |
179 var notification_help = "<div id='notify_help'>" + help_search + "<div id='help_sep'></div>" + help_controls + "</div>"; |
179 //On crée les flèches au niveau du panneau d'aide. |
|
180 var notification_help = "<div id='notify_help'><div id='help_details_upArrow' class='help_details_arrows'></div>" + help_search + "<div id='help_sep'></div>" + help_controls + "<div id='help_details_upArrow' class='help_details_arrows'></div></div>"; |
180 |
181 |
181 //On les ajoute à la mosaïque. |
182 //On les ajoute à la mosaïque. |
182 $('body').append(notification_help); |
183 $('body').append(notification_help); |
183 |
184 |
184 var notify_help = $('#notify_help'); |
185 var notify_help = $('#notify_help'); |
374 var arrowWidth = 50, arrowHeight = 50; |
376 var arrowWidth = 50, arrowHeight = 50; |
375 |
377 |
376 //On ajoute les flèches pour accéder aux détails du panneau d'aide. |
378 //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>"; |
379 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 |
380 |
|
381 //Nombre d'éléments présents dans les 2 divs de stockage des détails de l'aide. |
|
382 var helpDetailsLeftContainerLength = Math.ceil(this.helpDetailsGestures.length / 2), helpDetailsRightContainerLength = Math.floor(this.helpDetailsGestures.length / 2); |
|
383 |
379 //On ajoute les gestes des détails de l'aide. |
384 //On ajoute les gestes des détails de l'aide. |
380 //On remplit le div des détails par les éléments. |
385 //On remplit les divs gauche et droite des détails par les éléments. |
381 var help_details_gestures = "<div id='help_details_container'>"; |
386 var help_details_gestures = "<div id='help_details_left_container' class='help_details_containers'>"; |
382 |
387 |
383 for(var i = 0 ; i < this.helpDetailsGestures.length ; i++) |
388 var i = 0; |
384 { |
389 for(i ; i < helpDetailsLeftContainerLength ; i++) |
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>" + |
390 { |
|
391 help_details_gestures += "<div><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>" + |
392 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>" + |
393 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 />"; |
394 this.helpDetailsGesturesMetadata.desc + '</b> : ' + this.helpDetailsGestures[i].desc + "</td></tr></table></div>"; |
|
395 } |
|
396 help_details_gestures += "</div><div id='help_details_right_container' class='help_details_containers'>"; |
|
397 for(i ; i < this.helpDetailsGestures.length ; i++) |
|
398 { |
|
399 help_details_gestures += "<div><table border='0'><tr><td rowspan='4'><img class='helpDetailsImgs' src='" + imgPath + MI + all_gestures_img[i] + ".png' /></td><td><b>" + |
|
400 this.helpDetailsGesturesMetadata.name + '</b> : ' + this.helpDetailsGestures[i].name + "</td></tr><tr><td><b>" + |
|
401 this.helpDetailsGesturesMetadata.usage + '</b> : ' + this.helpDetailsGestures[i].usage + "</td></tr><tr><td><b>" + |
|
402 this.helpDetailsGesturesMetadata.desc + '</b> : ' + this.helpDetailsGestures[i].desc + "</td></tr></table></div>"; |
389 } |
403 } |
390 |
404 |
391 help_details_gestures += "</div>"; |
405 help_details_gestures += "</div>"; |
392 |
406 |
393 notify_help.append(help_details_arrows + help_details_gestures); |
407 notify_help.append(help_details_arrows + help_details_gestures); |
|
408 |
|
409 //Hauteur totale de la plus longue colonne. |
|
410 var helpDetailsMaxContainerHeight = $('#help_details_left_container').height(); |
394 |
411 |
395 //On positionne les flèches même si elles sont invisibles pour l'instant. |
412 //On positionne les flèches même si elles sont invisibles pour l'instant. |
396 $('#help_details_upArrow').css( |
413 $('#help_details_upArrow').css( |
397 { |
414 { |
398 top: 0, |
415 top: 0, |
410 }); |
427 }); |
411 |
428 |
412 var helpDetailsColumnWidth = (notify_help.width() - 2 * notify_margin) / 2 - 100; |
429 var helpDetailsColumnWidth = (notify_help.width() - 2 * notify_margin) / 2 - 100; |
413 |
430 |
414 //On spécifie les colonnes. |
431 //On spécifie les colonnes. |
415 $('#help_details_container').css( |
432 $('.help_details_containers').css( |
416 { |
433 { |
417 position: 'absolute', |
434 position: 'absolute', |
418 '-moz-column-width': helpDetailsColumnWidth, |
435 width: notify_help.width() / 2 - notify_margin * 2 - notify_border * 2 |
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 }); |
436 }); |
|
437 $('#help_details_left_container').css( |
|
438 { |
|
439 top: 0, |
|
440 left: 0 |
|
441 }); |
|
442 $('#help_details_right_container').css( |
|
443 { |
|
444 top: 0, |
|
445 left: notify_help.width() / 2 |
|
446 }); |
|
447 |
|
448 //Hauteur du panneau d'aide moins la hauteur des flèches. |
|
449 var notify_help_height_without_arrows = notify_help.height() - notify_margin * 2 - notify_border * 2 - $('.help_details_arrows').height() * 2; |
|
450 //On rajoute la page de départ de l'aide aux pages des détails de l'aide. |
|
451 this.helpDetailsPageLength = Math.ceil(helpDetailsMaxContainerHeight / notify_help_height_without_arrows) + 1; |
|
452 |
|
453 //On ajoute les flèches à l'interface. |
|
454 $('#help_details_upArrow').css( |
|
455 { |
|
456 top: 0, |
|
457 left: notify_help.width() / 2 - arrowWidth / 2 |
|
458 }); |
|
459 $('#help_details_downArrow').css( |
|
460 { |
|
461 top: notify_help.height() - arrowHeight, |
|
462 left: notify_help.width() / 2 - arrowWidth / 2 |
|
463 }); |
|
464 |
|
465 //Si on est sur la première page de l'aide. |
|
466 if(this.helpDetailsPageNumber == 0) |
|
467 { |
|
468 //On ne laisse pas la place du haut pour la flèche haut puisqu'on est sur la première page. |
|
469 $('.help_details_containers').css( |
|
470 { |
|
471 //top: 0, |
|
472 top: $('#notify_help').height(), |
|
473 // height: notify_help.height() - arrowHeight |
|
474 }); |
|
475 //$('#notify_help').css('padding-bottom', arrowHeight); |
|
476 $('#help_details_downArrow').css('opacity', '1'); |
|
477 |
|
478 //$('.help_details_containers').css('opacity', '0'); |
|
479 } |
|
480 //Sinon si on est sur la dernière page de l'aide. |
|
481 else if(this.helpDetailsPageNumber + 1 == this.helpDetailsPageLength) |
|
482 { |
|
483 $('#help_details_downArrow').css('opacity', '0'); |
|
484 } |
|
485 //Sinon on laisse la place pour revenir en arrière ou en avant. |
|
486 else |
|
487 { |
|
488 $('.help_details_containers').css( |
|
489 { |
|
490 top: arrowHeight, |
|
491 // height: notify_help.height() - arrowHeight * 2, |
|
492 }); |
|
493 } |
425 } |
494 } |
426 } |
495 } |
427 |
496 |
428 /* |
497 /* |
429 * Supprime l'aide. |
498 * Supprime l'aide. |