BUGFIX: Tooltips are now positioned relative to their parent widget.
--- a/src/js/init.js Mon Mar 05 10:55:08 2012 +0100
+++ b/src/js/init.js Mon Mar 05 17:34:48 2012 +0100
@@ -225,8 +225,15 @@
var i = 0;
for(i = 0; i < widgetConfig.requires.length; i++) {
- var widgetName = widgetConfig.requires[i]["type"];
- widget[widgetName] = IriSP.instantiateWidget(popcornInstance, serialFactory, layoutManager, widgetConfig.requires[i], defaultOptions);
+ var widgetName = widgetConfig.requires[i]["type"],
+ _configobj = IriSP.jQuery.extend({}, widgetConfig.requires[i]),
+ _div = document.createElement('div'),
+ _container = IriSP.guid(arr.container + '_' + widgetName + '_');
+ _configobj.container = _container;
+ _div.id = _container;
+ widget.selector.append(_div);
+ console.log(_configobj);
+ widget[widgetName] = IriSP.instantiateWidget(popcornInstance, serialFactory, layoutManager, _configobj, defaultOptions);
}
}
--- a/src/js/widgets/polemicWidget.js Mon Mar 05 10:55:08 2012 +0100
+++ b/src/js/widgets/polemicWidget.js Mon Mar 05 17:34:48 2012 +0100
@@ -320,14 +320,10 @@
e.time = frames[i].mytweetsID[k].timeframe;
e.title = frames[i].mytweetsID[k].title;
e.id = frames[i].mytweetsID[k].cinecast_id;
- var pos = IriSP.jQuery(e.node).offset();
- e.x = pos.left;
- e.y = pos.top;
this.svgElements[e.id] = e;
- IriSP.jQuery(e.node).mouseenter(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.pageX - 106, event.pageY - 160);
+ IriSP.jQuery(e.node).mouseenter(function(element) { return function () {
+ self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), element.attrs.x + element.attrs.width / 2, element.attrs.y - 2);
element.displayed = true;
}}(e)).mousedown(function(element) { return function () {
self._Popcorn.currentTime(element.time/1000);
--- a/src/js/widgets/segmentsWidget.js Mon Mar 05 10:55:08 2012 +0100
+++ b/src/js/widgets/segmentsWidget.js Mon Mar 05 17:34:48 2012 +0100
@@ -133,16 +133,9 @@
(function(divTitle) {
return function(event) {
IriSP.jQuery(this).animate({opacity: 0.6}, 5);
- var offset = IriSP.jQuery(this).offset();
- var correction = IriSP.jQuery(this).outerWidth() / 2;
+ var offset_x = IriSP.jQuery(this).position().left + IriSP.jQuery(this).outerWidth() / 2;
- var offset_x = offset.left + correction - 106;
- if (offset_x < 0)
- offset_x = 0;
-
- var offset_y = offset.top;
-
- self.TooltipWidget.show(divTitle, color, offset_x, offset_y - 160);
+ self.TooltipWidget.show(divTitle, color, offset_x, 0);
} })(divTitle)).mouseout(function(){
IriSP.jQuery(this).animate({opacity: 0.3}, 5);
self.TooltipWidget.hide();
--- a/src/js/widgets/stackGraphWidget.js Mon Mar 05 10:55:08 2012 +0100
+++ b/src/js/widgets/stackGraphWidget.js Mon Mar 05 17:34:48 2012 +0100
@@ -198,7 +198,7 @@
};
IriSP.StackGraphWidget.prototype.updateTooltip = function(event) {
- var _segment = ~~(this.sliceCount * (event.pageX - this.selector.offset().left)/this.width),
+ var _segment = Math.floor(this.sliceCount * (event.pageX - this.selector.offset().left)/this.width),
_valeurs = this.groups[_segment],
_width = this.width / this.sliceCount,
_html = '<ul style="list-style: none; margin: 0; padding: 0;">' + IriSP._(this.tagconf).map(function(_tag, _i) {
@@ -211,7 +211,7 @@
+ '</li>';
}).join('') + '</ul>';
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.show('','',(_segment + .5)* this.width / this.sliceCount, 0);
this.TooltipWidget.selector.find(".tip").html(_html);
this.rectangleFocus.attr({
"x" : _segment * _width,
--- a/src/js/widgets/tooltipWidget.js Mon Mar 05 10:55:08 2012 +0100
+++ b/src/js/widgets/tooltipWidget.js Mon Mar 05 17:34:48 2012 +0100
@@ -4,6 +4,7 @@
this._shown = false;
this._displayedText = "";
this._hideTimeout = -1;
+ console.log(config.container);
};
@@ -11,8 +12,15 @@
IriSP.TooltipWidget.prototype.draw = function() {
var templ = Mustache.to_html(IriSP.tooltipWidget_template);
- // position the widget absolutely relative to document.
- this.selector.css("position", "static");
+ // position the widget absolutely relative to document. --- NOOOO !!!!
+ this.selector.css({
+ "position": "absolute",
+ "top": 0,
+ "left": 0
+ });
+ this.selector.parent().css({
+ "position": "relative"
+ });
this.selector.append(templ);
this.hide();
@@ -29,15 +37,14 @@
this.selector.find(".tipcolor").css("background-color", color);
this._displayedText = text;
- this.selector.find(".tiptext").html(text);
+ this.selector.find(".tiptext").html(text);
- if (x < 0)
- x = 0;
- if (y < 0)
- y = 0;
-
- this.selector.find(".tip").css("left", x).css("top", y);
- this.selector.find(".tip").show();
+ var _tip = this.selector.find(".tip");
+ _tip.show();
+ _tip.css({
+ "left": Math.floor(x - _tip.outerWidth() / 2)+"px",
+ "top": Math.floor(y - _tip.outerHeight())+"px"
+ });
this._shown = true;
};
--- a/test/integration/polemic.htm Mon Mar 05 10:55:08 2012 +0100
+++ b/test/integration/polemic.htm Mon Mar 05 17:34:48 2012 +0100
@@ -18,14 +18,14 @@
<script type="text/javascript" src="../../build/LdtPlayer-release.js" type="text/javascript"></script>
<div id="video"></div>
- <div id="LdtPlayer"></div>
+ <div id="LdtPlayer" style="float: right; position: relative;"></div>
<script type="text/javascript">
var file = "polemic_fr.json";
var config = {
gui:{
width:650,
- height:2100,
+ height:800,
container:'LdtPlayer',
default_options: {
metadata:{
@@ -41,13 +41,22 @@
requires: [{
type: "TooltipWidget",
width: 180,
- heigh: 160,
+ height: 160,
+ }],
+ },
+ {type: "StackGraphWidget",
+ width: 640, /* required for this widget */
+ height: 50,
+ requires: [{
+ type: "TooltipWidget",
+ width: 180,
+ height: 160,
}],
},
{type: "SparklineWidget",
width: 640, /* required for this widget */
height: 50},
- {type: "SliderWidget"},
+ {type: "SliderWidget"},
{type: "PlayerWidget"},
{type: "SegmentsWidget",
requires: [{