Fill Readers select box asynchronously.

This mitigates performance issues when the number of potential readers is high.
cuny-academic-commons · Dec 15, 2015 · 61d3295 · 61d3295
1 parent ecf74e0
commit 61d3295
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 29 deletions.
diff --git a/assets/js/single.js b/assets/js/single.js
@@ -6,22 +6,40 @@
 		$fluidEl;
 
 	$( document ).ready( function(){
+		var $reader_selector = $( '#cacsp-reader-selector' );
+
 		$( 'body' ).removeClass( 'no-js' ).addClass( 'js' );
 
 		responsive_iframes();
 
-		if ( 'undefined' !== typeof CACSP_Potential_Readers && $.isFunction( $.fn.select2 ) ) {
-			$( '#cacsp-group-selector' ).select2( {
-				placeholder: SocialPaperI18n.group_placeholder
+		if ( $reader_selector.length && $.isFunction( $.fn.select2 ) ) {
+			// Load the Potential Readers list asynchronously.
+			$.post( ajaxurl, {
+				action: 'cacsp_potential_readers',
+				paper_id: SocialPaperI18n.paper_id
+			},
+			function( response ) {
+				if ( response.success ) {
+					$reader_selector.select2( {
+						placeholder: SocialPaperI18n.reader_placeholder,
+						data: response.data.potential
+					} );
+
+					// Mark existing readers as 'selected'.
+					var selected = [];
+					$.each( response.data.existing, function( k, ex ) {
+						selected.push( ex.id );
+					} );
+
+					$reader_selector.val( selected ).trigger( 'change' );
+
+					force_select2_width();
+				}
 			} );
 
-			$( '#cacsp-reader-selector' ).select2( {
-				placeholder: SocialPaperI18n.reader_placeholder,
-				data: CACSP_Potential_Readers
+			$( '#cacsp-group-selector' ).select2( {
+				placeholder: SocialPaperI18n.group_placeholder
 			} );
-
-			// Select2 can't set Readers width correctly because it's hidden.
-			$( 'input.select2-search__field' ).css( 'width', '249px' );
 		}
 
 		if ( 'undefined' !== typeof bp && 'undefined' !== typeof bp.mentions.users ) {
@@ -108,4 +126,14 @@
 		}).resize();
 	}
 
+	/**
+	 * Force Select2 to the proper width.
+	 *
+	 * This is a garbage hack forced on us by the fact that Select2 only sizes properly for non-selected width
+	 * when it's present in the DOM and visible.
+	 */
+	force_select2_width = function() {
+		$( 'input.select2-search__field' ).css( 'width', '249px' );
+	}
+
 }( jQuery ) );
diff --git a/includes/hooks-template.php b/includes/hooks-template.php
@@ -294,6 +294,7 @@ function cacsp_asset_single_enqueue_handler() {
 		'unapproved_comment_alt' => $unapproved_comment_alt,
 		'spammed' => __( 'You have successfuly marked the comment as spam.', 'social-paper' ),
 		'trashed' => __( 'You have successfuly trashed the comment.', 'social-paper' ),
+		'paper_id' => get_queried_object_id(),
 	) );
 }
 add_action( 'wp_enqueue_scripts', 'cacsp_asset_single_enqueue_handler', 999 );

diff --git a/includes/readers.php b/includes/readers.php
@@ -56,47 +56,33 @@ function cacsp_get_potential_reader_ids( $paper_id ) {
 
 /**
  * Generate the reader selector interface.
+ *
+ * @since 1.0.0
  */
 function cacsp_paper_reader_selector( $paper_id ) {
-	// Get a list of readers, friends, and co-group-members to prime selectbox.
-	// @todo Add AJAX support.
-	$potential_reader_ids = cacsp_get_potential_reader_ids( $paper_id );
+	$paper = new CACSP_Paper( $paper_id );
+	$paper_reader_ids = $paper->get_reader_ids();
 
-	$users = bp_core_get_users( array(
-		'include' => $potential_reader_ids,
+	$existing = bp_core_get_users( array(
+		'include' => $paper_reader_ids,
 		'type' => 'alphabetical',
 		'per_page' => 0,
 		'populate_extras' => false,
 		'count_total' => false,
 	) );
 
-	$user_data = array();
 	$selected = array();
 	if ( ! empty( $users['users'] ) ) {
-		$paper = new CACSP_Paper( $paper_id );
-		$paper_reader_ids = $paper->get_reader_ids();
-
 		foreach ( $users['users'] as $user ) {
 			$user_id = (int) $user->ID;
 
 			$user_data[] = array(
 				'id'   => $user_id,
 				'text' => html_entity_decode( $user->display_name, ENT_QUOTES, 'UTF-8' ),
 			);
-
-			// Collect data about the existing readers.
-			if ( in_array( $user_id, $paper_reader_ids, true ) ) {
-				$selected[] = array(
-					'id' => $user_id,
-					'text' => stripslashes( $user->display_name ),
-				);
-			}
 		}
 	}
 
-	$script = 'var CACSP_Potential_Readers = ' . wp_json_encode( $user_data ) . ';';
-	echo "\n" . '<script type="text/javascript">' . $script . '</script>' . "\n";
-
 	// Select2 only needs an <option> printed for the selected options.
 	?>
 	<select name="cacsp-readers[]" multiple="multiple" style="width:100%;" id="cacsp-reader-selector">
@@ -196,6 +182,57 @@ function cacsp_save_paper_status( $post_id ) {
 }
 add_action( 'save_post', 'cacsp_save_paper_status' );
 
+/**
+ * Fetch a JSON list of potential readers, to populate the Select2 interface.
+ *
+ * @since 1.1.0
+ */
+function cacsp_potential_readers_cb() {
+	// Get a list of readers, friends, and co-group-members to prime selectbox.
+	$paper_id = isset( $_POST['paper_id'] ) ? intval( $_POST['paper_id'] ) : 0;
+	$potential_reader_ids = cacsp_get_potential_reader_ids( $paper_id );
+
+	$users = bp_core_get_users( array(
+		'include' => $potential_reader_ids,
+		'type' => 'alphabetical',
+		'per_page' => 0,
+		'populate_extras' => false,
+		'count_total' => false,
+	) );
+
+	$user_data = array();
+	$selected = array();
+	if ( ! empty( $users['users'] ) ) {
+		$paper = new CACSP_Paper( $paper_id );
+		$paper_reader_ids = $paper->get_reader_ids();
+
+		foreach ( $users['users'] as $user ) {
+			$user_id = (int) $user->ID;
+
+			$user_data[] = array(
+				'id'   => $user_id,
+				'text' => html_entity_decode( $user->display_name, ENT_QUOTES, 'UTF-8' ),
+			);
+
+			// Collect data about the existing readers.
+			if ( in_array( $user_id, $paper_reader_ids, true ) ) {
+				$selected[] = array(
+					'id' => $user_id,
+					'text' => stripslashes( $user->display_name ),
+				);
+			}
+		}
+	}
+
+	$retval = array(
+		'existing'  => $selected,
+		'potential' => $user_data,
+	);
+
+	wp_send_json_success( $retval );
+}
+add_action( 'wp_ajax_cacsp_potential_readers', 'cacsp_potential_readers_cb' );
+
 /** Cache ********************************************************************/
 
 /**