--- a/integ/iri-buzz.html Fri May 03 16:15:55 2013 +0200
+++ b/integ/iri-buzz.html Mon May 06 14:57:50 2013 +0200
@@ -49,7 +49,7 @@
<!-- /connect -->
</header>
- <div >
+ <div>
<section class="central">
<div class="wrap-buzz">
@@ -63,16 +63,18 @@
</ul>
</div>
</div>
- <a href="#" class="control-button play-pause pause">Pause</a>
- <a href="#" class="control-button restart">Rejouer</a>
+ <a href="#" class="control-button restart" title="Rejouer">
+ <i></i>
+ </a>
+ <a href="#" class="control-button play-pause pause" title="Pause">
+ <i></i>
+ </a>
</div>
</div>
<div id="data-viz">Chargement de la liste de films</div>
<ul class="posters clearfix"></ul>
-
-
</div>
</section>
@@ -94,38 +96,34 @@
</footer>
<div id="comment">
- <div class="comment-content clearfix rate">
- <div class="avatar"><img src="" alt="Avatar" /></div>
- <div class="comment-right">
- <div class="comment-metadata">
- <span class="username">{{auteur}}</span>
- <span class="date">{{Date}}</span>
- <ul class="stars-rating rate-5.0">
- <li></li><li></li><li></li><li></li><li></li>
- </ul>
- </div>
- <p class="review-content">veut voir ce film.</p>
- </div>
- </div>
- <div class="comment-arrow"></div>
+
+ </div>
+
+ <div id="comment-modal">
+ <h3>
+ <span class="comment-count">n</span>
+ opinions sur
+ « <span class="comment-subject">Titre du Film</span> »
+ de
+ <span class="comment-start">00:00</span>
+ à
+ <span class="comment-end">00:00</span>
+ </h3>
+ <div class="comment-list"></div>
</div>
<script src="js/libs/jquery-1.7.1.min.js"></script>
+
+<script src="renkan/lib/underscore-min.js"></script>
+<script src="js/vs/_VisualSedimentation.js"></script>
+
<script src="js/libs/jquery-ui-1.8.21.custom.min.js"></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
-<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
-<!-- mousewheel plugin -->
<script src="js/jquery.mousewheel.min.js"></script>
<!-- custom scrollbars plugin -->
<script src="js/jquery.mCustomScrollbar.js"></script>
-
-<script type="text/javascript" src="js/script.js"></script>
-
-<script src="renkan/lib/underscore-min.js"></script>
-<script src="js/vs/_VisualSedimentation.js"></script>
-
<script src="iri/js/iri-buzz.js"></script>
</body>
--- a/integ/iri/css/iri-buzz.css Fri May 03 16:15:55 2013 +0200
+++ b/integ/iri/css/iri-buzz.css Mon May 06 14:57:50 2013 +0200
@@ -40,6 +40,7 @@
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
color: #919191;
font-size: 12px;
+ font-weight: bold;
}
.hours li:before {
content: "";
@@ -53,13 +54,10 @@
.control-button {
float: left;
- margin-left: 10px;
- width: 92px;
- height: 32px;
+ margin-left: 12px;
+ height: 17px;
+ padding: 8px 9px;
display: inline-block;
- text-align: center;
- text-transform: uppercase;
- line-height: 32px;
font-size: 11px;
font-weight: bold;
text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
@@ -71,47 +69,10 @@
border-radius: 4px;
}
-.play {
- background: #15c42f;
- background: -moz-linear-gradient(top, #15c42f 0%, #0daa27 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#15c42f), color-stop(100%,#0daa27));
- background: -webkit-linear-gradient(top, #15c42f 0%,#0daa27 100%);
- background: -o-linear-gradient(top, #15c42f 0%,#0daa27 100%);
- background: -ms-linear-gradient(top, #15c42f 0%,#0daa27 100%);
- background: linear-gradient(to bottom, #15c42f 0%,#0daa27 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#15c42f', endColorstr='#0daa27',GradientType=0 );
-}
-.play:hover {
- background: #0daa27;
- background: -moz-linear-gradient(top, #0daa27 0%, #15c42f 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0daa27), color-stop(100%,#15c42f));
- background: -webkit-linear-gradient(top, #0daa27 0%,#15c42f 100%);
- background: -o-linear-gradient(top, #0daa27 0%,#15c42f 100%);
- background: -ms-linear-gradient(top, #0daa27 0%,#15c42f 100%);
- background: linear-gradient(to bottom, #0daa27 0%,#15c42f 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0daa27', endColorstr='#15c42f',GradientType=0 );
+.control-button i {
+ display: inline-block; width: 16px; height: 17px; background: url(../img/buzz-play-sprite.png);
}
-.pause {
- background: #e21829;
- background: -moz-linear-gradient(top, #e21829 0%, #c60f1f 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e21829), color-stop(100%,#c60f1f));
- background: -webkit-linear-gradient(top, #e21829 0%,#c60f1f 100%);
- background: -o-linear-gradient(top, #e21829 0%,#c60f1f 100%);
- background: -ms-linear-gradient(top, #e21829 0%,#c60f1f 100%);
- background: linear-gradient(to bottom, #e21829 0%,#c60f1f 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e21829', endColorstr='#c60f1f',GradientType=0 );
-}
-.pause:hover {
- background: #c60f1f;
- background: -moz-linear-gradient(top, #c60f1f 0%, #e21829 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c60f1f), color-stop(100%,#e21829));
- background: -webkit-linear-gradient(top, #c60f1f 0%,#e21829 100%);
- background: -o-linear-gradient(top, #c60f1f 0%,#e21829 100%);
- background: -ms-linear-gradient(top, #c60f1f 0%,#e21829 100%);
- background: linear-gradient(to bottom, #c60f1f 0%,#e21829 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c60f1f', endColorstr='#e21829',GradientType=0 );
-}
-.restart {
+.play-pause {
background: #1899e1;
background: -moz-linear-gradient(top, #1899e1 0%, #126ae3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1899e1), color-stop(100%,#126ae3));
@@ -121,7 +82,7 @@
background: linear-gradient(to bottom, #1899e1 0%,#126ae3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1899e1', endColorstr='#126ae3',GradientType=0 );
}
-.restart:hover {
+.play-pause:hover {
background: #126ae3;
background: -moz-linear-gradient(top, #126ae3 0%, #1899e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#126ae3), color-stop(100%,#1899e1));
@@ -131,6 +92,33 @@
background: linear-gradient(to bottom, #126ae3 0%,#1899e1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#126ae3', endColorstr='#1899e1',GradientType=0 );
}
+.restart{
+ background: #7a7a7a;
+ background: -moz-linear-gradient(top, #7a7a7a 0%, #555555 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a7a7a), color-stop(100%,#555555));
+ background: -webkit-linear-gradient(top, #7a7a7a 0%,#555555 100%);
+ background: -o-linear-gradient(top, #7a7a7a 0%,#555555 100%);
+ background: -ms-linear-gradient(top, #7a7a7a 0%,#555555 100%);
+ background: linear-gradient(to bottom, #7a7a7a 0%,#555555 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#555555',GradientType=0 );
+}
+.restart:hover{
+ background: #555555;
+ background: -moz-linear-gradient(top, #555555 0%, #7a7a7a 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#7a7a7a));
+ background: -webkit-linear-gradient(top, #555555 0%,#7a7a7a 100%);
+ background: -o-linear-gradient(top, #555555 0%,#7a7a7a 100%);
+ background: -ms-linear-gradient(top, #555555 0%,#7a7a7a 100%);
+ background: linear-gradient(to bottom, #555555 0%,#7a7a7a 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#7a7a7a',GradientType=0 ); /* IE6-9 */
+}
+
+.pause i {
+ background-position: -16px 0;
+}
+.play i {
+ background-position: -32px 0;
+}
.poster {
float: left;
@@ -186,22 +174,22 @@
position: absolute;
display: none;
}
-.comment-content {
+#comment .comment-content {
-webkit-border-radius: 6px;
border-radius: 6px;
border: 2px solid #323232;
width: 470px;
background-color: rgba(0,0,0,.9);
- padding-top: 12px;
+ padding: 12px 0;
position: absolute;
left: -235px;
top: 8px;
z-index: 1;
}
-.left .comment-content {
+#comment.left .comment-content {
left: -30px;
}
-.right .comment-content {
+#comment.right .comment-content {
left: -439px;
}
.comment-content .date {
@@ -214,40 +202,39 @@
font-weight: bold;
}
.comment-content .avatar {
- margin-left: 10px;
+ width: 52px;
+ margin: 4px 9px;
float: left;
- border: 1px solid #a4a3a8;
overflow: hidden;
}
.comment-content .avatar img {
max-width: 50px;
max-height: 50px;
+ border: 1px solid #a4a3a8;
margin: 0 auto; display: block;
}
.comment-right {
- padding-bottom: 12px;
- width: 380px;
- padding-right: 15px;
+ margin-left: 70px;
+ margin-right: 15px;
+}
+.action-userreview .stars-rating {
float: right;
}
-.userreview .stars-rating {
- float: right;
-}
-.userreview .stars-rating li {
+.action-userreview .stars-rating li {
margin-right: 2px;
background: url(../img/review-rating-star-sprite.png) top left no-repeat;
width: 19px;
height: 16px;
display: inline-block;
}
-.rate .stars-rating li {
+.action-rate .stars-rating li {
margin-right: 3px;
background: url(../img/rating-stars-large.png) top left no-repeat;
width: 21px;
height: 21px;
display: inline-block;
}
-.wanttosee .stars-rating {
+.action-wanttosee .stars-rating {
display: none;
}
.stars-rating li:last-child {
@@ -275,18 +262,17 @@
}
.review-content {
- clear: both;
color: #ededed;
font-size: 13px;
margin: 8px 0 4px;
}
-.wanttosee .review-content {
+.action-wanttosee .review-content {
line-height: 19px; height: 19px; padding-left: 30px;
background: url(../img/wanttosee.png) left no-repeat;
}
-.comment-arrow {
+#comment .comment-arrow {
top: 0;
left: -5px;
display: block;
@@ -297,3 +283,11 @@
z-index: 2;
}
+.comment-list .comment-arrow {
+ margin: 2px 10px 4px; height: 1px; background-color: #171717; border-bottom: 1px solid #313131;
+}
+
+.comment-list {
+ position: absolute; top: 45px; left: 0; right: 0; bottom: 0;
+ overflow: auto;
+}
Binary file integ/iri/img/buzz-play-sprite.png has changed
Binary file integ/iri/img/buzz-sprite.png has changed
--- 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);
});
