Changeset 8754

Timestamp:

08/03/2014 08:52:05 PM (10 years ago)

Author:

djpaul

Message:

Activity: introducing @mentions auto-suggestions.

Activity has long-supported @mentions, where you can mention the name of another user to get their attention in a conversation. You've always had to know the exact username of the person you're trying to mention, or you've been forced to go look it up. Now, when leaving an activity update or reply, press @ and then start typing someone's diaply name (or user_nicename), and username suggestions will automatically appear below where you're typing.

If the Friends component is active, and if the logged-in user has any friends, those friends' details are used to pre-prime the username suggestions for super-fast snappy suggestions. Suggestions are also provided when writing a blog post comment.

This change has mostly been implemented using two third-party libraries, At.js (​https://github.com/ichord/At.js) and Caret.js (​https://github.com/ichord/Caret.js). Big thanks to those projects' authors for their fine work, and also to Automattic's O2 team, who made a number of CSS+JS tweaks/adaptions to At.js, which we've adopted. Props also to karmatosed for design suggestions on the earliest implementation of this feature, three years ago. :)

Fixes #3278

Location:

trunk

Files:

• Gruntfile.js (modified) (3 diffs)
• src/bp-activity/bp-activity-actions.php (modified) (1 diff)
• src/bp-activity/bp-activity-cssjs.php (added)
• src/bp-activity/bp-activity-functions.php (modified) (1 diff)
• src/bp-activity/bp-activity-loader.php (modified) (1 diff)
• src/bp-activity/css (added)
• src/bp-activity/css/mentions-rtl.css (added)
• src/bp-activity/css/mentions.css (added)
• src/bp-activity/js (added)
• src/bp-activity/js/mentions.js (added)
• src/bp-core/bp-core-cssjs.php (modified) (1 diff)
• src/bp-core/js/jquery.atwho.js (added)
• src/bp-core/js/jquery.atwho.txt (added)
• src/bp-core/js/jquery.caret.js (added)
• src/bp-core/js/jquery.caret.txt (added)
• src/bp-friends/bp-friends-functions.php (modified) (1 diff)
• src/bp-templates/bp-legacy/buddypress/activity/entry.php (modified) (1 diff)
• src/bp-templates/bp-legacy/buddypress/activity/post-form.php (modified) (1 diff)

trunk/Gruntfile.js

@@ -7 +7 @@
 
     BP_CSS = [
+        'bp-activity/css/*.css',
         'bp-activity/admin/css/*.css',
         'bp-core/admin/css/*.css',
@@ -19 +20 @@
 
     BP_JS = [
+        'bp-activity/js/*.js',
         'bp-activity/admin/js/*.js',
         'bp-core/js/*.js',
@@ -31 +33 @@
 
     BP_EXCLUDED_JS = [
+        '!bp-core/js/jquery.atwho.js',
+        '!bp-core/js/jquery.caret.js',
         '!bp-templates/bp-legacy/js/*.js'
     ];

trunk/src/bp-activity/bp-activity-actions.php

@@ -648 +648 @@
     $bp->activity->akismet = new BP_Akismet();
 }
+
+/**
+ * AJAX endpoint for Suggestions API lookups.
+ *
+ * @since BuddyPress (2.1.0)
+ */
+function bp_ajax_get_suggestions() {
+    if ( ! bp_is_user_active() || empty( $_GET['term'] ) || empty( $_GET['type'] ) ) {
+        wp_send_json_error( 'missing_parameter' );
+        exit;
+    }
+
+    $results = bp_core_get_suggestions( array(
+        'term' => sanitize_text_field( $_GET['term'] ),
+        'type' => sanitize_text_field( $_GET['type'] ),
+    ) );
+
+    if ( is_wp_error( $results ) ) {
+        wp_send_json_error( $results->get_error_message() );
+        exit;
+    }
+
+    wp_send_json_success( $results );
+}
+add_action( 'wp_ajax_bp_get_suggestions', 'bp_ajax_get_suggestions' );

trunk/src/bp-activity/bp-activity-functions.php

@@ -47 +47 @@
 function bp_activity_do_mentions() {
     return (bool) apply_filters( 'bp_activity_do_mentions', true );
+}
+
+/**
+ * Should BuddyPress load the mentions scripts and related assets, including results to prime the
+ * mentions suggestions?
+ *
+ * @return bool True if mentions scripts should be loaded.
+ * @since BuddyPress (2.1.0)
+ */
+function bp_activity_maybe_load_mentions_scripts() {
+    $retval =
+        bp_activity_do_mentions() &&
+        bp_is_user_active() &&
+        ( bp_is_activity_component() || bp_is_blog_page() && is_singular() && comments_open() || is_admin() );
+
+    return (bool) apply_filters( 'bp_activity_maybe_load_mentions_scripts', $retval );
 }
 

trunk/src/bp-activity/bp-activity-loader.php

@@ -48 +48 @@
         // Files to include
         $includes = array(
+            'cssjs',
             'actions',
             'screens',

trunk/src/bp-core/bp-core-cssjs.php

@@ -20 +20 @@
     
     $scripts = apply_filters( 'bp_core_register_common_scripts', array(
+        // Legacy
         'bp-confirm'        => array( 'file' => "{$url}confirm{$ext}",        'dependencies' => array( 'jquery' ) ),
         'bp-widget-members' => array( 'file' => "{$url}widget-members{$ext}", 'dependencies' => array( 'jquery' ) ),
         'bp-jquery-query'   => array( 'file' => "{$url}jquery-query{$ext}",   'dependencies' => array( 'jquery' ) ),
         'bp-jquery-cookie'  => array( 'file' => "{$url}jquery-cookie{$ext}",  'dependencies' => array( 'jquery' ) ),
+
+        // 2.1
+        'jquery-caret' => array( 'file' => "{$url}jquery.caret{$ext}", 'dependencies' => array( 'jquery' ) ),
+        'jquery-atwho' => array( 'file' => "{$url}jquery.atwho{$ext}", 'dependencies' => array( 'jquery', 'jquery-caret' ) ),
     ) );
 

trunk/src/bp-friends/bp-friends-functions.php

@@ -567 +567 @@
 add_action( 'delete_user',       'friends_remove_data' );
 add_action( 'bp_make_spam_user', 'friends_remove_data' );
+
+/**
+ * Used by the Activity component's @mentions to print a JSON list of the current user's friends.
+ *
+ * This is intended to speed up @mentions lookups for a majority of use cases.
+ *
+ * @see bp_activity_mentions_script()
+ */
+function bp_friends_prime_mentions_results() {
+    if ( ! bp_activity_maybe_load_mentions_scripts() ) {
+        return;
+    }
+
+    $friends_query = array(
+        'count_total'     => '',                    // Prevents total count
+        'populate_extras' => false,
+
+        'type'            => 'alphabetical',
+        'user_id'         => get_current_user_id(),
+    );
+
+    $friends_query = new BP_User_Query( $friends_query );
+    $results       = array();
+
+    foreach ( $friends_query->results as $user ) {
+        $result        = new stdClass();
+        $result->ID    = $user->user_nicename;
+        $result->image = bp_core_fetch_avatar( array( 'html' => false, 'item_id' => $user->ID ) );
+        $result->name  = bp_core_get_user_displayname( $user->ID );
+
+        $results[] = $result;
+    }
+
+    wp_localize_script( 'bp-mentions', 'BP_Suggestions', array(
+        'friends' => $results,
+    ) );
+}
+add_action( 'bp_activity_mentions_prime_results', 'bp_friends_prime_mentions_results' );

trunk/src/bp-templates/bp-legacy/buddypress/activity/entry.php

@@ -98 +98 @@
                     <div class="ac-reply-content">
                         <div class="ac-textarea">
-                            <textarea id="ac-input-<?php bp_activity_id(); ?>" class="ac-input" name="ac_input_<?php bp_activity_id(); ?>"></textarea>
+                            <textarea id="ac-input-<?php bp_activity_id(); ?>" class="ac-input bp-suggestions" name="ac_input_<?php bp_activity_id(); ?>"></textarea>
                         </div>
                         <input type="submit" name="ac_form_submit" value="<?php esc_attr_e( 'Post', 'buddypress' ); ?>" /> &nbsp; <a href="#" class="ac-reply-cancel"><?php _e( 'Cancel', 'buddypress' ); ?></a>

trunk/src/bp-templates/bp-legacy/buddypress/activity/post-form.php

@@ -28 +28 @@
     <div id="whats-new-content">
         <div id="whats-new-textarea">
-            <textarea name="whats-new" id="whats-new" cols="50" rows="10"><?php if ( isset( $_GET['r'] ) ) : ?>@<?php echo esc_textarea( $_GET['r'] ); ?> <?php endif; ?></textarea>
+            <textarea class="bp-suggestions" name="whats-new" id="whats-new" cols="50" rows="10"><?php if ( isset( $_GET['r'] ) ) : ?>@<?php echo esc_textarea( $_GET['r'] ); ?> <?php endif; ?></textarea>
         </div>