yellow team mailing list archive

[Francesco Banconi <francesco.banconi@xxxxxxxxxxxxx>]

Francesco Banconi has proposed merging lp:~frankban/juju-gui/bug-1090046-resize into lp:juju-gui.

Requested reviews:
  Juju GUI Hackers (juju-gui)
Related bugs:
  Bug #1090046 in juju-gui: "Resizing the browser causes the GUI to break"
  https://bugs.launchpad.net/juju-gui/+bug/1090046

For more details, see:
https://code.launchpad.net/~frankban/juju-gui/bug-1090046-resize/+merge/139959

Fix GUI breakage on browser resizing.

Fixed how yui events are handled by the component framework.
Also added two tests:
- ensure that the module synthetic events binding works;
- ensure that the custom events 'beforePageSizeRecalculation' 
  and 'afterPageSizeRecalculation' are correctly fired by 
  the environment view when the browser is resized.

QA: resize the browser, open the charm panel, resize the 
    browser again, close the charm panel, resize again, 
    re-open the panel...

https://codereview.appspot.com/6941053/

-- 
https://code.launchpad.net/~frankban/juju-gui/bug-1090046-resize/+merge/139959
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~frankban/juju-gui/bug-1090046-resize into lp:juju-gui.

=== modified file 'app/assets/javascripts/d3-components.js'
--- app/assets/javascripts/d3-components.js	2012-12-11 15:35:25 +0000
+++ app/assets/javascripts/d3-components.js	2012-12-14 16:41:29 +0000
@@ -231,9 +231,12 @@
           // Bind resolved event handlers as a group.
           if (Y.Object.keys(resolvedHandler).length) {
             Y.each(resolvedHandler, function(handler, name) {
-              subscriptions.push(Y[eventPhase](name,
-                                               handler.callback,
-                                               handler.context));
+              // DOM and synthetic events are subscribed using Y.on with
+              // this signature: Y.on(event, callback, target, context).
+              // For this reason, it is not possible here to just pass the
+              // context as third argument.
+              var callback = Y.bind(handler.callback, handler.context);
+              subscriptions.push(Y[eventPhase](name, callback));
             });
           }
         });

=== modified file 'test/test_d3_components.js'
--- test/test_d3_components.js	2012-11-09 14:17:58 +0000
+++ test/test_d3_components.js	2012-12-14 16:41:29 +0000
@@ -129,6 +129,24 @@
 
      });
 
+  it('should correctly handle synthetic event bindings', function(done) {
+    comp = new NS.Component();
+    comp.setAttrs({container: container});
+    modA = new TestModule();
+    var resized = false;
+    modA.windowResizeHandler = function(evt) {
+      resized = true;
+    };
+    modA.events.yui.windowresize = 'windowResizeHandler';
+    comp.addModule(modA);
+    var subscription = Y.after('windowresize', function(evt) {
+      subscription.detach();
+      assert.isTrue(resized);
+      done();
+    });
+    Y.one('window').simulate('resize');
+  });
+
   it('should support basic rendering from all modules',
      function() {
        var modA = new TestModule(),

=== modified file 'test/test_environment_view.js'
--- test/test_environment_view.js	2012-12-05 18:37:01 +0000
+++ test/test_environment_view.js	2012-12-14 16:41:29 +0000
@@ -103,7 +103,7 @@
     });
 
     beforeEach(function(done) {
-      container = Y.Node.create('<div id="test-container" />');
+      container = Y.Node.create('<div />').setStyle('visibility', 'hidden');
       Y.one('body').prepend(container);
       db = new models.Database();
       db.on_delta({data: environment_delta});
@@ -118,6 +118,22 @@
       done();
     });
 
+    it('must handle the window resize event', function(done) {
+      var view = new views.environment({container: container, db: db});
+      view.render();
+      var beforeResizeEventFired = false;
+      Y.once('beforePageSizeRecalculation', function() {
+        // This event must be fired by views.MegaModule.setSizesFromViewport.
+        beforeResizeEventFired = true;
+      });
+      Y.once('afterPageSizeRecalculation', function() {
+        // This event must be fired by views.MegaModule.setSizesFromViewport.
+        assert.isTrue(beforeResizeEventFired);
+        done();
+      });
+      Y.one('window').simulate('resize');
+    });
+
     // Ensure the environment view loads properly
     it('must be able to render service blocks and relations',
         function() {