diff -r 8f99b0df3278 -r 6008172a0592 src/js/widgets/polemicWidget.js --- a/src/js/widgets/polemicWidget.js Mon Nov 14 16:12:13 2011 +0100 +++ b/src/js/widgets/polemicWidget.js Mon Nov 14 17:19:26 2011 +0100 @@ -18,313 +18,315 @@ */ // CHART TIMELINE / VERSION PROTOTYPE :: -IriSP.PolemicWidget = function(Popcorn, config, Serializer) { - IriSP.Widget.call(this, Popcorn, config, Serializer); - - this.userPol = new Array(); - this.userNoPol = new Array(); - this.userst = new Array(); - this.numberOfTweet = 0; - this.Users; - this.TweetPolemic; - this.yMax = this.height; - this.PaperSlider; - this.heightOfChart; - this.tweets = new Array(); - this.svgElements = new Array(); - - // Make and define the Raphael area - this.paper = Raphael(document.getElementById(this._id), config.width, config.height); - -}; +define(["IriSP", "widgets", "util", "tooltipWidget"], function() { -IriSP.PolemicWidget.prototype = new IriSP.Widget(); - -IriSP.PolemicWidget.prototype.draw = function() { - - // variable - // yMax + IriSP.PolemicWidget = function(Popcorn, config, Serializer) { + IriSP.Widget.call(this, Popcorn, config, Serializer); + + this.userPol = new Array(); + this.userNoPol = new Array(); + this.userst = new Array(); + this.numberOfTweet = 0; + this.Users; + this.TweetPolemic; + this.yMax = this.height; + this.PaperSlider; + this.heightOfChart; + this.tweets = new Array(); + this.svgElements = new Array(); - var self = this; - var yCoef = 2; // coef for height of 1 tweet - var frameSize = 5; // frame size - var margin = 1; // marge between frame - var lineSize = this.width; // timeline pixel width - var nbrframes = lineSize/frameSize; // frame numbers - var numberOfTweet = 0; // number of tweet overide later - var duration = +this._serializer.currentMedia().meta["dc:duration"]; // timescale width - var frameLength = lineSize / frameSize; // frame timescale - var timeline; - var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); + // Make and define the Raphael area + this.paper = Raphael(document.getElementById(this._id), config.width, config.height); + + }; + + IriSP.PolemicWidget.prototype = new IriSP.Widget(); + + IriSP.PolemicWidget.prototype.draw = function() { - // array - //var tweets = new Array(); - var element = new Array(); - var cluster = new Array(); - var frames = new Array(frameLength); - var slices = new Array(); - - - // Classes ======================================================================= - var Frames = function(){ + // variable + // yMax + + var self = this; + var yCoef = 2; // coef for height of 1 tweet + var frameSize = 5; // frame size + var margin = 1; // marge between frame + var lineSize = this.width; // timeline pixel width + var nbrframes = lineSize/frameSize; // frame numbers + var numberOfTweet = 0; // number of tweet overide later + var duration = +this._serializer.currentMedia().meta["dc:duration"]; // timescale width + var frameLength = lineSize / frameSize; // frame timescale + var timeline; + var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); + + // array + //var tweets = new Array(); + var element = new Array(); + var cluster = new Array(); + var frames = new Array(frameLength); + var slices = new Array(); + - var Myclusters; - var x; - var y; - var width; - var height; - }; - Frames = function(json){ - // make my clusters - // ou Frame vide - }; - Frames.prototype.draw = function(){ - }; - Frames.prototype.zoom = function(){ - }; - Frames.prototype.inside = function(){ - }; - var Clusters = function(){ - var Object; - var yDist; - var x; - var y; - var width; - var height; - }; - Clusters = function(json){ - // make my object - }; - var Tweet = function(){ - }; - // Classes ======================================================================= + // Classes ======================================================================= + var Frames = function(){ + + var Myclusters; + var x; + var y; + var width; + var height; + }; + Frames = function(json){ + // make my clusters + // ou Frame vide + }; + Frames.prototype.draw = function(){ + }; + Frames.prototype.zoom = function(){ + }; + Frames.prototype.inside = function(){ + }; + var Clusters = function(){ + var Object; + var yDist; + var x; + var y; + var width; + var height; + }; + Clusters = function(json){ + // make my object + }; + var Tweet = function(){ + }; + // Classes ======================================================================= - // Refactoring (parametere) ************************************************************ - // color translastion - var qTweet_0 =0; - var qTweet_Q =0; - var qTweet_REF=0; - var qTweet_OK =0; - var qTweet_KO =0; - function colorTranslation(value){ - if(value == "Q"){ - qTweet_Q+=1; - return 2; - }else if(value =="REF"){ - qTweet_REF+=1; - return 4; - }else if(value =="OK"){ - qTweet_OK+=1; - return 1; - }else if(value =="KO"){ - qTweet_KO+=1; - return 3; - }else if(value ==""){ - qTweet_0+=1; - return 5; + // Refactoring (parametere) ************************************************************ + // color translastion + var qTweet_0 =0; + var qTweet_Q =0; + var qTweet_REF=0; + var qTweet_OK =0; + var qTweet_KO =0; + function colorTranslation(value){ + if(value == "Q"){ + qTweet_Q+=1; + return 2; + }else if(value =="REF"){ + qTweet_REF+=1; + return 4; + }else if(value =="OK"){ + qTweet_OK+=1; + return 1; + }else if(value =="KO"){ + qTweet_KO+=1; + return 3; + }else if(value ==""){ + qTweet_0+=1; + return 5; + } } - } - + - this._serializer.sync(function(data) { loaded_callback.call(self, data) }); - - function loaded_callback (json) { - - // get current view (the first ???) - view = json.views[0]; + this._serializer.sync(function(data) { loaded_callback.call(self, data) }); - // the tweets are by definition of the second annotation type FIXME ? - tweet_annot_type = null; - if(typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) { - tweet_annot_type = view.annotation_types[1]; - } - - for(var i = 0; i < json.annotations.length; i++) { - var item = json.annotations[i]; - var MyTime = Math.floor(item.begin/duration*lineSize); - var Myframe = Math.floor(MyTime/lineSize*frameLength); + function loaded_callback (json) { - if (typeof(item.meta) !== "undefined" - && typeof(item.meta["id-ref"]) !== "undefined" - && item.meta["id-ref"] === tweet_annot_type) { - - var MyTJson = JSON.parse(item.meta['dc:source']['content']); + // get current view (the first ???) + view = json.views[0]; - if (item.content['polemics'] != undefined - && item.content['polemics'][0] != null) { - + // the tweets are by definition of the second annotation type FIXME ? + tweet_annot_type = null; + if(typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) { + tweet_annot_type = view.annotation_types[1]; + } + + for(var i = 0; i < json.annotations.length; i++) { + var item = json.annotations[i]; + var MyTime = Math.floor(item.begin/duration*lineSize); + var Myframe = Math.floor(MyTime/lineSize*frameLength); + + if (typeof(item.meta) !== "undefined" + && typeof(item.meta["id-ref"]) !== "undefined" + && item.meta["id-ref"] === tweet_annot_type) { + + var MyTJson = JSON.parse(item.meta['dc:source']['content']); - for(var j=0; j max) { - max = moy; - } - } - - var tweetDrawed = new Array(); - var TweetHeight = 5; - // DRAW TWEETS ============================================ - for(var i = 0; i < nbrframes; i++) { - var addEheight = 5; - if (frames[i] != undefined){ - // by type + // GROUPES TWEET ============================================ + // max of tweet by Frame + var max = 0; + for(var i = 0; i < nbrframes; i++) { + var moy = 0; + for (var j = 0; j < 6; j++) { + if (frames[i] != undefined) { + if (frames[i].qualifVol[j] != undefined) { + moy += frames[i].qualifVol[j]; + } + } + } - for (var j = 6; j > -1; j--) { - if (frames[i].qualifVol[j] != undefined) { - // show tweet by type - for (var k = 0; k < frames[i].mytweetsID.length; k++) { - - if (frames[i].mytweetsID[k].qualification == j) { - var x = i * frameSize; - var y = this.heightmax - addEheight; - - if (this.yMax > y) { - this.yMax = y; + if (moy > max) { + max = moy; + } + } + + var tweetDrawed = new Array(); + var TweetHeight = 5; + + // DRAW TWEETS ============================================ + for(var i = 0; i < nbrframes; i++) { + var addEheight = 5; + if (frames[i] != undefined){ + // by type + + for (var j = 6; j > -1; j--) { + if (frames[i].qualifVol[j] != undefined) { + // show tweet by type + for (var k = 0; k < frames[i].mytweetsID.length; k++) { + + if (frames[i].mytweetsID[k].qualification == j) { + var x = i * frameSize; + var y = this.heightmax - addEheight; + + if (this.yMax > y) { + this.yMax = y; + } + + var e = this.paper.rect(x, y, frameSize - margin, TweetHeight /* height */).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); + this.svgElements.push(e); + + addEheight += TweetHeight; + + e.time= frames[i].mytweetsID[k].timeframe; + e.title= frames[i].mytweetsID[k].title; + + e.mouseover(function(element) { return function (event) { + // event.clientX and event.clientY are to raphael what event.pageX and pageY are to jquery. + self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), event.clientX - 106, event.clientY - 160); + element.displayed = true; + debugger; + }}(e)).mouseout(function(element) { return function () { + self.TooltipWidget.hide.call(self.TooltipWidget); + }}(e)).mousedown(function () { + self._Popcorn.currentTime(this.time/1000); + }); + + IriSP.jQuery(e.node).attr('id', 't' + k + ''); + IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title); + IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); } - - var e = this.paper.rect(x, y, frameSize - margin, TweetHeight /* height */).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); - this.svgElements.push(e); - - addEheight += TweetHeight; - - e.time= frames[i].mytweetsID[k].timeframe; - e.title= frames[i].mytweetsID[k].title; - - e.mouseover(function(element) { return function (event) { - // event.clientX and event.clientY are to raphael what event.pageX and pageY are to jquery. - self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), event.clientX - 106, event.clientY - 160); - element.displayed = true; - debugger; - }}(e)).mouseout(function(element) { return function () { - self.TooltipWidget.hide.call(self.TooltipWidget); - }}(e)).mousedown(function () { - self._Popcorn.currentTime(this.time/1000); - }); - - IriSP.jQuery(e.node).attr('id', 't' + k + ''); - IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title); - IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); } } } } - } - } - // DRAW UI :: resize border and bgd - this.paperBackground = this.paper.rect(0, 0, this.width, this.heightmax).attr({fill:"#F8F8F8","stroke-width":0.1,opacity: 1}); - // var PaperBorder = this.paper.rect(0, this.yMax,this.width,1).attr({fill:"#fff",stroke: "none",opacity: 1}); - - this.paperSlider = this.paper.rect(0, 0, 0, this.heightmax).attr({fill:"#D4D5D5", stroke: "none", opacity: 1}); - - // the small white line displayed over the slider. - this.sliderTip = this.paper.rect(0, 0, 1, this.heightmax).attr({fill:"#fc00ff", stroke: "none", opacity: 1}); - - // decalage - // tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); - + } + // DRAW UI :: resize border and bgd + this.paperBackground = this.paper.rect(0, 0, this.width, this.heightmax).attr({fill:"#F8F8F8","stroke-width":0.1,opacity: 1}); + // var PaperBorder = this.paper.rect(0, this.yMax,this.width,1).attr({fill:"#fff",stroke: "none",opacity: 1}); + + this.paperSlider = this.paper.rect(0, 0, 0, this.heightmax).attr({fill:"#D4D5D5", stroke: "none", opacity: 1}); + + // the small white line displayed over the slider. + this.sliderTip = this.paper.rect(0, 0, 1, this.heightmax).attr({fill:"#fc00ff", stroke: "none", opacity: 1}); + + // decalage + // tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); + + + this.paperSlider.toBack(); + this.paperBackground.toBack(); + this.sliderTip.toFront(); + } - this.paperSlider.toBack(); - this.paperBackground.toBack(); - this.sliderTip.toFront(); - } - - this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); -} + this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); + } -IriSP.PolemicWidget.prototype.sliderUpdater = function() { + IriSP.PolemicWidget.prototype.sliderUpdater = function() { - var time = +this._Popcorn.currentTime(); - var duration = +this._serializer.currentMedia().meta["dc:duration"]; - - this.paperSlider.attr("width", time * (this.width / (duration / 1000))); - - this.sliderTip.attr("x", time * (this.width / (duration / 1000))); -}; - - \ No newline at end of file + var time = +this._Popcorn.currentTime(); + var duration = +this._serializer.currentMedia().meta["dc:duration"]; + + this.paperSlider.attr("width", time * (this.width / (duration / 1000))); + + this.sliderTip.attr("x", time * (this.width / (duration / 1000))); + }; +}); + \ No newline at end of file