| author | hamidouk |
| Wed, 26 Oct 2011 15:19:40 +0200 | |
| branch | popcorn-port |
| changeset 152 | 5950ab2855a8 |
| parent 148 | 5e877acd85ca |
| child 154 | 6e115a094858 |
| permissions | -rw-r--r-- |
| 100 | 1 |
IriSP.SegmentsWidget = function(Popcorn, config, Serializer) { |
| 152 | 2 |
|
3 |
var self = this; |
|
4 |
IriSP.Widget.call(this, Popcorn, config, Serializer); |
|
5 |
this.oldSearchMatches = []; |
|
6 |
|
|
7 |
// event handlers |
|
8 |
this._Popcorn.listen("IriSP.search", function(searchString) { self.searchHandler.call(self, searchString); }); |
|
9 |
this._Popcorn.listen("IriSP.search.closed", function() { self.searchFieldClosedHandler.call(self); }); |
|
| 100 | 10 |
}; |
11 |
||
| 139 | 12 |
IriSP.SegmentsWidget.prototype = new IriSP.Widget(); |
| 100 | 13 |
|
14 |
IriSP.SegmentsWidget.prototype.draw = function() { |
|
15 |
||
| 148 | 16 |
var self = this; |
| 100 | 17 |
var annotations = this._serializer._data.annotations; |
18 |
|
|
| 104 | 19 |
var i = 0; |
20 |
for (i = 0; i < annotations.length; i++) { |
|
| 100 | 21 |
var annotation = annotations[i]; |
| 104 | 22 |
|
| 100 | 23 |
var begin = Math.round((+ annotation.begin) / 1000); |
24 |
var end = Math.round((+ annotation.end) / 1000); |
|
| 104 | 25 |
var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
| 100 | 26 |
var id = annotation.id; |
27 |
var startPourcent = IriSP.timeToPourcent(begin, duration); |
|
28 |
var endPourcent = IriSP.timeToPourcent(end, duration) - startPourcent; |
|
29 |
var divTitle = annotation.content.title.substr(0,55); |
|
30 |
var color = annotation.content.color |
|
| 104 | 31 |
|
32 |
|
|
| 100 | 33 |
var annotationTemplate = Mustache.to_html(IriSP.annotation_template, |
34 |
{"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent, |
|
35 |
"endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(color), |
|
36 |
"seekPlace" : Math.round(begin/1000)}); |
|
37 |
|
|
| 104 | 38 |
|
| 100 | 39 |
var toolTipTemplate = Mustache.to_html(IriSP.tooltip_template, |
40 |
{"title" : divTitle, "begin" : begin, "end" : end, |
|
41 |
"description": annotation.content.description}); |
|
42 |
|
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
108
diff
changeset
|
43 |
IriSP.jQuery("#Ldt-Annotations").append(annotationTemplate); |
| 100 | 44 |
|
45 |
IriSP.jQuery("#" + id).tooltip({ effect: 'slide'}); |
|
46 |
|
|
47 |
IriSP.jQuery("#" + id).fadeTo(0,0.3); |
|
| 104 | 48 |
|
| 100 | 49 |
IriSP.jQuery("#" + id).mouseover(function() { |
50 |
IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5); |
|
51 |
}).mouseout(function(){ |
|
52 |
IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5); |
|
| 104 | 53 |
}); |
54 |
|
|
55 |
IriSP.jQuery("#" + id).click(function(_this, annotation) { |
|
56 |
return function() { _this.clickHandler(annotation)}; |
|
57 |
}(this, annotation)); |
|
| 126 | 58 |
|
59 |
// also add an handler to move the arrow. |
|
60 |
// FIXME: make it work - the arrow swings wildly atm. |
|
61 |
var middle = IriSP.timeToPourcent(begin + (end - begin)/ 2, duration); |
|
62 |
var arrow_div_width = IriSP.jQuery("#Ldt-Show-Arrow").width(); |
|
63 |
|
|
64 |
var real_middle = middle - (middle * (1 - this.width/arrow_div_width)); |
|
65 |
var conf = {start: begin, end: end, |
|
66 |
onStart: |
|
67 |
function(middle) { |
|
68 |
return function() { |
|
69 |
IriSP.jQuery("#Ldt-Show-Arrow").animate({left: real_middle + '%'}, 1000); }}(middle) |
|
70 |
}; |
|
71 |
this._Popcorn = this._Popcorn.code(conf); |
|
| 152 | 72 |
} |
| 104 | 73 |
}; |
74 |
||
75 |
IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) { |
|
76 |
var begin = Math.round((+ annotation.begin) / 1000); |
|
77 |
this._Popcorn.currentTime(begin) |
|
|
108
62da43e72e30
broke the serializers across multiple files. added a newline to the end of
hamidouk
parents:
104
diff
changeset
|
78 |
}; |
| 148 | 79 |
|
| 152 | 80 |
IriSP.SegmentsWidget.prototype.searchHandler = function(searchString) { |
81 |
||
82 |
if (searchString == "") |
|
83 |
return; |
|
84 |
|
|
85 |
console.log(searchString); |
|
86 |
var matches = this._serializer.searchOccurences(searchString); |
|
87 |
|
|
88 |
for (var id in matches) { |
|
89 |
var factor = matches[id] * 8; |
|
90 |
IriSP.jQuery("#"+id).dequeue(); |
|
91 |
IriSP.jQuery("#"+id).animate({height: factor},200); |
|
92 |
IriSP.jQuery("#"+id).css('border','2px'); |
|
93 |
IriSP.jQuery("#"+id).css('border-color','red'); |
|
94 |
IriSP.jQuery("#"+id).animate({opacity:0.6},200); |
|
95 |
||
96 |
//IriSP.jQuery("#LdtSearchInput").css('background-color','#e1ffe1'); |
|
97 |
} |
|
98 |
|
|
99 |
// clean up the blocks that were in the previous search |
|
100 |
// but who aren't in the current one. |
|
101 |
for (var id in this.oldSearchMatches) { |
|
102 |
if (!matches.hasOwnProperty(id)) { |
|
103 |
IriSP.jQuery("#"+id).dequeue(); |
|
104 |
IriSP.jQuery("#"+id).animate({height:0},250); |
|
105 |
IriSP.jQuery("#"+id).animate({opacity:0.3},200); |
|
106 |
} |
|
107 |
} |
|
108 |
this.oldSearchMatches = matches; |
|
| 148 | 109 |
}; |
| 152 | 110 |
|
111 |
IriSP.SegmentsWidget.prototype.searchFieldClosedHandler = function() { |
|
112 |
// reinit the fields |
|
113 |
for (var id in this.oldSearchMatches) { |
|
114 |
|
|
115 |
IriSP.jQuery("#"+id).dequeue(); |
|
116 |
IriSP.jQuery("#"+id).animate({height:0},100); |
|
117 |
IriSP.jQuery("#"+id).css('border','0px'); |
|
118 |
IriSP.jQuery("#"+id).css('border-color','red'); |
|
119 |
IriSP.jQuery("#"+id).animate({opacity:0.3},100); |
|
120 |
} |
|
121 |
|
|
122 |
|
|
123 |
}; |