Changeset 13278

Timestamp:

04/30/2022 10:44:32 AM (4 years ago)

Author:

imath

Message:

BP Nouveau: prevent anxious users to send a message more than once

In case the Ajax response takes a little more time to happen, frenetic clicks on the Messages UI "send" button are now neutralized.

Props comminski

See #8689 (trunk)

File:

• trunk/src/bp-templates/bp-nouveau/js/buddypress-messages.js (modified) (5 diffs)

trunk/src/bp-templates/bp-nouveau/js/buddypress-messages.js

@@ -257 +257 @@
 
                 sendMessage: function() {
-                        if ( true === this.get( 'sending' ) ) {
-                                return;
-                        }
-
-                        this.set( 'sending', true, { silent: true } );
-
-                        var sent = bp.ajax.post( 'messages_send_message', _.extend(
-                                {
-                                        nonce: BP_Nouveau.messages.nonces.send
-                                },
-                                this.attributes
-                        ) );
-
-                        this.set( 'sending', false, { silent: true } );
+                        var sent = bp.ajax.post(
+                                'messages_send_message',
+                                _.extend(
+                                        { nonce: BP_Nouveau.messages.nonces.send },
+                                        this.attributes
+                                )
+                        );
 
                         return sent;
@@ -569 +562 @@
                         if ( ! _.isNull( mention ) ) {
                                 sendToInput.val( '@' + _.escape( mention ) + ' ' );
-                                sendToInput.focus();
+                                sendToInput.trigger( 'focus' );
                         }
                 },
@@ -593 +586 @@
 
                 sendMessage: function( event ) {
-                        var meta = {}, errors = [], self = this;
+                        var meta = {}, errors = [], self = this,
+                            button = event.currentTarget;
+
                         event.preventDefault();
 
                         bp.Nouveau.Messages.removeFeedback();
+                        $( button ).addClass( 'disabled' ).prop( 'disabled', true );
 
                         // Set the content and meta.
@@ -662 +658 @@
                         }
 
+                        // Prevents multiple frenetic clicks!
+                        if ( true === this.model.get( 'sending' ) ) {
+                                return;
+                        }
+
                         // Set meta.
-                        this.model.set( 'meta', meta, { silent: true } );
+                        this.model.set(
+                                {
+                                        sending: true,
+                                        meta: meta
+                                },
+                                {
+                                        silent: true
+                                }
+                        );
 
                         // Send the message.
@@ -685 +694 @@
                                         bp.Nouveau.Messages.displayFeedback( response.feedback, response.type );
                                 }
+                        } ).always( function() {
+                                self.model.set( 'sending', false, { silent: true } );
+                                $( button ).removeClass( 'disabled' ).prop( 'disabled', false );
                         } );
                 },