added a spacer div to simplify some graphic animations. popcorn-port
authorhamidouk
Mon, 21 Nov 2011 11:34:07 +0100
branchpopcorn-port
changeset 287 5c7495102bd7
parent 286 6252f951d11c
child 288 25fe0c8831de
added a spacer div to simplify some graphic animations.
src/js/init.js
src/js/layout.js
src/js/widgets.js
unittests/tests/init.js
unittests/tests/layout.js
--- a/src/js/init.js	Mon Nov 21 10:51:42 2011 +0100
+++ b/src/js/init.js	Mon Nov 21 11:34:07 2011 +0100
@@ -5,7 +5,8 @@
 
 IriSP.configurePopcorn = function (layoutManager, options) {
     var pop;
-    var containerDiv = layoutManager.createDiv();
+    var ret = layoutManager.createDiv(); 
+    var containerDiv = ret[0];
     
     switch(options.type) {
       /*
@@ -65,9 +66,14 @@
 };
 
 IriSP.instantiateWidget = function(popcornInstance, serialFactory, layoutManager, widgetConfig) {
-    var container = layoutManager.createDiv();        
+    /* create div returns us a container for the widget and a spacer */
+    var ret = layoutManager.createDiv();        
+    var container = ret[0];
+    var spacer = ret[1];
+
     var arr = IriSP.jQuery.extend({}, widgetConfig);
     arr.container = container;
+    arr.spacer = spacer;
     
     var serializer = serialFactory.getSerializer(widgetConfig.metadata);    
     
@@ -91,4 +97,4 @@
      
     serializer.sync(IriSP.wrap(widget, function() { this.draw(); }));
     return widget;
-};
\ No newline at end of file
+};
--- a/src/js/layout.js	Mon Nov 21 10:51:42 2011 +0100
+++ b/src/js/layout.js	Mon Nov 21 11:34:07 2011 +0100
@@ -44,16 +44,21 @@
    
 IriSP.LayoutManager.prototype.setPopcornInstance = function(popcorn) {
     this._Popcorn = popcorn;
-    /* FIXME - don't forget to add the popcorn messages handlers there */
 }
 
 IriSP.LayoutManager.prototype.createDiv = function() {
     var newDiv = Popcorn.guid(this._div + "_widget_");
+    var spacerDiv = Popcorn.guid("_spacer_");
     this._widgets.push(newDiv);
 
-    var templ = "<div id='{{id}}' style='width: 100%; position: relative;'></div";
-    var txt = Mustache.to_html(templ, {id: newDiv});
-    this.selector.append(txt);
+    var divTempl = "<div id='{{id}}' style='width: 100%; position: relative;'></div";
+    var spacerTempl = "<div id='{{spacer_id}}' style='width: 100%; position: relative; height: 5px;'></div";
     
-    return newDiv;
+    var divCode = Mustache.to_html(divTempl, {id: newDiv});
+    var spacerCode = Mustache.to_html(spacerTempl, {spacer_id: spacerDiv});
+
+    this.selector.append(spacerCode);
+    this.selector.append(divCode);
+    
+    return [newDiv, spacerDiv];
 };
--- a/src/js/widgets.js	Mon Nov 21 10:51:42 2011 +0100
+++ b/src/js/widgets.js	Mon Nov 21 11:34:07 2011 +0100
@@ -15,6 +15,12 @@
      this.selector = IriSP.jQuery("#" + this._id);
   }
 
+  if (config.hasOwnProperty("spacer")) {
+     this._spacerId = config.spacer;
+     this.spacer = IriSP.jQuery("#" + this._spacerId);
+  }
+
+
   if (config.hasOwnProperty("width")) {
      // this.width and not this._width because we consider it public.
      this.width = config.width;     
--- a/unittests/tests/init.js	Mon Nov 21 10:51:42 2011 +0100
+++ b/unittests/tests/init.js	Mon Nov 21 11:34:07 2011 +0100
@@ -1,136 +1,136 @@
-function test_init() {
-	module("test initialization routines", 
-  {
-    setup: function() {
-      IriSP.jQuery("#widget-div").append("<div id='LdtPlayer'></div>");
-      this.popcornOptions = {
-          container: "LdtPlayer",
-          type: "jwplayer", file : "video/franceculture/franceculture_retourdudimanche20100620.flv", 
-          streamer: "rtmp://media.iri.centrepompidou.fr/ddc_player/", 
-          flashplayer : '../libs/player.swf',
-          live: true, 
-          "controlbar.position" : "none", 
-          height: 300, 
-          width: 200, 
-          provider: "rtmp" 
-        };
-        
-        this.widgetOptions = {
-						width:650,
-						height:480,							
-						container:'LdtPlayer',
-						css:'../../src/css/LdtPlayer.css',
-            widgets: [
-              {type: "PlayerWidget",
-               mode: "radio",
-               metadata:{
-                format:'cinelab',
-                src:'test.json',
-                type:'dummy'}
-              },
-             {type: "SegmentsWidget", 
-               metadata:{
-                format:'cinelab',
-                src:'test.json',
-                type:'dummy'}
-              },
-             {type: "AnnotationsWidget", 
-               metadata:{
-                format:'cinelab',
-                src:'test.json',
-                type:'dummy'}
-              },
-            ]};
-    }
-  });
-  
-  test("test the creation of a correct popcorn object", function() {
-
-    var layoutManager = new IriSP.LayoutManager({container: "LdtPlayer", width: 327, height: 542});
-    var pop = IriSP.configurePopcorn(layoutManager, this.popcornOptions);
-    notDeepEqual(pop, undefined, "returned object is not undefined");
-    
-    /* FIXME: add more test options ? */
-    equal(pop.options.type, "jwplayer", "the player is of the correct type.");
-  });
-  
-  test("test the creation of a video tag", function() {
-  
-    var popcornOptions = {
-            type: "html5",
-            file: "demo.mp4"
-          };
-    
-    var layoutManager = new IriSP.LayoutManager({container: "LdtPlayer", width: 327, height: 542});
-    var pop = IriSP.configurePopcorn(layoutManager, popcornOptions);
-    
-    var elem = IriSP.jQuery("#LdtPlayer").find("video");
-    notDeepEqual(elem, [], "the element is not null");
-    equal(elem.attr("src"), popcornOptions.file, "the src attribute is set correctly");    
-  });
-  
-  test("test the instantiation of a single widget without dependencies", function() {
-    
-    var dt = new IriSP.DataLoader();
-    var serialFactory = new IriSP.SerializerFactory(dt);
- 
-    var layoutManager = new IriSP.LayoutManager({container: "LdtPlayer", width: 327, height: 542});
-    var pop = IriSP.configurePopcorn(layoutManager, this.popcornOptions);
-    var conf = {type: "PlayerWidget",
-               mode: "radio",
-               metadata:{
-                format:'cinelab',
-                src:'test.json',
-                type:'dummy'}
-              };
-              
-    var res = IriSP.instantiateWidget(pop, serialFactory, layoutManager, conf);    
-    ok(res instanceof IriSP.PlayerWidget, "the returned widget is of the correct instance");
-    equal(res._config.mode, "radio", "the parameters not interpreted by the config are copied into the object");
-  });  
-  
-  test("test the instantiation of a single widget with one dependency", function() {
-    var dt = new IriSP.DataLoader();
-    var serialFactory = new IriSP.SerializerFactory(dt);
- 
-    var layoutManager = new IriSP.LayoutManager({container: "LdtPlayer", width: 327, height: 542});    
-    
-    var pop = IriSP.configurePopcorn(layoutManager, this.popcornOptions);
-    var conf = {type: "PlayerWidget",
-               mode: "radio",
-               metadata:{
-                format:'cinelab',
-                src:'test.json',
-                type:'dummy'},
-                requires: [
-                {type: "PlayerWidget",
-                  mode: "radio",
-                  metadata:{
-                    format:'cinelab',
-                    src:'test.json',
-                    type:'dummy'
-                } }]
-              };
-    
-    
-    var res = IriSP.instantiateWidget(pop, serialFactory, layoutManager, conf);
-    
-    ok(res instanceof IriSP.PlayerWidget, "the returned widget is of the correct instance");
-    ok(res.PlayerWidget instanceof IriSP.PlayerWidget, "the dependency widget is accessible from the parent");
-  });
-  
-  test("test the instantiation of a bunch of widgets", function() {
-  
-    var layoutManager = new IriSP.LayoutManager({container: "LdtPlayer", width: 327, height: 542});
-    var pop = IriSP.configurePopcorn(layoutManager, this.popcornOptions);
-    
-    var widgets = IriSP.configureWidgets(pop, layoutManager, this.widgetOptions);
-
-    ok(widgets[0] instanceof IriSP.PlayerWidget, "first widget is a player widget");       
-    ok(widgets[1] instanceof IriSP.SegmentsWidget, "second widget is a segments widget");
-    ok(widgets[2] instanceof IriSP.AnnotationsWidget, "third widget is an annotation widget");
-    equal(IriSP.jQuery("#" + this.widgetOptions.container).length, 1, "a new dom element has been created");
-  });
-  
-
+function test_init() {
+	module("test initialization routines",
+  {
+    setup: function() {
+      IriSP.jQuery("#widget-div").append("<div id='LdtPlayer'></div>");
+      this.popcornOptions = {
+          container: "LdtPlayer",
+          type: "jwplayer", file : "video/franceculture/franceculture_retourdudimanche20100620.flv",
+          streamer: "rtmp://media.iri.centrepompidou.fr/ddc_player/",
+          flashplayer : '../libs/player.swf',
+          live: true,
+          "controlbar.position" : "none",
+          height: 300,
+          width: 200,
+          provider: "rtmp"
+        };
+
+        this.widgetOptions = {
+						width:650,
+						height:480,
+						container:'LdtPlayer',
+						css:'../../src/css/LdtPlayer.css',
+            widgets: [
+              {type: "PlayerWidget",
+               mode: "radio",
+               metadata:{
+                format:'cinelab',
+                src:'test.json',
+                type:'dummy'}
+              },
+             {type: "SegmentsWidget",
+               metadata:{
+                format:'cinelab',
+                src:'test.json',
+                type:'dummy'}
+              },
+             {type: "AnnotationsWidget",
+               metadata:{
+                format:'cinelab',
+                src:'test.json',
+                type:'dummy'}
+              },
+            ]};
+    }
+  });
+
+  test("test the creation of a correct popcorn object", function() {
+
+    var layoutManager = new IriSP.LayoutManager({container: "LdtPlayer", width: 327, height: 542});
+    var pop = IriSP.configurePopcorn(layoutManager, this.popcornOptions);
+    notDeepEqual(pop, undefined, "returned object is not undefined");
+
+    /* FIXME: add more test options ? */
+    equal(pop.options.type, "jwplayer", "the player is of the correct type.");
+  });
+
+  test("test the creation of a video tag", function() {
+
+    var popcornOptions = {
+            type: "html5",
+            file: "demo.mp4"
+          };
+
+    var layoutManager = new IriSP.LayoutManager({container: "LdtPlayer", width: 327, height: 542});
+    var pop = IriSP.configurePopcorn(layoutManager, popcornOptions);
+
+    var elem = IriSP.jQuery("#LdtPlayer").find("video");
+    notDeepEqual(elem, [], "the element is not null");
+    equal(elem.attr("src"), popcornOptions.file, "the src attribute is set correctly");
+  });
+
+  test("test the instantiation of a single widget without dependencies", function() {
+
+    var dt = new IriSP.DataLoader();
+    var serialFactory = new IriSP.SerializerFactory(dt);
+
+    var layoutManager = new IriSP.LayoutManager({container: "LdtPlayer", width: 327, height: 542});
+    var pop = IriSP.configurePopcorn(layoutManager, this.popcornOptions);
+    var conf = {type: "PlayerWidget",
+               mode: "radio",
+               metadata:{
+                format:'cinelab',
+                src:'test.json',
+                type:'dummy'}
+              };
+
+    var res = IriSP.instantiateWidget(pop, serialFactory, layoutManager, conf);
+    ok(res instanceof IriSP.PlayerWidget, "the returned widget is of the correct instance");
+    equal(res._config.mode, "radio", "the parameters not interpreted by the config are copied into the object");
+  });
+
+  test("test the instantiation of a single widget with one dependency", function() {
+    var dt = new IriSP.DataLoader();
+    var serialFactory = new IriSP.SerializerFactory(dt);
+
+    var layoutManager = new IriSP.LayoutManager({container: "LdtPlayer", width: 327, height: 542});
+
+    var pop = IriSP.configurePopcorn(layoutManager, this.popcornOptions);
+    var conf = {type: "PlayerWidget",
+               mode: "radio",
+               metadata:{
+                format:'cinelab',
+                src:'test.json',
+                type:'dummy'},
+                requires: [
+                {type: "PlayerWidget",
+                  mode: "radio",
+                  metadata:{
+                    format:'cinelab',
+                    src:'test.json',
+                    type:'dummy'
+                } }]
+              };
+
+
+    var res = IriSP.instantiateWidget(pop, serialFactory, layoutManager, conf);
+
+    ok(res instanceof IriSP.PlayerWidget, "the returned widget is of the correct instance");
+    ok(res.PlayerWidget instanceof IriSP.PlayerWidget, "the dependency widget is accessible from the parent");
+  });
+
+  test("test the instantiation of a bunch of widgets", function() {
+
+    var layoutManager = new IriSP.LayoutManager({container: "LdtPlayer", width: 327, height: 542});
+    var pop = IriSP.configurePopcorn(layoutManager, this.popcornOptions);
+
+    var widgets = IriSP.configureWidgets(pop, layoutManager, this.widgetOptions);
+
+    ok(widgets[0] instanceof IriSP.PlayerWidget, "first widget is a player widget");
+    ok(widgets[1] instanceof IriSP.SegmentsWidget, "second widget is a segments widget");
+    ok(widgets[2] instanceof IriSP.AnnotationsWidget, "third widget is an annotation widget");
+    equal(IriSP.jQuery("#" + this.widgetOptions.container).length, 1, "a new dom element has been created");
+  });
+
+
 }
\ No newline at end of file
--- a/unittests/tests/layout.js	Mon Nov 21 10:51:42 2011 +0100
+++ b/unittests/tests/layout.js	Mon Nov 21 11:34:07 2011 +0100
@@ -27,9 +27,12 @@
   
   test("test widget div creation", function() {
     var lay = new IriSP.LayoutManager({});
-    var divId = lay.createDiv();
+    var ret = lay.createDiv(); 
+    var divId = ret[0];
+    var spacerId = ret[1];
     
-    equal(lay.selector.children("#" + divId).length, 1, "check that a subdiv is created");
+    equal(lay.selector.children("#" + divId).length, 1, "check that a subdiv container is created");
+    equal(lay.selector.children("#" + spacerId).length, 1, "check that a spacer subdiv is created");
     
   });