← Back to branch summary

~launchpad-pqm/launchpad/devel

« back to all changes in this revision

Viewing changes to lib/lp/app/javascript/confirmationoverlay/confirmationoverlay.js

  • Committer: Raphael Badin
  • Date: 2011-08-26 16:27:43 UTC
  • mto: This revision was merged to the branch mainline in revision 13829.
  • Revision ID: raphael.badin@canonical.com-20110826162743-hqokyrdz87fpjklx
Refactor the Confirmation Overlay to be easier to use/test.

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/lp/app/javascript/confirmationoverlay/confirmationoverlay.js
48
48
     */
49
49
    form: {
50
50
        value: null
 
51
    },
 
52
 
 
53
    /**
 
54
     * An optional function (must return a string) that will be run to
 
55
     * populate the form_content of the confirmation overlay when it's
 
56
     * displayed.
 
57
     *
 
58
     * @attribute form_content_fn
 
59
     * @type Function
 
60
     * @default null
 
61
     *
 
62
     */
 
63
    form_content_fn: {
 
64
        value: null
 
65
    },
 
66
 
 
67
    /**
 
68
     * An optional function (must return a string) that will be run to
 
69
     * populate the header_content of the confirmation overlay when it's
 
70
     * displayed.
 
71
     *
 
72
     * @attribute header_content_fn
 
73
     * @type Function
 
74
     * @default null
 
75
     *
 
76
     */
 
77
    header_content_fn: {
 
78
        value: null
 
79
    },
 
80
 
 
81
    /**
 
82
     * An optional function (must return a boolean) that will be run to
 
83
     * before the confirmation overlay is shown to decide whether it
 
84
     * should really be displayed.
 
85
     *
 
86
     * @attribute display_confirmation_fn
 
87
     * @type Function
 
88
     * @default null
 
89
     *
 
90
     */
 
91
    display_confirmation_fn: {
 
92
        value: null
51
93
    }
52
 
 
53
 
 
54
94
};
55
95
 
56
96
Y.extend(ConfirmationOverlay, Y.lazr.FormOverlay, {
65
105
        this.set('form_submit_button', submit_button);
66
106
        this.set('form_cancel_button', cancel_button);
67
107
 
 
108
        this.set('form', this.get('button').ancestor('form'));
 
109
 
 
110
        // When ok is clicked, submit the form.
68
111
        var self = this;
69
112
        var submit_form = function() {
70
 
            self.createHiddenDispatcher();
 
113
            self._createHiddenDispatcher();
71
114
            self.get('form').submit();
72
115
        };
73
116
        this.set('form_submit_callback', submit_form);
74
117
 
75
 
        this._set('destroy_on_hide', true);
76
 
 
 
118
        // Enable the button if it's disabled.
 
119
        this.get('button').set('disabled', false);
 
120
 
 
121
        // Wire this._handleButtonClicked to the button.
 
122
        this.get(
 
123
            'button').on('click', Y.bind(this._handleButtonClicked, this));
 
124
 
 
125
        // Hide the overlay.
 
126
        this.hide();
 
127
    },
 
128
 
 
129
    _handleButtonClicked: function(e) {
 
130
        var display_confirmation_fn = this.get('display_confirmation_fn');
 
131
        if (display_confirmation_fn === null || display_confirmation_fn()) {
 
132
            // Stop the event to prevent the form submission.
 
133
            e.preventDefault();
 
134
            // Update the overlay's content.
 
135
            this._fillContent();
 
136
            this._positionOverlay();
 
137
            // Render and display the overlay.
 
138
            this.render();
 
139
            this._setFormContent();
 
140
            this.show();
 
141
        }
 
142
    },
 
143
 
 
144
    _fillContent: function() {
 
145
        var form_content_fn = this.get('form_content_fn');
 
146
        if (form_content_fn !== null) {
 
147
            this.set('form_content', form_content_fn());
 
148
        }
 
149
        var header_content_fn = this.get('header_content_fn');
 
150
        if (header_content_fn !== null) {
 
151
            this.set('form_header', header_content_fn());
 
152
        }
 
153
     },
 
154
 
 
155
    _positionOverlay: function() {
77
156
        // Center the overlay in the viewport.
78
157
        this.set(
79
158
            'align',
81
160
              Y.WidgetPositionAlign.CC,
82
161
              Y.WidgetPositionAlign.CC]
83
162
            });
84
 
 
85
163
    },
86
164
 
87
 
    createHiddenDispatcher: function() {
 
165
    _createHiddenDispatcher: function() {
 
166
        // Create a hidden input to simulate the click on the right
 
167
        // button.
88
168
        var dispatcher = Y.Node.create('<input>')
89
169
            .set('type', 'hidden')
90
170
            .set('name', this.get('button').get('name'))