www

commit 04d444af24aeb694fdd612cb633b526ff4bd77ca
parent 037add67446cd5a4ef131c1b2233c24af927ba80
Author: Bertrand BRUN <bertrand0brun@gmail.com>
Date:   Thu,  7 Apr 2011 11:49:20 +0200

Ajout de l'animation

Diffstat:
M
code/html5/index.html
 | 
17
+++++++++--------
M
code/html5/pticlic.js
 | 
86
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------

2 files changed, 79 insertions(+), 24 deletions(-)
diff --git a/code/html5/index.html b/code/html5/index.html
@@ -26,20 +26,15 @@ body {
 	border-bottom: medium solid #44AA44;
 	background-color: #F0F8D0;
 }
-.relations div {
+
+.relation {
 	background-color: #F0F8D0;
 	border: thin solid #44AA44;
 	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
 	background-repeat: no-repeat;
 }
 
-.relations .rid-1 { background-image: url("img/rel/-1.png"); }
-.relations .rid0  { background-image: url("img/rel/0.png"); }
-.relations .rid5  { background-image: url("img/rel/5.png"); }
-.relations .rid7  { background-image: url("img/rel/7.png"); }
-.relations .rid9  { background-image: url("img/rel/9.png"); }
-.relations .rid10 { background-image: url("img/rel/10.png"); }
-
 .relations .hot {
 	background-color: yellow;
 }
@@ -56,6 +51,12 @@ body {
 	<div id="mc-caption" class="mc"></div>
 	<div id="mn-caption" class="mn"></div>
 	<div class="relations"></div>
+	<div id="templates" style="display: none;">
+		<div class="relation">
+			<img class="icon" alt="" src=""></img>
+			<div class="text"></div>
+		</div>
+	</div>
 </div>
 </body>
 </html>
diff --git a/code/html5/pticlic.js b/code/html5/pticlic.js
@@ -29,27 +29,64 @@ function jss() {
 		.css({zIndex: 10})
 		.fitIn("#mn-caption-block");
 	
-	$(".relations > div")
-		.css({
-			margin: 10,
-			height: 72,
-			padding: 10,
-		});
-
 	// TODO : fitFont pour ".relations div"
-	$(".relations > div:nth-child(odd)")
+/*	$(".relations > .relation:nth-child(odd)")
 		.css({
 			backgroundPosition: "2% center", // TODO : virer le pourcentage, et séparer l'icône dans un nouvel élément.
 			textAlign: "right",
-			paddingLeft: 76
-		});
+		})
+		.find(".icon").css("float", "left");
 	
-	$(".relations > div:nth-child(even)")
+	$(".relations > .relation:nth-child(even)")
 		.css({
 			backgroundPosition: "98% center", // TODO : virer le pourcentage, et séparer l'icône dans un nouvel élément.
 			textAlign: "left",
-			paddingRight: 76
+		})
+		.find(".icon").css("float", "right"); */
+
+	$(".relation > *")
+		.css({
+			display: "inline-block",
+			position: "absolute",
+			textAlign: "right"
+		});
+	
+	$(".relation")
+		.height(76)
+		.width(w);
+
+    // TODO : fitFont pour ".relations div"
+	/*  $(".relations > .relation:nth-child(odd)")
+        .css({
+            backgroundPosition: "2% center", // TODO : virer le pourcentage, et séparer l'icône dans un nouvel élément.
+            textAlign: "right",
+        })
+        .find(".icon").css("float", "left");
+
+    $(".relations > .relation:nth-child(even)")
+        .css({
+            backgroundPosition: "98% center", // TODO : virer le pourcentage, et séparer l'icône dans un nouvel élément.
+            textAlign: "left",
+        })
+        .find(".icon").css("float", "right"); */
+
+	$(".relation > *")
+		.css({
+			display: "inline-block",
+			position: "absolute"
 		});
+
+	$(".relation")
+		.height(76)
+		.width(w);
+
+	$(".relation").each(function (i,e) {
+		e = $(e);
+		e.find(".icon")
+			.west(e.west());
+		e.find(".text")
+			.east(e.east());
+	});
 	
 	$(".relations")
 		.south($("#screen").south());
@@ -58,7 +95,19 @@ function jss() {
 function animateNext(e, button) {
 	console.log(e, e.clientX, e.clientY);
 	$(button).clearQueue().qAddClass("hot").delay(100).qRemoveClass("hot");
-	$("#mn-caption").clearQueue().animate({left:e.clientX, top:e.clientY},1500);
+	var el = $("#mn-caption")
+		.clone()
+		.removeClass("mn")
+		.appendTo("#screen")
+		.clearQueue();
+	var oldOff = el.offset();
+	el.offset({left:e.pageX, top:e.pageY});
+	var pos = el.position();
+	el.offset(oldOff);
+	pos.fontSize = 0;
+	el.animate(pos,500).queue(function() {
+		el.remove();
+	});
 }
 
 
@@ -81,9 +130,14 @@ $(function () {
 		}
 		
 		$.each(game.cat, function(i, cat) {
-			$('<div/>')
-				.html(cat.name.replace(/%(m[cn])/g, '<span class="$1"/>'))
-				.addClass("rid"+cat.id)
+			$('#templates .relation')
+				.clone()
+				.find(".text")
+					.html(cat.name.replace(/%(m[cn])/g, '<span class="$1"/>'))
+				.end()
+				.find(".icon")
+					.attr("src", "img/rel/"+cat.id+".png")
+				.end()
 				.click(function(e) {
 					answers[currentWordNb++] = cat.id;
 					animateNext(e, this);