14 |
14 |
15 IriSP.SegmentsWidget.prototype.draw = function() { |
15 IriSP.SegmentsWidget.prototype.draw = function() { |
16 |
16 |
17 var self = this; |
17 var self = this; |
18 var annotations = this._serializer._data.annotations; |
18 var annotations = this._serializer._data.annotations; |
19 //this.selector.attr("class", "Ldt-Segments"); |
|
20 |
19 |
21 //this.selector.append("<div style='position: absolute; z-index: 100; text-color: blue'></div>") |
20 |
22 |
21 this.selector.after("<div class='cleaner'></div>"); // we need to do this because the segments are floated |
|
22 |
23 var i = 0; |
23 var i = 0; |
24 |
24 var totalWidth = this.selector.width(); |
|
25 var onePxPercent = 100 / totalWidth; /* the value of a pixel, in percents */ |
|
26 |
25 for (i = 0; i < annotations.length; i++) { |
27 for (i = 0; i < annotations.length; i++) { |
26 var annotation = annotations[i]; |
28 var annotation = annotations[i]; |
27 |
29 |
28 var begin = Math.round((+ annotation.begin) / 1000); |
30 var begin = Math.round((+ annotation.begin) / 1000); |
29 var end = Math.round((+ annotation.end) / 1000); |
31 var end = Math.round((+ annotation.end) / 1000); |
30 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
32 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
31 var id = annotation.id; |
33 var id = annotation.id; |
32 var startPourcent = IriSP.timeToPourcent(begin, duration); |
34 var startPourcent = IriSP.timeToPourcent(begin, duration) + onePxPercent * annotations.length * 2; |
33 var endPourcent = IriSP.timeToPourcent(end, duration) - startPourcent; |
35 var endPourcent = IriSP.timeToPourcent(end, duration) - startPourcent; |
34 |
36 |
35 var divTitle = annotation.content.title.substr(0,55); |
37 var divTitle = annotation.content.title.substr(0,55); |
36 var color = annotation.content.color |
38 var color = annotation.content.color |
37 |
39 |
48 |
50 |
49 this.selector.append(annotationTemplate); |
51 this.selector.append(annotationTemplate); |
50 |
52 |
51 IriSP.jQuery("#" + id).tooltip({ effect: 'slide'}); |
53 IriSP.jQuery("#" + id).tooltip({ effect: 'slide'}); |
52 |
54 |
53 IriSP.jQuery("#" + id).fadeTo(0,0.3); |
55 IriSP.jQuery("#" + id).fadeTo(0, 0.3); |
54 |
56 |
55 IriSP.jQuery("#" + id).mouseover(function() { |
57 IriSP.jQuery("#" + id).mouseover(function() { |
56 IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5); |
58 IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5); |
57 }).mouseout(function(){ |
59 }).mouseout(function(){ |
58 IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5); |
60 IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5); |