Changeset 12115

Timestamp:

05/24/2018 05:13:57 AM (7 years ago)

Author:

imath

Message:

BP Nouveau Messages UI: Improve the Backbone router using pushState

In order to be consistent with conditional template tags such as bp_is_messages_compose_screen(), the routes of the Backbone router have been updated to match Messages component canonical URLs

Props sbrajesh, djpaul

See #7840 (Trunk)

Location:

trunk/src/bp-templates/bp-nouveau

Files:

• buddypress/common/js-templates/messages/index.php (modified) (2 diffs)
• includes/messages/functions.php (modified) (3 diffs)
• js/buddypress-messages.js (modified) (8 diffs)

trunk/src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php

@@ -155 +155 @@
         <div class="thread-subject">
             <span class="thread-count">({{data.count}})</span>
-            <a class="subject" href="#view/{{data.id}}">{{data.subject}}</a>
+            <a class="subject" href="../view/{{data.id}}/">{{data.subject}}</a>
         </div>
         <p class="excerpt">{{data.excerpt}}</p>
@@ -204 +204 @@
                     <# } #>
 
-                    <a href="#view/{{data.id}}" class="message-action-view bp-tooltip bp-icons" data-bp-tooltip="<?php esc_attr_e( 'View full conversation and reply.', 'buddypress' ); ?>">
+                    <a href="../view/{{data.id}}/" class="message-action-view bp-tooltip bp-icons" data-bp-action="view" data-bp-tooltip="<?php esc_attr_e( 'View full conversation and reply.', 'buddypress' ); ?>">
                         <span class="bp-screen-reader-text"><?php esc_html_e( 'View full conversation and reply.', 'buddypress' ); ?></span>
                     </a>

trunk/src/bp-templates/bp-nouveau/includes/messages/functions.php

@@ -115 +115 @@
             'more' => __( '(and %d others)', 'buddypress' ),
         ),
+        'rootUrl' => trailingslashit( str_replace( home_url(), '', bp_displayed_user_domain() ) . bp_get_messages_slug() ),
     );
 
@@ -179 +180 @@
         if ( 'notices' === $secondary_nav_item->slug ) {
             bp_core_remove_subnav_item( bp_get_messages_slug(), $secondary_nav_item->slug, 'members' );
-        } else {
-            $params = array( 'link' => '#' . $secondary_nav_item->slug );
-
-            // Make sure Admins won't write a messages from the user's account.
-            if ( 'compose' === $secondary_nav_item->slug ) {
-                $params['user_has_access'] = bp_is_my_profile();
-            }
-
-            $bp->members->nav->edit_nav( $params, $secondary_nav_item->slug, bp_get_messages_slug() );
+        } elseif ( 'compose' === $secondary_nav_item->slug ) {
+            $bp->members->nav->edit_nav( array(
+                'user_has_access' => bp_is_my_profile()
+            ), $secondary_nav_item->slug, bp_get_messages_slug() );
         }
     }
@@ -205 +201 @@
         $nav_id = str_replace( 'my-account-messages-', '', $nav['id'] );
 
-        if ( 'my-account-messages' !== $nav_id ) {
-            if ( 'notices' === $nav_id ) {
-                $admin_nav[ $nav_iterator ]['href'] = esc_url( add_query_arg( array( 'page' => 'bp-notices' ), bp_get_admin_url( 'users.php' ) ) );
-            } else {
-                $admin_nav[ $nav_iterator ]['href'] = $user_messages_link . '#' . trim( $nav_id );
-            }
+        if ( 'notices' === $nav_id ) {
+            $admin_nav[ $nav_iterator ]['href'] = esc_url( add_query_arg( array(
+                'page' => 'bp-notices'
+            ), bp_get_admin_url( 'users.php' ) ) );
         }
     }

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

@@ -38 +38 @@
             this.setupNav();
 
-            Backbone.history.start();
+            Backbone.history.start( {
+                pushState: true,
+                root: BP_Nouveau.messages.rootUrl
+            } );
         },
 
@@ -70 +73 @@
 
                         // Navigate back to current box
-                        self.router.navigate( self.box, { trigger: true } );
+                        self.router.navigate( self.box + '/', { trigger: true } );
 
                     // Otherwise load it
                     } else {
-                        self.router.navigate( 'compose', { trigger: true } );
+                        self.router.navigate( 'compose/', { trigger: true } );
                     }
 
@@ -83 +86 @@
                         self.clearViews();
 
-                        self.router.navigate( view_id, { trigger: true } );
+                        self.router.navigate( view_id + '/', { trigger: true } );
                     }
                 }
@@ -617 +620 @@
                 bp.Nouveau.Messages.views.remove( { id: 'compose', view: form } );
 
-                bp.Nouveau.Messages.router.navigate( 'sentbox', { trigger: true } );
+                bp.Nouveau.Messages.router.navigate( 'sentbox/', { trigger: true } );
             } ).fail( function( response ) {
                 if ( response.feedback ) {
@@ -713 +716 @@
 
             // If the click is done on an active conversation, open it.
-            if ( $( event.currentTarget ).closest( '.thread-item' ).hasClass( 'selected' ) ) {
-                this.loadSingleView( event );
+            if ( target.closest( '.thread-item' ).hasClass( 'selected' ) ) {
+                bp.Nouveau.Messages.router.navigate(
+                    'view/' + target.closest( '.thread-content' ).data( 'thread-id' ) + '/',
+                    { trigger: true }
+                );
 
             // Otherwise activate the conversation and display its preview.
@@ -722 +728 @@
                 $( '.message-action-view' ).focus();
             }
-        },
-
-        loadSingleView: function( event ) {
-            event.preventDefault();
-
-            bp.Nouveau.Messages.router.navigate(
-                'view/' + $( event.currentTarget ).closest( '.thread-content' ).data( 'thread-id' ),
-                { trigger: true }
-            );
         }
     } );
@@ -896 +893 @@
             mid = model.get( 'id' );
 
-            if ( 'star' === action || 'unstar' === action ) {
+            // Open the full conversation
+            if ( 'view' === action ) {
+                bp.Nouveau.Messages.router.navigate(
+                    'view/' + mid + '/',
+                    { trigger: true }
+                );
+
+                return;
+
+            // Star/Unstar actions needs to use a specific id and nonce.
+            } else if ( 'star' === action || 'unstar' === action ) {
                 options.data = {
                     'star_nonce' : model.get( 'star_nonce' )
@@ -1324 +1331 @@
     bp.Nouveau.Messages.Router = Backbone.Router.extend( {
         routes: {
-            'compose' : 'composeMessage',
-            'view/:id': 'viewMessage',
-            'sentbox' : 'sentboxView',
-            'starred' : 'starredView',
-            'inbox'   : 'inboxView',
+            'compose/' : 'composeMessage',
+            'view/:id/': 'viewMessage',
+            'sentbox/' : 'sentboxView',
+            'starred/' : 'starredView',
+            'inbox/'   : 'inboxView',
             ''        : 'inboxView'
         },