Release 0.4.0

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "customize-object-selector",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "homepage": "https://github.com/xwp/wp-customize-object-selector",
   "authors": [
     "XWP"

css/customize-object-selector.css

@@ -1,13 +1,62 @@
 .select2-container {
 	z-index: 1000000;
+	margin-bottom: 5px;
 }
+
 .select2-thumbnail-wrapper img {
 	height: 32px;
 	width: auto;
 	vertical-align: middle;
 }
 
+.customize-object-selector-container .single-selection.select2-selection__choice__edit,
+.customize-object-selector-container .add-new-post-stub {
+	padding: 0 5px 1px;
+}
+
+.customize-object-selector-container .single-selection.select2-selection__choice__edit {
+	top: -1px;
+	position: relative;
+}
+
+.customize-object-selector-container .single-selection.select2-selection__choice__edit:before {
+	content: "\f464";
+	font: normal 20px/1 dashicons;
+	position: relative;
+	top: -2px;
+	vertical-align: middle;
+}
+
+.customize-object-selector-container .add-new-post-stub:before {
+	content: "\f132";
+	display: inline-block;
+	position: relative;
+	font: normal 20px/1 dashicons;
+	vertical-align: middle;
+}
+
+.select2-selection__choice__edit {
+	cursor: pointer;
+}
+
+.select2-selection--single .select2-selection__choice__edit {
+	line-height: 26px;
+}
+
+.select2-selection__choice__edit.loading:before {
+	background: url(../images/spinner.gif) no-repeat;
+	-webkit-background-size: 20px 20px;
+	background-size: 20px 20px;
+	color: rgba( 255, 255, 255, 0 );
+	opacity: 0.7;
+	filter: alpha(opacity=70);
+}
 /* @todo A spinner would be better here */
 .customize-object-selector-populating {
 	opacity: 0.5;
+}
+
+#customize-controls .customize-info.is-in-view,
+#customize-controls .customize-section-title.is-in-view {
+    z-index: 1000001; /* Because .select2-container has a z-index 1000000 */
 }

customize-object-selector.php

@@ -1,7 +1,7 @@
 <?php
 /**
  * Plugin Name: Customize Object Selector
- * Version: 0.3.0
+ * Version: 0.4.0
  * Description: Adds a Customizer control to select posts (and eventually terms and users). Forked from Daniel Bachhuber's <a href="https://github.com/danielbachhuber/customizer-ajax-select">Customizer Ajax Select</a>.
  * Author: XWP
  * Plugin URI: https://github.com/xwp/wp-customize-object-selector

js/customize-object-selector-component.js

@@ -8,7 +8,23 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 
 	return api.Class.extend({
 
-		// Note the translations are exported from PHP via \CustomizeObjectSelector\Plugin::register_scripts().
+		/**
+		 * Initial nonce for requests.
+		 *
+		 * Note This is is exported from PHP via \CustomizeObjectSelector\Plugin::register_scripts().
+		 * This property will be used in lieu of `wp.customize.settings.nonce` being available.
+		 *
+		 * @var string
+		 */
+		nonce: '',
+
+		/**
+		 * Note the translations are exported from PHP via \CustomizeObjectSelector\Plugin::register_scripts().
+		 *
+		 * Note This is is exported from PHP via \CustomizeObjectSelector\Plugin::register_scripts().
+		 *
+		 * @var object
+		 */
 		l10n: {
 			missing_model_arg: '',
 			failed_to_fetch_selections: '',
@@ -51,8 +67,8 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 			component.post_query_vars = null;
 			component.show_add_buttons = _.isUndefined( args.show_add_buttons ) ? true : args.show_add_buttons;
 			if ( component.show_add_buttons && ( ! api.Posts || ! _.isFunction( api.Posts.startCreatePostFlow ) ) ) {
-				if ( 'undefined' !== typeof console && _.isFunction( console.warn ) ) {
-					console.warn( component.l10n.add_new_buttons_customize_posts_dependency );
+				if ( 'undefined' !== typeof console && _.isFunction( console.warn ) && api.Section ) {
+					console.info( component.l10n.add_new_buttons_customize_posts_dependency );
 				}
 				component.show_add_buttons = false;
 			}
@@ -111,6 +127,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 						return $.trim( component.select2_result_template( data ) );
 					},
 					templateSelection: function( data ) {
+						data.multiple = component.select2_options.multiple;
 						return $.trim( component.select2_selection_template( data ) );
 					},
 					escapeMarkup: function( m ) {
@@ -148,6 +165,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 
 			if ( api.Posts && _.isFunction( api.Posts.startCreatePostFlow ) ) {
 				component.setupAddNewButtons();
+				component.setupEditLinks();
 			}
 
 			component.repopulateSelectOptionsForSettingChange = _.bind( component.repopulateSelectOptionsForSettingChange, component );
@@ -243,8 +261,20 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 		queryPosts: function queryPosts( extraQueryVars ) {
 			var component = this, action, data, postQueryArgs = {};
 			action = 'customize_object_selector_query';
-			data = api.previewer.query();
-			data.customize_object_selector_query_nonce = api.settings.nonce[ action ];
+			data = {
+				customize_object_selector_query_nonce: component.nonce
+			};
+
+			// Include customized state if in customizer.
+			if ( api.previewer && api.previewer.query ) {
+				_.extend( data, api.previewer.query() );
+			}
+
+			// Use refreshed nonce from in customizer if available.
+			if ( api.settings && api.settings.nonce && api.settings.nonce[ action ] ) {
+				data.customize_object_selector_query_nonce = api.settings.nonce[ action ];
+			}
+
 			_.extend(
 				postQueryArgs,
 				component.post_query_vars || {},
@@ -281,15 +311,21 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 		 * @returns {Number[]} IDs.
 		 */
 		getSettingValues: function() {
-			var component = this, settingValues, value;
+			var component = this, settingValues, parsedIds;
 			settingValues = component.model.get();
 			if ( ! _.isArray( settingValues ) ) {
-				value = parseInt( settingValues, 10 );
-				if ( isNaN( value ) || value <= 0 ) {
-					settingValues = [];
-				} else {
-					settingValues = [ value ];
+				parsedIds = [];
+				if ( _.isNumber( settingValues ) ) {
+					parsedIds.push( settingValues );
+				} else if ( _.isString( settingValues ) ) {
+					_.each( settingValues.split( /\s*,\s*/ ), function( value ) {
+						var parsedValue = parseInt( value, 10 );
+						if ( ! isNaN( parsedValue ) && parsedValue > 0 ) {
+							parsedIds.push( parsedValue );
+						}
+					} );
 				}
+				settingValues = parsedIds;
 			}
 			return settingValues;
 		},
@@ -384,6 +420,53 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 			} );
 		},
 
+		/**
+		 * Setup links for editing objects in select2.
+		 *
+		 * @returns {void}
+		 */
+		setupEditLinks: function setupEditLinks() {
+			var component = this, editButton, onSelect;
+
+			editButton = component.container.find( '.select2-selection__choice__edit' );
+			onSelect = function( pageId ) {
+				pageId = parseInt( pageId, 10 );
+				editButton.toggle( ! isNaN( pageId ) && 0 !== pageId && ! component.select2_options.multiple );
+			};
+			onSelect( component.model.get() );
+			component.model.bind( onSelect );
+
+			// Set up the add new post buttons
+			component.container.on( 'click', '.select2-selection__choice__edit', function( e ) {
+				var $elm = $( this ), postId;
+
+				if ( component.select2_options.multiple ) {
+					postId = $elm.data( 'postId' );
+				} else {
+					postId = parseInt( component.model.get(), 10 );
+				}
+
+				e.preventDefault();
+				component.select.select2( 'close' );
+				component.select.prop( 'disabled', true );
+				$elm.addClass( 'loading' );
+
+				api.Posts.startEditPostFlow( {
+					postId: postId,
+					initiatingButton: $elm,
+					originatingConstruct: component.containing_construct,
+					restorePreviousUrl: true,
+					returnToOriginatingConstruct: true,
+					breadcrumbReturnCallback: function() {
+						component.setSettingValues( component.getSettingValues().slice( 0 ) );
+						$elm.removeClass( 'loading' );
+						component.select.prop( 'disabled', false );
+						component.containing_construct.focus();
+					}
+				} );
+			} );
+		},
+
 		/**
 		 * Re-populate the select options based on the current setting value.
 		 *
@@ -413,7 +496,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 					orderby: 'post__in'
 				});
 				component.currentRequest.done( function( data ) {
-					if ( component.containing_construct.notifications ) {
+					if ( component.containing_construct && component.containing_construct.notifications ) {
 						component.containing_construct.notifications.remove( 'select2_init_failure' );
 					}
 					component.select.empty();
@@ -429,7 +512,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 				} );
 				component.currentRequest.fail( function( jqXHR, status, statusText ) {
 					var notification;
-					if ( 'abort' !== status && api.Notification && component.containing_construct.notifications ) {
+					if ( 'abort' !== status && api.Notification && component.containing_construct && 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.

js/customize-object-selector-control.js

@@ -35,11 +35,14 @@
 				args.params.post_query_vars = args.params.post_query_args;
 			}
 
+			if ( true === args.params.select2_options.multiple ) {
+				args.params.select2_options.width = '100%';
+			}
 			args.params.select2_options = _.extend(
 				{
 					multiple: false,
 					cache: false,
-					width: '100%'
+					width: '72%'
 				},
 				args.params.select2_options
 			);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "customize-object-selector",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

php/class-control.php

@@ -30,7 +30,7 @@ class Control extends \WP_Customize_Control {
 	public $select2_options = array(
 		'multiple' => false,
 		'cache' => false,
-		'width' => '100%',
+		'width' => '80%',
 	);
 
 	/**