react to clicks on the curve.
--- a/src/js/widgets/sparklineWidget.js Fri Dec 23 16:40:16 2011 +0100
+++ b/src/js/widgets/sparklineWidget.js Fri Dec 23 16:40:43 2011 +0100
@@ -58,7 +58,7 @@
spotColor: "#b70056",
width: this.width, height: this.height});
this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler));
-
+ IriSP.jQuery(".Ldt-sparkLineClickOverlay").click(IriSP.wrap(this, this.clickHandler));
this.spacer.css("height", "2px");
};
@@ -70,3 +70,23 @@
IriSP.jQuery(".Ldt-sparkLinePositionMarker").css("width", proportion + "%");
}
+
+/** handle clicks on the widget */
+IriSP.SparklineWidget.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.selector.offset();
+ var width = this.selector.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