www

commit 4bc59ed81c5b949d1594455444ad76e7eb1bc2af
parent d07d3b03c935e4aa0c54d4b032c5d989af86e513
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date:   Wed,  6 Apr 2011 11:53:56 +0200

Refactor du jss.

Diffstat:
M
code/html5/my-extensions.js
 | 
54
++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
code/html5/pticlic.js
 | 
40
++++++++++++++++++++--------------------

2 files changed, 74 insertions(+), 20 deletions(-)
diff --git a/code/html5/my-extensions.js b/code/html5/my-extensions.js
@@ -33,3 +33,57 @@ $.fn.fitFont = function(w, h, minFont, maxFont) {
 	e.css("position", oldpos);
 	return e;
 }
+
+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.width()  * xAnchor;
+	var deltaY = that.height() * 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); };
+});
diff --git a/code/html5/pticlic.js b/code/html5/pticlic.js
@@ -10,44 +10,38 @@ 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"
+			textAlign: "center"
 		})
 		.fitFont(w*0.9, mch*0.9, 20)
-		.position({my:"center center", at:"center center", of:"#mc-caption-block", collision:"none"});
+		.center($("#mc-caption-block").center());
 	
 	$("#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"});
+		.wh(w, mnh)
+		.north($("#mc-caption-block").south());
 	
 	$("#mn-caption")
 		.css({
 			maxWidth: w*0.9,
 			textAlign: "center",
-			position: "absolute"
+			position: "absolute",
+			zIndex: 10
 		})
 		.fitFont(w*0.9, mnh*0.9, 20)
-		.position({my:"center center", at:"center center", of:"#mn-caption-block", collision:"none"});
+		.center($("#mn-caption-block").center());
 	
 	$(".relations > div")
 		.css({
@@ -72,7 +66,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).qAddClass("hot").delay(100).qRemoveClass("hot");
+	$("#mn-caption").animate({left:e.clientX, top:e.clientY},1500);
 }
 
 
@@ -98,9 +98,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");