75 } |
88 } |
76 } |
89 } |
77 |
90 |
78 IriSP.Widgets.Polemic.prototype.draw = function() { |
91 IriSP.Widgets.Polemic.prototype.draw = function() { |
79 |
92 |
80 this.bindPopcorn("IriSP.search", "onSearch"); |
|
81 this.bindPopcorn("IriSP.search.closed", "onSearch"); |
|
82 this.bindPopcorn("IriSP.search.cleared", "onSearch"); |
|
83 this.bindPopcorn("timeupdate", "onTimeupdate"); |
93 this.bindPopcorn("timeupdate", "onTimeupdate"); |
84 this.$zone = IriSP.jQuery('<div>'); |
94 this.$zone = IriSP.jQuery('<div>'); |
|
95 this.$zone.addClass("Ldt-Polemic"); |
85 this.$.append(this.$zone); |
96 this.$.append(this.$zone); |
86 |
|
87 var _slices = [], |
|
88 _slice_count = Math.floor( this.width / this.element_width ), |
|
89 _duration = this.source.getDuration(), |
|
90 _max = 0, |
|
91 _list = this.getWidgetAnnotations(); |
|
92 |
|
93 for (var _i = 0; _i < _slice_count; _i++) { |
|
94 var _begin = new IriSP.Model.Time( _i * _duration / _slice_count ), |
|
95 _end = new IriSP.Model.Time( ( _i + 1 ) * _duration / _slice_count ), |
|
96 _count = 0, |
|
97 _res = { |
|
98 annotations : _list.filter(function(_annotation) { |
|
99 return _annotation.begin >= _begin && _annotation.end < _end; |
|
100 }), |
|
101 polemicStacks : [] |
|
102 } |
|
103 |
|
104 for (var _j = 0; _j < this.polemics.length; _j++) { |
|
105 var _polemic = _res.annotations.searchByDescription(this.polemics[_j].keywords); |
|
106 _count += _polemic.length; |
|
107 _res.polemicStacks.push(_polemic); |
|
108 } |
|
109 for (var _j = 0; _j < this.polemics.length; _j++) { |
|
110 _res.annotations.removeElements(_res.polemicStacks[_j]); |
|
111 } |
|
112 _count += _res.annotations.length; |
|
113 _max = Math.max(_max, _count); |
|
114 _slices.push(_res); |
|
115 } |
|
116 this.height = (_max ? (_max + 2) * this.element_height : 0); |
|
117 this.$zone.css({ |
|
118 width: this.width + "px", |
|
119 height: this.height + "px", |
|
120 position: "relative" |
|
121 }); |
|
122 |
97 |
123 this.$elapsed = IriSP.jQuery('<div>') |
98 this.$elapsed = IriSP.jQuery('<div>') |
124 .css({ |
99 .css({ |
125 background: '#cccccc', |
100 background: '#cccccc', |
126 position: "absolute", |
101 position: "absolute", |
130 height: "100%" |
105 height: "100%" |
131 }); |
106 }); |
132 |
107 |
133 this.$zone.append(this.$elapsed); |
108 this.$zone.append(this.$elapsed); |
134 |
109 |
135 var _x = 0, |
110 var _slices = [], |
136 _this = this, |
111 _slice_count = Math.floor( this.width / this.element_width ), |
137 _html = ''; |
112 _duration = this.source.getDuration(), |
138 |
113 _max = 0, |
139 function displayElement(_x, _y, _color, _id, _title) { |
114 _list = this.getWidgetAnnotations(), |
140 _html += Mustache.to_html( |
115 _this = this; |
141 '<div class="Ldt-Polemic-TweetDiv" annotation-id="{{id}}" tweet-title="{{title}}" pos-x="{{posx}}" pos-y="{{top}}" polemic-color="{{color}}"' |
116 |
142 + ' style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>', |
117 for (var _i = 0; _i < _slice_count; _i++) { |
143 { |
118 var _begin = new IriSP.Model.Time( _i * _duration / _slice_count ), |
144 id: _id, |
119 _end = new IriSP.Model.Time( ( _i + 1 ) * _duration / _slice_count ), |
145 title: _title, |
120 _count = 0, |
146 posx: Math.floor(_x + (_this.element_width - 1) / 2), |
121 _res = { |
147 left: _x, |
122 begin : _begin.toString(), |
148 top: _y, |
123 end : _end.toString(), |
149 color: _color, |
124 annotations : _list.filter(function(_annotation) { |
150 width: (_this.element_width-1), |
125 return _annotation.begin >= _begin && _annotation.end < _end; |
151 height: _this.element_height |
126 }), |
|
127 polemicStacks : [] |
|
128 } |
|
129 |
|
130 for (var _j = 0; _j < this.polemics.length; _j++) { |
|
131 var _polemic = _res.annotations.searchByDescription(this.polemics[_j].keywords); |
|
132 _count += _polemic.length; |
|
133 _res.polemicStacks.push(_polemic); |
|
134 } |
|
135 for (var _j = 0; _j < this.polemics.length; _j++) { |
|
136 _res.annotations.removeElements(_res.polemicStacks[_j]); |
|
137 } |
|
138 _count += _res.annotations.length; |
|
139 _max = Math.max(_max, _count); |
|
140 _slices.push(_res); |
|
141 } |
|
142 if (_max < this.max_elements) { |
|
143 this.is_stackgraph = false; |
|
144 if (_max) { |
|
145 |
|
146 this.height = (2 + _max) * this.element_height; |
|
147 this.$zone.css({ |
|
148 width: this.width + "px", |
|
149 height: this.height + "px", |
|
150 position: "relative" |
|
151 }); |
|
152 |
|
153 var _x = 0, |
|
154 _html = ''; |
|
155 |
|
156 function displayElement(_x, _y, _color, _id, _title) { |
|
157 _html += Mustache.to_html( |
|
158 '<div class="Ldt-Polemic-TweetDiv" annotation-id="{{id}}" tweet-title="{{title}}" pos-x="{{posx}}" pos-y="{{top}}" polemic-color="{{color}}"' |
|
159 + ' style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>', |
|
160 { |
|
161 id: _id, |
|
162 title: _title, |
|
163 posx: Math.floor(_x + (_this.element_width - 1) / 2), |
|
164 left: _x, |
|
165 top: _y, |
|
166 color: _color, |
|
167 width: (_this.element_width-1), |
|
168 height: _this.element_height |
|
169 }); |
|
170 } |
|
171 |
|
172 IriSP._(_slices).forEach(function(_slice) { |
|
173 var _y = _this.height; |
|
174 _slice.annotations.forEach(function(_annotation) { |
|
175 _y -= _this.element_height; |
|
176 displayElement(_x, _y, _this.defaultcolor, _annotation.id, _annotation.title); |
|
177 }); |
|
178 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) { |
|
179 var _color = _this.polemics[_j].color; |
|
180 _annotations.forEach(function(_annotation) { |
|
181 _y -= _this.element_height; |
|
182 displayElement(_x, _y, _color, _annotation.id, _annotation.title); |
|
183 }); |
|
184 }); |
|
185 _x += _this.element_width; |
|
186 }); |
|
187 |
|
188 this.$zone.append(_html); |
|
189 |
|
190 this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); |
|
191 |
|
192 this.$tweets |
|
193 .mouseover(function() { |
|
194 var _el = IriSP.jQuery(this); |
|
195 _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _el.attr("tweet-title"), _el.attr("polemic-color")); |
|
196 }) |
|
197 .mouseout(function() { |
|
198 _this.tooltip.hide(); |
|
199 }) |
|
200 .click(function() { |
|
201 var _id = IriSP.jQuery(this).attr("annotation-id"); |
|
202 _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _id); |
|
203 _this.player.popcorn.trigger("IriSP.Tweet.show", _id); |
|
204 }); |
|
205 |
|
206 this.bindPopcorn("IriSP.search", "onSearch"); |
|
207 this.bindPopcorn("IriSP.search.closed", "onSearch"); |
|
208 this.bindPopcorn("IriSP.search.cleared", "onSearch"); |
|
209 |
|
210 } else { |
|
211 this.$zone.hide(); |
|
212 } |
|
213 } else { |
|
214 this.is_stackgraph = true; |
|
215 |
|
216 this.height = (2 + this.max_elements) * this.element_height; |
|
217 this.$zone.css({ |
|
218 width: this.width + "px", |
|
219 height: this.height + "px", |
|
220 position: "relative" |
152 }); |
221 }); |
|
222 |
|
223 var _x = 0, |
|
224 _html = '', |
|
225 _scale = this.max_elements * this.element_height / _max; |
|
226 |
|
227 function displayElement(_x, _y, _h, _color, _nums, _begin, _end) { |
|
228 _html += Mustache.to_html( |
|
229 '<div class="Ldt-Polemic-TweetDiv" pos-x="{{posx}}" pos-y="{{top}}" annotation-counts="{{nums}}" begin-time="{{begin}}" end-time="{{end}}"' |
|
230 + ' style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>', |
|
231 { |
|
232 nums: _nums, |
|
233 posx: Math.floor(_x + (_this.element_width - 1) / 2), |
|
234 left: _x, |
|
235 top: _y, |
|
236 color: _color, |
|
237 width: (_this.element_width-1), |
|
238 height: _h, |
|
239 begin: _begin, |
|
240 end: _end |
|
241 }); |
|
242 } |
|
243 |
|
244 IriSP._(_slices).forEach(function(_slice) { |
|
245 var _y = _this.height, |
|
246 _nums = _slice.annotations.length + "," + IriSP._(_slice.polemicStacks).map(function(_annotations) { |
|
247 return _annotations.length |
|
248 }).join(","); |
|
249 if (_slice.annotations.length) { |
|
250 var _h = Math.ceil(_scale * _slice.annotations.length); |
|
251 _y -= _h; |
|
252 displayElement(_x, _y, _h, _this.defaultcolor, _nums, _slice.begin, _slice.end); |
|
253 } |
|
254 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) { |
|
255 if (_annotations.length) { |
|
256 var _color = _this.polemics[_j].color, |
|
257 _h = Math.ceil(_scale * _annotations.length); |
|
258 _y -= _h; |
|
259 displayElement(_x, _y, _h, _color, _nums, _slice.begin, _slice.end); |
|
260 } |
|
261 }); |
|
262 _x += _this.element_width; |
|
263 }); |
|
264 |
|
265 this.$zone.append(_html); |
|
266 |
|
267 this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); |
|
268 |
|
269 this.$tweets |
|
270 .mouseover(function() { |
|
271 var _el = IriSP.jQuery(this), |
|
272 _nums = _el.attr("annotation-counts").split(","), |
|
273 _html = '<p>' + _this.l10n.from_ + _el.attr("begin-time") + _this.l10n._to_ + _el.attr("end-time") + '</p>'; |
|
274 for (var _i = 0; _i <= _this.polemics.length; _i++) { |
|
275 var _color = _i ? _this.polemics[_i - 1].color : _this.defaultcolor; |
|
276 _html += '<div class="Ldt-Tooltip-Color" style="background: ' + _color + '"></div><p>' + _nums[_i] + _this.l10n._annotations + '</p>' |
|
277 } |
|
278 _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _html); |
|
279 }) |
|
280 .mouseout(function() { |
|
281 _this.tooltip.hide(); |
|
282 }) |
|
283 |
153 } |
284 } |
154 |
285 |
155 IriSP._(_slices).forEach(function(_slice) { |
|
156 var _y = _this.height; |
|
157 _slice.annotations.forEach(function(_annotation) { |
|
158 _y -= _this.element_height; |
|
159 displayElement(_x, _y, _this.defaultcolor, _annotation.id, _annotation.title); |
|
160 }); |
|
161 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) { |
|
162 var _color = _this.polemics[_j].color; |
|
163 _annotations.forEach(function(_annotation) { |
|
164 _y -= _this.element_height; |
|
165 displayElement(_x, _y, _color, _annotation.id, _annotation.title); |
|
166 }); |
|
167 }); |
|
168 _x += _this.element_width; |
|
169 }); |
|
170 |
|
171 this.$zone.append(_html); |
|
172 |
|
173 this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); |
|
174 |
|
175 this.$position = IriSP.jQuery('<div>').addClass("Ldt-Polemic-Position"); |
286 this.$position = IriSP.jQuery('<div>').addClass("Ldt-Polemic-Position"); |
176 |
287 |
177 this.$zone.append(this.$position); |
288 this.$zone.append(this.$position); |
178 |
|
179 this.$tweets |
|
180 .mouseover(function() { |
|
181 var _el = IriSP.jQuery(this); |
|
182 _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _el.attr("tweet-title"), _el.attr("polemic-color")); |
|
183 }) |
|
184 .mouseout(function() { |
|
185 _this.tooltip.hide(); |
|
186 }) |
|
187 .click(function() { |
|
188 var _id = IriSP.jQuery(this).attr("annotation-id"); |
|
189 _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _id); |
|
190 _this.player.popcorn.trigger("IriSP.Tweet.show", _id); |
|
191 }); |
|
192 |
289 |
193 this.$zone.click(function(_e) { |
290 this.$zone.click(function(_e) { |
194 var _x = _e.pageX - _this.$zone.offset().left; |
291 var _x = _e.pageX - _this.$zone.offset().left; |
195 _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width); |
292 _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width); |
196 }); |
293 }); |