created an arrow widget.
--- a/src/css/LdtPlayer.css Wed Nov 23 11:13:21 2011 +0100
+++ b/src/css/LdtPlayer.css Wed Nov 23 11:14:01 2011 +0100
@@ -164,11 +164,11 @@
/* Arrow Widget */
.Ldt-arrowWidget {
+ position: relative;
background:url('imgs/arrow.png') no-repeat scroll 0 0 transparent ;
height:16px;
width:27px;
margin-bottom: -1px;
- left: 0%;
}
.cleaner {
--- a/src/js/widgets/arrowWidget.js Wed Nov 23 11:13:21 2011 +0100
+++ b/src/js/widgets/arrowWidget.js Wed Nov 23 11:14:01 2011 +0100
@@ -16,4 +16,9 @@
IriSP.ArrowWidget.prototype.draw = function() {
var templ = Mustache.to_html(IriSP.arrowWidget_template, {});
this.selector.append(templ);
+ this._Popcorn.listen("IriSP.SegmentsWidget.segmentClick", IriSP.wrap(this, this.segmentClickHandler));
};
+
+IriSP.ArrowWidget.prototype.segmentClickHandler = function(percents) {
+ this.selector.children(".Ldt-arrowWidget").css("left", percents + "%");
+}
--- a/unittests/index.html Wed Nov 23 11:13:21 2011 +0100
+++ b/unittests/index.html Wed Nov 23 11:14:01 2011 +0100
@@ -41,6 +41,7 @@
<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>
+ <script src="tests/widgets/arrowWidget.js" type="text/javascript"></script>
</head>
<script>
$(document).ready(function(){
@@ -65,6 +66,7 @@
test_polemic_widget();
test_slider_widget();
test_tweets_widget();
+ test_arrow_widget();
});
</script>
<body>
@@ -78,4 +80,4 @@
<div id='widget-div'></div>
</div>
</body>
-</html>
\ No newline at end of file
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/unittests/tests/widgets/arrowWidget.js Wed Nov 23 11:14:01 2011 +0100
@@ -0,0 +1,35 @@
+/* arrowWidget.js */
+
+function test_arrow_widget() {
+ module("arrow 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.MockSerializer(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.ArrowWidget(this.Popcorn, this.config, this.ser);
+ widget.draw();
+
+ equal(widget.selector.children(".Ldt-arrowWidget").length, 1, "test if the div has been added correctly");
+
+ widget._Popcorn.trigger("IriSP.SegmentsWidget.segmentClick", 40);
+ equal(widget.selector.children(".Ldt-arrowWidget").css("left"), "40%", "test if the widget responds correctly to messages.");
+ });
+ };