|
1 IriSP.Widgets.Polemic = function(player, config) { |
|
2 IriSP.Widgets.Widget.call(this, player, config); |
|
3 }; |
|
4 |
|
5 IriSP.Widgets.Polemic.prototype = new IriSP.Widgets.Widget(); |
|
6 |
|
7 IriSP.Widgets.Polemic.prototype.messages = { |
|
8 fr: { |
|
9 from_: "de ", |
|
10 _to_: " à ", |
|
11 _annotations: " annotation(s)" |
|
12 }, |
|
13 en: { |
|
14 from_: "from ", |
|
15 _to_: " to ", |
|
16 _annotations: " annotation(s)" |
|
17 } |
|
18 } |
|
19 IriSP.Widgets.Polemic.prototype.defaults = { |
|
20 element_width : 5, |
|
21 element_height : 5, |
|
22 max_elements : 15, |
|
23 annotation_type : "tweet", |
|
24 defaultcolor : "#585858", |
|
25 foundcolor : "#fc00ff", |
|
26 polemics : [ |
|
27 { |
|
28 "name" : "OK", |
|
29 "keywords" : [ "++" ], |
|
30 "color" : "#1D973D" |
|
31 }, |
|
32 { |
|
33 "name" : "KO", |
|
34 "keywords" : [ "--" ], |
|
35 "color" : "#CE0A15" |
|
36 }, |
|
37 { |
|
38 "name" : "REF", |
|
39 "keywords" : [ "==", "http://" ], |
|
40 "color" : "#C5A62D" |
|
41 }, |
|
42 { |
|
43 "name" : "Q", |
|
44 "keywords" : [ "?" ], |
|
45 "color" : "#036AAE" |
|
46 } |
|
47 ] |
|
48 }; |
|
49 |
|
50 IriSP.Widgets.Polemic.prototype.onSearch = function(searchString) { |
|
51 this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
|
52 var _found = 0, |
|
53 _re = IriSP.Model.regexpFromTextOrArray(searchString, true), |
|
54 _this = this; |
|
55 this.$tweets.each(function() { |
|
56 var _el = IriSP.jQuery(this); |
|
57 if (_this.searchString) { |
|
58 if (_re.test(_el.attr("tweet-title"))) { |
|
59 _el.css({ |
|
60 "background" : _this.foundcolor, |
|
61 "opacity" : 1 |
|
62 }); |
|
63 _found++; |
|
64 } else { |
|
65 _el.css({ |
|
66 "background" : _el.attr("polemic-color"), |
|
67 "opacity" : .3 |
|
68 }); |
|
69 } |
|
70 } else { |
|
71 _el.css({ |
|
72 "background" : _el.attr("polemic-color"), |
|
73 "opacity" : 1 |
|
74 }); |
|
75 } |
|
76 }); |
|
77 if (this.searchString) { |
|
78 if (_found) { |
|
79 this.player.popcorn.trigger("IriSP.search.matchFound"); |
|
80 } else { |
|
81 this.player.popcorn.trigger("IriSP.search.noMatchFound"); |
|
82 } |
|
83 } |
|
84 } |
|
85 |
|
86 IriSP.Widgets.Polemic.prototype.draw = function() { |
|
87 |
|
88 this.bindPopcorn("timeupdate", "onTimeupdate"); |
|
89 this.$zone = IriSP.jQuery('<div>'); |
|
90 this.$zone.addClass("Ldt-Polemic"); |
|
91 this.$.append(this.$zone); |
|
92 |
|
93 this.$elapsed = IriSP.jQuery('<div>') |
|
94 .css({ |
|
95 background: '#cccccc', |
|
96 position: "absolute", |
|
97 top: 0, |
|
98 left: 0, |
|
99 width: 0, |
|
100 height: "100%" |
|
101 }); |
|
102 |
|
103 this.$zone.append(this.$elapsed); |
|
104 |
|
105 var _slices = [], |
|
106 _slice_count = Math.floor( this.width / this.element_width ), |
|
107 _duration = this.source.getDuration(), |
|
108 _max = 0, |
|
109 _list = this.getWidgetAnnotations(), |
|
110 _this = this; |
|
111 |
|
112 for (var _i = 0; _i < _slice_count; _i++) { |
|
113 var _begin = new IriSP.Model.Time( _i * _duration / _slice_count ), |
|
114 _end = new IriSP.Model.Time( ( _i + 1 ) * _duration / _slice_count ), |
|
115 _count = 0, |
|
116 _res = { |
|
117 begin : _begin.toString(), |
|
118 end : _end.toString(), |
|
119 annotations : _list.filter(function(_annotation) { |
|
120 return _annotation.begin >= _begin && _annotation.end < _end; |
|
121 }), |
|
122 polemicStacks : [] |
|
123 } |
|
124 |
|
125 for (var _j = 0; _j < this.polemics.length; _j++) { |
|
126 var _polemic = _res.annotations.searchByDescription(this.polemics[_j].keywords); |
|
127 _count += _polemic.length; |
|
128 _res.polemicStacks.push(_polemic); |
|
129 } |
|
130 for (var _j = 0; _j < this.polemics.length; _j++) { |
|
131 _res.annotations.removeElements(_res.polemicStacks[_j]); |
|
132 } |
|
133 _count += _res.annotations.length; |
|
134 _max = Math.max(_max, _count); |
|
135 _slices.push(_res); |
|
136 } |
|
137 if (_max < this.max_elements) { |
|
138 this.is_stackgraph = false; |
|
139 if (_max) { |
|
140 |
|
141 this.height = (2 + _max) * this.element_height; |
|
142 this.$zone.css({ |
|
143 width: this.width + "px", |
|
144 height: this.height + "px", |
|
145 position: "relative" |
|
146 }); |
|
147 |
|
148 var _x = 0; |
|
149 |
|
150 function displayAnnotation(_elx, _ely, _pol, _col, _annotation) { |
|
151 var _html = Mustache.to_html( |
|
152 '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id={{media_id}}, polemic={{polemic}}" polemic-color="{{color}}"' |
|
153 + ' tweet-title="{{title}}" annotation-id="{{id}}" style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>', |
|
154 { |
|
155 id: _annotation.id, |
|
156 media_id: _this.source.currentMedia.id, |
|
157 polemic: _pol, |
|
158 left: _elx, |
|
159 top: _ely, |
|
160 color: _col, |
|
161 width: (_this.element_width-1), |
|
162 height: _this.element_height, |
|
163 title: _annotation.title |
|
164 }); |
|
165 var _el = IriSP.jQuery(_html); |
|
166 _el.mouseover(function() { |
|
167 _annotation.trigger("select"); |
|
168 }).mouseout(function() { |
|
169 _annotation.trigger("unselect"); |
|
170 }).click(function() { |
|
171 _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _annotation.id); |
|
172 _this.player.popcorn.trigger("IriSP.Tweet.show", _annotation.id); |
|
173 }); |
|
174 _annotation.on("select", function() { |
|
175 _this.tooltip.show( |
|
176 Math.floor(_elx + (_this.element_width - 1) / 2), |
|
177 _ely, |
|
178 _annotation.title, |
|
179 _col |
|
180 ); |
|
181 _this.$tweets.each(function() { |
|
182 var _e = IriSP.jQuery(this); |
|
183 _e.css( |
|
184 "opacity", |
|
185 ( _e.attr("annotation-id") == _annotation.id ? 1 : .3 ) |
|
186 ); |
|
187 }); |
|
188 }); |
|
189 _annotation.on("unselect", function() { |
|
190 _this.tooltip.hide(); |
|
191 _this.$tweets.css("opacity",1); |
|
192 }); |
|
193 _this.$zone.append(_el); |
|
194 } |
|
195 |
|
196 IriSP._(_slices).forEach(function(_slice) { |
|
197 var _y = _this.height; |
|
198 _slice.annotations.forEach(function(_annotation) { |
|
199 _y -= _this.element_height; |
|
200 displayAnnotation(_x, _y, "none", _this.defaultcolor, _annotation); |
|
201 }); |
|
202 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) { |
|
203 var _color = _this.polemics[_j].color, |
|
204 _polemic = _this.polemics[_j].name; |
|
205 _annotations.forEach(function(_annotation) { |
|
206 _y -= _this.element_height; |
|
207 displayAnnotation(_x, _y, _polemic, _color, _annotation); |
|
208 }); |
|
209 }); |
|
210 _x += _this.element_width; |
|
211 }); |
|
212 |
|
213 this.$zone.append(_html); |
|
214 |
|
215 this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); |
|
216 |
|
217 this.bindPopcorn("IriSP.search", "onSearch"); |
|
218 this.bindPopcorn("IriSP.search.closed", "onSearch"); |
|
219 this.bindPopcorn("IriSP.search.cleared", "onSearch"); |
|
220 |
|
221 } else { |
|
222 this.$zone.hide(); |
|
223 } |
|
224 } else { |
|
225 this.is_stackgraph = true; |
|
226 |
|
227 this.height = (2 + this.max_elements) * this.element_height; |
|
228 this.$zone.css({ |
|
229 width: this.width + "px", |
|
230 height: this.height + "px", |
|
231 position: "relative" |
|
232 }); |
|
233 |
|
234 var _x = 0, |
|
235 _html = '', |
|
236 _scale = this.max_elements * this.element_height / _max; |
|
237 |
|
238 function displayStackElement(_x, _y, _h, _color, _nums, _begin, _end, _polemic) { |
|
239 _html += Mustache.to_html( |
|
240 '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-block, media-id={{media_id}}, polemic={{polemic}}, time:{{begin}}" pos-x="{{posx}}" pos-y="{{top}}" annotation-counts="{{nums}}" begin-time="{{begin}}" end-time="{{end}}"' |
|
241 + ' style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>', |
|
242 { |
|
243 nums: _nums, |
|
244 posx: Math.floor(_x + (_this.element_width - 1) / 2), |
|
245 media_id: _this.source.currentMedia.id, |
|
246 polemic: _polemic, |
|
247 left: _x, |
|
248 top: _y, |
|
249 color: _color, |
|
250 width: (_this.element_width-1), |
|
251 height: _h, |
|
252 begin: _begin, |
|
253 end: _end |
|
254 }); |
|
255 } |
|
256 |
|
257 IriSP._(_slices).forEach(function(_slice) { |
|
258 var _y = _this.height, |
|
259 _nums = _slice.annotations.length + "," + IriSP._(_slice.polemicStacks).map(function(_annotations) { |
|
260 return _annotations.length |
|
261 }).join(","); |
|
262 if (_slice.annotations.length) { |
|
263 var _h = Math.ceil(_scale * _slice.annotations.length); |
|
264 _y -= _h; |
|
265 displayStackElement(_x, _y, _h, _this.defaultcolor, _nums, _slice.begin, _slice.end, "none"); |
|
266 } |
|
267 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) { |
|
268 if (_annotations.length) { |
|
269 var _color = _this.polemics[_j].color, |
|
270 _polemic = _this.polemics[_j].name, |
|
271 _h = Math.ceil(_scale * _annotations.length); |
|
272 _y -= _h; |
|
273 displayStackElement(_x, _y, _h, _color, _nums, _slice.begin, _slice.end, _polemic); |
|
274 } |
|
275 }); |
|
276 _x += _this.element_width; |
|
277 }); |
|
278 |
|
279 this.$zone.append(_html); |
|
280 |
|
281 this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); |
|
282 |
|
283 this.$tweets |
|
284 .mouseover(function() { |
|
285 var _el = IriSP.jQuery(this), |
|
286 _nums = _el.attr("annotation-counts").split(","), |
|
287 _html = '<p>' + _this.l10n.from_ + _el.attr("begin-time") + _this.l10n._to_ + _el.attr("end-time") + '</p>'; |
|
288 for (var _i = 0; _i <= _this.polemics.length; _i++) { |
|
289 var _color = _i ? _this.polemics[_i - 1].color : _this.defaultcolor; |
|
290 _html += '<div class="Ldt-Tooltip-Color" style="background: ' + _color + '"></div><p>' + _nums[_i] + _this.l10n._annotations + '</p>' |
|
291 } |
|
292 _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _html); |
|
293 }) |
|
294 .mouseout(function() { |
|
295 _this.tooltip.hide(); |
|
296 }) |
|
297 |
|
298 } |
|
299 |
|
300 this.$position = IriSP.jQuery('<div>').addClass("Ldt-Polemic-Position"); |
|
301 |
|
302 this.$zone.append(this.$position); |
|
303 |
|
304 this.$zone.click(function(_e) { |
|
305 var _x = _e.pageX - _this.$zone.offset().left; |
|
306 _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width); |
|
307 }); |
|
308 |
|
309 this.$.append('<div class="Ldt-Polemic-Tooltip"></div>'); |
|
310 |
|
311 this.insertSubwidget(this.$.find(".Ldt-Polemic-Tooltip"), "tooltip", { type: "Tooltip" }); |
|
312 } |
|
313 |
|
314 IriSP.Widgets.Polemic.prototype.onTimeupdate = function() { |
|
315 var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds()); |
|
316 this.$elapsed.css({ |
|
317 width: _x + "px" |
|
318 }); |
|
319 this.$position.css({ |
|
320 left: _x + "px" |
|
321 }) |
|
322 } |