Merge branch 'html5' of 2011-m1s2-ter into html5
This commit is contained in:
commit
037add6744
|
@ -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); };
|
||||
});
|
||||
|
|
|
@ -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");
|
||||
|
|
Loading…
Reference in New Issue
Block a user