← Back to branch summary

~launchpad-pqm/launchpad/devel

« back to all changes in this revision

Viewing changes to lib/lp/registry/javascript/distroseriesdifferences_details.js

[r=benji][bug=795573,
 796233] On DistroSeries:+localpackagediffs ensure that the comment
 form is hidden after adding a new comment to a DistroSeriesDifference,
 prevent empty comments from being submitted,
 and add some animations and effects to make the UI less jarring and easier to
 follow.

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/lp/registry/javascript/distroseriesdifferences_details.js
89
89
    };
90
90
 
91
91
    /**
92
 
     * Toggle the spinner and enable/disable comment fields.
93
 
     *
94
 
     * @param comment_form {Node} The node that contains the relevant
95
 
     *                     comment fields.
96
 
     */
97
 
    var toggle_comment_in_progress = function(comment_form) {
98
 
        var spinner = comment_form.one('img');
99
 
        if (Y.Lang.isNull(spinner)) {
100
 
            comment_form.one('div.widget-bd').append(
101
 
                '<img src="/@@/spinner" />');
102
 
            comment_form.all('textarea,button').set(
103
 
                'disabled', 'disabled');
104
 
        } else {
105
 
            comment_form.one('img').remove();
106
 
            comment_form.all('textarea,button').set(
107
 
                'disabled', '');
108
 
        }
109
 
    };
110
 
 
111
 
    /**
112
92
     * Handle the add comment event.
113
93
     *
114
94
     * This method adds a comment via the API and update the UI.
117
97
     *                            fields.
118
98
     * @param api_uri {string} The uri for the distroseriesdifference to which
119
99
     *                the comment is to be added.
 
100
     *
 
101
     * @param cb_success {function}
 
102
     *     Called when a comment has successfully been added. (Deferreds would
 
103
     *     be awesome right about now.)
120
104
     */
121
 
    var add_comment_handler = function(comment_form, api_uri) {
122
 
 
123
 
        var comment_text = comment_form.one('textarea').get('value');
124
 
 
125
 
        toggle_comment_in_progress(comment_form);
 
105
    var add_comment_handler = function(comment_form, api_uri, cb_success) {
 
106
 
 
107
        var comment_area = comment_form.one('textarea');
 
108
        var comment_text = comment_area.get('value');
 
109
 
 
110
        // Treat empty comments as mistakes.
 
111
        if (Y.Lang.trim(comment_text).length == 0) {
 
112
            Y.lazr.anim.red_flash({node: comment_area}).run();
 
113
            return;
 
114
        }
126
115
 
127
116
        var success_handler = function(comment_entry) {
128
117
            // Grab the XHTML representation of the comment
130
119
            config = {
131
120
                on: {
132
121
                    success: function(comment_html) {
133
 
                        comment_node = Y.Node.create(comment_html);
 
122
                        var comment_node = Y.Node.create(comment_html);
134
123
                        comment_form.insert(comment_node, 'before');
135
 
                        var anim = Y.lazr.anim.green_flash({
136
 
                            node: comment_node
137
 
                            });
138
 
                        anim.run();
 
124
                        var reveal = Y.lazr.effects.slide_out(comment_node);
 
125
                        reveal.on("end", function() {
 
126
                            Y.lazr.anim.green_flash(
 
127
                                {node: comment_node}).run();
 
128
                        });
 
129
                        reveal.run();
139
130
                    }
140
 
                    },
 
131
                },
141
132
                accept: Y.lp.client.XHTML
142
 
                };
 
133
            };
143
134
            lp_client.get(comment_entry.get('self_link'), config);
144
135
            comment_form.one('textarea').set('value', '');
145
 
            toggle_comment_in_progress(comment_form);
 
136
            cb_success();
146
137
        };
147
138
        var failure_handler = function(id, response) {
148
139
            // Re-enable field with red flash.
149
 
            toggle_comment_in_progress(comment_form);
150
 
            var anim = Y.lazr.anim.red_flash({
151
 
                node: comment_form
152
 
                });
153
 
            anim.run();
 
140
            Y.lazr.anim.red_flash({node: comment_form}).run();
154
141
        };
155
142
 
156
143
        var config = {
157
144
            on: {
158
145
                success: success_handler,
159
 
                failure: failure_handler
 
146
                failure: failure_handler,
 
147
                start: function() {
 
148
                    // Show a spinner.
 
149
                    comment_form.one('div.widget-bd')
 
150
                        .append('<img src="/@@/spinner" />');
 
151
                    // Disable the textarea and button.
 
152
                    comment_form.all('textarea,button')
 
153
                        .setAttribute('disabled', 'disabled');
160
154
                },
 
155
                end: function() {
 
156
                    // Remove the spinner.
 
157
                    comment_form.all('img').remove();
 
158
                    // Enable the form.
 
159
                    comment_form.all('textarea,button')
 
160
                        .removeAttribute('disabled');
 
161
                }
 
162
            },
161
163
            parameters: {
162
164
                comment: comment_text
163
 
                }
164
 
            };
 
165
            }
 
166
        };
165
167
        lp_client.named_post(api_uri, 'addComment', config);
166
168
    };
167
169
 
188
190
 
189
191
        // The comment area should slide in when the 'Add comment'
190
192
        // action is clicked.
191
 
        var slide;
192
 
        placeholder.one('a.widget-hd').on('click', function(e) {
193
 
            e.preventDefault();
194
 
            if (!slide) {
195
 
                slide = Y.lazr.effects.slide_out(
 
193
        var slide_anim = null;
 
194
        var slide = function(direction) {
 
195
            // Slide out if direction is true, slide in if direction
 
196
            // is false, otherwise do the opposite of what's being
 
197
            // animated right now.
 
198
            if (slide_anim === null) {
 
199
                slide_anim = Y.lazr.effects.slide_out(
196
200
                    placeholder.one('div.widget-bd'));
197
 
            } else {
198
 
                slide.set('reverse', !slide.get('reverse'));
199
 
            }
200
 
            slide.stop();
201
 
            slide.run();
202
 
        });
 
201
                if (Y.Lang.isBoolean(direction)) {
 
202
                    slide_anim.set("reverse", !direction);
 
203
                }
 
204
            }
 
205
            else {
 
206
                if (Y.Lang.isBoolean(direction)) {
 
207
                    slide_anim.set("reverse", !direction);
 
208
                }
 
209
                else {
 
210
                    slide_anim.set('reverse', !slide_anim.get('reverse'));
 
211
                }
 
212
                slide_anim.stop();
 
213
            }
 
214
            slide_anim.run();
 
215
        };
 
216
        var slide_out = function() { slide(false); };
 
217
 
 
218
        placeholder.one('a.widget-hd').on(
 
219
            'click', function(e) { e.preventDefault(); slide(); });
203
220
 
204
221
        placeholder.one('button').on('click', function(e) {
205
222
            e.preventDefault();
206
 
            add_comment_handler(placeholder, api_uri);
 
223
            add_comment_handler(placeholder, api_uri, slide_out);
207
224
        });
208
225
    };
209
226