added a handler to seek the slider.
--- a/src/js/widgets/sliderWidget.js Thu Nov 10 17:34:20 2011 +0100
+++ b/src/js/widgets/sliderWidget.js Mon Nov 14 10:47:44 2011 +0100
@@ -16,6 +16,8 @@
this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
this.positionMarker = this.selector.children(".positionMarker");
+ this.sliderBackground.click(function(event) { self.clickHandler.call(self, event); });
+
this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));
};
@@ -28,4 +30,23 @@
this.sliderForeground.css("width", percent + "%");
this.positionMarker.css("left", percent + "%");
+};
+
+IriSP.SliderWidget.prototype.clickHandler = function(event) {
+ /* this piece of code is a little bit convoluted - here's how it works :
+ we want to handle clicks on the progress bar and convert those to seeks in the media.
+ However, jquery only gives us a global position, and we want a number of pixels relative
+ to our container div, so we get the parent position, and compute an offset to this position,
+ and finally compute the progress ratio in the media.
+ Finally we multiply this ratio with the duration to get the correct time
+ */
+
+ var parentOffset = this.sliderBackground.parent().offset();
+ var width = this.sliderBackground.width();
+ var relX = event.pageX - parentOffset.left;
+
+ var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+ var newTime = ((relX / width) * duration).toFixed(2);
+
+ this._Popcorn.currentTime(newTime);
};
\ No newline at end of file
--- a/unittests/tests/sliderWidget.js Thu Nov 10 17:34:20 2011 +0100
+++ b/unittests/tests/sliderWidget.js Mon Nov 14 10:47:44 2011 +0100
@@ -27,7 +27,8 @@
var widget = new IriSP.SliderWidget(this.Popcorn, this.config, this.ser);
widget.draw();
- ok(IriSP.jQuery("#widget-div").hasClass("ui-slider"), "test if the div has been set-up");
+ ok(IriSP.jQuery("#widget-div").children().hasClass("sliderBackground"), "test if the div has been set-up");
+ ok(IriSP.jQuery("#widget-div").children().hasClass("sliderForeground"), "test if the div has been set-up");
});
@@ -36,8 +37,8 @@
widget.draw();
var spy_callback = this.spy();
- widget._Popcorn.listen("test.fixture", spy_callback);
- IriSP.jQuery("#widget-div").slider("value", 30);
+ widget._Popcorn.listen("timeupdate", spy_callback);
+ IriSP.jQuery("#widget-div").children().click();
ok(spy_callback.called, "handling function has been called");
});
}
\ No newline at end of file