--- a/.hgignore Tue Sep 18 23:46:41 2012 +0200
+++ b/.hgignore Thu Sep 20 04:12:52 2012 +0200
@@ -92,6 +92,8 @@
front_idill/src/config_souris.json
front_idill/src/mosaic/js/mosaic.js.orig
.hgtags.orig
+front_idill/src/lang/en.json.orig
+front_idill/src/lang/fr.json.orig
syntax: regexp
middleware/extern/.*/(bin|obj)
middleware/src/bin/Debug/*
--- a/front_idill/src/mosaic/css/mosaic.less Tue Sep 18 23:46:41 2012 +0200
+++ b/front_idill/src/mosaic/css/mosaic.less Thu Sep 20 04:12:52 2012 +0200
@@ -304,6 +304,7 @@
border-style: solid;
border-width: @notify-help-border-width;
border-color: #fff;
+ color: #fff;
background-color: @notify-help-background-color;
}
@@ -332,6 +333,7 @@
background-size: 50px 50px;
background-repeat: no-repeat;
opacity: 0;
+ z-index: 1100;
}
/*
--- a/front_idill/src/mosaic/js/mosaic.js Tue Sep 18 23:46:41 2012 +0200
+++ b/front_idill/src/mosaic/js/mosaic.js Thu Sep 20 04:12:52 2012 +0200
@@ -113,9 +113,6 @@
this.helpDetailsPageNumber = 0;
//Nombre de pages des détails de l'aide.
this.helpDetailsPageLength = 0;
- //Dimensions des colonnes pour les détails de l'aide.
- this.column_gap = 0;
- this.column_width = 0;
//Dernières positions des pointeurs.
this.mainPointerLastX = null;
--- a/front_idill/src/mosaic/js/mouseInteractions.js Tue Sep 18 23:46:41 2012 +0200
+++ b/front_idill/src/mosaic/js/mouseInteractions.js Thu Sep 20 04:12:52 2012 +0200
@@ -338,7 +338,7 @@
}
//Si l'aide est affichée, un clic la ferme.
- if(this.helpDisplayed && !this.isHelpIconZoomed && !this.isHelpIconZooming)
+ if(this.helpDisplayed && !this.isHelpIconZoomed && !this.isHelpIconZooming && !this.isOnHelpArrow(this.mousePosX, this.mousePosY))
{
this.removeHelp();
}
@@ -358,4 +358,14 @@
{
this.goToNextCreditsPage();
}
+
+ //Si l'aide est affichée et qu'on est sur une flèche, on change de page.
+ if(this.isOnHelpUpArrow(this.mousePosX, this.mousePosY))
+ {
+ this.goToPreviousHelpDetailsPage();
+ }
+ else if(this.isOnHelpDownArrow(this.mousePosX, this.mousePosY))
+ {
+ this.goToNextHelpDetailsPage();
+ }
}
\ No newline at end of file
--- 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,
+ });
+ }
}
}
--- a/front_idill/src/mosaic/js/pointers.js Tue Sep 18 23:46:41 2012 +0200
+++ b/front_idill/src/mosaic/js/pointers.js Thu Sep 20 04:12:52 2012 +0200
@@ -1112,28 +1112,6 @@
var margin = parseInt(creditsNotification.css('margin-left'));
- /*if($('#aa').length <= 0)
- {
- var a = '<div id="aa"></div>';
- $('body').append(a);
- $('#aa').css(
- {
- position: 'absolute',
- 'background-color': '#0000FF',
- top: +upArrow.position().top + 2 * margin,
- left: upArrow.position().left + 2 * margin,
- width: upArrow.width(),
- height: upArrow.height()
- });
- }
-
- console.log('---------------UP----------------------');
- console.log(x + ' > ' + (+upArrow.position().left + 2 * margin));
- console.log(x + ' < ' + (+upArrow.position().left + upArrow.width() + 2 * margin));
- console.log(y + ' > ' + (+upArrow.position().top + 2 * margin));
- console.log(y + ' < ' + (+upArrow.position().top + upArrow.height() + 2 * margin));
- console.log('---------------------------------------');*/
-
//Si la flèche est visible et si la souris est dessus, on retourne true.
if(upArrow.length > 0 && upArrow.css('opacity') == '1' && x > (+upArrow.position().left + margin) && x < (+upArrow.position().left + upArrow.width() + margin) && y > (+upArrow.position().top + margin) && y < (+upArrow.position().top + upArrow.height() + margin))
{
@@ -1159,13 +1137,6 @@
var margin = parseInt(creditsNotification.css('margin-left'));
- /*console.log('--------------DOWN---------------------');
- console.log(x + ' > ' + (+downArrow.position().left + margin));
- console.log(x + ' < ' + (+downArrow.position().left + downArrow.width() + margin));
- console.log(y + ' > ' + (+downArrow.position().top + margin));
- console.log(y + ' < ' + (+downArrow.position().top + downArrow.height() + margin));
- console.log('---------------------------------------');*/
-
//Si la flèche est visible et si la souris est dessus, on retourne true.
if(downArrow.length > 0 && downArrow.css('opacity') == '1' && x > (+downArrow.position().left + margin) && x < (+downArrow.position().left + downArrow.width() + margin) && y > (+downArrow.position().top + margin) && y < (+downArrow.position().top + downArrow.height() + margin))
{
@@ -1286,7 +1257,172 @@
});
}
+/*
+ * Retourne vrai si la souris est sur la flèche haute dans le panneau d'aide.
+*/
+Mosaic.prototype.isOnHelpUpArrow = function(x, y)
+{
+ var helpNotification = $('#notify_help'), upArrow = $('#help_details_upArrow');
+ //Si les crédits ne sont pas affichés, on retourne faux.
+ if(helpNotification.length <= 0)
+ {
+ return false;
+ }
+
+ var margin = parseInt(helpNotification.css('margin-left'));
+
+ //Si la flèche est visible et si la souris est dessus, on retourne true.
+ if(upArrow.length > 0 && upArrow.css('opacity') == '1' && x > (+upArrow.position().left + margin) && x < (+upArrow.position().left + upArrow.width() + margin) && y > (+upArrow.position().top + margin) && y < (+upArrow.position().top + upArrow.height() + margin))
+ {
+ return true;
+ }
+
+ return false;
+}
+/*
+ * Retourne vrai si la souris est sur la flèche basse dans le panneau d'aide.
+*/
+Mosaic.prototype.isOnHelpDownArrow = function(x, y)
+{
+ var helpNotification = $('#notify_help'), downArrow = $('#help_details_downArrow');
+ //Si les crédits ne sont pas affichés, on retourne faux.
+ if(helpNotification.length <= 0)
+ {
+ return false;
+ }
+
+ var margin = parseInt(helpNotification.css('margin-left'));
+
+ //Si la flèche est visible et si la souris est dessus, on retourne true.
+ if(downArrow.length > 0 && downArrow.css('opacity') == '1' && x > (+downArrow.position().left + margin) && x < (+downArrow.position().left + downArrow.width() + margin) && y > (+downArrow.position().top + margin) && y < (+downArrow.position().top + downArrow.height() + margin))
+ {
+ return true;
+ }
+
+ return false;
+}
+
+/*
+ * Retourne vrai si la souris est sur une des flèches du panneau d'aide.
+*/
+Mosaic.prototype.isOnHelpArrow = function(x, y)
+{
+ //Si la souris est sur une flèche des crédits, on retourne vrai.
+ if(this.isOnHelpUpArrow(x, y) || this.isOnHelpDownArrow(x, y))
+ {
+ return true;
+ }
+
+ return false;
+}
+
+/*
+ * Va a la page d'aide suivante.
+*/
+Mosaic.prototype.goToNextHelpDetailsPage = function()
+{
+ // console.log(+this.helpDetailsPageNumber + 1 + ' >= ' + this.helpDetailsPageLength);
+ //Si on est sur la dernière page, on quitte.
+ if(this.helpDetailsPageNumber + 1 >= this.helpDetailsPageLength)
+ {
+ return;
+ }
+
+ this.helpDetailsPageNumber++;
+ this.goToHelpDetailsPageN(this.helpDetailsPageNumber);
+}
+
+/*
+ * Va a la page d'aide précédente.
+*/
+Mosaic.prototype.goToPreviousHelpDetailsPage = function()
+{
+ //Si on est sur la première page, on quitte.
+ if(this.helpDetailsPageNumber == 0)
+ {
+ return;
+ }
+
+ this.helpDetailsPageNumber--;
+ this.goToHelpDetailsPageN(this.helpDetailsPageNumber);
+}
+
+/*
+ * Va à la page N des crédits.
+*/
+Mosaic.prototype.goToHelpDetailsPageN = function(N)
+{
+ var notify_help = $('#notify_help'), arrowHeight = $('#help_details_upArrow').height(), margin = parseInt($('#notify_help').css('margin-left')) + parseInt($('#notify_help').css('border-width'));
+
+ //Si on est sur la première page, on cache la flèche haut.
+ if(this.helpDetailsPageNumber == 0)
+ {
+ //On affiche la page principale.
+ $('#help_search, #help_controls').css('opacity', '1');
+
+ $('#help_details_upArrow').css(
+ {
+ opacity: 0
+ });
+ $('#help_details_downArrow').css(
+ {
+ opacity: 1
+ });
+ $('.help_details_containers').css(
+ {
+ top: margin,
+ // height: notify_help.height() - arrowHeight
+ });
+ }
+ //Si on est sur la dernière page, on cache la flèche bas.
+ else if(this.helpDetailsPageNumber + 1 >= this.helpDetailsPageLength)
+ {
+ //On masque la page principale.
+ $('#help_search, #help_controls').css('opacity', '0');
+
+ $('#help_details_upArrow').css(
+ {
+ opacity: 1
+ });
+ $('#help_details_downArrow').css(
+ {
+ opacity: 0
+ });
+ $('.help_details_containers').css(
+ {
+ top: +arrowHeight + margin,
+ // height: notify_help.height() - arrowHeight - margin
+ });
+ }
+ //Si on est dans les autres pages, on affiche les deux flèches.
+ else
+ {
+ //On masque la page principale.
+ $('#help_search, #help_controls').css('opacity', '0');
+
+ $('#help_details_upArrow').css(
+ {
+ opacity: 1
+ });
+ $('#help_details_downArrow').css(
+ {
+ opacity: 1
+ });
+ $('.help_details_containers').css(
+ {
+ top: +arrowHeight + margin,
+ // height: notify_help.height() - 2 * arrowHeight - margin
+ });
+ }
+
+ //On déplace le texte des crédits.
+ $('.help_details_containers').css(
+ {
+ // top: -($('.help_details_containers').height() * N - margin)// + this.column_gap)
+ top: $('#notify_help').height() - ($('#notify_help').height() * N - margin)// + this.column_gap)
+ });
+}
/*
* Retourne vrai si le doigt est sur le bouton de lecture de video dans le mode d'interaction tablettes.