11 |
11 |
12 IriSP.SparklineWidget.prototype.clear = function() { |
12 IriSP.SparklineWidget.prototype.clear = function() { |
13 |
13 |
14 }; |
14 }; |
15 |
15 |
|
16 /** draw the sparkline using jquery sparkline */ |
16 IriSP.SparklineWidget.prototype.draw = function() { |
17 IriSP.SparklineWidget.prototype.draw = function() { |
17 var templ = Mustache.to_html(IriSP.SparklineWidget_template, {}); |
18 var templ = Mustache.to_html(IriSP.SparklineWidget_template, {width: this.width, height: this.height}); |
18 /** this widget uses three divs - |
19 /** this widget uses three divs - |
19 the first is the sparkline, which is generated by jquery sparkline, |
20 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 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 and the third is a div to react to clicks |
22 */ |
23 */ |
|
24 |
|
25 /* we suppose that a column is 5 pixels wide */ |
|
26 var num_columns = (this.selector.width()) / 10; |
|
27 var duration = +this._serializer.currentMedia().meta["dc:duration"]; |
|
28 var time_step = duration / num_columns; /* the time interval between two columns */ |
|
29 var results = []; |
|
30 var i = 0; /* the index in the loop */ |
|
31 |
|
32 /* this algorithm makes one assumption : that the array is sorted |
|
33 (it's done for us by the JSONSerializer). We go through the array |
|
34 and count how many comments fall within a peculiar time piece. |
|
35 As i is preserved between each iteration, it's O(n). |
|
36 */ |
|
37 for(var j = 0; j < num_columns; j++) { |
|
38 var count = 0; |
|
39 |
|
40 var annotation_begin = +(this._serializer._data.annotations[i].begin); |
|
41 |
|
42 while(annotation_begin >= j * time_step && annotation_begin <= (j + 1) * time_step ) { |
|
43 count++; |
|
44 i++; |
|
45 if (i >= this._serializer._data.annotations.length) |
|
46 break; |
|
47 |
|
48 annotation_begin = +(this._serializer._data.annotations[i].begin); |
|
49 |
|
50 } |
|
51 |
|
52 results.push(count); |
|
53 } |
|
54 |
23 this.selector.append(templ); |
55 this.selector.append(templ); |
24 this.selector.find(".Ldt-sparkLine").sparkline([1, 34, 56, 45, 34, 67, 78, 84], {width: "640px", height: "60px"}); |
56 this.selector.find(".Ldt-sparkLine").css("background", "#c7c8cc"); |
|
57 this.selector.find(".Ldt-sparkLine").sparkline(results, {lineColor: "#7492b4", fillColor: "#aeaeb8", |
|
58 spotColor: "#b70056", |
|
59 width: this.width, height: this.height}); |
25 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); |
60 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); |
|
61 |
|
62 this.spacer.css("height", "2px"); |
26 }; |
63 }; |
27 |
64 |
28 /** react to a timeupdate event */ |
65 /** react to a timeupdate event */ |
29 IriSP.SparklineWidget.prototype.timeUpdateHandler = function() { |
66 IriSP.SparklineWidget.prototype.timeUpdateHandler = function() { |
30 var currentTime = this._Popcorn.currentTime(); |
67 var currentTime = this._Popcorn.currentTime(); |
31 var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000; |
68 var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000; |
32 var proportion = ((currentTime / duration) * 100).toFixed(3); |
69 var proportion = ((currentTime / duration) * 100).toFixed(4); |
33 |
70 |
34 IriSP.jQuery(".Ldt-sparkLinePositionMarker").css("width", proportion + "%"); |
71 IriSP.jQuery(".Ldt-sparkLinePositionMarker").css("width", proportion + "%"); |
35 } |
72 } |