src/js/widgets/sparklineWidget.js
branchpopcorn-port
changeset 529 3ebf62837492
parent 524 a06527b99f22
child 532 5249bb0cd964
equal deleted inserted replaced
528:a5894f09825a 529:3ebf62837492
    56   this.selector.find(".Ldt-sparkLine").css("background", "#c7c8cc");
    56   this.selector.find(".Ldt-sparkLine").css("background", "#c7c8cc");
    57   this.selector.find(".Ldt-sparkLine").sparkline(results, {lineColor: "#7492b4", fillColor: "#aeaeb8",
    57   this.selector.find(".Ldt-sparkLine").sparkline(results, {lineColor: "#7492b4", fillColor: "#aeaeb8",
    58                                                            spotColor: "#b70056",
    58                                                            spotColor: "#b70056",
    59                                                            width: this.width, height: this.height});
    59                                                            width: this.width, height: this.height});
    60   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler));
    60   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler));
    61   
    61   IriSP.jQuery(".Ldt-sparkLineClickOverlay").click(IriSP.wrap(this, this.clickHandler));
    62   this.spacer.css("height", "2px");
    62   this.spacer.css("height", "2px");
    63 };
    63 };
    64 
    64 
    65 /** react to a timeupdate event */
    65 /** react to a timeupdate event */
    66 IriSP.SparklineWidget.prototype.timeUpdateHandler = function() {
    66 IriSP.SparklineWidget.prototype.timeUpdateHandler = function() {
    68   var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000;
    68   var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000;
    69   var proportion = ((currentTime / duration) * 100).toFixed(4);
    69   var proportion = ((currentTime / duration) * 100).toFixed(4);
    70   
    70   
    71   IriSP.jQuery(".Ldt-sparkLinePositionMarker").css("width", proportion + "%");                                    
    71   IriSP.jQuery(".Ldt-sparkLinePositionMarker").css("width", proportion + "%");                                    
    72 }
    72 }
       
    73 
       
    74 /** handle clicks on the widget */
       
    75 IriSP.SparklineWidget.prototype.clickHandler = function(event) {
       
    76   /* this piece of code is a little bit convoluted - here's how it works :
       
    77      we want to handle clicks on the progress bar and convert those to seeks in the media.
       
    78      However, jquery only gives us a global position, and we want a number of pixels relative
       
    79      to our container div, so we get the parent position, and compute an offset to this position,
       
    80      and finally compute the progress ratio in the media.
       
    81      Finally we multiply this ratio with the duration to get the correct time
       
    82   */
       
    83 
       
    84   var parentOffset = this.selector.offset();
       
    85   var width = this.selector.width();
       
    86   var relX = event.pageX - parentOffset.left;
       
    87 
       
    88   var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
       
    89   var newTime = ((relX / width) * duration).toFixed(2);
       
    90   
       
    91   this._Popcorn.currentTime(newTime);                                 
       
    92 };