1 /** @class The constructor for the sparkline widget */

     2 IriSP.SparklineWidget = function(Popcorn, config, Serializer) {

     3   IriSP.Widget.call(this, Popcorn, config, Serializer);

     4 

     5   this._oldAnnotation = null;

     6   

     7 };

     8 

     9 

    10 IriSP.SparklineWidget.prototype = new IriSP.Widget();

    11 

    12 IriSP.SparklineWidget.prototype.clear = function() {

    13 

    14 };

    15 

    16 IriSP.SparklineWidget.prototype.draw = function() {

    17   var templ = Mustache.to_html(IriSP.SparklineWidget_template, {});

    18   /** this widget uses three divs -

    19     the first is the sparkline, which is generated by jquery sparkline,

    20     the second is an overlay div to display the progression in the video,

    21     and the third is a div to react to clicks

    22   */

    23   this.selector.append(templ);

    24   this.selector.find(".Ldt-sparkLine").sparkline([1, 34, 56, 45, 34, 67, 78, 84], {width: "640px", height: "60px"});

    25   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler));

    26 };

    27 

    28 /** react to a timeupdate event */

    29 IriSP.SparklineWidget.prototype.timeUpdateHandler = function() {

    30   var currentTime = this._Popcorn.currentTime();  

    31   var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000;

    32   var proportion = ((currentTime / duration) * 100).toFixed(3);

    33 

    34   IriSP.jQuery(".Ldt-sparkLinePositionMarker").css("width", proportion + "%");                                    

    35 }