Added user tweets
authorveltr
Thu, 04 Apr 2013 17:44:59 +0200
changeset 17 8ee8c9ea2a9f
parent 16 9a82fbbf6377
child 18 cd85b780f4a5
Added user tweets
css/playscreen.css
img/arrows.png
js/playscreen.js
js/startscreen.js
playscreen-frame.html
playscreen.html
--- a/css/playscreen.css	Thu Mar 28 18:44:51 2013 +0100
+++ b/css/playscreen.css	Thu Apr 04 17:44:59 2013 +0200
@@ -3,6 +3,10 @@
     clear: both;
 }
 
+.play-second-line {
+	position: relative;
+}
+
 .play-head {
     margin-top: 8px;
 }
@@ -69,7 +73,7 @@
 }
 
 .topics-block {
-    float: left; clear: both; width: 10000px; padding-left: 8px; height: 40px;
+    float: left; clear: both; width: 10000px; padding-left: 8px; height: 40px; left: 0;
 }
 
 .topic {
@@ -81,6 +85,18 @@
     font-size: 14px; line-height: 16px;
 }
 
+.left-arrow, .right-arrow {
+	position: absolute; top: 0; width: 9px; height: 20px; width: 9px; background: url(../img/arrows.png); margin: 5px; cursor: pointer;
+}
+
+.left-arrow {
+	left: 0;
+}
+
+.right-arrow {
+	right: 0; background-position: -9px 0;
+}
+
 .highlight {
     color: #333333; background: #ffff00;
 }
@@ -100,15 +116,19 @@
 }
 
 .play-localtweets .tweet {
-	width: 320px; background: #666666; font-size: 12px; padding: 4px;
+	width: 320px; background: #666666; padding: 4px;
 }
 
-.play-localtweets img {
+.tweet img {
 	width: 20px; height: 20px; float: left;
 }
 
-.play-localtweets p {
-	margin-left: 24px;
+.tweet p {
+	margin-left: 24px; font-size: 12px;
+}
+
+.tweet a {
+	color: #ffffc0;
 }
 
 .play-tagcloud {
@@ -148,3 +168,23 @@
 .local-position {
 	left: 155px; width: 215px;
 }
+
+.user-tweets {
+	position: absolute; left: 730px; top: 300px; bottom: 0; right: 0; display: none;
+}
+
+.user-tweets-head {
+	font-size: 14px; text-align: center;
+}
+
+.user-tweets-list {
+	position: absolute; left: 0; top: 20px; bottom: 0; right: 0; overflow: auto;
+}
+
+.user-tweets-list .tweet {
+	background: #666666; font-size: 12px; padding: 4px; margin: 5px 0;
+}
+
+.user-name {
+	font-weight: bold;
+}
Binary file img/arrows.png has changed
--- a/js/playscreen.js	Thu Mar 28 18:44:51 2013 +0100
+++ b/js/playscreen.js	Thu Apr 04 17:44:59 2013 +0200
@@ -12,6 +12,19 @@
 
 function showData() {
     
+	data.topiclabels.forEach(function(v) {
+		var words = _(v.words).map(function(v, k) {
+			return {
+				word: k,
+				weight: v
+			}
+		});
+		words.sort(function(a,b) {
+			return b.weight - a.weight;
+		})
+		data.topics[v.topic_id].words = words;
+	});
+	
     var topicHash = document.location.hash || "#selectedtopics=5,15&visibletopics=5,10,15";
     
     var pageParams = {};
@@ -119,7 +132,7 @@
     
     function showTopics(topiclist) {
         var tbhtml = topiclist.reduce(function(mem, topic) {
-            var wordsToShow = topic.words.slice(0,3),
+            var wordsToShow = topic.words.slice(0,4),
                 max = wordsToShow[0].weight,
                 min = Math.min(wordsToShow[wordsToShow.length - 1].weight, max - .01),
                 scale = 8 / (max - min);
@@ -484,7 +497,12 @@
     
     var lastPos, lastDuration, lastTopics;
     
-    var tweetTemplate = _.template('<li class="tweet" data-timestamp="<%= timestamp %>" data-topic-id="<%= topic.topic %>"><img src="<%- data.profile_image_url %>" /><p>@<%- data.from_user_name %>: <%= data.htext %></p></li>'),
+    var tweetTemplate = _.template(
+    		'<li class="tweet" data-timestamp="<%= timestamp %>" data-topic-id="<%= topic.topic %>">'
+    		+ '<% if (show_link) { %><a href="#" data-user-id="<%- data.from_user_id %>"><% } %>'
+    		+ '<img src="<%- data.profile_image_url %>" /><% if (show_link) { %></a><% } %>'
+    		+ '<p><% if (show_link) { %><a href="#" data-user-id="<%- data.from_user_id %>"><% } %>'
+    		+ '@<%- data.from_user_name %>:<% if (show_link) { %></a><% } %> <%= htext %></p></li>'),
     	callnum = 0,
     	tweetstructure = {},
     	requestedtweets = {},
@@ -557,14 +575,18 @@
 		if (selectedWord) {
 			var rx = new RegExp( '(' + selectedWord.replace(/(\W)/gm,'\\$1') + ')', 'gim' );
 			tweetstoshow.forEach(function(tw) {
-				tw.data.htext = _(tw.data.text).escape().replace(rx,'<span class="highlight">$1</span>');
+				tw.htext = _(tw.data.text).escape().replace(rx,'<span class="highlight">$1</span>');
 			});
 		} else {
 			tweetstoshow.forEach(function(tw) {
-				tw.data.htext = _(tw.data.text).escape();
-			})
+				tw.htext = _(tw.data.text).escape();
+			});
 		}
 		
+		tweetstoshow.forEach(function(tw) {
+			tw.show_link = true;
+		});
+		
 		tweetstoshow.sort(function(a, b) {
 			return a.timestamp - b.timestamp;
 		});
@@ -666,7 +688,7 @@
 				"twitter",
 				{
 					q:"id:(" + toload.join(" OR ") + ")",
-					fl: "id_str,created_at,from_user_name,text,profile_image_url",
+					fl: "id_str,created_at,from_user_name,text,profile_image_url,from_user_id",
 					rows: toload.length
 				}
 			),
@@ -819,7 +841,6 @@
 				startLevel + Math.round(Math.log(e.gesture.scale)*scaleStep) * (x > 140 ? 1 : -1)
 			)
 		);
-		//$("#konsole").text(e.gesture.scale + " => " + newlevel);
 		if (newlevel !== currentlevel) {
 			currentlevel = newlevel;
 			localduration = zoomlevels[currentlevel];
@@ -857,6 +878,61 @@
     	$(".keyword-search a").removeClass("placeholder").text(pageParams.keywords.join(", "));
     }
     
+    var moveInterval;
+    
+    $(".left-arrow").data("direction", -3);
+    $(".right-arrow").data("direction", 3);
+    
+    $(".left-arrow,.right-arrow")
+    	.on("mouseenter touchstart", function() {
+    		clearInterval(moveInterval);
+    		var moveDirection = $(this).data("direction");
+    		moveInterval = setInterval(function() {
+    			var t = $(".topics-block");
+    			t.css("left", + moveDirection + parseFloat(t.css("left")));
+    		}, 20);
+    	})
+    	.on("mouseleave touchend", function() {
+    		clearInterval(moveInterval);
+    	});
+    
+    $(".play-localtweets").on("click", "li a", function() {
+    	var userid = $(this).attr("data-user-id");
+    	$.getJSON(
+			solrUrl(
+				"twitter",
+				{
+					q: "from_user_id:" + userid,
+					fl: "id_str,created_at,from_user_name,text,profile_image_url,from_user_id",
+					rows: 500
+				}
+			),
+			function(t) {
+				var tweets = t.response.docs;
+				tweets.forEach(function(tweet) {
+					tweet.timestamp = new Date(tweet.created_at).valueOf() / 1000 - deltaT;
+				});
+				tweets.sort(function(a,b) {
+					return a.timestamp - b.timestamp;
+				})
+				var html = tweets.reduce(function(mem, tweet) {
+					return mem + tweetTemplate({
+						timestamp: tweet.timestamp,
+						topic: {topic: -1},
+						weight: 0,
+						data: tweet,
+						htext: _(tweet.text).escape(),
+						show_link: false
+					});
+				},"");
+				$(".user-tweets").show();
+				$(".user-tweets-list").html(html);
+				$(".user-name").text(tweets[0].from_user_name);
+			}
+		);
+		return false;
+    });
+    
     checkOrGoNext();
 }
 
@@ -936,7 +1012,7 @@
     				+ "*)",
     			group: "true",
     			"group.field": "created_at",
-    			"fl": "id_str,created_at,from_user_name,text,profile_image_url",
+    			"fl": "id_str,created_at,from_user_name,text,profile_image_url,from_user_id",
     			"rows": 800
     		}
 		),
@@ -957,6 +1033,8 @@
 		}
     )
     
+    loadJson("data/topiclabels.json", "topiclabels");
+    
     loadJson(
         solrUrl("MMSO", {q: "*:*", fl: "topic*,MMSO_id,multimediaSegment,keywordsFromSocial", rows: 250 }),
         "segments",
@@ -1018,27 +1096,8 @@
     
     loadFromTopicsBean("getTopicsNumber",false,false,function(topic_count) {
         for (var i = 0; i < topic_count; i++) {
-            data.topics.push(null);
+            data.topics.push({ index: i, words: [ { word: "(no label)", weight: 1 }] });
         }
-        dwr.engine.beginBatch();
-        data.topics.forEach(function(v, k) {
-            loadFromTopicsBean("getTopicDistribution",false,[k, 50, false],function(topic) {
-                var words = topic.match(/[^=,{]+=0.\d{0,8}/g);
-                data.topics[k] = {
-                    index: k,
-                    words: words.map(function(w) {
-                        var parts = w.split("=");
-                        return {
-                            word: parts[0].trim(),
-                            weight: parseFloat(parts[1])
-                        }
-                    })
-                }
-            });
-            
-        });
-        dwr.engine.endBatch();
-        
     });
     
     
--- a/js/startscreen.js	Thu Mar 28 18:44:51 2013 +0100
+++ b/js/startscreen.js	Thu Apr 04 17:44:59 2013 +0200
@@ -1,4 +1,4 @@
-var topicPoubelle = -13;
+var topicPoubelle = 13;
 
 function showData() {
 	
@@ -14,9 +14,7 @@
 		})
 		data.topics[v.topic_id].words = words;
 	});
-	
-	console.log(data.topics);
-    
+	    
     var ordertag = 0;
 
     function secsToString(seconds) {
--- a/playscreen-frame.html	Thu Mar 28 18:44:51 2013 +0100
+++ b/playscreen-frame.html	Thu Apr 04 17:44:59 2013 +0200
@@ -45,6 +45,8 @@
                 
                 <div class="play-second-line">
                 	<div class="topics-block"></div>
+                	<div class="left-arrow"></div>
+                	<div class="right-arrow"></div>
             	</div>
                 
                 <div class="play-bottom">
@@ -55,6 +57,10 @@
 	                	<div class="local-position"></div>
                     	<ul class="play-localtweets"></ul>
                     	<ul class="play-tagcloud"></ul>
+                    	<div class="user-tweets">
+                    		<h3 class="user-tweets-head">Tweets par <span class="user-name"></span></h3>
+                    		<ul class="user-tweets-list"></ul>
+                    	</div>
                     </div>
                 </div>
             </div>
--- a/playscreen.html	Thu Mar 28 18:44:51 2013 +0100
+++ b/playscreen.html	Thu Apr 04 17:44:59 2013 +0200
@@ -45,6 +45,8 @@
                 
                 <div class="play-second-line">
                 	<div class="topics-block"></div>
+                	<div class="left-arrow"></div>
+                	<div class="right-arrow"></div>
             	</div>
                 
                 <div class="play-bottom">
@@ -54,7 +56,10 @@
                 	<div class="local-position"></div>
                 	<ul class="play-localtweets"></ul>
                 	<ul class="play-tagcloud"></ul>
-                	<div id="konsole" style="position: absolute; top: 280px; left: 730px; right: 0;"></div>
+                	<div class="user-tweets">
+                		<h3 class="user-tweets-head">Tweets par <span class="user-name"></span></h3>
+                		<ul class="user-tweets-list"></ul>
+                	</div>
                 </div>
             </div>
     </body>