10 this._Popcorn.listen("IriSP.search.cleared", function() { self.searchFieldClearedHandler.call(self); }); |
10 this._Popcorn.listen("IriSP.search.cleared", function() { self.searchFieldClearedHandler.call(self); }); |
11 }; |
11 }; |
12 |
12 |
13 IriSP.SegmentsWidget.prototype = new IriSP.Widget(); |
13 IriSP.SegmentsWidget.prototype = new IriSP.Widget(); |
14 |
14 |
|
15 /* Get the width of a segment, in pixels. */ |
|
16 IriSP.SegmentsWidget.prototype.segmentToPixel = function(annotation) { |
|
17 var begin = Math.round((+ annotation.begin) / 1000); |
|
18 var end = Math.round((+ annotation.end) / 1000); |
|
19 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
|
20 |
|
21 var startPourcent = IriSP.timeToPourcent(begin, duration); |
|
22 var startPixel = Math.floor(this.selector.parent().width() * (startPourcent / 100)); |
|
23 |
|
24 var endPourcent = Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent); |
|
25 var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)); |
|
26 |
|
27 return endPixel; |
|
28 }; |
|
29 |
|
30 /* compute the total length of a group of segments */ |
|
31 IriSP.SegmentsWidget.prototype.segmentsLength = function(segmentsList) { |
|
32 var self = this; |
|
33 var total = 0; |
|
34 |
|
35 for (var i = 0; i < segmentsList.length; i++) |
|
36 total += self.segmentToPixel(segmentsList[i].annotation); |
|
37 |
|
38 return total; |
|
39 }; |
|
40 |
15 IriSP.SegmentsWidget.prototype.draw = function() { |
41 IriSP.SegmentsWidget.prototype.draw = function() { |
16 |
42 |
17 var self = this; |
43 var self = this; |
18 var annotations = this._serializer._data.annotations; |
44 var annotations = this._serializer._data.annotations; |
19 |
45 |
20 this.selector.addClass("Ldt-SegmentsWidget"); |
46 this.selector.addClass("Ldt-SegmentsWidget"); |
21 |
|
22 /* in case we have different types of annotations, we want to display only the first type */ |
|
23 /* the next two lines are a bit verbose because for some test data, _serializer.data.view is either |
|
24 null or undefined. |
|
25 */ |
|
26 var view; |
|
27 |
|
28 if (typeof(this._serializer._data.views) !== "undefined" && this._serializer._data.views !== null) |
|
29 view = this._serializer._data.views[0]; |
|
30 |
|
31 var view_type = ""; |
|
32 |
|
33 if(typeof(view) !== "undefined" && typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) { |
|
34 view_type = view.annotation_types[0]; |
|
35 } |
|
36 |
|
37 this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); |
47 this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); |
|
48 |
|
49 var view_type = this._serializer.getNonTweetIds()[0]; |
38 |
50 |
39 this.positionMarker = this.selector.children(":first"); |
51 this.positionMarker = this.selector.children(":first"); |
40 |
52 |
41 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater)); |
53 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater)); |
42 |
54 |
43 |
55 |
44 var i = 0; |
56 var i = 0; |
45 var totalWidth = this.selector.width(); |
57 |
46 var onePxPercent = 100 / totalWidth; /* the value of a pixel, in percents */ |
58 var segments_annotations = []; |
47 |
59 |
48 for (i = 0; i < annotations.length; i++) { |
60 for (i = 0; i < annotations.length; i++) { |
49 var annotation = annotations[i]; |
61 var annotation = annotations[i]; |
50 |
62 |
51 /* filter the annotations whose type is not the one we want */ |
63 /* filter the annotations whose type is not the one we want */ |
52 if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined" |
64 if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined" |
53 && annotation.meta["id-ref"] != view_type) { |
65 && annotation.meta["id-ref"] != view_type) { |
54 continue; |
66 continue; |
55 } |
67 } |
56 |
68 |
57 var begin = Math.round((+ annotation.begin) / 1000); |
69 segments_annotations.push(annotation); |
58 var end = Math.round((+ annotation.end) / 1000); |
70 } |
59 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
71 |
|
72 var totalWidth = this.selector.width() - segments_annotations.length; |
|
73 var lastSegment = IriSP.underscore.max(segments_annotations, function(annotation) { return annotation.end; }); |
|
74 |
|
75 for (i = 0; i < segments_annotations.length; i++) { |
|
76 |
|
77 var annotation = segments_annotations[i]; |
|
78 var begin = (+ annotation.begin); |
|
79 var end = (+ annotation.end); |
|
80 var duration = this._serializer.currentMedia().meta["dc:duration"]; |
60 var id = annotation.id; |
81 var id = annotation.id; |
61 var startPourcent = IriSP.timeToPourcent(begin, duration); |
|
62 |
|
63 /* surprisingly, the following code doesn't work on webkit - for some reason, most of the |
|
64 boxes are 3 pixels smaller. |
|
65 */ |
|
66 var endPourcent = Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent); |
|
67 var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)) - 2; |
|
68 |
82 |
69 if (i == 0) { |
83 var startPixel = Math.floor(this.selector.parent().width() * (begin / duration)); |
70 |
84 |
71 endPourcent -= onePxPercent; |
85 var endPixel = Math.floor(this.selector.parent().width() * (end / duration)); |
72 } |
86 |
73 |
87 if (annotation.id !== lastSegment.id) |
|
88 var pxWidth = endPixel - startPixel -1; |
|
89 else |
|
90 /* the last segment has no segment following it */ |
|
91 var pxWidth = endPixel - startPixel; |
|
92 |
74 var divTitle = (annotation.content.title + " - " + annotation.content.description).substr(0,55); |
93 var divTitle = (annotation.content.title + " - " + annotation.content.description).substr(0,55); |
75 |
94 |
76 if (typeof(annotation.content.color) !== "undefined") |
95 if (typeof(annotation.content.color) !== "undefined") |
77 var color = annotation.content.color; |
96 var color = annotation.content.color; |
78 else |
97 else |
84 hexa_color = "333"; |
103 hexa_color = "333"; |
85 if (hexa_color.length == 4) |
104 if (hexa_color.length == 4) |
86 hexa_color = hexa_color + '00'; |
105 hexa_color = hexa_color + '00'; |
87 |
106 |
88 var annotationTemplate = Mustache.to_html(IriSP.annotation_template, |
107 var annotationTemplate = Mustache.to_html(IriSP.annotation_template, |
89 {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent, |
108 {"divTitle" : divTitle, "id" : id, "startPixel" : startPixel, |
90 "endPixel" : endPixel, "hexa_color" : hexa_color, |
109 "pxWidth" : pxWidth, "hexa_color" : hexa_color, |
91 "seekPlace" : Math.round(begin/1000)}); |
110 "seekPlace" : Math.round(begin/1000)}); |
92 |
111 |
|
112 |
93 this.selector.append(annotationTemplate); |
113 this.selector.append(annotationTemplate); |
94 |
114 |
95 // IriSP.jQuery("#" + id).tooltip({ effect: 'slide'}); |
115 /* add a special class to the last segment and change its border */ |
|
116 if (annotation.id === lastSegment.id) { |
|
117 this.selector.find("#" + id).addClass("Ldt-lastSegment"); |
|
118 this.selector.find(".Ldt-lastSegment").css("border-color", "#" + hexa_color); |
|
119 } |
96 |
120 |
97 IriSP.jQuery("#" + id).fadeTo(0, 0.3); |
121 IriSP.jQuery("#" + id).fadeTo(0, 0.3); |
98 |
122 |
99 IriSP.jQuery("#" + id).mouseover( |
123 IriSP.jQuery("#" + id).mouseover( |
100 /* we wrap the handler in another function because js's scoping |
124 /* we wrap the handler in another function because js's scoping |