# HG changeset patch
# User bastiena
# Date 1348107172 -7200
# Node ID db42ef1faa7aac236ba5c04865e12264a0d26ade
# Parent  085632de8798de70dd58a6bb196ce9b2e6aff236
Front IDILL:

help details updated for mouse interactions

diff -r 085632de8798 -r db42ef1faa7a .hgignore
--- 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/*
diff -r 085632de8798 -r db42ef1faa7a front_idill/src/mosaic/css/mosaic.less
--- 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;
 }
 
 /*
diff -r 085632de8798 -r db42ef1faa7a front_idill/src/mosaic/js/mosaic.js
--- 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;
diff -r 085632de8798 -r db42ef1faa7a front_idill/src/mosaic/js/mouseInteractions.js
--- 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
diff -r 085632de8798 -r db42ef1faa7a front_idill/src/mosaic/js/notifications.js
--- 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,
+			});
+		}
 	}
 }
 
diff -r 085632de8798 -r db42ef1faa7a front_idill/src/mosaic/js/pointers.js
--- 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.