src/js/widgets/sparklineWidget.js
branchpopcorn-port
changeset 529 3ebf62837492
parent 524 a06527b99f22
child 532 5249bb0cd964
--- 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