Merge lp:~rvb/launchpad/confirmationoverlay-button-optional into lp:launchpad

[Raphaël Badin]

[r=gmb][no-qa] The 'button' parameter is optional when creating a ConfirmationOverlay.

This branch improves the ConfirmationOverlay so that it can be used without providing a button to the constructor. This way, ConfirmationOverlay can be used in pure Javascript environments to only protect method calls like this:

/// JS
var method = function() {
    alert('This was a joke!');
};
var co = new Y.lp.app.confirmationoverlay.ConfirmationOverlay({
    submit_fn: method,
    form_content: 'Are you *really* sure? This will kill kittens!',
    headerContent: 'Confirm?'
    });
co.show();
/// \JS

= Tests =

lib/lp/app/javascript/confirmationoverlay/tests/test_confirmationoverlay.html

= QA =

None.

[Graham Binns (gmb)]

Hi Raphaël,

Nice branch; I've only got one minor tweak for you to make before this lands:

[1]

48 + if (button !== null) {

Since we're in a YUI environment, you should use if(Y.Lang.isValue(button)) here rather than checking for !== null.

review: Approve (code)

=== modified file 'lib/lp/app/javascript/confirmationoverlay/confirmationoverlay.js'
--- lib/lp/app/javascript/confirmationoverlay/confirmationoverlay.js	2011-09-12 14:21:07 +0000
+++ lib/lp/app/javascript/confirmationoverlay/confirmationoverlay.js	2011-09-13 11:25:49 +0000
@@ -22,6 +22,9 @@
  * a chance to cancel the form submission.  Note that the button
  * can be simply 'disabled' if it's desirable to prevent the usage
  * of that button if the user's browser has no Javascript support.
+ * It can also be used without providing a button to the constructor;
+ * in this case, the caller is responsible for calling show() manually
+ * and also providing a function to be called (submit_fn).
  *
  * @class ConfirmationOverlay
  * @namespace lp.app
@@ -35,8 +38,8 @@
 ConfirmationOverlay.ATTRS = {
 
     /**
-     * The input button what should be 'guarded' by this confirmation
-     * overlay.
+     * An (optional) input button that should be 'guarded' by this
+     * confirmation overlay.
      *
      * @attribute button
      * @type Node
@@ -127,8 +130,6 @@
         this.set('form_submit_button', submit_button);
         this.set('form_cancel_button', cancel_button);
 
-        this.set('submit_form', this.get('button').ancestor('form'));
-
         var self = this;
         var submit_fn = this.get('submit_fn');
         if (submit_fn === null) {
@@ -148,15 +149,18 @@
             this.set('form_submit_callback', submit_form_fn);
         }
 
-        // Enable the button if it's disabled.
-        this.get('button').set('disabled', false);
-
-        // Wire this._handleButtonClicked to the button.
-        this.get(
-            'button').on('click', Y.bind(this._handleButtonClicked, this));
-
-        // Hide the overlay.
-        this.hide();
+        var button = this.get('button');
+        if (Y.Lang.isValue(button)) {
+            this.set('submit_form', this.get('button').ancestor('form'));
+
+            // Enable the button if it's disabled.
+            button.set('disabled', false);
+
+            // Wire this._handleButtonClicked to the button.
+            button.on('click', Y.bind(this._handleButtonClicked, this));
+       }
+       // Hide the overlay.
+       this.hide();
     },
 
     /**
@@ -172,6 +176,23 @@
     },
 
     /**
+     * Update overlay's content and show the overlay.
+     *
+     * @method show
+     *
+     */
+    show: function() {
+        // Update the overlay's content.
+        this._renderUIFormOverlay();
+        this._fillContent();
+        this._positionOverlay();
+        this._setFormContent();
+        // Render and display the overlay.
+        this.render();
+        ConfirmationOverlay.superclass.show.call(this);
+    },
+
+    /**
      * Prevent form submission and display the confirmation overlay.
      *
      * @method _handleButtonClicked
@@ -181,13 +202,6 @@
         if (display_confirmation_fn === null || display_confirmation_fn()) {
             // Stop the event to prevent the form submission.
             e.preventDefault();
-            // Update the overlay's content.
-            this._renderUIFormOverlay();
-            this._fillContent();
-            this._positionOverlay();
-            this._setFormContent();
-            // Render and display the overlay.
-            this.render();
             this.show();
         }
     },

=== modified file 'lib/lp/app/javascript/confirmationoverlay/tests/test_confirmationoverlay.js'
--- lib/lp/app/javascript/confirmationoverlay/tests/test_confirmationoverlay.js	2011-09-12 14:21:18 +0000
+++ lib/lp/app/javascript/confirmationoverlay/tests/test_confirmationoverlay.js	2011-09-13 11:25:49 +0000
@@ -189,6 +189,37 @@
 
 }));
 
+suite.add(new Y.Test.Case({
+
+    name: 'confirmation_overlay_buttonless',
+
+    tearDown: function() {
+        if (this.overlay !== null) {
+            this.overlay.destroy();
+        }
+    },
+
+    test_callback_called: function() {
+        // A ConfirmationOverlay can be constructed without passing a button.
+        // The creator is responsible for calling show() manually.
+        var called = false;
+        var callback = function() {
+            called = true;
+        };
+
+        this.overlay = new Y.lp.app.confirmationoverlay.ConfirmationOverlay({
+            submit_fn: callback
+        });
+        Y.Assert.isFalse(this.overlay.get('visible'));
+        this.overlay.show();
+        Y.Assert.isTrue(this.overlay.get('visible'));
+        this.overlay.form_node.one('.ok-btn').simulate('click');
+        Y.Assert.isFalse(this.overlay.get('visible'));
+        // The callback has been called.
+        Y.Assert.isTrue(called);
+    }
+
+}));
 
 Y.lp.testing.Runner.run(suite);