--- a/front_idill/src/mosaic/js/notifications.js Tue Sep 18 23:46:41 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js Thu Sep 20 04:12:52 2012 +0200
@@ -176,7 +176,8 @@
help_controls = "<div id='help_controls'>" + controls_title + controls_img + controls_1hand_text + controls_1hand_imgs + "</div>";
//Panneau d'aide.
- var notification_help = "<div id='notify_help'>" + help_search + "<div id='help_sep'></div>" + help_controls + "</div>";
+ //On crée les flèches au niveau du panneau d'aide.
+ 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>";
//On les ajoute à la mosaïque.
$('body').append(notification_help);
@@ -213,6 +214,7 @@
//On calcule leurs coordonnées et dimensions.
var notify_width = $(window).width(), notify_height = $(window).height();
var notify_margin = parseInt($('#notify_help').css('margin-left'));
+ var notify_border = parseInt($('#notify_help').css('border-width'));
//var notify_ = 10;
//On les positionne.
@@ -376,22 +378,37 @@
//On ajoute les flèches pour accéder aux détails du panneau d'aide.
var help_details_arrows = "<div id='help_details_upArrow' class='help_details_arrows'></div><div id='help_details_downArrow' class='help_details_arrows'></div>";
- //On ajoute les gestes des détails de l'aide.
- //On remplit le div des détails par les éléments.
- var help_details_gestures = "<div id='help_details_container'>";
+ //Nombre d'éléments présents dans les 2 divs de stockage des détails de l'aide.
+ var helpDetailsLeftContainerLength = Math.ceil(this.helpDetailsGestures.length / 2), helpDetailsRightContainerLength = Math.floor(this.helpDetailsGestures.length / 2);
- for(var i = 0 ; i < this.helpDetailsGestures.length ; i++)
+ //On ajoute les gestes des détails de l'aide.
+ //On remplit les divs gauche et droite des détails par les éléments.
+ var help_details_gestures = "<div id='help_details_left_container' class='help_details_containers'>";
+
+ var i = 0;
+ for(i ; i < helpDetailsLeftContainerLength ; i++)
{
- help_details_gestures += "<table border='0'><tr><td rowspan='4'><img class='helpDetailsImgs' src='" + imgPath + MI + all_gestures_img[i] + ".png' /></td><td><b>" +
+ 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>" +
this.helpDetailsGesturesMetadata.name + '</b> : ' + this.helpDetailsGestures[i].name + "</td></tr><tr><td><b>" +
this.helpDetailsGesturesMetadata.usage + '</b> : ' + this.helpDetailsGestures[i].usage + "</td></tr><tr><td><b>" +
- this.helpDetailsGesturesMetadata.desc + '</b> : ' + this.helpDetailsGestures[i].desc + "</td></tr></table><br /><br />";
+ this.helpDetailsGesturesMetadata.desc + '</b> : ' + this.helpDetailsGestures[i].desc + "</td></tr></table></div>";
+ }
+ help_details_gestures += "</div><div id='help_details_right_container' class='help_details_containers'>";
+ for(i ; i < this.helpDetailsGestures.length ; i++)
+ {
+ 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>" +
+ this.helpDetailsGesturesMetadata.name + '</b> : ' + this.helpDetailsGestures[i].name + "</td></tr><tr><td><b>" +
+ this.helpDetailsGesturesMetadata.usage + '</b> : ' + this.helpDetailsGestures[i].usage + "</td></tr><tr><td><b>" +
+ this.helpDetailsGesturesMetadata.desc + '</b> : ' + this.helpDetailsGestures[i].desc + "</td></tr></table></div>";
}
help_details_gestures += "</div>";
notify_help.append(help_details_arrows + help_details_gestures);
+ //Hauteur totale de la plus longue colonne.
+ var helpDetailsMaxContainerHeight = $('#help_details_left_container').height();
+
//On positionne les flèches même si elles sont invisibles pour l'instant.
$('#help_details_upArrow').css(
{
@@ -412,16 +429,68 @@
var helpDetailsColumnWidth = (notify_help.width() - 2 * notify_margin) / 2 - 100;
//On spécifie les colonnes.
- $('#help_details_container').css(
+ $('.help_details_containers').css(
{
position: 'absolute',
- '-moz-column-width': helpDetailsColumnWidth,
- '-webkit-column-width': helpDetailsColumnWidth,
- '-moz-column-gap': 0,
- '-webkit-column-gap': 0,
- '-moz-column-rule': '1px solid #ddccb5',
- '-webkit-column-rule': '1px solid #ddccb5'
+ width: notify_help.width() / 2 - notify_margin * 2 - notify_border * 2
});
+ $('#help_details_left_container').css(
+ {
+ top: 0,
+ left: 0
+ });
+ $('#help_details_right_container').css(
+ {
+ top: 0,
+ left: notify_help.width() / 2
+ });
+
+ //Hauteur du panneau d'aide moins la hauteur des flèches.
+ var notify_help_height_without_arrows = notify_help.height() - notify_margin * 2 - notify_border * 2 - $('.help_details_arrows').height() * 2;
+ //On rajoute la page de départ de l'aide aux pages des détails de l'aide.
+ this.helpDetailsPageLength = Math.ceil(helpDetailsMaxContainerHeight / notify_help_height_without_arrows) + 1;
+
+ //On ajoute les flèches à l'interface.
+ $('#help_details_upArrow').css(
+ {
+ top: 0,
+ left: notify_help.width() / 2 - arrowWidth / 2
+ });
+ $('#help_details_downArrow').css(
+ {
+ top: notify_help.height() - arrowHeight,
+ left: notify_help.width() / 2 - arrowWidth / 2
+ });
+
+ //Si on est sur la première page de l'aide.
+ if(this.helpDetailsPageNumber == 0)
+ {
+ //On ne laisse pas la place du haut pour la flèche haut puisqu'on est sur la première page.
+ $('.help_details_containers').css(
+ {
+ //top: 0,
+ top: $('#notify_help').height(),
+ // height: notify_help.height() - arrowHeight
+ });
+ //$('#notify_help').css('padding-bottom', arrowHeight);
+ $('#help_details_downArrow').css('opacity', '1');
+
+ //$('.help_details_containers').css('opacity', '0');
+ }
+ //Sinon si on est sur la dernière page de l'aide.
+ else if(this.helpDetailsPageNumber + 1 == this.helpDetailsPageLength)
+ {
+ $('#help_details_downArrow').css('opacity', '0');
+ }
+ //Sinon on laisse la place pour revenir en arrière ou en avant.
+ else
+ {
+ $('.help_details_containers').css(
+ {
+ top: arrowHeight,
+ // height: notify_help.height() - arrowHeight * 2,
+ });
+ }
}
}