Merge pull request #12 from xwp/feature/edit-entities

Editing entities from select2.

css/customize-object-selector.css

@@ -1,12 +1,56 @@
 .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;

js/customize-object-selector-component.js

@@ -111,6 +111,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 +149,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
 
 			if ( api.Posts && _.isFunction( api.Posts.startCreatePostFlow ) ) {
 				component.setupAddNewButtons();
+				component.setupEditLinks();
 			}
 
 			component.repopulateSelectOptionsForSettingChange = _.bind( component.repopulateSelectOptionsForSettingChange, component );
@@ -384,6 +386,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.
 		 *

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
 			);

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%',
 	);
 
 	/**

php/class-plugin.php

@@ -163,7 +163,7 @@ public function register_styles( \WP_Styles $wp_styles ) {
 			$wp_styles->add( $handle, $src, $deps, $this->version );
 		}
 
-		$handle = 'customize-object-selector';
+		$handle = 'customize-object-selector-control';
 		$src = plugins_url( 'css/customize-object-selector' . $suffix, __DIR__ );
 		$deps = array( 'customize-controls', 'select2' );
 		$wp_styles->add( $handle, $src, $deps, $this->version );
@@ -661,15 +661,20 @@ public function print_templates() {
 				<# } #>
 				>
 			</select>
-
+			<button type="button" class="hidden button button-secondary single-selection select2-selection__choice__edit">
+				<span class="screen-reader-text"><?php esc_html_e( 'Edit', 'customize-object-selector' ); ?></span>
+			</button>
 			<# if ( ! _.isEmpty( data.addable_post_types ) ) { #>
-				<span class="add-new-post">
 					<# _.each( data.addable_post_types, function( addable_post_type ) { #>
-						<button type="button" class="button secondary-button add-new-post-button" data-post-type="{{ addable_post_type.post_type }}">
-							{{ addable_post_type.add_button_label }}
+						<#
+						var button_text = addable_post_type.add_button_label + ' ' + addable_post_type.post_type;
+						#>
+						<button class="button-secondary add-new-post-stub add-new-post-button" data-post-type="{{ addable_post_type.post_type }}" title="{{ button_text }}">
+							<span class="screen-reader-text">
+								{{ button_text }}
+							</span>
 						</button>
 					<# } ) #>
-				</span>
 			<# } #>
 		</script>
 
@@ -678,7 +683,14 @@ public function print_templates() {
 				<span class="select2-thumbnail-wrapper">
 					<img src="{{ data.featured_image.sizes.thumbnail.url }}">
 					{{{ data.text }}}
+					<# if ( data.element && data.multiple ) { #>
+						<span class="dashicons dashicons-edit select2-selection__choice__edit" role="presentation" data-post-id="{{ data.id }}">
+							<span class="screen-reader-text"><?php esc_html_e( 'Edit', 'customize-object-selector' ); ?></span>
+						</span>
+					<# } #>
 				</span>
+			<# } else if ( data.element && data.multiple ) { #>
+				{{{ data.text }}} <span class="dashicons dashicons-edit select2-selection__choice__edit" role="presentation" data-post-id="{{ data.id }}"><span class="screen-reader-text"><?php esc_html_e( 'Edit', 'customize-object-selector' ); ?></span></span>
 			<# } else { #>
 				<# if ( data.depth ) { #>
 					<#