--- a/integ/iri/js/iri-buzz.js Fri May 03 16:15:55 2013 +0200
+++ b/integ/iri/js/iri-buzz.js Mon May 06 14:57:50 2013 +0200
@@ -61,7 +61,7 @@
$("body").append(xml);
function resizeTimer() {
- var w = Math.max(80, $(window).width() - 272),
+ var w = Math.max(80, $(window).width() - 158),
n = Math.min(12, Math.floor(w / 80));
$('.timer-bar').width(w);
var html = '';
@@ -81,10 +81,13 @@
var vsHeight = $(window).height() - $('footer').height() - $('header').height() - 300,
vsWidth = config.movieCount * (config.columnWidth + config.columnSpacing);
- $("#data-viz").css('height', vsHeight);
+ $("#data-viz").css({
+ height: vsHeight,
+ width: vsWidth
+ });
$('.posters').css('width', vsWidth);
- var timeAtPause = 0, paused = true;
+ var timeAtPause = 0, paused = true, timeStart;
function currentVizTime() {
if (paused) {
@@ -106,9 +109,9 @@
if (!paused) {
return;
}
- timeStart = new Date().valueOf() - timeAtPause;
+ timeStart = Date.now() - timeAtPause;
paused = false;
- $(".play-pause").removeClass("play").addClass("pause").text("Pause");
+ $(".play-pause").removeClass("play").addClass("pause").attr("title", "Pause");
}
function pause() {
@@ -117,7 +120,7 @@
}
timeAtPause = currentVizTime();
paused = true;
- $(".play-pause").removeClass("pause").addClass("play").text("Lecture");
+ $(".play-pause").removeClass("pause").addClass("play").attr("title", "Lecture");
}
$(".play-pause").click(function() {
@@ -128,8 +131,46 @@
}
});
+ function agoify(timestamp) {
+ var h = "Il y a ",
+ deltaT = Date.now() - timestamp,
+ deltaH = Math.round(deltaT / HOURS);
+ if (deltaH) {
+ h += deltaH + " heure";
+ if (deltaH > 1) {
+ h += "s";
+ }
+ } else {
+ var deltaM = Math.round(deltaT / MINUTES);
+ h += deltaM + " minute";
+ if (deltaM > 1) {
+ h += "s";
+ }
+ }
+ return h;
+ }
+
+ var opinionTemplate = _.template(
+ '<div class="comment-content clearfix action-<%- actiontype %>">'
+ + '<div class="avatar"><img src="<%- avatar %>" alt="Avatar" /></div>'
+ + '<div class="comment-right">'
+ + '<div class="comment-metadata">'
+ + '<span class="username"><%- username %> </span>'
+ + ' <span class="date"> <%- ago %></span>'
+ + '<ul class="stars-rating rate-<%- ratevalue %>">'
+ + '<li></li><li></li><li></li><li></li><li></li>'
+ + '</ul>'
+ + '</div>'
+ + '<p class="review-content"><%- content %></p>'
+ + '</div>'
+ + '</div>'
+ + '<div class="comment-arrow"></div>'
+ );
+
function startViz() {
+ var barChart = undefined;
+
timeAtPause = 0;
opinions.sort(function(a,b) {
@@ -219,28 +260,14 @@
function onTokenMouseover(token) {
if (token !== lastShownToken) {
$("body").css("cursor", "pointer");
- var h = "Il y a ",
- deltaT = Date.now() - token.attr("timestamp"),
- deltaH = Math.round(deltaT / HOURS);
- if (deltaH) {
- h += deltaH + " heure";
- if (deltaH > 1) {
- h += "s";
- }
- } else {
- var deltaM = Math.round(deltaT / MINUTES);
- h += deltaM + " minute";
- if (deltaM > 1) {
- h += "s";
- }
- }
- commentDiv.find(".comment-content").removeClass("userreview wanttosee rate").addClass(token.attr("actiontype"));
- commentDiv.find(".stars-rating").attr("className","stars-rating rate-"+token.attr("actionvalue"));
- commentDiv.find(".review-content").text(token.attr("content"));
- commentDiv.find(".date").text(h);
- commentDiv.find(".avatar img").attr("src", token.attr("avatar"));
- commentDiv.find(".username").text(token.attr("username"));
- commentDiv.show();
+ commentDiv.html(opinionTemplate({
+ actiontype: token.attr("actiontype"),
+ avatar: token.attr("avatar"),
+ username: token.attr("username"),
+ ago: agoify(token.attr("timestamp")),
+ ratevalue: token.attr("actionvalue"),
+ content: token.attr("content")
+ })).show();
lastShownToken = token;
}
}
@@ -260,7 +287,7 @@
var barChart = $("#data-viz").vs(barChartSettings).data('visualSedimentation');
barChart.world.SetGravity(new barChart.phy.b2Vec2(0,10 * config.fallSpeed));
-
+
$(".timer-bar-value").width(0);
play();
@@ -277,31 +304,27 @@
var vizT = currentVizTime();
- var originalT = vizTimeToOriginalTime(vizT),
- tokensToAdd = opinions.filter(function(o) {
- return o._timestamp > lastTimestamp && o._timestamp <= originalT
+ var tokensToAdd = opinions.filter(function(o) {
+ return o._viztime > lastTimestamp && o._viztime <= vizT
});
- lastTimestamp = originalT;
+ lastTimestamp = vizT;
tokensToAdd.forEach(function(opinion) {
barChart.addToken({
category: opinion._column,
datetime: opinion.datetime,
timestamp: opinion._timestamp,
- viztime: originalTimeToVizTime(opinion._timestamp),
+ viztime: opinion._viztime,
movie: opinion._movie,
colorId: opinion._colorId,
fillStyle: config.colors[opinion._colorId],
- avatar: (typeof opinion.actor.user.avatar === "undefined" ? "http://fr.web.img6.acsta.net/r_50_x/commons/emptymedia/AvatarAllocineMr.gif" : resizeAcPicture( opinion.actor.user.avatar, 50, "x" )),
+ avatar: opinion._avatar,
username: opinion.actor.user.userName,
actiontype: opinion.action.type,
actionvalue: opinion.action.value,
- content: ( opinion.action.type === "userreview" ? opinion.content.$ : (opinion.action.type === "wanttosee" ? "veut voir ce film." : "" ) ).replace(/[\n\r\s]+/mg,' ').replace(/(^.{320,340})[\s].+$/,'$1…'),
- size: 30,
- texture: {
- src: "iri/img/logo-iri.png"
- },
+ content: opinion._content.replace(/(^.{320,340})[\s].+$/,'$1…'),
+ //size: 30,
strokeStyle: config.borderColors[opinion._colorId],
shape:{
type:'box',
@@ -358,8 +381,11 @@
tokens.forEach(function(a) {
a._colorId = config.colorIds[a.action.value];
a._timestamp = Date.parse(a.datetime + tzSuffix) - tzDelta;
+ a._viztime = originalTimeToVizTime(a._timestamp);
a._movie = movie.id;
a._column = movie.column;
+ a._avatar = ((typeof a.actor.user.avatar === "undefined" || /https?:\/\/graph\.facebook\.com/.test(a.actor.user.avatar.href)) ? "http://fr.web.img6.acsta.net/r_50_x/commons/emptymedia/AvatarAllocineMr.gif" : resizeAcPicture( a.actor.user.avatar, 50, "x" ));
+ a._content = ( a.action.type === "userreview" ? a.content.$ : (a.action.type === "wanttosee" ? "veut voir ce film." : "" ) ).replace(/[\n\r\s]+/mg,' ');
});
var tokcount = tokens.length;
tokens = tokens.filter(function(a) {
@@ -439,10 +465,12 @@
});
moviesToLoad = movies.length;
movies.forEach(loadMovie);
- $('.posters').html(movies.map(function(movie) {
+ $('.posters').html(movies.map(function(movie, i) {
return '<li class="poster" style=" margin: 0 '
+ Math.floor(config.columnSpacing / 2)
- + 'px"><img width="150" height="200" src="'
+ + 'px" data-movie-index="'
+ + i
+ + '"><img width="150" height="200" src="'
+ resizeAcPicture(movie.poster,150,200)
+ '" alt="'
+ movie.title
@@ -452,6 +480,41 @@
}).join(""));
$(".poster")
+ .click(function() {
+ $("#comment-modal").modal({
+ containerCss: {
+ height: $(window).height()-200,
+ width: Math.min($(window).width()-200, 640)
+ },
+ overlayClose: true
+ });
+ var vizT = currentVizTime(),
+ movie = movies[$(this).attr("data-movie-index")],
+ opsToShow = movie.opinions.filter(function(o) {
+ return o._viztime <= vizT;
+ });
+ $(".comment-count").text(opsToShow.length);
+ $(".comment-subject").text(movie.title);
+ $(".comment-start").text(new Date(originalStart).toTimeString().substr(0,5));
+ $(".comment-end").text(new Date(vizTimeToOriginalTime(vizT)).toTimeString().substr(0,5));
+ $(".comment-list").html(opsToShow.map(function(o) {
+ return opinionTemplate({
+ actiontype: o.action.type,
+ avatar: o._avatar,
+ username: o.actor.user.userName,
+ ago: agoify(o._timestamp),
+ ratevalue: o.action.value,
+ content: o._content
+ });
+ }).join(""))
+ .mCustomScrollbar({
+ autoDraggerLength:false,
+ scrollButtons:{
+ enable:false
+ }
+ });
+ return false;
+ })
.each(function(i) {
movies[i].poster$ = $(this);
});