diff -r 863871f4c44c -r d49991fe4892 tweetcast/nodejs-bis/client/js/script.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/tweetcast/nodejs-bis/client/js/script.js Thu Nov 10 17:54:37 2011 +0100 @@ -0,0 +1,589 @@ +/** + * @author raph + */ + +var socket, + tlPaper, + twCx = { + zoomLevel : 1, + followLast : true, + position : 0, + date_levels : [ + 15 * 60 * 1000, + 5 * 60 * 1000, + 60 * 1000, + 15 * 1000 + ], + timeLevel : 2, + deltaX : 30, + tlWidth : 98, + tlHeight : 450, + globalWords : {} + }, + tlBuffer = '', + relHover = null, + wheelDelta = 0, + rx_word = /[^ \.&;,'"!\?@#\d\(\)\+\[\]\\\…\-«»:\/]{3,}/g; + +function arc(source, target) { + var x3 = .3 * target.y - .3 * source.y + .8 * source.x + .2 * target.x; + var y3 = .8 * source.y + .2 * target.y - .3 * target.x + .3 * source.x; + var x4 = .3 * target.y - .3 * source.y + .2 * source.x + .8 * target.x; + var y4 = .2 * source.y + .8 * target.y - .3 * target.x + .3 * source.x; + return "M" + source.x + " " + source.y + "C" + [x3, y3, x4, y4, target.x, target.y].join(" "); +} + +function countWords(text, wordobj) { + var tab = text.match(rx_word); + for (var i in tab) { + var word = tab[i].toLowerCase(); + if (wordobj[word]) { + wordobj[word]++; + } else { + wordobj[word] = 1; + } + } +} + +function addTweet(tweet) { + function backRef(source_id, target_id, type) { + var target = tweetById(target_id); + if (target) { + var brobj = { + "referenced_by_id" : source_id, + "type" : type + } + if (target.backRefs) { + target.backRefs.push(brobj); + } else { + target.backRefs = [ brobj ] + } + } + } + + var tab = tweet.text.split(/\&\#|\;/), + txt = ''; + for (i = 0; i < tab.length; i++) { + txt += (i % 2 && parseInt(tab[i]) != NaN) ? String.fromCharCode(tab[i]) : tab[i]; + } + tweet.text = txt; + + twCx.tweets.push(tweet); + twCx.idIndex.push(tweet.id); + + if (tweet.in_reply_to_status_id) { + backRef( tweet.id, tweet.in_reply_to_status_id, "reply" ); + } + if (tweet.retweeted_status) { + backRef( tweet.id, tweet.retweeted_status.id, "retweet" ); + } + + countWords(tweet.text, twCx.globalWords); + + var creadate = new Date(tweet.created_at).valueOf(); + if (!twCx.timeline.length) { + twCx.timeline = [ populateDateStruct(0, twCx.date_levels[0] * parseInt(creadate / twCx.date_levels[0])) ] + } + while (creadate > twCx.timeline[twCx.timeline.length - 1].end) { + twCx.timeline.push( populateDateStruct(0, twCx.timeline[twCx.timeline.length - 1].end) ); + } + insertIntoDateStruct(twCx.timeline, tweet); +} + +function getSliceContent(slice) { + if (slice.slices) { + var result = []; + for (var i in slice.slices) { + result = result.concat(getSliceContent(slice.slices[i])); + } + } else { + var result = slice.tweets; + } + return result; +} + +function flattenDateStruct(slices, target_level) { + var current_level = slices[0].level, + result = []; + if (current_level < target_level) { + if (slices[0].slices) { + for (var i in slices) { + result = result.concat(flattenDateStruct(slices[i].slices, target_level)); + } + } + } + else { + for (var i in slices) { + result.push({ + "start" : slices[i].start, + "end" : slices[i].end, + "tweets" : getSliceContent(slices[i]) + }); + } + } + return result; +} + +function trimFDS(slices) { + while (slices[0].tweets.length == 0) { + slices.splice(0,1); + } + while (slices[slices.length - 1].tweets.length == 0) { + slices.pop(); + } + return slices; +} + +function populateDateStruct(level, start) { + var end = start + twCx.date_levels[level], + struct = { + "level" : level, + "start" : start, + "end" : end + }; + if (level < twCx.date_levels.length - 1) { + struct.slices = []; + var newstart = start; + while (newstart < end) { + struct.slices.push(populateDateStruct(level + 1, newstart)); + newstart += twCx.date_levels[level + 1]; + } + } else { + struct.tweets = []; + } + return struct; +} + +function insertIntoDateStruct(slices, tweet) { + var creadate = new Date(tweet.created_at).valueOf(); + for (var i in slices) { + if (creadate < slices[i].end) { + if (slices[i].slices) { + insertIntoDateStruct(slices[i].slices, tweet); + } else { + slices[i].tweets.push(tweet.id); + } + break; + } + } +} + +function placeHolder(className) { + return '
  • '; +} + +function tweetById(tweetid) { + var pos = twCx.idIndex.indexOf(tweetid); + return (pos == -1) ? false : twCx.tweets[pos]; +} + +function selectTweet(tweetid) { + var pos = twCx.idIndex.indexOf(tweetid); + if (pos != -1) { + twCx.position = pos; + twCx.followLast = (twCx.position == twCx.tweets.length - 1); + updateDisplay() + } +} + +function tweetToHtml(tweet, className, elName) { + if (!tweet) { + return placeHolder(className); + } + var el = (elName ? elName : 'li'); + var html = '<' + el + ' class="tweet ' + className + '" id="tweet_' + tweet.id + '"'; + if (className != 'full') { + html += ' onclick="selectTweet(\'' + tweet.id + '\'); return false;" onmouseover="rolloverTweet(\'' + tweet.id + '\');"'; + } else { + html += ' onmouseover="$(\'#hovertweet\').hide();"'; + } + if (twCx.followLast && className == 'full' && el == 'li') { + html += ' style="display: none"'; + } + html += '>'; + if (tweet.annotations.length) { + html += '
    '; + for (var i in tweet.annotations) { + html += '
    '; + } + html += '
    '; + } + html += '
    '; + a_user = ''; + html += '
    ' + a_user + ''; + if (className == 'full') { + html += '

    ' + new Date(tweet.created_at).toLocaleTimeString() + '

    '; + } + html += '
    '; + if (className != 'icons') { + lastend = 0; + var txt = '', + entities = []; + for (var i in tweet.entities.hashtags) { + entities.push({ + "start" : tweet.entities.hashtags[i].indices[0], + "end" : tweet.entities.hashtags[i].indices[1], + "html" : '#' + tweet.entities.hashtags[i].text + '' + }); + } + for (var i in tweet.entities.urls) { + entities.push({ + "start" : tweet.entities.urls[i].indices[0], + "end" : tweet.entities.urls[i].indices[1], + "html" : '' + tweet.entities.urls[i].expanded_url + '' + }); + } + for (var i in tweet.entities.user_mentions) { + entities.push({ + "start" : tweet.entities.user_mentions[i].indices[0], + "end" : tweet.entities.user_mentions[i].indices[1], + "html" : '@' + tweet.entities.user_mentions[i].screen_name + '' + }); + } + entities.sort(function(a, b) { return a.start - b.start }); + for (var i in entities) { + txt += tweet.text.substring(lastend, entities[i].start) + entities[i].html; + lastend = entities[i].end; + } + txt += tweet.text.substring(lastend); + html += '

    ' + a_user + '@' + tweet.user.screen_name + ': ' + txt + '

    '; + } + html += '
    '; + return html; +} + +function tlIdFromPos(x, y) { + if (x < twCx.deltaX) { + return null; + } + var ligne = Math.floor(( twCx.tlHeight - y ) / twCx.scaleY), + colonne = Math.floor(( x - twCx.deltaX ) / twCx.scaleX ), + l = 0; + if (colonne >= twCx.tlOnDisplay[ligne].totalTweets) { + return null; + } + for (var i in twCx.tlOnDisplay[ligne].displayData) { + var nl = l + twCx.tlOnDisplay[ligne].displayData[i].length; + if (colonne < nl) { + return { + "id" : twCx.tlOnDisplay[ligne].displayData[i][colonne - l], + "annotation" : i + } + } + l = nl; + } +} + +function tlPosTweet(tweet, annotation) { + var x, + y, + dt = new Date(tweet.created_at).valueOf(), + ann = ( annotation ? annotation : ( tweet.annotations.length ? tweet.annotations[0] : 'default' ) ); + for (var i = 0; i < twCx.tlOnDisplay.length; i++) { + if (twCx.tlOnDisplay[i].end > dt) { + y = twCx.tlHeight - (i + .5) * twCx.scaleY; + var l = 0; + for (var j in twCx.tlOnDisplay[i].displayData) { + if (j == ann) { + var p = twCx.tlOnDisplay[i].displayData[j].indexOf(tweet.id); + if (p != -1) { + x = twCx.deltaX + twCx.scaleX * ( p + l + .5 ); + } + break; + } + l += twCx.tlOnDisplay[i].displayData[j].length; + } + break; + } + } + return ( x && y ? { "x" : x, "y" : y } : null); +} + +function rolloverTweet(tweetid, annotation) { + var t = tweetById(tweetid), + p = tlPosTweet(t, annotation); + if (t && p) { + var ptl = $("#timeline").offset(); + $("#hovercontent").html(tweetToHtml(t, 'full', 'div')); + $("#hovertweet").css({ + "left" : parseInt(ptl.left + p.x) + "px", + "top" : parseInt(ptl.top + p.y), + "display" : "block"}); + if (relHover) { + relHover.remove(); + } + relHover = drawTweetPos(p, '#ffffff') + } +} + +function drawTweetPos(pos, color) { + var rel = tlPaper.rect(pos.x - .5 * twCx.scaleX, pos.y - .5 * twCx.scaleY, twCx.scaleX, twCx.scaleY); + rel.attr({ "stroke" : color }); + return rel; +} + +function updateDisplay() { + var p = twCx.position, + l = twCx.tweets.length, + lines = 0, + html = '', + tweetsOnDisplay = [], + localWords = {}; + + function pushTweet(tp, className) { + if (tp < l && tp >= 0) { + html += tweetToHtml(twCx.tweets[tp], className) + tweetsOnDisplay.push(tp); + countWords(twCx.tweets[tp].text, localWords); + } else { + html += placeHolder(className); + } + } + + if (l > p + 18) { + lines++; + for (var i = p + 31; i >= p + 18; i--) { + pushTweet(i, 'icons'); + } + } + if (l > p + 4) { + lines++; + for (var i = p + 17; i >= p + 4; i--) { + pushTweet(i, 'icons'); + } + } + for (var k = 3; k >= 1; k--) { + if (l > p + k) { + lines++; + pushTweet(p + k, 'half'); + } + } + pushTweet(p, 'full'); + var n = p - 1; + for (var i = 0; i < Math.min(6, Math.max(3, 6 - lines)); i++) { + if (n < 0) { + break; + } + pushTweet(n, 'half'); + n--; + } + for (var i = 0; i < 14 * Math.min(4, Math.max(2, 7 - lines)); i++) { + if (n < 0) { + break; + } + pushTweet(n, 'icons'); + n--; + } + if (html != tlBuffer) { + $("#tweetlist").html(html); + $(".tweet.full").fadeIn(); + tlBuffer = html; + } + + for (var j in localWords) { + if (localWords[j] < 2) delete localWords[j]; + } + var tab = []; + for (var j in localWords) { + tab.push({ + "word": j, + "freq" : localWords[j] / Math.log(twCx.globalWords[j]) + }); + } + tab.sort( function(a,b){ return b.freq - a.freq }).splice(10); + $("#motscles").html(tab.map(function(t) { return t.word }).join(", ")) + + twCx.tlOnDisplay = trimFDS(flattenDateStruct(twCx.timeline, twCx.timeLevel)); + twCx.scaleY = twCx.tlHeight / twCx.tlOnDisplay.length; + var maxTweets = 0, + startTl = 0, + endTl = 0, + startTw = new Date(twCx.tweets[tweetsOnDisplay[tweetsOnDisplay.length - 1]].created_at).valueOf(), + endTw = new Date(twCx.tweets[tweetsOnDisplay[0]].created_at).valueOf(); + for (var i = 0; i < twCx.tlOnDisplay.length; i++) { + if (startTw >= twCx.tlOnDisplay[i].start && startTw < twCx.tlOnDisplay[i].end) { + startTl = i; + } + if (endTw >= twCx.tlOnDisplay[i].start && endTw < twCx.tlOnDisplay[i].end) { + endTl = i; + } + var displayData = {}; + for (var j in annotations) { + displayData[j] = []; + } + for (var j in twCx.tlOnDisplay[i].tweets) { + var tweetid = twCx.tlOnDisplay[i].tweets[j], + tweet = tweetById(tweetid); + if (tweet) { + if (tweet.annotations.length) { + for (var k in tweet.annotations) { + displayData[tweet.annotations[k]].push(tweetid); + } + } else { + displayData['default'].push(tweetid); + } + } + } + var nbT = 0; + for (var j in displayData) { + nbT += displayData[j].length; + } + maxTweets = Math.max(maxTweets, nbT); + twCx.tlOnDisplay[i].displayData = displayData; + twCx.tlOnDisplay[i].totalTweets = nbT; + } + twCx.scaleX = ( twCx.tlWidth - twCx.deltaX ) / maxTweets; + tlPaper.clear(); + relHover = null; + + // dessin de la date de début + + tlPaper.text(2, twCx.tlHeight - 7, new Date(twCx.tlOnDisplay[0].start).toTimeString().substr(0,5)) + .attr({ "text-anchor" : "start", "font-size": "9px" }); + + // dessin de la date de fin + + tlPaper.text(2, 7, new Date(twCx.tlOnDisplay[twCx.tlOnDisplay.length - 1].end).toTimeString().substr(0,5)) + .attr({ "text-anchor" : "start", "font-size": "9px" }); + + for (var i = 0; i < twCx.tlOnDisplay.length; i++) { + var n = 0, + posY = twCx.tlHeight - ( i + 1 ) * twCx.scaleY; + for (var j in twCx.tlOnDisplay[i].displayData) { + 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" : annotations[j].colors.timeline }); + n += l; + } + } + + // Si on est à une demi-heure, on trace un axe secondaire + heure + + if (i < twCx.tlOnDisplay.length - 1 && !(new Date(twCx.tlOnDisplay[i].end).valueOf() % 1800000)) { + tlPaper.path("M0 "+posY+"L" + twCx.tlWidth +" "+posY).attr({"stroke":"#ccc"}); + tlPaper.text(2, posY, new Date(twCx.tlOnDisplay[i].end).toTimeString().substr(0,5)).attr({ "text-anchor" : "start", "font-size": "9px" }); + } + } + + // Dessin de la correspondance liste-timeline + + var startY = twCx.tlHeight - startTl * twCx.scaleY, + endY = twCx.tlHeight - ( endTl + 1 ) * twCx.scaleY; + tlPaper.path("M0 " + twCx.tlHeight + "L" + twCx.deltaX + " " + startY + "L" + twCx.tlWidth + " " + startY + "L" + twCx.tlWidth + " " + endY + "L" + twCx.deltaX + " " + endY + "L0 0" ) + .attr({ "stroke" : "none", "fill" : "#000080", "opacity" : .1 }); + + // dessin du tweet courant + + var posp = tlPosTweet(twCx.tweets[p]); + if (posp) { + + drawTweetPos(posp, "#ffff00"); + + // dessin des liens entre tweets + + function tweetAndArc(a, b, aorb) { + if (a && b) { + drawTweetPos(aorb ? a : b, "#00c000"); + tlPaper.path(arc(a,b)) + .attr({ "stroke" : "#e000e0", "stroke-width" : 1.5 }); + } + } + + if (twCx.tweets[p].retweeted_status) { + var t = tweetById(twCx.tweets[p].retweeted_status.id); + if (t) { + tweetAndArc(posp, tlPosTweet(t)); + } + } + + if (twCx.tweets[p].in_reply_to_status_id) { + var t = tweetById(twCx.tweets[p].in_reply_to_status_id); + if (t) { + tweetAndArc(posp, tlPosTweet(t)); + } + } + + if (twCx.tweets[p].backRefs) { + for (var i in twCx.tweets[p].backRefs) { + var t = tweetById(twCx.tweets[p].backRefs[i].referenced_by_id); + if (t) { + tweetAndArc(tlPosTweet(t), posp, true); + } + } + } + + } + +} + +$(document).ready(function() { + tlPaper = Raphael("timeline", twCx.tlWidth, twCx.tlHeight); + socket = io.connect('http://' + document.location.hostname ); + socket.on("initial_data", function(data) { + twCx.timeline = []; + twCx.idIndex = []; + twCx.tweets = []; + for (var i in data.tweets) { + addTweet(data.tweets[i]); + } + if (twCx.followLast) { + twCx.position = twCx.tweets.length - 1; + } + updateDisplay(); + }); + socket.on("update", function(data) { + for (var i in data.new_tweets) { + addTweet(data.new_tweets[i]); + } + if (twCx.followLast) { + twCx.position = twCx.tweets.length - 1; + } + updateDisplay(); + }); + + + $("#tweetlist").mousewheel(function(e, d) { + wheelDelta += d; + if (Math.abs(wheelDelta) >= 1) { + twCx.position = Math.min( twCx.tweets.length - 1, Math.max(0, parseInt(wheelDelta) + twCx.position ) ); + twCx.followLast = (twCx.position == twCx.tweets.length - 1); + updateDisplay(); + wheelDelta = 0; + } + return false; + }); + $("#timeline").mousewheel(function(e, d) { + wheelDelta += d; + if (Math.abs(wheelDelta) >= 1) { + if (wheelDelta > 0) { + tl = Math.min(twCx.date_levels.length - 1, twCx.timeLevel + 1); + } else { + tl = Math.max(0, twCx.timeLevel - 1); + } + if (tl != twCx.timeLevel) { + twCx.timeLevel = tl; + updateDisplay(); + } + wheelDelta = 0; + } + return false; + }); + $("#timeline, #tweetlist").mouseout(function() { + $("#hovertweet").hide(); + }); + $("#timeline").mousemove(function(evt) { + var twid = tlIdFromPos(evt.offsetX, evt.offsetY); + if (twid) { + rolloverTweet(twid.id, twid.annotation); + } else { + $("#hovertweet").hide(); + } + }); + $("#timeline").click(function(evt) { + var twid = tlIdFromPos(evt.offsetX, evt.offsetY); + if (twid) { + selectTweet(twid.id); + } + }); +}); \ No newline at end of file