added a new widget, to display the contents of tweets in a separate pane. tweet-widget
authorhamidouk
Thu, 17 Nov 2011 16:51:19 +0100
branchtweet-widget
changeset 267 f84013fb19dc
parent 266 1c83c4bba0ce
child 268 576cc32f0688
added a new widget, to display the contents of tweets in a separate pane.
src/css/LdtPlayer.css
src/js/widgets/tweetsWidget.js
src/templates/tweetWidget.html
test/integration/polemic-youtube.htm
test/integration/polemic.htm
unittests/index.html
unittests/tests/widgets/tweetsWidget.js
--- a/src/css/LdtPlayer.css	Thu Nov 17 16:32:53 2011 +0100
+++ b/src/css/LdtPlayer.css	Thu Nov 17 16:51:19 2011 +0100
@@ -234,4 +234,19 @@
       height: 20px; 
       background-color: white;
     }
+    
+    .Ldt-tweetWidget {
+      font-size: 62.5%;
+      font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
+      background-color:#eeeeee;    
+      padding:5px;
+    }
+    
+    .Ldt-tweetAvatar {
+    
+    }
+    
+    .Ldt-tweetContents {
+    
+    }
 
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/widgets/tweetsWidget.js	Thu Nov 17 16:51:19 2011 +0100
@@ -0,0 +1,53 @@
+/* a widget that displays tweet - used in conjunction with the polemicWidget */
+
+IriSP.TweetsWidget = function(Popcorn, config, Serializer) {
+  IriSP.Widget.call(this, Popcorn, config, Serializer);
+  
+};
+
+
+IriSP.TweetsWidget.prototype = new IriSP.Widget();
+
+IriSP.TweetsWidget.prototype.displayTweet = function(annotation) {
+
+    var title = annotation.content.title;
+    var description = annotation.content.description;
+    var keywords =  "" // FIXME;
+    var begin = +annotation.begin;
+    var end = +annotation.end;
+    var duration = +this._serializer.currentMedia().meta["dc:duration"];
+
+    this.selector.find(".Ldt-tweetContents").text(title);   
+};
+
+IriSP.TweetsWidget.prototype.draw = function() {
+  var _this = this;
+  
+  var tweetMarkup = Mustache.to_html(IriSP.tweetWidget_template, {"share_template" : IriSP.share_template});
+	this.selector.append(tweetMarkup);
+    
+  this._Popcorn.listen("IriSP.PolemicTweet.click", IriSP.wrap(this, this.PolemicTweetClickHandler));
+};
+
+IriSP.TweetsWidget.prototype.PolemicTweetClickHandler = function(tweet_id) {  
+  var index, annotation;
+  for (index in this._serializer._data.annotations) {
+    annotation = this._serializer._data.annotations[index];
+    
+    if (annotation.id === tweet_id)
+      break;
+  }
+    
+  if (annotation.id !== tweet_id)
+      /* we haven't found it */
+      return;
+  
+
+  this.displayTweet(annotation);
+  
+  var time = this._Popcorn.currentTime();
+  this._Popcorn = this._Popcorn.code({ start : time + 0.1, end: time + 10, 
+                                       onEnd: IriSP.wrap(this, this.clearTweet)});
+  
+  return;
+};
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/templates/tweetWidget.html	Thu Nov 17 16:51:19 2011 +0100
@@ -0,0 +1,9 @@
+{{! template for the tweet widget }}
+<div class='Ldt-tweetWidget'>
+  <div class='Ldt-tweetAvatar'>
+
+  </div>
+  <div class='Ldt-tweetContents'>
+
+  </div>
+</div>
\ No newline at end of file
--- a/test/integration/polemic-youtube.htm	Thu Nov 17 16:32:53 2011 +0100
+++ b/test/integration/polemic-youtube.htm	Thu Nov 17 16:51:19 2011 +0100
@@ -66,6 +66,12 @@
 						  src:'polemic_fr.json',
 						  type:'json'}
 						},
+            {type: "TweetsWidget",
+						 metadata:{
+						  format:'cinelab',
+						  src:'polemic_fr.json',
+						  type:'json'}
+						},
             {type: "SliderWidget",
 						 metadata:{
 						  format:'cinelab',
--- a/test/integration/polemic.htm	Thu Nov 17 16:32:53 2011 +0100
+++ b/test/integration/polemic.htm	Thu Nov 17 16:51:19 2011 +0100
@@ -66,6 +66,12 @@
 						  src:'polemic_fr.json',
 						  type:'json'}
 						},
+            {type: "TweetsWidget",
+						 metadata:{
+						  format:'cinelab',
+						  src:'polemic_fr.json',
+						  type:'json'}
+						},
             {type: "SliderWidget",
 						 metadata:{
 						  format:'cinelab',
--- a/unittests/index.html	Thu Nov 17 16:32:53 2011 +0100
+++ b/unittests/index.html	Thu Nov 17 16:51:19 2011 +0100
@@ -40,6 +40,7 @@
 	<script src="tests/widgets/tooltipWidget.js" type="text/javascript"></script>
 	<script src="tests/widgets/polemicWidget.js" type="text/javascript"></script>
 	<script src="tests/widgets/sliderWidget.js" type="text/javascript"></script>
+	<script src="tests/widgets/tweetsWidget.js" type="text/javascript"></script>
 </head>
 <script>
  $(document).ready(function(){ 
@@ -62,6 +63,7 @@
 		test_tooltip_widget();
 		test_polemic_widget();
     test_slider_widget();
+    test_tweets_widget();
 });
 </script>	
 <body>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/unittests/tests/widgets/tweetsWidget.js	Thu Nov 17 16:51:19 2011 +0100
@@ -0,0 +1,43 @@
+/* tweetsWidget.js */
+
+function test_tweets_widget() {
+  module("tweet widget testing", 
+  {setup : function() {    
+    this.Popcorn = Popcorn.youtube("#popcorn-div", "http://www.youtube.com/watch?v=QH2-TGUlwu4");
+    
+    this.dt = new IriSP.DataLoader();
+    this.ser = new IriSP.MockTweetSerializer(this.dt, "/url"); /* dummy serializer */
+
+    this.config = {
+							width:650,
+							height:1,
+							mode:'radio',
+							container:'widget-div',
+							debug:true,
+							css:'../src/css/LdtPlayer.css'};
+    },
+  teardown: function() {
+    /* free the popcorn object because it has signal handlers attached to it */
+    this.Popcorn = Popcorn.youtube("#popcorn-div", "http://www.youtube.com/watch?v=QH2-TGUlwu4");
+  }
+  });
+  
+  test("test widget initialization", function() {  
+    var widget = new IriSP.TweetsWidget(this.Popcorn, this.config, this.ser);    
+    widget.draw();
+
+    equal(widget.selector.children(".Ldt-tweetAvatar").length, 1, "test if the div has been added correctly");
+    equal(widget.selector.children(".Ldt-tweetContents").length, 1, "test if sub-div has been added correctly");
+  });
+  
+  test("test tweet display function", function() {
+    var widget = new IriSP.TweetsWidget(this.Popcorn, this.config, this.ser);    
+    widget.draw();
+    var annotation = {content: {"title": "title", "description": "description", "keywords": "keywords"}};
+    widget.displayTweet(annotation);
+    
+    equal(widget.selector.find(".Ldt-tweetContents").text(), "title", "title set correctly");
+    // equal(widget.selector.find(".Ldt-SaDescription").text(), "description", "description set correctly");
+    // equal(widget.selector.find(".Ldt-SaKeywordText").text(), "", "keywords field set correctly");
+  });
+}; 
\ No newline at end of file