Add support for emulating wp_dropdown_pages() when the post type is hierarchichal

js/customize-object-selector-component.js

@@ -1,13 +1,19 @@
 /* global JSON */
 /* eslint consistent-this: [ "error", "component" ] */
 /* eslint no-magic-numbers: ["error", { "ignore": [-1,0,1] }] */
-/* eslint complexity: ["error", 10] */
+/* eslint complexity: ["error", 11] */
 
 wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 	'use strict';
 
 	return api.Class.extend({
 
+		// Note the translations are exported from PHP via \CustomizeObjectSelector\Plugin::register_scripts().
+		l10n: {
+			missing_model_arg: '',
+			failed_to_fetch_selections: ''
+		},
+
 		/**
 		 * Initialize.
 		 *
@@ -20,14 +26,15 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 		 * @param {object}   args.select2_options - See available options at https://select2.github.io/examples.html#programmatic-control
 		 * @param {boolean}  args.select2_options.multiple - Whether multiple can be selected.
 		 * @param {string}   args.select_id - ID to be used for the underlying select element
-		 * @param {object}   args.post_query_vars - WP_Query vars to use in the query, opon which 's' and 'paged' will be merged.
+		 * @param {object}   args.post_query_vars - WP_Query vars to use in the query, upon which 's' and 'paged' will be merged.
+		 * @param {Boolean}  args.show_add_buttons - Whether add buttons will be shown if available.
 		 * @returns {void}
 		 */
 		initialize: function initialize( args ) {
 			var component = this;
 
 			if ( ! args.model || 'function' !== typeof args.model.get ) {
-				throw new Error( 'Missing valid model arg.' );
+				throw new Error( component.l10n.missing_model_arg );
 			}
 			component.model = args.model;
 			component.containing_construct = args.containing_construct || null;
@@ -41,6 +48,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 			}
 			component.container = args.container;
 			component.post_query_vars = null;
+			component.show_add_buttons = _.isUndefined( args.show_add_buttons ) ? true : args.show_add_buttons;
 			component.select_id = args.select_id || '';
 			component.control_template = args.control_template || wp.template( 'customize-object-selector-component' );
 			component.select2_result_template = args.select2_result_template || wp.template( 'customize-object-selector-item' );
@@ -66,7 +74,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 			templateData = {
 				multiple: component.multiple,
 				select_id: component.select_id,
-				addable_post_types: component.getAddableQueriedPostTypes()
+				addable_post_types: component.show_add_buttons ? component.getAddableQueriedPostTypes() : []
 			};
 
 			component.container.empty().append( component.control_template( templateData ) );
@@ -81,7 +89,15 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 								paged: params.data.page || 1
 							});
 							request.done( success );
-							request.fail( failure );
+							request.fail( function( jqXHR, status ) {
+
+								// Inform select2 of aborts. See <https://github.com/select2/select2/blob/062c6c3af5f0f39794c34c0a343a3857e587cc97/src/js/select2/data/ajax.js#L83-L87>.
+								if ( 'abort' === status ) {
+									request.status = '0';
+								}
+
+								failure.apply( request, arguments );
+							} );
 							return request;
 						}
 					},
@@ -119,7 +135,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 
 			// Sync the setting values with the select2 values.
 			component.model.bind( function() {
-				component.populateSelectOptions();
+				component.populateSelectOptions( false );
 			} );
 
 			component.setupSortable();
@@ -493,7 +509,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 		 * @returns {jQuery.promise} Resolves when complete. Rejected when failed.
 		 */
 		populateSelectOptions: function( refresh ) {
-			var component = this, request, settingValues, selectedValues, deferred = jQuery.Deferred();
+			var component = this, settingValues, selectedValues, deferred = jQuery.Deferred();
 
 			settingValues = component.getSettingValues();
 			selectedValues = component.getSelectedValues();
@@ -506,11 +522,15 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 			} else {
 				component.container.addClass( 'customize-object-selector-populating' );
 
-				request = component.queryPosts({
+				if ( component.currentRequest ) {
+					component.currentRequest.abort();
+				}
+
+				component.currentRequest = component.queryPosts({
 					post__in: settingValues,
 					orderby: 'post__in'
 				});
-				request.done( function( data ) {
+				component.currentRequest.done( function( data ) {
 					if ( component.containing_construct.notifications ) {
 						component.containing_construct.notifications.remove( 'select2_init_failure' );
 					}
@@ -525,21 +545,21 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 					component.select.trigger( 'change' );
 					deferred.resolve();
 				} );
-				request.fail( function() {
+				component.currentRequest.fail( function( jqXHR, status, statusText ) {
 					var notification;
-					if ( api.Notification && component.containing_construct.notifications ) {
+					if ( 'abort' !== status && api.Notification && component.containing_construct.notifications ) {
 
 						// @todo Allow clicking on this notification to re-call populateSelectOptions()
 						// @todo The error should be triggered on the component itself so that the control adds it to its notifications. Too much coupling here.
 						notification = new api.Notification( 'select2_init_failure', {
 							type: 'error',
-							message: 'Failed to fetch selections.' // @todo l10n
+							message: component.l10n.failed_to_fetch_selections.replace( '%s', statusText )
 						} );
 						component.containing_construct.notifications.add( notification.code, notification );
 					}
 					deferred.reject();
 				} );
-				request.always( function() {
+				component.currentRequest.always( function() {
 					component.container.removeClass( 'customize-object-selector-populating' );
 				} );
 			}

js/customize-object-selector-control.js

@@ -132,6 +132,7 @@
 				model: model,
 				containing_construct: control,
 				post_query_vars: control.params.post_query_vars,
+				show_add_buttons: control.params.show_add_buttons,
 				select_id: control.params.select_id,
 				select2_options: control.params.select2_options,
 				select2_result_template: itemTemplate,

php/class-control.php

@@ -34,11 +34,20 @@ class Control extends \WP_Customize_Control {
 	);
 
 	/**
-	 * Query args for posts.
+	 * Query vars for posts.
 	 *
 	 * @var array|null
 	 */
-	public $post_query_args;
+	public $post_query_vars;
+
+	/**
+	 * Whether the add buttons will be shown.
+	 *
+	 * These buttons will only appear if the Customize Posts plugin is active.
+	 *
+	 * @var bool
+	 */
+	public $show_add_buttons = true;
 
 	/**
 	 * Setting property.
@@ -94,8 +103,9 @@ public function json() {
 			parent::json(),
 			wp_array_slice_assoc( get_object_vars( $this ), array(
 				'select2_options',
-				'post_query_args',
+				'post_query_vars',
 				'setting_property',
+				'show_add_buttons',
 			) )
 		);
 	}