added a "tooltip" widget. Made some changes to the css corresponding to this
widget too.
--- 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("<?php echo($baseurl);?>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;
+ }
--- /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
--- /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 @@
+<!-- template for the tooltip widget -->
+
+<div class='tip'>
+ <div class='tipcolor' style='height:10px;width:10px'></div>
+ <div class='tiptext'>
+</div>
\ No newline at end of file
--- 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 @@
<script src="tests/segmentsWidget.js" type="text/javascript"></script>
<script src="tests/layout.js" type="text/javascript"></script>
<script src="tests/init.js" type="text/javascript"></script>
+ <script src="tests/tooltipWidget.js" type="text/javascript"></script>
</head>
<script>
$(document).ready(function(){
@@ -43,6 +44,7 @@
test_segments_widget();
test_layout();
test_init();
+ test_tooltip_widget();
});
</script>
<body>
--- /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