32 this.PaperSlider; |
32 this.PaperSlider; |
33 this.heightOfChart; |
33 this.heightOfChart; |
34 this.tweets = new Array(); |
34 this.tweets = new Array(); |
35 this.svgElements = {}; |
35 this.svgElements = {}; |
36 |
36 |
|
37 this.oldSearchMatches = []; |
37 // Make and define the Raphael area |
38 // Make and define the Raphael area |
38 this.paper = Raphael(document.getElementById(this._id), config.width, config.height); |
39 this.paper = Raphael(document.getElementById(this._id), config.width, config.height); |
39 |
40 |
40 this.oldSearchMatches = []; |
|
41 |
|
42 // event handlers |
41 // event handlers |
43 this._Popcorn.listen("IriSP.search", IriSP.wrap(this, function(searchString) { this.searchHandler(searchString); })); |
42 this._Popcorn.listen("IriSP.search", IriSP.wrap(this, function(searchString) { this.searchHandler(searchString); })); |
44 this._Popcorn.listen("IriSP.search.closed", IriSP.wrap(this, this.searchFieldClosedHandler)); |
43 this._Popcorn.listen("IriSP.search.closed", IriSP.wrap(this, this.searchFieldClosedHandler)); |
45 this._Popcorn.listen("IriSP.search.cleared", IriSP.wrap(this, this.searchFieldClearedHandler)); |
44 this._Popcorn.listen("IriSP.search.cleared", IriSP.wrap(this, this.searchFieldClearedHandler)); |
46 |
45 |
135 |
134 |
136 |
135 |
137 this._serializer.sync(function(data) { loaded_callback.call(self, data) }); |
136 this._serializer.sync(function(data) { loaded_callback.call(self, data) }); |
138 |
137 |
139 function loaded_callback (json) { |
138 function loaded_callback (json) { |
140 |
139 |
141 // get current view (the first ???) |
140 var view_type = this._serializer.getTweetIds()[0]; |
|
141 if (typeof(view_type) === "undefined") { |
|
142 // default to guessing if nothing else works. |
142 view = json.views[0]; |
143 view = json.views[0]; |
143 |
144 |
144 // the tweets are by definition of the second annotation type FIXME ? |
145 // |
145 tweet_annot_type = null; |
146 tweet_annot_type = null; |
146 if(typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) { |
147 if(typeof(view.annotation_types) !== "undefined") { |
147 tweet_annot_type = view.annotation_types[1]; |
148 if (view.annotation_types.length >= 1) { |
148 } |
149 view_type = view.annotation_types[0]; |
149 |
150 } else { |
|
151 console.log("PolemicWidget: invalid file"); |
|
152 } |
|
153 } |
|
154 } |
|
155 |
150 for(var i = 0; i < json.annotations.length; i++) { |
156 for(var i = 0; i < json.annotations.length; i++) { |
151 var item = json.annotations[i]; |
157 var item = json.annotations[i]; |
152 var MyTime = Math.floor(item.begin/duration*lineSize); |
158 var MyTime = Math.floor(item.begin/duration*lineSize); |
153 var Myframe = Math.floor(MyTime/lineSize*frameLength); |
159 var Myframe = Math.floor(MyTime/lineSize*frameLength); |
154 |
160 |
155 if (typeof(item.meta) !== "undefined" |
161 if (typeof(item.meta) !== "undefined" |
156 && typeof(item.meta["id-ref"]) !== "undefined" |
162 && typeof(item.meta["id-ref"]) !== "undefined" |
157 && item.meta["id-ref"] === tweet_annot_type) { |
163 && item.meta["id-ref"] === view_type) { |
158 |
164 |
159 var MyTJson = JSON.parse(item.meta['dc:source']['content']); |
165 var MyTJson = {}; |
160 |
166 if (typeof(item.meta['dc:source']) !== "undefined") { |
|
167 var MyTJson = JSON.parse(item.meta['dc:source']['content']); |
|
168 } |
|
169 |
161 if (item.content['polemics'] != undefined |
170 if (item.content['polemics'] != undefined |
162 && item.content['polemics'][0] != null) { |
171 && item.content['polemics'][0] != null) { |
163 |
172 |
164 // a tweet can have many polemics at the same time. |
173 // a tweet can have many polemics at the same time. |
165 for(var j=0; j<item.content['polemics'].length; j++){ |
174 for(var j=0; j<item.content['polemics'].length; j++){ |
254 } |
263 } |
255 } |
264 } |
256 |
265 |
257 var tweetDrawed = new Array(); |
266 var tweetDrawed = new Array(); |
258 var TweetHeight = 5; |
267 var TweetHeight = 5; |
259 |
268 var newHeight = TweetHeight * max + 10; |
|
269 |
|
270 |
|
271 if (newHeight > this.height) { |
|
272 this.paper.setSize(this.width, newHeight); |
|
273 this.height = newHeight; |
|
274 console.log("resizeing"); |
|
275 } |
|
276 |
|
277 |
260 // DRAW TWEETS ============================================ |
278 // DRAW TWEETS ============================================ |
261 for(var i = 0; i < nbrframes; i++) { |
279 for(var i = 0; i < nbrframes; i++) { |
262 var addEheight = 5; |
280 var addEheight = 5; |
263 if (frames[i] != undefined){ |
281 if (frames[i] != undefined){ |
264 // by type |
282 // by type |
268 // show tweet by type |
286 // show tweet by type |
269 for (var k = 0; k < frames[i].mytweetsID.length; k++) { |
287 for (var k = 0; k < frames[i].mytweetsID.length; k++) { |
270 |
288 |
271 if (frames[i].mytweetsID[k].qualification == j) { |
289 if (frames[i].mytweetsID[k].qualification == j) { |
272 var x = i * frameSize; |
290 var x = i * frameSize; |
273 var y = this.heightmax - addEheight; |
291 var y = this.height - addEheight; |
274 |
292 |
275 if (this.yMax > y) { |
293 if (this.yMax > y) { |
276 this.yMax = y; |
294 this.yMax = y; |
277 } |
295 } |
278 |
296 |
307 } |
325 } |
308 } |
326 } |
309 |
327 |
310 } |
328 } |
311 // DRAW UI :: resize border and bgd |
329 // DRAW UI :: resize border and bgd |
312 this.paperBackground = this.paper.rect(0, 0, this.width, this.heightmax).attr({fill:"#F8F8F8","stroke-width":0.1,opacity: 1}); |
330 this.paperBackground = this.paper.rect(0, 0, this.width, this.height).attr({fill:"#F8F8F8","stroke-width":0.1,opacity: 1}); |
313 |
331 |
314 // outer borders |
332 // outer borders |
315 this.outerBorders = []; |
333 this.outerBorders = []; |
316 this.outerBorders.push(this.paper.rect(0, this.height - 1, this.width, 1).attr({fill:"#ababab",stroke: "none",opacity: 1})); |
334 this.outerBorders.push(this.paper.rect(0, this.height - 1, this.width, 1).attr({fill:"#ababab",stroke: "none",opacity: 1})); |
317 this.outerBorders.push(this.paper.rect(0, 0, this.width, 1).attr({fill:"#ababab",stroke: "none",opacity: 1})); |
335 this.outerBorders.push(this.paper.rect(0, 0, this.width, 1).attr({fill:"#ababab",stroke: "none",opacity: 1})); |
323 this.innerBorders.push(this.paper.rect(1, 1, 1, this.height - 2).attr({fill:"#d0d1d1",stroke: "none",opacity: 0.8})); |
341 this.innerBorders.push(this.paper.rect(1, 1, 1, this.height - 2).attr({fill:"#d0d1d1",stroke: "none",opacity: 0.8})); |
324 this.innerBorders.push(this.paper.rect(this.width - 2, 1, 1, this.height - 2).attr({fill:"#efefef",stroke: "none",opacity: 1})); |
342 this.innerBorders.push(this.paper.rect(this.width - 2, 1, 1, this.height - 2).attr({fill:"#efefef",stroke: "none",opacity: 1})); |
325 |
343 |
326 |
344 |
327 |
345 |
328 this.paperSlider = this.paper.rect(0, 0, 0, this.heightmax).attr({fill:"#D4D5D5", stroke: "none", opacity: 1}); |
346 this.paperSlider = this.paper.rect(0, 0, 0, this.height).attr({fill:"#D4D5D5", stroke: "none", opacity: 1}); |
329 |
347 |
330 // the small white line displayed over the slider. |
348 // the small white line displayed over the slider. |
331 this.sliderTip = this.paper.rect(0, 0, 1, this.heightmax).attr({fill:"#fc00ff", stroke: "none", opacity: 1}); |
349 this.sliderTip = this.paper.rect(0, 0, 1, this.height).attr({fill:"#fc00ff", stroke: "none", opacity: 1}); |
332 // decalage |
350 // decalage |
333 // tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); |
351 // tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); |
334 |
352 |
335 |
353 |
336 this.paperSlider.toBack(); |
354 this.paperSlider.toBack(); |
371 for (var id in this.svgElements) { |
389 for (var id in this.svgElements) { |
372 var e = this.svgElements[id]; |
390 var e = this.svgElements[id]; |
373 e.attr({fill: e.color, opacity: 0.4}); |
391 e.attr({fill: e.color, opacity: 0.4}); |
374 } |
392 } |
375 |
393 |
376 for (var id in matches) { |
394 |
|
395 for (var id in matches) { |
377 if (this.svgElements.hasOwnProperty(id)) { |
396 if (this.svgElements.hasOwnProperty(id)) { |
378 var e = this.svgElements[id]; |
397 var e = this.svgElements[id]; |
379 this.svgElements[id].attr({fill: "#fc00ff", opacity: 1}); |
398 this.svgElements[id].attr({fill: "#fc00ff", opacity: 1}); |
380 } |
399 } |
381 } |
400 } |