# HG changeset patch # User hamidouk # Date 1320240914 -3600 # Node ID 3ffa0e0c8803b67390e50ce7574bee7da2e85bb2 # Parent 158f0193ec548c9fd79861026f45dab5214bad53 added a "tooltip" widget. Made some changes to the css corresponding to this widget too. diff -r 158f0193ec54 -r 3ffa0e0c8803 src/css/LdtPlayer.css --- a/src/css/LdtPlayer.css Wed Nov 02 12:33:20 2011 +0100 +++ b/src/css/LdtPlayer.css Wed Nov 02 14:35:14 2011 +0100 @@ -179,3 +179,23 @@ .shareJamesPot{ background-position:0 -1808px; } + + .tip{ + position : absolute; + padding : 3px; + z-index: 10000000000; + max-width: 200px; + display: none; + background: transparent url("images/white_arrow_long.png"); + font-size: 12px; + height: 125px; + width: 180px; + padding: 10px; + padding-left: 15px; + padding-top: 15px; + padding-right: 15px; + color: black; + z-index: 10000000000; + font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; + overflow:hidden; + } diff -r 158f0193ec54 -r 3ffa0e0c8803 src/js/widgets/tooltipWidget.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/js/widgets/tooltipWidget.js Wed Nov 02 14:35:14 2011 +0100 @@ -0,0 +1,24 @@ +/* this widget displays a small tooltip */ +IriSP.TooltipWidget = function(Popcorn, config, Serializer) { + IriSP.Widget.call(this, Popcorn, config, Serializer); +}; + + +IriSP.TooltipWidget.prototype = new IriSP.Widget(); + +IriSP.TooltipWidget.prototype.draw = function() { + var templ = Mustache.to_html(IriSP.tooltipWidget_template); + this.selector.append(templ); + this.hide(); + +}; + +IriSP.TooltipWidget.prototype.show = function(text, color, x, y) { + this.selector.children(".tipcolor").css("background-color", color); + this.selector.find(".tiptext").text(text); + this.selector.children(".tip").css("left", x).css("top", y); +}; + +IriSP.TooltipWidget.prototype.hide = function() { + this.selector.children(".tip").css("left", -10000).css("top", -100000); +}; \ No newline at end of file diff -r 158f0193ec54 -r 3ffa0e0c8803 src/templates/tooltipWidget.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/templates/tooltipWidget.html Wed Nov 02 14:35:14 2011 +0100 @@ -0,0 +1,6 @@ + + +
+
+
+
\ No newline at end of file diff -r 158f0193ec54 -r 3ffa0e0c8803 unittests/index.html --- a/unittests/index.html Wed Nov 02 12:33:20 2011 +0100 +++ b/unittests/index.html Wed Nov 02 14:35:14 2011 +0100 @@ -26,6 +26,7 @@ + diff -r 158f0193ec54 -r 3ffa0e0c8803 unittests/tests/tooltipWidget.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/unittests/tests/tooltipWidget.js Wed Nov 02 14:35:14 2011 +0100 @@ -0,0 +1,46 @@ +/* tooltipWidget.js */ + +function test_tooltip_widget() { + module("tooltip widget testing", + {setup : function() { + this.Popcorn = Popcorn.youtube("#popcorn-div", "http://www.youtube.com/watch?v=QH2-TGUlwu4"); + + this.dt = new IriSP.DataLoader(); + this.ser = new IriSP.MockSerializer(this.dt, "/url"); /* dummy serializer */ + + this.config = { + width: 160, + height:120, + container: "widget-div" + }; + }, + + teardown: function() { + /* free the popcorn object because it has signal handlers attached to it */ + this.Popcorn = Popcorn.youtube("#popcorn-div", "http://www.youtube.com/watch?v=QH2-TGUlwu4"); + } + }); + + test("test tooltip widget initialization", function() { + var widget = new IriSP.TooltipWidget(this.Popcorn, this.config, this.ser); + widget.draw(); + + equal(widget.selector.children(".tip").length, 1, "test if the div has been added correctly"); + equal(widget.selector.children(".tip").css("left"), "-10000px", "test if div has been positionned correctly"); + equal(widget.selector.children(".tip").css("top"), "-100000px", "test if div has been positionned correctly"); + }); + + test("test widget display function", function() { + var widget = new IriSP.TooltipWidget(this.Popcorn, this.config, this.ser); + widget.draw(); + + widget.show("ceci est un texte", "#fefefe", 105, 240); + equal(widget.selector.children(".tip").css("left"), "105px", "test if div has been positionned correctly"); + equal(widget.selector.children(".tip").css("top"), "240px", "test if div has been positionned correctly"); + equal(widget.selector.find(".tiptext").text(), "ceci est un texte", "test if text has been set correctly"); + + widget.hide(); + equal(widget.selector.children(".tip").css("left"), "-10000px", "test if div has been positionned correctly"); + equal(widget.selector.children(".tip").css("top"), "-100000px", "test if div has been positionned correctly"); + }); +}; \ No newline at end of file