30 |
30 |
31 function placeHolder(className) { |
31 function placeHolder(className) { |
32 return '<li class="placeholder ' + className + '"></li>'; |
32 return '<li class="placeholder ' + className + '"></li>'; |
33 } |
33 } |
34 |
34 |
|
35 function getLinkedTweets() { |
|
36 socket.emit('linkedTweets',{"tweetpos":tweetData.position}); |
|
37 } |
|
38 |
|
39 function changeMode() { |
|
40 if (tweetData.feedMode) { |
|
41 getLinkedTweets(); |
|
42 } else { |
|
43 tweetData.feedMode = true; |
|
44 updateDisplay(); |
|
45 } |
|
46 } |
|
47 |
35 function clicTweet(tweetPos) { |
48 function clicTweet(tweetPos) { |
36 if (tweetPos != tweetData.position) { |
49 if (tweetPos != tweetData.position) { |
37 tweetData.position = tweetPos; |
50 tweetData.position = tweetPos; |
38 tweetData.followLast = (tweetData.position == tweetData.tweetcount); |
51 if (tweetData.feedMode) { |
|
52 tweetData.followLast = (tweetData.position == tweetData.tweetcount); |
|
53 } else { |
|
54 getLinkedTweets(); |
|
55 } |
39 return false; |
56 return false; |
40 } else { |
57 } else { |
41 console.log("getting linkedTweets"); |
58 changeMode(); |
42 socket.emit('linkedTweets',{"tweetpos":tweetPos}); |
|
43 } |
59 } |
44 } |
60 } |
45 |
61 |
46 function tweetToHtml(tweet, className) { |
62 function tweetToHtml(tweet, className) { |
47 if (!tweet) { |
63 if (!tweet) { |
100 } |
116 } |
101 |
117 |
102 |
118 |
103 function getUpdate() { |
119 function getUpdate() { |
104 tweetData.posToDisplay = []; |
120 tweetData.posToDisplay = []; |
105 if (tweetData.followLast) { |
121 if (tweetData.feedMode) { |
106 for (var i = tweetData.tweetcount; i >= tweetData.tweetcount - 52; i--) { |
122 if (tweetData.followLast) { |
107 tweetData.posToDisplay.push( i > 0 ? i : -1 ); |
123 tweetData.position = tweetData.tweetcount; |
108 } |
124 for (var i = tweetData.tweetcount; i >= tweetData.tweetcount - 52; i--) { |
109 tweetData.end = tweetData.tweetcount; |
125 tweetData.posToDisplay.push( i > 0 ? i : -1 ); |
110 tweetData.start = Math.max(1, tweetData.end - 52); |
126 } |
111 } else { |
127 tweetData.end = tweetData.tweetcount; |
112 for (var i = tweetData.position + 26; i >= tweetData.position - 26; i--) { |
128 tweetData.start = Math.max(1, tweetData.end - 52); |
113 tweetData.posToDisplay.push( i > 0 && i <= tweetData.tweetcount ? i : -1 ); |
129 } else { |
114 } |
130 for (var i = tweetData.position + 26; i >= tweetData.position - 26; i--) { |
115 tweetData.end = Math.min(tweetData.tweetcount, tweetData.position + 26 ); |
131 tweetData.posToDisplay.push( i > 0 && i <= tweetData.tweetcount ? i : -1 ); |
116 tweetData.start = Math.max(1, tweetData.position - 26); |
132 } |
|
133 tweetData.end = Math.min(tweetData.tweetcount, tweetData.position + 26 ); |
|
134 tweetData.start = Math.max(1, tweetData.position - 26); |
|
135 } |
|
136 if ($("#modeselector").text() != "Mode flux") { |
|
137 $("#modeselector").html("Mode Flux").css({"color":"#000000","background":"#ffffff"}); |
|
138 $("#tweetlist").css({"background":"#ffffff"}); |
|
139 } |
|
140 } else { |
|
141 tweetData.linkedTweets.referenced_by.sort(function(a,b) { return b.pos - a.pos }); |
|
142 tweetData.linkedTweets.referencing.sort(function(a,b) { return b.pos - a.pos }); |
|
143 for (var i in tweetData.linkedTweets.referenced_by) { |
|
144 tweetData.posToDisplay.push(tweetData.linkedTweets.referenced_by[i].pos); |
|
145 } |
|
146 tweetData.posToDisplay.push(tweetData.position); |
|
147 for (var i in tweetData.linkedTweets.referencing) { |
|
148 tweetData.posToDisplay.push(tweetData.linkedTweets.referencing[i].pos); |
|
149 } |
|
150 if ($("#modeselector").text() != "Conversation") { |
|
151 $("#modeselector").html("Conversation").css({"color":"#ffffff","background":"#000080"}); |
|
152 $("#tweetlist").css({"background":"#000080"}); |
|
153 } |
117 } |
154 } |
118 var tweetsToGet = []; |
155 var tweetsToGet = []; |
119 for (var i = tweetData.start; i <= tweetData.end; i++) { |
156 for (var i in tweetData.posToDisplay) { |
120 if (!tweetByPos(i)) { |
157 if (tweetData.posToDisplay[i] != -1 && !tweetByPos(tweetData.posToDisplay[i])) { |
121 tweetsToGet.push(i); |
158 tweetsToGet.push(tweetData.posToDisplay[i]); |
122 } |
159 } |
123 } |
160 } |
124 if (tweetsToGet.length) { |
161 if (tweetsToGet.length) { |
|
162 // console.log('We need to get '+tweetsToGet.join(',')); |
125 socket.emit('updateTweets', { |
163 socket.emit('updateTweets', { |
126 "tweets" : tweetsToGet |
164 "tweets" : tweetsToGet |
127 }); |
165 }); |
128 } else { |
166 } else { |
129 drawTweetList(); |
167 drawTweetList(); |
130 //drawDisplay(); |
168 } |
131 } |
169 /* html = ''; |
|
170 for (var i in tweetData.linkedTweets.referenced_by) { |
|
171 console.log(tweetData.linkedTweets.referenced_by[i]); |
|
172 html += tweetToHtml(tweetData.linkedTweets.referenced_by[i].tweet,'half'); |
|
173 } |
|
174 html += tweetToHtml(tweetByPos(tweetData.position),'full'); |
|
175 for (var i in tweetData.linkedTweets.referencing) { |
|
176 console.log(tweetData.linkedTweets.referencing[i]); |
|
177 html += tweetToHtml(tweetData.linkedTweets.referencing[i].tweet,'half'); |
|
178 } |
|
179 if (tweetData.htmlBuffer != html) { |
|
180 $("#tweetlist").html(html); |
|
181 tweetData.htmlBuffer = html; |
|
182 } */ |
132 if (tweetData.tlChanged || tweetData.tlLevelChanged) { |
183 if (tweetData.tlChanged || tweetData.tlLevelChanged) { |
133 socket.emit('updateTimeline', { |
184 socket.emit('updateTimeline', { |
134 "level" : tweetData.timeLevel, |
185 "level" : tweetData.timeLevel, |
135 "full" : tweetData.tlLevelChanged |
186 "full" : tweetData.tlLevelChanged |
136 }); |
187 }); |
137 } else { |
188 } else { |
138 drawTimeLine(); |
189 drawTimeLine(); |
|
190 } |
|
191 } |
|
192 |
|
193 function addTweet(tweet) { |
|
194 if (tweetData.posIndex.indexOf(tweet.pos) == -1) { |
|
195 tweetData.tweets.push(tweet); |
|
196 tweetData.posIndex.push(tweet.pos); |
139 } |
197 } |
140 } |
198 } |
141 |
199 |
142 function tweetByPos(pos) { |
200 function tweetByPos(pos) { |
143 var index = tweetData.posIndex.indexOf(pos); |
201 var index = tweetData.posIndex.indexOf(pos); |
179 tweetData.tweets.splice(i,1); |
237 tweetData.tweets.splice(i,1); |
180 } else { |
238 } else { |
181 i++; |
239 i++; |
182 } |
240 } |
183 } |
241 } |
184 for (var i in tweetData.posToDisplay) { |
242 if (tweetData.feedMode) { |
185 var ds = displaySplitting[tweetData.followLast ? 1 : 0]; |
243 for (var i in tweetData.posToDisplay) { |
186 for (var j in ds.positions) { |
244 var ds = displaySplitting[tweetData.followLast ? 1 : 0]; |
187 if (ds.positions[j] > i) { |
245 for (var j in ds.positions) { |
188 var className = ds.classNames[j]; |
246 if (ds.positions[j] > i) { |
189 break; |
247 var className = ds.classNames[j]; |
190 } |
248 break; |
191 } |
249 } |
192 html += ( tweetData.posToDisplay[i] != -1 ? tweetToHtml(tweetByPos(tweetData.posToDisplay[i]), className) : placeHolder(className) ); |
250 } |
|
251 html += ( tweetData.posToDisplay[i] != -1 ? tweetToHtml(tweetByPos(tweetData.posToDisplay[i]), className) : placeHolder(className) ); |
|
252 } |
|
253 } else { |
|
254 for (var i in tweetData.posToDisplay) { |
|
255 html += tweetToHtml(tweetByPos(tweetData.posToDisplay[i]), (tweetData.posToDisplay[i] == tweetData.position ? 'full' : 'half' )); |
|
256 } |
193 } |
257 } |
194 if (tweetData.htmlBuffer != html) { |
258 if (tweetData.htmlBuffer != html) { |
195 $("#tweetlist").html(html); |
259 $("#tweetlist").html(html); |
196 tweetData.htmlBuffer = html; |
260 tweetData.htmlBuffer = html; |
197 } |
261 } |
205 twPaper.clear(); |
269 twPaper.clear(); |
206 if (!tweetData.timeline || !tweetData.timeline.length) return; |
270 if (!tweetData.timeline || !tweetData.timeline.length) return; |
207 |
271 |
208 var dtfintl = tweetData.timeline[ tweetData.timeline.length - 1 ].end, |
272 var dtfintl = tweetData.timeline[ tweetData.timeline.length - 1 ].end, |
209 dtdebtl = tweetData.timeline[0].start, |
273 dtdebtl = tweetData.timeline[0].start, |
210 dtfintw = new Date( tweetByPos( tweetData.end ).created_at ), |
|
211 dtdebtw = new Date( tweetByPos( tweetData.start ).created_at ), |
|
212 scY = 600 / ( dtfintl - dtdebtl ); |
274 scY = 600 / ( dtfintl - dtdebtl ); |
213 twPaper.rect( 0, scY * ( dtfintl - dtfintw ), 300, scY * ( dtfintw - dtdebtw )).attr({"stroke":"none","fill":"#8080ff","fill-opacity":.2}); |
275 if (tweetData.feedMode) { |
|
276 var dtfintw = new Date( tweetByPos( tweetData.end ).created_at ), |
|
277 dtdebtw = new Date( tweetByPos( tweetData.start ).created_at ), |
|
278 rTop = scY * ( dtfintl - dtfintw ), |
|
279 rHeight = scY * ( dtfintw - dtdebtw ); |
|
280 if (rHeight > 0) { |
|
281 twPaper.rect( 0, rTop, 300, rHeight).attr({"stroke":"none","fill":"#8080ff","fill-opacity":.2}); |
|
282 } |
|
283 } else { |
|
284 for (var i in tweetData.posToDisplay) { |
|
285 if (tweetData.posToDisplay[i] != -1) { |
|
286 var tw = tweetByPos(tweetData.posToDisplay[i]); |
|
287 if (tw) { |
|
288 var dtcour = new Date( tw.created_at ), |
|
289 posY = scY * ( dtfintl - dtcour ); |
|
290 twPaper.path("M0 "+posY+"L300 "+posY).attr({"stroke":"#88f"}); |
|
291 } |
|
292 } |
|
293 } |
|
294 } |
214 var dtcour = new Date( tweetByPos( tweetData.position ).created_at ), |
295 var dtcour = new Date( tweetByPos( tweetData.position ).created_at ), |
215 posY = scY * ( dtfintl - dtcour ); |
296 posY = scY * ( dtfintl - dtcour ); |
216 twPaper.path("M0 "+posY+"L300 "+posY).attr({"stroke":"#ff0"}); |
297 twPaper.path("M0 "+posY+"L300 "+posY).attr({"stroke":"#ff0"}); |
217 } |
298 } |
218 |
299 |
255 anz[j] = tweetData.timeline[i].annotations[j]; |
336 anz[j] = tweetData.timeline[i].annotations[j]; |
256 } |
337 } |
257 var posX = 0; |
338 var posX = 0; |
258 for (var j in anz) { |
339 for (var j in anz) { |
259 var largX = scaleX * anz[j]; |
340 var largX = scaleX * anz[j]; |
260 tlPaper.rect(posX, 600 - scaleY * (i+1), largX, scaleY).attr({"stroke": "none", "fill": annotations[j].colors.timeline}); |
341 if (largX > 0) { |
261 posX += largX; |
342 tlPaper.rect(posX, 600 - scaleY * (i+1), largX, scaleY).attr({"stroke": "none", "fill": annotations[j].colors.timeline}); |
|
343 posX += largX; |
|
344 } |
262 } |
345 } |
263 } |
346 } |
264 |
347 |
265 drawTimeWindow(); |
348 drawTimeWindow(); |
266 /* for (var i = 0; i < tweetData.arcs.length; i++) { |
|
267 var x1 = scaleX * (tmptw[tweetData.arcs[i].from].x + .5), |
|
268 x2 = scaleX * (tmptw[tweetData.arcs[i].to].x + .5), |
|
269 y1 = 600 - scaleY * (tmptw[tweetData.arcs[i].from].y + .5), |
|
270 y2 = 600 - scaleY * (tmptw[tweetData.arcs[i].to].y + .5), |
|
271 d = "M"+x1+" "+y1+"C"; |
|
272 if (y1 == y2) { |
|
273 d += x1+" "+(y1 - 30)+" "+x2+" "+(y2 - 30); |
|
274 } else { |
|
275 d += (x1 + 60)+" "+y1+" "+(x2 + 60)+" "+y2; |
|
276 } |
|
277 paper.path(d+" "+x2+" "+y2); |
|
278 } */ |
|
279 } |
349 } |
280 |
350 |
281 $(document).ready(function() { |
351 $(document).ready(function() { |
282 tlPaper = Raphael("timeline", 220, 600); |
352 tlPaper = Raphael("timeline", 220, 600); |
283 twPaper = Raphael("timewindow", 220, 600); |
353 twPaper = Raphael("timewindow", 220, 600); |
284 socket = io.connect('http://' + document.location.hostname ); |
354 socket = io.connect('http://' + document.location.hostname ); |
285 socket.on('tweetSummary', function (data) { |
355 socket.on('tweetSummary', function (data) { |
286 if (tweetData.tweetcount != data.tweetcount) { |
356 if (tweetData.tweetcount != data.tweetcount) { |
287 tweetData.tweetcount = data.tweetcount; |
357 tweetData.tweetcount = data.tweetcount; |
288 tweetData.tlLevelChanged = true; |
358 tweetData.tlLevelChanged = true; |
289 if (tweetData.followLast) { |
|
290 tweetData.position = data.tweetcount; |
|
291 } |
|
292 updateDisplay(); |
359 updateDisplay(); |
293 } |
360 } |
294 }); |
361 }); |
295 socket.on('tweetPosByDate', function (data) { |
362 socket.on('tweetPosByDate', function (data) { |
296 tweetData.position = data.tweetpos; |
363 tweetData.position = data.tweetpos; |
|
364 tweetData.feedMode = true; |
297 tweetData.followLast = (tweetData.position == tweetData.tweetcount); |
365 tweetData.followLast = (tweetData.position == tweetData.tweetcount); |
298 updateDisplay(); |
366 updateDisplay(); |
299 }); |
367 }); |
300 socket.on('tweets', function (data) { |
368 socket.on('tweets', function (data) { |
301 for (var i in data) { |
369 for (var i in data) { |
302 if (tweetData.posIndex.indexOf(data[i].pos) == -1) { |
370 addTweet(data[i]); |
303 tweetData.tweets.push(data[i]); |
|
304 tweetData.posIndex.push(data[i].pos); |
|
305 } |
|
306 } |
371 } |
307 drawTweetList(); |
372 drawTweetList(); |
308 }); |
373 }); |
309 socket.on('timeline', function (data) { |
374 socket.on('timeline', function (data) { |
310 tweetData.tlChanged = false; |
375 tweetData.tlChanged = false; |
321 tweetData.splice(0,1); |
386 tweetData.splice(0,1); |
322 } |
387 } |
323 drawTimeLine(); |
388 drawTimeLine(); |
324 }); |
389 }); |
325 socket.on('linkedTweets', function(data) { |
390 socket.on('linkedTweets', function(data) { |
326 console.log(data); |
391 tweetData.followLast = false; |
|
392 tweetData.feedMode = false; |
|
393 tweetData.position = data.tweetpos; |
|
394 tweetData.linkedTweets = data; |
|
395 updateDisplay(); |
327 }); |
396 }); |
328 $("#tweetlist").mousewheel(function(e, d) { |
397 $("#tweetlist").mousewheel(function(e, d) { |
329 tweetData.wheelDelta += d; |
398 tweetData.wheelDelta += d; |
330 if (Math.abs(tweetData.wheelDelta) >= 1) { |
399 if (Math.abs(tweetData.wheelDelta) >= 1) { |
331 tweetData.position = Math.min( tweetData.tweetcount, Math.max(1, parseInt(tweetData.wheelDelta) + tweetData.position ) ); |
400 if (tweetData.feedMode) { |
332 tweetData.followLast = (tweetData.position == tweetData.tweetcount); |
401 tweetData.position = Math.min( tweetData.tweetcount, Math.max(1, parseInt(tweetData.wheelDelta) + tweetData.position ) ); |
333 updateDisplay(); |
402 tweetData.followLast = (tweetData.position == tweetData.tweetcount); |
|
403 updateDisplay(); |
|
404 } else { |
|
405 if (tweetData.wheelDelta > 0) { |
|
406 if (tweetData.linkedTweets.referenced_by.length) { |
|
407 tweetData.position = tweetData.linkedTweets.referenced_by[tweetData.linkedTweets.referenced_by.length - 1].pos; |
|
408 getLinkedTweets(); |
|
409 } |
|
410 } else { |
|
411 if (tweetData.linkedTweets.referencing.length) { |
|
412 tweetData.position = tweetData.linkedTweets.referencing[0].pos; |
|
413 getLinkedTweets(); |
|
414 } |
|
415 } |
|
416 } |
334 tweetData.wheelDelta = 0; |
417 tweetData.wheelDelta = 0; |
335 } |
418 } |
336 return false; |
419 return false; |
337 }); |
420 }); |
338 $("#timewindow").mousewheel(function(e, d) { |
421 $("#timewindow").mousewheel(function(e, d) { |