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 |
19 //this.selector.attr("class", "Ldt-Segments"); |
|
20 |
|
21 //this.selector.append("<div style='position: absolute; z-index: 100; text-color: blue'>bfdgdfgsdfgsdgsdfgsdg</div>") |
|
22 |
20 var i = 0; |
23 var i = 0; |
21 for (i = 0; i < annotations.length; i++) { |
24 |
|
25 for (i = 0; i < annotations.length; i++) { |
22 var annotation = annotations[i]; |
26 var annotation = annotations[i]; |
23 |
27 |
24 var begin = Math.round((+ annotation.begin) / 1000); |
28 var begin = Math.round((+ annotation.begin) / 1000); |
25 var end = Math.round((+ annotation.end) / 1000); |
29 var end = Math.round((+ annotation.end) / 1000); |
26 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
30 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
27 var id = annotation.id; |
31 var id = annotation.id; |
28 var startPourcent = IriSP.timeToPourcent(begin, duration); |
32 var startPourcent = IriSP.timeToPourcent(begin, duration); |
29 var endPourcent = IriSP.timeToPourcent(end, duration) - startPourcent; |
33 var endPourcent = IriSP.timeToPourcent(end, duration) - startPourcent; |
|
34 |
30 var divTitle = annotation.content.title.substr(0,55); |
35 var divTitle = annotation.content.title.substr(0,55); |
31 var color = annotation.content.color |
36 var color = annotation.content.color |
32 |
37 |
33 |
38 |
34 var annotationTemplate = Mustache.to_html(IriSP.annotation_template, |
39 var annotationTemplate = Mustache.to_html(IriSP.annotation_template, |
35 {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent, |
40 {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent, |
36 "endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(color), |
41 "endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(color), |
37 "seekPlace" : Math.round(begin/1000)}); |
42 "seekPlace" : Math.round(begin/1000)}); |
38 |
43 |
39 |
44 |
40 var toolTipTemplate = Mustache.to_html(IriSP.tooltip_template, |
45 var toolTipTemplate = Mustache.to_html(IriSP.tooltip_template, |
41 {"title" : divTitle, "begin" : begin, "end" : end, |
46 {"title" : divTitle, "begin" : begin, "end" : end, |
42 "description": annotation.content.description}); |
47 "description": annotation.content.description}); |
43 |
48 |
44 IriSP.jQuery("#Ldt-Annotations").append(annotationTemplate); |
49 this.selector.append(annotationTemplate); |
45 |
50 |
46 IriSP.jQuery("#" + id).tooltip({ effect: 'slide'}); |
51 IriSP.jQuery("#" + id).tooltip({ effect: 'slide'}); |
47 |
52 |
48 IriSP.jQuery("#" + id).fadeTo(0,0.3); |
53 IriSP.jQuery("#" + id).fadeTo(0,0.3); |
49 |
54 |
50 IriSP.jQuery("#" + id).mouseover(function() { |
55 IriSP.jQuery("#" + id).mouseover(function() { |
51 IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5); |
56 IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5); |
52 }).mouseout(function(){ |
57 }).mouseout(function(){ |
53 IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5); |
58 IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5); |
54 }); |
59 }); |
55 |
60 |
56 IriSP.jQuery("#" + id).click(function(_this, annotation) { |
61 IriSP.jQuery("#" + id).click(function(_this, annotation) { |
57 return function() { _this.clickHandler(annotation)}; |
62 return function() { _this.clickHandler(annotation)}; |
58 }(this, annotation)); |
63 }(this, annotation)); |
59 |
64 |
60 // also add an handler to move the arrow. |
65 // also add an handler to move the arrow. |
61 // FIXME: make it work - the arrow swings wildly atm. |
66 // FIXME: make it work - the arrow swings wildly atm. |
62 var middle = IriSP.timeToPourcent(begin + (end - begin)/ 2, duration); |
67 var middle = IriSP.timeToPourcent(begin + (end - begin)/ 2, duration); |
63 var arrow_div_width = IriSP.jQuery("#Ldt-Show-Arrow").width(); |
68 var arrow_div_width = IriSP.jQuery("#Ldt-Show-Arrow").width(); |
64 |
69 |
65 var real_middle = middle - (middle * (1 - this.width/arrow_div_width)); |
70 var real_middle = middle - (middle * (1 - this.width/arrow_div_width)); |
66 var conf = {start: begin, end: end, |
71 var conf = {start: begin, end: end, |
67 onStart: |
72 onStart: |
68 function(middle) { |
73 function(middle) { |
69 return function() { |
74 return function() { |
70 IriSP.jQuery("#Ldt-Show-Arrow").animate({left: real_middle + '%'}, 1000); }}(middle) |
75 IriSP.jQuery("#Ldt-Show-Arrow").animate({left: real_middle + '%'}, 1000); }}(middle) |
71 }; |
76 }; |
72 this._Popcorn = this._Popcorn.code(conf); |
77 this._Popcorn = this._Popcorn.code(conf); |
73 } |
78 } |
74 }; |
79 }; |
75 |
80 |
76 /* restores the view after a search */ |
81 /* restores the view after a search */ |
77 IriSP.SegmentsWidget.prototype.clear = function() { |
82 IriSP.SegmentsWidget.prototype.clear = function() { |
78 // reinit the fields |
83 // reinit the fields |
79 for (var id in this.oldSearchMatches) { |
84 for (var id in this.oldSearchMatches) { |
80 |
85 |
81 IriSP.jQuery("#"+id).dequeue(); |
86 IriSP.jQuery("#"+id).dequeue(); |
82 IriSP.jQuery("#"+id).animate({height:0},100); |
87 IriSP.jQuery("#"+id).animate({height:0},100); |
83 IriSP.jQuery("#"+id).css('border','0px'); |
88 IriSP.jQuery("#"+id).css('border','0px'); |
84 IriSP.jQuery("#"+id).css('border-color','red'); |
89 IriSP.jQuery("#"+id).css('border-color','red'); |
85 IriSP.jQuery("#"+id).animate({opacity:0.3},100); |
90 IriSP.jQuery("#"+id).animate({opacity:0.3},100); |
86 } |
91 } |
87 }; |
92 }; |
88 |
93 |
89 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) { |
94 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) { |
90 var begin = Math.round((+ annotation.begin) / 1000); |
95 var begin = Math.round((+ annotation.begin) / 1000); |
91 this._Popcorn.currentTime(begin) |
96 this._Popcorn.currentTime(begin) |
93 |
98 |
94 IriSP.SegmentsWidget.prototype.searchHandler = function(searchString) { |
99 IriSP.SegmentsWidget.prototype.searchHandler = function(searchString) { |
95 |
100 |
96 if (searchString == "") |
101 if (searchString == "") |
97 return; |
102 return; |
98 |
103 |
99 console.log(searchString); |
104 console.log(searchString); |
100 var matches = this._serializer.searchOccurences(searchString); |
105 var matches = this._serializer.searchOccurences(searchString); |
101 |
106 |
102 for (var id in matches) { |
107 for (var id in matches) { |
103 var factor = matches[id] * 8; |
108 var factor = matches[id] * 8; |
104 IriSP.jQuery("#"+id).dequeue(); |
109 IriSP.jQuery("#"+id).dequeue(); |
105 IriSP.jQuery("#"+id).animate({height: factor}, 200); |
110 IriSP.jQuery("#"+id).animate({height: factor}, 200); |
106 IriSP.jQuery("#"+id).css('border','2px'); |
111 IriSP.jQuery("#"+id).css('border','2px'); |
107 IriSP.jQuery("#"+id).css('border-color','red'); |
112 IriSP.jQuery("#"+id).css('border-color','red'); |
108 IriSP.jQuery("#"+id).animate({opacity:0.6}, 200); |
113 IriSP.jQuery("#"+id).animate({opacity:0.6}, 200); |
109 |
114 |
110 //IriSP.jQuery("#LdtSearchInput").css('background-color','#e1ffe1'); |
115 //IriSP.jQuery("#LdtSearchInput").css('background-color','#e1ffe1'); |
111 } |
116 } |
112 |
117 |
113 // clean up the blocks that were in the previous search |
118 // clean up the blocks that were in the previous search |
114 // but who aren't in the current one. |
119 // but who aren't in the current one. |
115 for (var id in this.oldSearchMatches) { |
120 for (var id in this.oldSearchMatches) { |
116 if (!matches.hasOwnProperty(id)) { |
121 if (!matches.hasOwnProperty(id)) { |
117 IriSP.jQuery("#"+id).dequeue(); |
122 IriSP.jQuery("#"+id).dequeue(); |
118 IriSP.jQuery("#"+id).animate({height:0},250); |
123 IriSP.jQuery("#"+id).animate({height:0},250); |
119 IriSP.jQuery("#"+id).animate({opacity:0.3},200); |
124 IriSP.jQuery("#"+id).animate({opacity:0.3},200); |
120 } |
125 } |