# HG changeset patch # User hamidouk # Date 1326882892 -3600 # Node ID 48c1beea7b1ccb0c373996912ca700bfee3f9ae8 # Parent 78f392af62db7a984a2b4f2ae378efbb9420da59 change line endings to unix. diff -r 78f392af62db -r 48c1beea7b1c src/js/widgets/helloWorldWidget.js --- a/src/js/widgets/helloWorldWidget.js Wed Jan 18 11:32:21 2012 +0100 +++ b/src/js/widgets/helloWorldWidget.js Wed Jan 18 11:34:52 2012 +0100 @@ -1,17 +1,17 @@ -IriSP.HelloWorldWidget = function(Popcorn, config, Serializer) { - IriSP.Widget.call(this, Popcorn, config, Serializer); -} - -IriSP.HelloWorldWidget.prototype = new IriSP.Widget(); - -IriSP.HelloWorldWidget.prototype.draw = function() { - this.selector - .html('Hello, world') - .css({ - "text-align" : "center", - "padding": "10px 0", - "font-size" : "14px", - }); - - console.log(this); -} +IriSP.HelloWorldWidget = function(Popcorn, config, Serializer) { + IriSP.Widget.call(this, Popcorn, config, Serializer); +} + +IriSP.HelloWorldWidget.prototype = new IriSP.Widget(); + +IriSP.HelloWorldWidget.prototype.draw = function() { + this.selector + .html('Hello, world') + .css({ + "text-align" : "center", + "padding": "10px 0", + "font-size" : "14px", + }); + + console.log(this); +} diff -r 78f392af62db -r 48c1beea7b1c src/js/widgets/stackGraphWidget.js --- a/src/js/widgets/stackGraphWidget.js Wed Jan 18 11:32:21 2012 +0100 +++ b/src/js/widgets/stackGraphWidget.js Wed Jan 18 11:34:52 2012 +0100 @@ -1,213 +1,213 @@ -IriSP.StackGraphWidget = function(Popcorn, config, Serializer) { - IriSP.Widget.call(this, Popcorn, config, Serializer); -} - -IriSP.StackGraphWidget.prototype = new IriSP.Widget(); - -IriSP.StackGraphWidget.prototype.draw = function() { - var _defaultTags = [ - { - "keywords" : [ "++" ], - "description" : "positif", - "color" : "#1D973D", - }, - { - "keywords" : [ "--" ], - "description" : "negatif", - "color" : "#CE0A15", - }, - { - "keywords" : [ "==" ], - "description" : "reference", - "color" : "#C5A62D", - }, - { - "keywords" : [ "??" ], - "description" : "question", - "color" : "#036AAE", - }, - ], - _defaultDefColor = "#585858"; - this.height = (this._config.height ? this._config.height : 50); - this.width = this.selector.width(); - this.isStreamGraph = (this._config.streamgraph ? this._config.streamgraph : false); - this.sliceCount = (this._config.slices ? this._config.slices : ~~(this.width/(this.isStreamGraph ? 20 : 5))); - this.tagconf = (this._config.tags - ? this._config.tags - : _defaultTags); - IriSP._(this.tagconf).each(function(_a) { - _a.regexp = new RegExp(_a.keywords.map(function(_k) { - return _k.replace(/([\W])/gm,'\\$1'); - }).join("|"),"im") - }); - this.defaultcolorconf = (this._config.defaultcolor - ? this._config.defaultcolor - : _defaultDefColor); - this.paper = new Raphael(this.selector[0], this.width, this.height); - this.groups = []; - this.duration = this._serializer.currentMedia().meta["dc:duration"]; - - var _annotationType = this._serializer.getTweets(), - _sliceDuration = ~~ ( this.duration / this.sliceCount), - _annotations = IriSP._(this._serializer._data.annotations).filter(function(_a) { - return ( _a.meta && _a.meta["id-ref"] && ( _a.meta["id-ref"] == _annotationType ) ); - }), - _groupedAnnotations = IriSP._(_annotations).groupBy(function(_a) { - return ~~ (_a.begin / _sliceDuration); - }), - _max = IriSP._(_groupedAnnotations).max(function(_g) { - return _g.length - }).length, - _scale = this.height / _max, - _width = this.width / this.sliceCount; - - - var _paths = this.tagconf.map(function() { - return []; - }); - _paths.push([]); - - for (var i = 0; i < this.sliceCount; i++) { - var _group = _groupedAnnotations[i]; - if (_group) { - var _vol = this.tagconf.map(function() { - return 0; - }); - for (var j = 0; j < _group.length; j++){ - var _txt = _group[j].content.description; - var _tags = this.tagconf.map(function(_tag) { - return (_txt.search(_tag.regexp) == -1 ? 0 : 1) - }), - _nbtags = _tags.reduce(function(_a,_b) { - return _a + _b; - }, 0); - if (_nbtags) { - IriSP._(_tags).each(function(_v, _k) { - _vol[_k] += (_v / _nbtags); - }); - } - } - var _nbtags = _vol.reduce(function(_a,_b) { - return _a + _b; - }, 0), - _nbneutre = _group.length - _nbtags, - _h = _nbneutre * _scale, - _base = this.height - _h; - if (!this.isStreamGraph) { - this.paper.rect(i * _width, _base, _width - 1, _h ).attr({ - "stroke" : "none", - "fill" : this.defaultcolorconf, - }); - } - _paths[0].push(_base); - for (var j = 0; j < this.tagconf.length; j++) { - _h = _vol[j] * _scale; - _base = _base - _h; - if (!this.isStreamGraph) { - this.paper.rect(i * _width, _base, _width - 1, _h ).attr({ - "stroke" : "none", - "fill" : this.tagconf[j].color, - }); - } - _paths[j+1].push(_base); - } - this.groups.push(_vol.map(function(_v) { - return _v / _group.length; - })) - } else { - for (var j = 0; j < _paths.length; j++) { - _paths[j].push(this.height); - } - this.groups.push(this.tagconf.map(function() { - return 0; - })); - } - } - - if (this.isStreamGraph) { - for (var j = _paths.length - 1; j >= 0; j--) { - var _d = _paths[j].reduce(function(_memo, _v, _k) { - return _memo + ( _k - ? 'C' + (_k * _width) + ' ' + _paths[j][_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v - : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v ) - },'') + 'L' + this.width + ' ' + _paths[j][_paths[j].length - 1] + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height; - this.paper.path(_d).attr({ - "stroke" : "none", - "fill" : (j ? this.tagconf[j-1].color : this.defaultcolorconf), - }); - } - } - this.rectangleFocus = this.paper.rect(0,0,_width,this.height) - .attr({ - "stroke" : "none", - "fill" : "#ff00ff", - "opacity" : 0, - }) - this.rectangleProgress = this.paper.rect(0,0,0,this.height) - .attr({ - "stroke" : "none", - "fill" : "#808080", - "opacity" : .3, - }); - this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2}) - - this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); - var _this = this; - this.selector - .click(function(_e) { - _this.clickHandler(_e); - }) - .mousemove(function(_e) { - _this.updateTooltip(_e); - }) - .mouseout(function() { - _this.TooltipWidget.hide(); - _this.rectangleFocus.attr({ - "opacity" : 0, - }) - }) -} - -IriSP.StackGraphWidget.prototype.timeUpdateHandler = function() { - var _currentTime = this._Popcorn.currentTime(), - _x = (1000 * _currentTime / this.duration) * this.width; - this.rectangleProgress.attr({ - "width" : _x, - }); - this.ligneProgress.attr({ - "path" : "M" + _x + " 0L" + _x + " " + this.height, - }) -} - -IriSP.StackGraphWidget.prototype.clickHandler = function(event) { - /* Ctrl-C Ctrl-V'ed from another widget - */ - - var relX = event.pageX - this.selector.offset().left; - var newTime = ((relX / this.width) * this.duration/1000).toFixed(2); - this._Popcorn.trigger("IriSP.StackGraphWidget.clicked", newTime); - this._Popcorn.currentTime(newTime); -}; - -IriSP.StackGraphWidget.prototype.updateTooltip = function(event) { - var _segment = ~~(this.sliceCount * (event.pageX - this.selector.offset().left)/this.width), - _valeurs = this.groups[_segment], - _width = this.width / this.sliceCount, - _html = ''; - this.TooltipWidget._shown = false; // Vraiment, on ne peut pas ouvrir le widget s'il n'est pas encore ouvert ? - this.TooltipWidget.show('','',event.pageX - 105, event.pageY - 160); - this.TooltipWidget.selector.find(".tip").html(_html); - this.rectangleFocus.attr({ - "x" : _segment * _width, - "opacity" : .4, - }) -} - +IriSP.StackGraphWidget = function(Popcorn, config, Serializer) { + IriSP.Widget.call(this, Popcorn, config, Serializer); +} + +IriSP.StackGraphWidget.prototype = new IriSP.Widget(); + +IriSP.StackGraphWidget.prototype.draw = function() { + var _defaultTags = [ + { + "keywords" : [ "++" ], + "description" : "positif", + "color" : "#1D973D", + }, + { + "keywords" : [ "--" ], + "description" : "negatif", + "color" : "#CE0A15", + }, + { + "keywords" : [ "==" ], + "description" : "reference", + "color" : "#C5A62D", + }, + { + "keywords" : [ "??" ], + "description" : "question", + "color" : "#036AAE", + }, + ], + _defaultDefColor = "#585858"; + this.height = (this._config.height ? this._config.height : 50); + this.width = this.selector.width(); + this.isStreamGraph = (this._config.streamgraph ? this._config.streamgraph : false); + this.sliceCount = (this._config.slices ? this._config.slices : ~~(this.width/(this.isStreamGraph ? 20 : 5))); + this.tagconf = (this._config.tags + ? this._config.tags + : _defaultTags); + IriSP._(this.tagconf).each(function(_a) { + _a.regexp = new RegExp(_a.keywords.map(function(_k) { + return _k.replace(/([\W])/gm,'\\$1'); + }).join("|"),"im") + }); + this.defaultcolorconf = (this._config.defaultcolor + ? this._config.defaultcolor + : _defaultDefColor); + this.paper = new Raphael(this.selector[0], this.width, this.height); + this.groups = []; + this.duration = this._serializer.currentMedia().meta["dc:duration"]; + + var _annotationType = this._serializer.getTweets(), + _sliceDuration = ~~ ( this.duration / this.sliceCount), + _annotations = IriSP._(this._serializer._data.annotations).filter(function(_a) { + return ( _a.meta && _a.meta["id-ref"] && ( _a.meta["id-ref"] == _annotationType ) ); + }), + _groupedAnnotations = IriSP._(_annotations).groupBy(function(_a) { + return ~~ (_a.begin / _sliceDuration); + }), + _max = IriSP._(_groupedAnnotations).max(function(_g) { + return _g.length + }).length, + _scale = this.height / _max, + _width = this.width / this.sliceCount; + + + var _paths = this.tagconf.map(function() { + return []; + }); + _paths.push([]); + + for (var i = 0; i < this.sliceCount; i++) { + var _group = _groupedAnnotations[i]; + if (_group) { + var _vol = this.tagconf.map(function() { + return 0; + }); + for (var j = 0; j < _group.length; j++){ + var _txt = _group[j].content.description; + var _tags = this.tagconf.map(function(_tag) { + return (_txt.search(_tag.regexp) == -1 ? 0 : 1) + }), + _nbtags = _tags.reduce(function(_a,_b) { + return _a + _b; + }, 0); + if (_nbtags) { + IriSP._(_tags).each(function(_v, _k) { + _vol[_k] += (_v / _nbtags); + }); + } + } + var _nbtags = _vol.reduce(function(_a,_b) { + return _a + _b; + }, 0), + _nbneutre = _group.length - _nbtags, + _h = _nbneutre * _scale, + _base = this.height - _h; + if (!this.isStreamGraph) { + this.paper.rect(i * _width, _base, _width - 1, _h ).attr({ + "stroke" : "none", + "fill" : this.defaultcolorconf, + }); + } + _paths[0].push(_base); + for (var j = 0; j < this.tagconf.length; j++) { + _h = _vol[j] * _scale; + _base = _base - _h; + if (!this.isStreamGraph) { + this.paper.rect(i * _width, _base, _width - 1, _h ).attr({ + "stroke" : "none", + "fill" : this.tagconf[j].color, + }); + } + _paths[j+1].push(_base); + } + this.groups.push(_vol.map(function(_v) { + return _v / _group.length; + })) + } else { + for (var j = 0; j < _paths.length; j++) { + _paths[j].push(this.height); + } + this.groups.push(this.tagconf.map(function() { + return 0; + })); + } + } + + if (this.isStreamGraph) { + for (var j = _paths.length - 1; j >= 0; j--) { + var _d = _paths[j].reduce(function(_memo, _v, _k) { + return _memo + ( _k + ? 'C' + (_k * _width) + ' ' + _paths[j][_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v + : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v ) + },'') + 'L' + this.width + ' ' + _paths[j][_paths[j].length - 1] + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height; + this.paper.path(_d).attr({ + "stroke" : "none", + "fill" : (j ? this.tagconf[j-1].color : this.defaultcolorconf), + }); + } + } + this.rectangleFocus = this.paper.rect(0,0,_width,this.height) + .attr({ + "stroke" : "none", + "fill" : "#ff00ff", + "opacity" : 0, + }) + this.rectangleProgress = this.paper.rect(0,0,0,this.height) + .attr({ + "stroke" : "none", + "fill" : "#808080", + "opacity" : .3, + }); + this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2}) + + this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); + var _this = this; + this.selector + .click(function(_e) { + _this.clickHandler(_e); + }) + .mousemove(function(_e) { + _this.updateTooltip(_e); + }) + .mouseout(function() { + _this.TooltipWidget.hide(); + _this.rectangleFocus.attr({ + "opacity" : 0, + }) + }) +} + +IriSP.StackGraphWidget.prototype.timeUpdateHandler = function() { + var _currentTime = this._Popcorn.currentTime(), + _x = (1000 * _currentTime / this.duration) * this.width; + this.rectangleProgress.attr({ + "width" : _x, + }); + this.ligneProgress.attr({ + "path" : "M" + _x + " 0L" + _x + " " + this.height, + }) +} + +IriSP.StackGraphWidget.prototype.clickHandler = function(event) { + /* Ctrl-C Ctrl-V'ed from another widget + */ + + var relX = event.pageX - this.selector.offset().left; + var newTime = ((relX / this.width) * this.duration/1000).toFixed(2); + this._Popcorn.trigger("IriSP.StackGraphWidget.clicked", newTime); + this._Popcorn.currentTime(newTime); +}; + +IriSP.StackGraphWidget.prototype.updateTooltip = function(event) { + var _segment = ~~(this.sliceCount * (event.pageX - this.selector.offset().left)/this.width), + _valeurs = this.groups[_segment], + _width = this.width / this.sliceCount, + _html = ''; + this.TooltipWidget._shown = false; // Vraiment, on ne peut pas ouvrir le widget s'il n'est pas encore ouvert ? + this.TooltipWidget.show('','',event.pageX - 105, event.pageY - 160); + this.TooltipWidget.selector.find(".tip").html(_html); + this.rectangleFocus.attr({ + "x" : _segment * _width, + "opacity" : .4, + }) +} +