1 /** @class The constructor for the sparkline widget */ |
1 /** @class The constructor for the sparkline widget */ |
2 IriSP.SparklineWidget = function(Popcorn, config, Serializer) { |
2 IriSP.SparklineWidget = function(Popcorn, config, Serializer) { |
3 IriSP.Widget.call(this, Popcorn, config, Serializer); |
3 IriSP.Widget.call(this, Popcorn, config, Serializer); |
4 |
4 |
5 this._oldAnnotation = null; |
5 this._oldAnnotation = null; |
6 |
6 this._results = []; |
7 }; |
7 }; |
8 |
8 |
9 |
9 |
10 IriSP.SparklineWidget.prototype = new IriSP.Widget(); |
10 IriSP.SparklineWidget.prototype = new IriSP.Widget(); |
11 |
11 |
19 /** this widget uses three divs - |
19 /** this widget uses three divs - |
20 the first is the sparkline, which is generated by jquery sparkline, |
20 the first is the sparkline, which is generated by jquery sparkline, |
21 the second is an overlay div to display the progression in the video, |
21 the second is an overlay div to display the progression in the video, |
22 and the third is a div to react to clicks |
22 and the third is a div to react to clicks |
23 */ |
23 */ |
24 |
24 |
25 /* we suppose that a column is 5 pixels wide */ |
25 var num_columns = (this.selector.width()) / IriSP.widgetsDefaults["SparklineWidget"].column_width; |
26 var num_columns = (this.selector.width()) / 10; |
|
27 var duration = +this._serializer.currentMedia().meta["dc:duration"]; |
26 var duration = +this._serializer.currentMedia().meta["dc:duration"]; |
28 var time_step = duration / num_columns; /* the time interval between two columns */ |
27 var time_step = duration / num_columns; /* the time interval between two columns */ |
29 var results = []; |
28 var results = []; |
30 var i = 0; /* the index in the loop */ |
29 var i = 0; /* the index in the loop */ |
31 |
30 |
50 } |
49 } |
51 |
50 |
52 results.push(count); |
51 results.push(count); |
53 } |
52 } |
54 |
53 |
|
54 // save the results in an array so that we can re-use them when a new annotation |
|
55 // is added. |
|
56 this._results = results; |
55 |
57 |
56 this.selector.append(templ); |
58 this.selector.append(templ); |
57 this.selector.find(".Ldt-sparkLine").css("background", "#c7c8cc"); |
59 this.selector.find(".Ldt-sparkLine").css("background", "#c7c8cc"); |
58 this.selector.find(".Ldt-sparkLine").sparkline(results, {lineColor: "#7492b4", fillColor: "#aeaeb8", |
60 this.selector.find(".Ldt-sparkLine").sparkline(results, {lineColor: "#7492b4", fillColor: "#aeaeb8", |
59 spotColor: "#b70056", |
61 spotColor: "#b70056", |
60 width: this.width, height: this.height}); |
62 width: this.width, height: this.height}); |
61 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); |
63 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); |
|
64 this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, this.handleNewAnnotation)); |
|
65 |
62 IriSP.jQuery(".Ldt-sparkLineClickOverlay").click(IriSP.wrap(this, this.clickHandler)); |
66 IriSP.jQuery(".Ldt-sparkLineClickOverlay").click(IriSP.wrap(this, this.clickHandler)); |
63 }; |
67 }; |
64 |
68 |
65 /** react to a timeupdate event */ |
69 /** react to a timeupdate event */ |
66 IriSP.SparklineWidget.prototype.timeUpdateHandler = function() { |
70 IriSP.SparklineWidget.prototype.timeUpdateHandler = function() { |
90 |
94 |
91 |
95 |
92 this._Popcorn.trigger("IriSP.SparklineWidget.clicked", newTime); |
96 this._Popcorn.trigger("IriSP.SparklineWidget.clicked", newTime); |
93 this._Popcorn.currentTime(newTime); |
97 this._Popcorn.currentTime(newTime); |
94 }; |
98 }; |
|
99 |
|
100 /** react when a new annotation is added */ |
|
101 IriSP.SparklineWidget.prototype.handleNewAnnotation = function(annotation) { |
|
102 var num_columns = (this.selector.width()) / IriSP.widgetsDefaults["SparklineWidget"].column_width; |
|
103 var duration = +this._serializer.currentMedia().meta["dc:duration"]; |
|
104 var time_step = duration / num_columns; /* the time interval between two columns */ |
|
105 var begin = +annotation.begin; |
|
106 |
|
107 var index = Math.floor(begin / time_step); |
|
108 this._results[index]++; |
|
109 this.selector.find(".Ldt-sparkLine").sparkline(this._results, {lineColor: "#7492b4", fillColor: "#aeaeb8", |
|
110 spotColor: "#b70056", |
|
111 width: this.width, height: this.height}); |
|
112 }; |