22 element_height : 5, |
22 element_height : 5, |
23 max_elements: 20, |
23 max_elements: 20, |
24 annotation_type : "tweet", |
24 annotation_type : "tweet", |
25 defaultcolor : "#585858", |
25 defaultcolor : "#585858", |
26 foundcolor : "#fc00ff", |
26 foundcolor : "#fc00ff", |
27 polemics : [ |
27 default_version : "1", |
28 { |
28 polemics : { |
29 "name" : "OK", |
29 "1" : [ |
30 "keywords" : [ "++" ], |
30 { |
31 "color" : "#1D973D" |
31 "name" : "OK", |
32 }, |
32 "keywords" : [ "++" ], |
33 { |
33 "color" : "#1D973D" |
34 "name" : "KO", |
34 }, |
35 "keywords" : [ "--" ], |
35 { |
36 "color" : "#CE0A15" |
36 "name" : "KO", |
37 }, |
37 "keywords" : [ "--" ], |
38 { |
38 "color" : "#CE0A15" |
39 "name" : "REF", |
39 }, |
40 "keywords" : [ "==", "http://" ], |
40 { |
41 "color" : "#C5A62D" |
41 "name" : "REF", |
42 }, |
42 "keywords" : [ "==", "http://" ], |
43 { |
43 "color" : "#C5A62D" |
44 "name" : "Q", |
44 }, |
45 "keywords" : [ "?" ], |
45 { |
46 "color" : "#036AAE" |
46 "name" : "Q", |
47 } |
47 "keywords" : [ "?" ], |
48 ] |
48 "color" : "#036AAE" |
|
49 } |
|
50 ], |
|
51 "2" : [ |
|
52 { |
|
53 "name" : "OK", |
|
54 "keywords" : [ "++" ], |
|
55 "color" : "#1D973D" |
|
56 }, |
|
57 { |
|
58 "name" : "KO", |
|
59 "keywords" : [ "!!" ], |
|
60 "color" : "#CE0A15" |
|
61 }, |
|
62 { |
|
63 "name" : "REF", |
|
64 "keywords" : [ "==", "http://" ], |
|
65 "color" : "#C5A62D" |
|
66 }, |
|
67 { |
|
68 "name" : "Q", |
|
69 "keywords" : [ "?" ], |
|
70 "color" : "#036AAE" |
|
71 } |
|
72 ] |
|
73 } |
|
74 }; |
|
75 |
|
76 IriSP.Widgets.Polemic.prototype.getPolemics = function(version) { |
|
77 if(typeof(version) === "undefined" || !version) { |
|
78 version = this.default_version; |
|
79 } |
|
80 if(this.polemics.constructor === Array) { |
|
81 return this.polemics; |
|
82 } else { |
|
83 return this.polemics[version]; |
|
84 } |
49 }; |
85 }; |
50 |
86 |
51 IriSP.Widgets.Polemic.prototype.draw = function() { |
87 IriSP.Widgets.Polemic.prototype.draw = function() { |
52 |
88 |
53 this.onMediaEvent("timeupdate", "onTimeupdate"); |
89 this.onMediaEvent("timeupdate", "onTimeupdate"); |
54 this.$zone = IriSP.jQuery('<div>'); |
90 this.$zone = IriSP.jQuery('<div>'); |
55 this.$zone.addClass("Ldt-Polemic"); |
91 this.$zone.addClass("Ldt-Polemic"); |
56 this.$.append(this.$zone); |
92 this.$.append(this.$zone); |
57 |
93 |
58 this.$elapsed = IriSP.jQuery('<div>') |
94 this.$elapsed = IriSP.jQuery('<div>') |
59 .css({ |
95 .css({ |
60 background: '#cccccc', |
96 background: '#cccccc', |
61 position: "absolute", |
97 position: "absolute", |
62 top: 0, |
98 top: 0, |
63 left: 0, |
99 left: 0, |
64 width: 0, |
100 width: 0, |
65 height: "100%" |
101 height: "100%" |
66 }); |
102 }); |
67 |
103 |
68 this.$zone.append(this.$elapsed); |
104 this.$zone.append(this.$elapsed); |
69 |
105 |
70 // we don't filter with null duration anymore |
106 // we don't filter with null duration anymore |
71 var _slices = [], |
107 var _slices = [], |
72 _slice_count = Math.floor( this.width / this.element_width ), |
108 _slice_count = Math.floor( this.width / this.element_width ), |
73 _duration = this.source.getDuration(), |
109 _duration = this.source.getDuration(), |
74 _max = 0, |
110 _max = 0, |
75 _list = this.getWidgetAnnotations(), |
111 _list = this.getWidgetAnnotations(), |
76 _this = this; |
112 _this = this; |
77 |
113 |
78 for (var _i = 0; _i < _slice_count; _i++) { |
114 for (var _i = 0; _i < _slice_count; _i++) { |
79 var _begin = new IriSP.Model.Time( _i * _duration / _slice_count ), |
115 var _begin = new IriSP.Model.Time( _i * _duration / _slice_count ), |
80 _end = new IriSP.Model.Time( ( _i + 1 ) * _duration / _slice_count ), |
116 _end = new IriSP.Model.Time( ( _i + 1 ) * _duration / _slice_count ), |
81 _count = 0, |
117 _count = 0, |
82 _res = { |
118 _res = { |
85 annotations : _list.filter(function(_annotation) { |
121 annotations : _list.filter(function(_annotation) { |
86 return _annotation.begin >= _begin && _annotation.begin < _end; |
122 return _annotation.begin >= _begin && _annotation.begin < _end; |
87 }), |
123 }), |
88 polemicStacks : [] |
124 polemicStacks : [] |
89 }; |
125 }; |
90 |
126 |
91 for (var _j = 0; _j < this.polemics.length; _j++) { |
127 for (var _j = 0; _j < this.getPolemics().length; _j++) { |
92 var _polemic = _res.annotations.searchByDescription(this.polemics[_j].keywords); |
128 var _polemic = _res.annotations.searchByDescription(this.getPolemics()[_j].keywords); |
93 _count += _polemic.length; |
129 _count += _polemic.length; |
94 _res.polemicStacks.push(_polemic); |
130 _res.polemicStacks.push(_polemic); |
95 } |
131 } |
96 for (var _j = 0; _j < this.polemics.length; _j++) { |
132 for (var _j = 0; _j < this.getPolemics().length; _j++) { |
97 _res.annotations.removeElements(_res.polemicStacks[_j]); |
133 _res.annotations.removeElements(_res.polemicStacks[_j]); |
98 } |
134 } |
99 _count += _res.annotations.length; |
135 _count += _res.annotations.length; |
100 _max = Math.max(_max, _count); |
136 _max = Math.max(_max, _count); |
101 _slices.push(_res); |
137 _slices.push(_res); |
102 } |
138 } |
103 if (_max < this.max_elements) { |
139 if (_max < this.max_elements) { |
104 this.is_stackgraph = false; |
140 this.is_stackgraph = false; |
105 if (_max) { |
141 if (_max) { |
106 |
142 |
107 this.height = (2 + _max) * this.element_height; |
143 this.height = (2 + _max) * this.element_height; |
108 this.$zone.css({ |
144 this.$zone.css({ |
109 width: this.width + "px", |
145 width: this.width + "px", |
110 height: this.height + "px", |
146 height: this.height + "px", |
111 position: "relative" |
147 position: "relative" |
112 }); |
148 }); |
113 |
149 |
114 var _x = 0; |
150 var _x = 0; |
115 |
151 |
116 function displayAnnotation(_elx, _ely, _pol, _col, _annotation) { |
152 function displayAnnotation(_elx, _ely, _pol, _col, _annotation) { |
117 var _html = Mustache.to_html( |
153 var _html = Mustache.to_html( |
118 '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}, polemic:{{polemic}}, time:{{time}}" polemic-color="{{color}}"' |
154 '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}, polemic:{{polemic}}, time:{{time}}" polemic-color="{{color}}"' |
119 + ' tweet-title="{{title}}" annotation-id="{{id}}" style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>', |
155 + ' tweet-title="{{title}}" annotation-id="{{id}}" style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>', |
120 { |
156 { |
140 }); |
176 }); |
141 IriSP.attachDndData(_el, { |
177 IriSP.attachDndData(_el, { |
142 title: _annotation.title, |
178 title: _annotation.title, |
143 description: _annotation.description, |
179 description: _annotation.description, |
144 image: _annotation.thumbnail, |
180 image: _annotation.thumbnail, |
145 uri: (typeof _annotation.url !== "undefined" |
181 uri: (typeof _annotation.url !== "undefined" |
146 ? _annotation.url |
182 ? _annotation.url |
147 : (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id)), |
183 : (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id)), |
148 text: '[' + _annotation.begin.toString() + '] ' + _annotation.title |
184 text: '[' + _annotation.begin.toString() + '] ' + _annotation.title |
149 }); |
185 }); |
150 // test if annotation has several colors. |
186 // test if annotation has several colors. |
151 var colAr = []; |
187 var colAr = []; |
152 for (var _j = 0; _j < _this.polemics.length; _j++) { |
188 for (var _j = 0; _j < _this.getPolemics().length; _j++) { |
153 if( IriSP.Model.regexpFromTextOrArray( _this.polemics[_j].keywords ).test( _annotation.title ) ){ |
189 if( IriSP.Model.regexpFromTextOrArray( _this.getPolemics()[_j].keywords ).test( _annotation.title ) ){ |
154 colAr.push(_this.polemics[_j].color); |
190 colAr.push(_this.getPolemics()[_j].color); |
155 } |
191 } |
156 } |
192 } |
157 // display annotation |
193 // display annotation |
158 _annotation.on("select", function() { |
194 _annotation.on("select", function() { |
159 if (_this.tooltip) { |
195 if (_this.tooltip) { |
190 "opacity" : .3 |
226 "opacity" : .3 |
191 }); |
227 }); |
192 }); |
228 }); |
193 _this.$zone.append(_el); |
229 _this.$zone.append(_el); |
194 } |
230 } |
195 |
231 |
196 IriSP._(_slices).forEach(function(_slice) { |
232 IriSP._(_slices).forEach(function(_slice) { |
197 var _y = _this.height; |
233 var _y = _this.height; |
198 _slice.annotations.forEach(function(_annotation) { |
234 _slice.annotations.forEach(function(_annotation) { |
199 _y -= _this.element_height; |
235 _y -= _this.element_height; |
200 displayAnnotation(_x, _y, "none", _this.defaultcolor, _annotation); |
236 displayAnnotation(_x, _y, "none", _this.defaultcolor, _annotation); |
201 }); |
237 }); |
202 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) { |
238 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) { |
203 var _color = _this.polemics[_j].color, |
239 var _color = _this.getPolemics()[_j].color, |
204 _polemic = _this.polemics[_j].name; |
240 _polemic = _this.getPolemics()[_j].name; |
205 _annotations.forEach(function(_annotation) { |
241 _annotations.forEach(function(_annotation) { |
206 _y -= _this.element_height; |
242 _y -= _this.element_height; |
207 displayAnnotation(_x, _y, _polemic, _color, _annotation); |
243 displayAnnotation(_x, _y, _polemic, _color, _annotation); |
208 }); |
244 }); |
209 }); |
245 }); |
210 _x += _this.element_width; |
246 _x += _this.element_width; |
211 }); |
247 }); |
212 |
248 |
213 this.$zone.append(_html); |
249 this.$zone.append(_html); |
214 |
250 |
215 this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); |
251 this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); |
216 |
252 |
217 this.source.getAnnotations().on("search-cleared", function() { |
253 this.source.getAnnotations().on("search-cleared", function() { |
218 _this.$tweets.each(function() { |
254 _this.$tweets.each(function() { |
219 var _el = IriSP.jQuery(this); |
255 var _el = IriSP.jQuery(this); |
220 _el.css({ |
256 _el.css({ |
221 "background" : _el.attr("polemic-color"), |
257 "background" : _el.attr("polemic-color"), |
222 "opacity" : 1 |
258 "opacity" : 1 |
223 }); |
259 }); |
224 }); |
260 }); |
225 }); |
261 }); |
226 |
262 |
227 } else { |
263 } else { |
228 this.$zone.hide(); |
264 this.$zone.hide(); |
229 } |
265 } |
230 } else { |
266 } else { |
231 this.is_stackgraph = true; |
267 this.is_stackgraph = true; |
232 |
268 |
233 this.height = (2 + this.max_elements) * this.element_height; |
269 this.height = (2 + this.max_elements) * this.element_height; |
234 this.$zone.css({ |
270 this.$zone.css({ |
235 width: this.width + "px", |
271 width: this.width + "px", |
236 height: this.height + "px", |
272 height: this.height + "px", |
237 position: "relative" |
273 position: "relative" |
238 }); |
274 }); |
239 |
275 |
240 var _x = 0, |
276 var _x = 0, |
241 _html = '', |
277 _html = '', |
242 _scale = this.max_elements * this.element_height / _max; |
278 _scale = this.max_elements * this.element_height / _max; |
243 |
279 |
244 function displayStackElement(_x, _y, _h, _color, _nums, _begin, _end, _polemic) { |
280 function displayStackElement(_x, _y, _h, _color, _nums, _begin, _end, _polemic) { |
245 _html += Mustache.to_html( |
281 _html += Mustache.to_html( |
246 '<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}}"' |
282 '<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}}"' |
247 + ' style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>', |
283 + ' style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>', |
248 { |
284 { |
270 _y -= _h; |
306 _y -= _h; |
271 displayStackElement(_x, _y, _h, _this.defaultcolor, _nums, _slice.begin, _slice.end, "none"); |
307 displayStackElement(_x, _y, _h, _this.defaultcolor, _nums, _slice.begin, _slice.end, "none"); |
272 } |
308 } |
273 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) { |
309 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) { |
274 if (_annotations.length) { |
310 if (_annotations.length) { |
275 var _color = _this.polemics[_j].color, |
311 var _color = _this.getPolemics()[_j].color, |
276 _polemic = _this.polemics[_j].name, |
312 _polemic = _this.getPolemics()[_j].name, |
277 _h = Math.ceil(_scale * _annotations.length); |
313 _h = Math.ceil(_scale * _annotations.length); |
278 _y -= _h; |
314 _y -= _h; |
279 displayStackElement(_x, _y, _h, _color, _nums, _slice.begin, _slice.end, _polemic); |
315 displayStackElement(_x, _y, _h, _color, _nums, _slice.begin, _slice.end, _polemic); |
280 } |
316 } |
281 }); |
317 }); |
282 _x += _this.element_width; |
318 _x += _this.element_width; |
283 }); |
319 }); |
284 |
320 |
285 this.$zone.append(_html); |
321 this.$zone.append(_html); |
286 |
322 |
287 this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); |
323 this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); |
288 |
324 |
289 this.$tweets |
325 this.$tweets |
290 .mouseover(function() { |
326 .mouseover(function() { |
291 var _el = IriSP.jQuery(this), |
327 var _el = IriSP.jQuery(this), |
292 _nums = _el.attr("annotation-counts").split(","), |
328 _nums = _el.attr("annotation-counts").split(","), |
293 _html = '<p>' + _this.l10n.from_ + _el.attr("begin-time") + _this.l10n._to_ + _el.attr("end-time") + '</p>'; |
329 _html = '<p>' + _this.l10n.from_ + _el.attr("begin-time") + _this.l10n._to_ + _el.attr("end-time") + '</p>'; |
294 for (var _i = 0; _i <= _this.polemics.length; _i++) { |
330 for (var _i = 0; _i <= _this.getPolemics().length; _i++) { |
295 var _color = _i ? _this.polemics[_i - 1].color : _this.defaultcolor; |
331 var _color = _i ? _this.getPolemics()[_i - 1].color : _this.defaultcolor; |
296 _html += '<div class="Ldt-Tooltip-AltColor" style="background: ' + _color + '"></div><p>' + _nums[_i] + _this.l10n._annotations + '</p>'; |
332 _html += '<div class="Ldt-Tooltip-AltColor" style="background: ' + _color + '"></div><p>' + _nums[_i] + _this.l10n._annotations + '</p>'; |
297 } |
333 } |
298 if (_this.tooltip) { |
334 if (_this.tooltip) { |
299 _this.tooltip.show(+ _el.attr("pos-x"), + _el.attr("pos-y"), _html); |
335 _this.tooltip.show(+ _el.attr("pos-x"), + _el.attr("pos-y"), _html); |
300 } |
336 } |
302 .mouseout(function() { |
338 .mouseout(function() { |
303 if (_this.tooltip) { |
339 if (_this.tooltip) { |
304 _this.tooltip.hide(); |
340 _this.tooltip.hide(); |
305 } |
341 } |
306 }); |
342 }); |
307 |
343 |
308 }; |
344 }; |
309 |
345 |
310 this.$position = IriSP.jQuery('<div>').addClass("Ldt-Polemic-Position"); |
346 this.$position = IriSP.jQuery('<div>').addClass("Ldt-Polemic-Position"); |
311 |
347 |
312 this.$zone.append(this.$position); |
348 this.$zone.append(this.$position); |
313 |
349 |
314 this.$zone.click(function(_e) { |
350 this.$zone.click(function(_e) { |
315 var _x = _e.pageX - _this.$zone.offset().left; |
351 var _x = _e.pageX - _this.$zone.offset().left; |
316 _this.media.setCurrentTime(_this.media.duration * _x / _this.width); |
352 _this.media.setCurrentTime(_this.media.duration * _x / _this.width); |
317 }); |
353 }); |
318 |
354 |
319 this.$.append('<div class="Ldt-Polemic-Tooltip"></div>'); |
355 this.$.append('<div class="Ldt-Polemic-Tooltip"></div>'); |
320 |
356 |
321 this.insertSubwidget( |
357 this.insertSubwidget( |
322 this.$.find(".Ldt-Polemic-Tooltip"), |
358 this.$.find(".Ldt-Polemic-Tooltip"), |
323 { |
359 { |
324 type: "Tooltip", |
360 type: "Tooltip", |
325 min_x: 0, |
361 min_x: 0, |