Merge branch 'html5' of 2011-m1s2-ter into html5

code/html5/my-extensions.js

@@ -1,9 +1,10 @@
 $.fn.fitFont = function(w, h, minFont, maxFont) {
 	minFont = minFont || 0;
 	maxFont = maxFont || Infinity;
-	e = $(this)
+	e = $(this);
 	var oldpos = e.css("position");
 	e.css("position", "absolute");
+	// TODO : reset temporairement le max-width.
 	var size = parseInt(e.css("font-size"), 10);
 	
 	var i = 0;
@@ -33,3 +34,72 @@ $.fn.fitFont = function(w, h, minFont, maxFont) {
 	e.css("position", oldpos);
 	return e;
 }
+
+$.fn.fitIn = function(e, t, r, b, l) {
+	e = $(e);
+	if (isNaN(+t)) t = 0;
+	if (isNaN(+r)) r = t;
+	if (isNaN(+b)) b = t;
+	if (isNaN(+l)) l = r;
+	var w = e.width();
+	var h = e.height();
+	t *= h;
+	r *= w;
+	b *= h;
+	l *= w;
+	$(this).fitFont(w - r - l, h - t - b, 20).center(e.center());
+}
+
+function queueize(method) {
+	return function() {
+		var that = $(this);
+		var args = arguments;
+		return that.queue(function(next) {
+			that[method].apply(that,args);
+			next();
+		});
+	};
+}
+
+$.fn.qAddClass = queueize("addClass");
+$.fn.qRemoveClass = queueize("removeClass");
+
+$.fn.wh = function(w, h) {
+	return $(this).width(w).height(h);
+}
+
+$.fn.relativePos = function(xAnchor, yAnchor, to) {
+	var that = $(this);
+	var deltaX = that.outerWidth()  * xAnchor;
+	var deltaY = that.outerHeight() * yAnchor;
+
+	if (to) {
+		that.css("position", "absolute");
+		that.offset({
+			left: to.left - deltaX,
+			top:  to.top  - deltaY
+		});
+		return that;
+	} else {
+		var pos = that.offset();
+		pos.left += deltaX;
+		pos.top  += deltaY;
+		return pos;
+	}
+};
+
+$.each({
+	center:    {x:0.5, y:0.5},
+	north:     {x:0.5, y:0},
+	northEast: {x:1,   y:0},
+	east:      {x:1,   y:0.5},
+	southEast: {x:1,   y:1},
+	south:     {x:0.5, y:1},
+	southWest: {x:0,   y:1},
+	west:      {x:0,   y:0.5},
+	northWest: {x:0,   y:0},
+}, function(i,e) {
+	var x = e.x;
+	var y = e.y;
+	$.fn[i] = function(to) { return $(this).relativePos(x, y, to); };
+});

code/html5/pticlic.js

@@ -2,7 +2,7 @@ function jss() {
 	var w=480, h=800;
 	var mch = h/8, mnh = h*0.075;
 	
-	$("body")
+	$("body, html")
 		.css({
 			padding: 0,
 			margin: 0,
@@ -10,44 +10,24 @@ function jss() {
 		});
 	
 	$("#screen")
-		.width(w)
-		.height(h)
-		.position({my:"center center", at:"center center", of:"body", collision:"none"});
+		.wh(w, h)
+		.north($("body").north()); // TODO : par rapport à la fenêtre entière.0
 	
 	$("#mc-caption-block")
-		.css({
-			position: "absolute"
-		})
-		.width(w)
-		.height(mch)
-		.position({my:"center top", at:"center top", of:"#screen", collision:"none"});
+		.wh(w, mch)
+		.north($("#screen").north());
 	
 	$("#mc-caption")
-		.css({
-			maxWidth: w*0.9,
-			textAlign: "center",
-			position: "absolute"
-		})
-		.fitFont(w*0.9, mch*0.9, 20)
-		.position({my:"center center", at:"center center", of:"#mc-caption-block", collision:"none"});
+		.fitIn("#mc-caption-block", 0.1);
 	
 	$("#mn-caption-block")
-		.css({
-			borderWidth: h/100,
-			position: "absolute"
-		})
-		.width(w)
-		.height(mnh)
-		.position({my:"center top", at:"center bottom", of:"#mc-caption-block", collision:"none"});
+		.css({borderWidth: h/100})
+		.wh(w, mnh)
+		.north($("#mc-caption-block").south());
 	
 	$("#mn-caption")
-		.css({
-			maxWidth: w*0.9,
-			textAlign: "center",
-			position: "absolute"
-		})
-		.fitFont(w*0.9, mnh*0.9, 20)
-		.position({my:"center center", at:"center center", of:"#mn-caption-block", collision:"none"});
+		.css({zIndex: 10})
+		.fitIn("#mn-caption-block");
 	
 	$(".relations > div")
 		.css({
@@ -72,7 +52,13 @@ function jss() {
 		});
 	
 	$(".relations")
-		.position({my:"center bottom", at:"center bottom", of:"#screen", offset:"0 -10", collision:"none"});
+		.south($("#screen").south());
+}
+
+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);
 }
 
 
@@ -98,9 +84,9 @@ $(function () {
 			$('<div/>')
 				.html(cat.name.replace(/%(m[cn])/g, '<span class="$1"/>'))
 				.addClass("rid"+cat.id)
-				.click(function() {
+				.click(function(e) {
 					answers[currentWordNb++] = cat.id;
-					$(this).addClass("hot")//.delay(500).removeClass("hot"); // TODO: just blink.
+					animateNext(e, this);
 					refresh();
 				})
 				.appendTo(".relations");