--- a/tweetcast/nodejs-bis/client/css/style.css Mon Nov 21 11:46:37 2011 +0100
+++ b/tweetcast/nodejs-bis/client/css/style.css Tue Nov 22 13:25:43 2011 +0100
@@ -22,22 +22,68 @@
}
body {
- font-family: Helvetica, Arial, sans-serif;
+ font-family: Helvetica, Arial, sans-serif; background-color: #F7F6F6; background-image: url("../img/bgd.jpg"); background-repeat: repeat-x;
}
#container {
- margin: 20px;
+ width: 960px; margin: 0 auto;
+}
+
+#colgauche {
+ float: left; width: 455px; margin-right: 13px;
+}
+
+.barre {
+ float: left; width: 100%;
+}
+
+/* Menu */
+
+#headlogo {
+ float: left; margin-right: 10px;
}
-/* Barre */
-.barre {
- float: left; width: 100%;
+.menu {
+ border-left: 1px solid #C3C3C3;
+ float: left;
+ list-style: none;
+ font-size: 12px;
+ height: 62px; overflow: hidden;
+}
+
+.menu li {
+ background: url("../img/menu_underline.gif") left bottom no-repeat;
+ padding: 3px 0 0 5px;
+ height: 18px;
+ min-width: 80px;
+}
+
+.menu a {
+ color: #000000; text-decoration: none;
+}
+
+.menu a:hover {
+ color: #0099FF;
+}
+
+/* Formulaire */
+
+#twwWrap {
+ float: left; width: 450px; background: #ffffff; padding: 1px; border-width: 1px; border-style: solid solid none solid; border-color: #ababab; margin-top: 6px;
+}
+
+#tweetWriter {
+ width: 430px; padding: 10px; background: #efefef;
}
/* Liste de Tweets */
+#tweetviz {
+ float: left; width: 452px; border: 1px solid #999;
+}
+
#tweetlist {
- float: left; width: 280px; height: 450px; list-style: none; border: 1px solid #999; color: #585858; cursor: pointer; cursor: hand;
+ float: left; width: 280px; height: 450px; list-style: none; border-right: 1px solid #999; color: #585858; cursor: pointer; cursor: hand;
}
li.tweet, li.placeholder {
@@ -119,17 +165,15 @@
/* timeline */
#timeline {
- float: left; height: 450px; width: 150px; border-width: 1px; border-style: solid solid solid none; border-color: #999; cursor: pointer; cursor: hand;
+ float: left; height: 450px; width: 150px; border-right: 1px solid #999; cursor: pointer; cursor: hand;
}
-
-
#scrollcont {
- float: left; width: 20px; height: 452px; overflow: auto;
+ float: left; width: 20px; height: 450px; overflow: auto;
}
#scrollin {
- width: 1px; height: 10000px;
+ width: 1px; height: 8000px;
}
/* hovertweet */
@@ -146,8 +190,43 @@
position: absolute; width: 10px; height: 18px; left: -9px; top: 13px; background: url(../img/arrow.png);
}
-/* Tag Cloud */
+/* Colonne de droite */
+
+#coldroite {
+ float: left; width: 492px;
+}
+
+#vlWrap {
+ float: left; border: 5px solid #ffffff; background: #999999; padding: 1px; margin-top: 20px;
+}
+
+#videoLivePlayer {
+ width: 480px; height: 320px; background: #000000;
+}
+
+#out_fleche {
+ float: left; position: relative; width: 492px; height: 14px; background: url(../img/bgnoarrow.png);
+}
+
+#in_fleche {
+ position: absolute; left: 10px; width: 27px; height: 15px; background: url(../img/arrowtop.png);
+}
+
+#accordeon {
+ float: left; width: 492px; list-style: none; background: #777777;
+}
+
+#accordeon li {
+ float: left; width: 480px; margin: 0 1px 1px 1px; padding: 4px; border: 1px solid #ffffff; background: #efefef;
+}
+
+#accordeon li.deplie {
+ background: url(../img/bgdeplie.png) top repeat-x #efefef;
+}
+
+/* Tag Cloud
#motscles {
float: left; width: 400px; height: 100px; text-align: center; border: 1px solid #999; margin: 0 20px;
}
+*/
\ No newline at end of file
--- a/tweetcast/nodejs-bis/client/js/script.js Mon Nov 21 11:46:37 2011 +0100
+++ b/tweetcast/nodejs-bis/client/js/script.js Tue Nov 22 13:25:43 2011 +0100
@@ -27,13 +27,15 @@
tlBuffer = '',
relHover = [],
wheelDelta = 0,
+ scrollEnabled = false,
+ scrollExtent = 8000 - 452,
+ lastScrollPos = 0,
rx_url = /https?:\/\/[0-9a-zA-Z\.%\/-_]+/g,
rx_word = /[^ \.&;,'"!\?\d\(\)\+\[\]\\\…\-«»:\/]{3,}/g,
stop_list = [ 'and', 'avec', 'aux', 'car', 'comme', 'dans', 'donc', 'des', 'elle', 'est', 'être', 'eux', 'ils', 'les', 'leur', 'leurs', 'mes', 'mon', 'tes', 'ton', 'notre', 'nos', 'nous', 'ont', 'pas', 'que', 'qui', 'sont', 'the', 'une', 'votre', 'vos', 'vous' ];
function getColor(annotation, lum) {
-// console.log(annotations[annotation].h, annotations[annotation].s, lum, Raphael.hsl(annotations[annotation].h, annotations[annotation].s, lum))
- return Raphael.hsl(annotations[annotation].colors.h, annotations[annotation].colors.s, lum);
+ return Raphael.hsl2rgb(annotations[annotation].colors.h, annotations[annotation].colors.s, lum);
}
function arc(source, target) {
@@ -260,7 +262,7 @@
if (tweet.annotations.length) {
html += '<div class="annotations">';
for (var i in tweet.annotations) {
- html += '<div class="annotation" style="width:' + (100/tweet.annotations.length) + '%; background:' + getColor(tweet.annotations[i], (className == 'icons' ? .4 : .8)) + '"></div>';
+ html += '<div class="annotation" style="width:' + (100/tweet.annotations.length) + '%; background:' + getColor(tweet.annotations[i], (className == 'icons' ? .4 : .8)).hex + '"></div>';
}
html += '</div>';
}
@@ -436,6 +438,7 @@
}
function updateDisplay() {
+
var p = twCx.position,
l = twCx.tweets.length,
lines = 0,
@@ -444,18 +447,8 @@
tweetsOnDisplay = [],
localWords = {};
- if (p == 0) {
- $("#downbutton").addClass("inactive");
- } else {
- $("#downbutton").removeClass("inactive");
- }
-
- if (p == l-1) {
- $("#upbutton").addClass("inactive");
- } else {
- $("#upbutton").removeClass("inactive");
- }
-
+ lastScrollPos = Math.floor( scrollExtent * ( 1 - ( p / twCx.tweets.length ) ) );
+ $("#scrollcont").scrollTop(lastScrollPos);
function pushTweet(tp, className) {
if (tp < l && tp >= 0) {
@@ -557,8 +550,13 @@
maxann = tab[j].annotations[k];
}
}
- var coul = (ann == "default" ? '' : ' background: ' + getColor(ann, 1 - .4 * ( tab[j].annotations[ann] / tab[j].freq ) ) + ';"'),
- fontsize = Math.floor( ( 12 + Math.sqrt( tab[j].score - minfreq ) * echfreq ) );
+ if (ann == "default") {
+ var coul = '';
+ } else {
+ var c = getColor(ann, .4),
+ coul = "background: rgba(" + [ Math.floor(c.r), Math.floor(c.g), Math.floor(c.b), ( tab[j].annotations[ann] / tab[j].freq )].join(',') + ")";
+ }
+ var fontsize = Math.floor( ( 12 + Math.sqrt( tab[j].score - minfreq ) * echfreq ) );
html += '<span style="padding: 2px; line-height: ' + (8 + fontsize) + 'px; font-size: ' + fontsize + 'px;' + coul + '">' + tab[j].word + '</span> ';
}
$("#motscles").html(html);
@@ -630,7 +628,7 @@
var l = twCx.tlOnDisplay[i].displayData[j].length;
if (l > 0) {
tlPaper.rect( twCx.deltaX + n * twCx.scaleX, posY, l * twCx.scaleX, twCx.scaleY )
- .attr({"stroke" : "none", "fill" : getColor(j, .4) });
+ .attr({"stroke" : "none", "fill" : getColor(j, .4).hex });
n += l;
}
}
@@ -770,9 +768,13 @@
twCx.tlMouseClicked = false;
twCx.tlMouseMoved = false;
});
- $("#scrollcont").scroll(function(evt) {
- var p = Math.floor( twCx.tweets.length * ( 1 - $(this).scrollTop() / 9548 ) );
- goToPos(p);
- })
+ setInterval(function() {
+ var sc = $("#scrollcont");
+ if (sc.scrollTop() != lastScrollPos) {
+ var p = Math.floor( twCx.tweets.length * ( 1 - sc.scrollTop() / scrollExtent ) );
+ goToPos(p);
+ }
+
+ }, 100)
});
