Skip to content

Commit 3a15033

Browse files
valendesignsvalendesigns
authored
Merge pull request #12 from xwp/feature/edit-entities
Editing entities from select2.
2 parents 9a830dd + 2554cb1 commit 3a15033

6 files changed

+116
-8
lines changed

‎css/customize-object-selector.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,56 @@
11
.select2-container {
22
z-index: 1000000;
3+
margin-bottom: 5px;
34
}
5+
46
.select2-thumbnail-wrapper img {
57
height: 32px;
68
width: auto;
79
vertical-align: middle;
810
}
911

12+
.customize-object-selector-container .single-selection.select2-selection__choice__edit,
13+
.customize-object-selector-container .add-new-post-stub {
14+
padding: 0 5px 1px;
15+
}
16+
17+
.customize-object-selector-container .single-selection.select2-selection__choice__edit {
18+
top: -1px;
19+
position: relative;
20+
}
21+
22+
.customize-object-selector-container .single-selection.select2-selection__choice__edit:before {
23+
content: "\f464";
24+
font: normal 20px/1 dashicons;
25+
position: relative;
26+
top: -2px;
27+
vertical-align: middle;
28+
}
29+
30+
.customize-object-selector-container .add-new-post-stub:before {
31+
content: "\f132";
32+
display: inline-block;
33+
position: relative;
34+
font: normal 20px/1 dashicons;
35+
vertical-align: middle;
36+
}
37+
38+
.select2-selection__choice__edit {
39+
cursor: pointer;
40+
}
41+
42+
.select2-selection--single .select2-selection__choice__edit {
43+
line-height: 26px;
44+
}
45+
46+
.select2-selection__choice__edit.loading:before {
47+
background: url(../images/spinner.gif) no-repeat;
48+
-webkit-background-size: 20px 20px;
49+
background-size: 20px 20px;
50+
color: rgba( 255, 255, 255, 0 );
51+
opacity: 0.7;
52+
filter: alpha(opacity=70);
53+
}
1054
/* @todo A spinner would be better here */
1155
.customize-object-selector-populating {
1256
opacity: 0.5;

‎images/spinner.gif

4.06 KB
Loading

‎js/customize-object-selector-component.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
111111
return $.trim( component.select2_result_template( data ) );
112112
},
113113
templateSelection: function( data ) {
114+
data.multiple = component.select2_options.multiple;
114115
return $.trim( component.select2_selection_template( data ) );
115116
},
116117
escapeMarkup: function( m ) {
@@ -148,6 +149,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
148149

149150
if ( api.Posts && _.isFunction( api.Posts.startCreatePostFlow ) ) {
150151
component.setupAddNewButtons();
152+
component.setupEditLinks();
151153
}
152154

153155
component.repopulateSelectOptionsForSettingChange = _.bind( component.repopulateSelectOptionsForSettingChange, component );
@@ -384,6 +386,53 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
384386
} );
385387
},
386388

389+
/**
390+
* Setup links for editing objects in select2.
391+
*
392+
* @returns {void}
393+
*/
394+
setupEditLinks: function setupEditLinks() {
395+
var component = this, editButton, onSelect;
396+
397+
editButton = component.container.find( '.select2-selection__choice__edit' );
398+
onSelect = function( pageId ) {
399+
pageId = parseInt( pageId, 10 );
400+
editButton.toggle( ! isNaN( pageId ) && 0 !== pageId && ! component.select2_options.multiple );
401+
};
402+
onSelect( component.model.get() );
403+
component.model.bind( onSelect );
404+
405+
// Set up the add new post buttons
406+
component.container.on( 'click', '.select2-selection__choice__edit', function( e ) {
407+
var $elm = $( this ), postId;
408+
409+
if ( component.select2_options.multiple ) {
410+
postId = $elm.data( 'postId' );
411+
} else {
412+
postId = parseInt( component.model.get(), 10 );
413+
}
414+
415+
e.preventDefault();
416+
component.select.select2( 'close' );
417+
component.select.prop( 'disabled', true );
418+
$elm.addClass( 'loading' );
419+
420+
api.Posts.startEditPostFlow( {
421+
postId: postId,
422+
initiatingButton: $elm,
423+
originatingConstruct: component.containing_construct,
424+
restorePreviousUrl: true,
425+
returnToOriginatingConstruct: true,
426+
breadcrumbReturnCallback: function() {
427+
component.setSettingValues( component.getSettingValues().slice( 0 ) );
428+
$elm.removeClass( 'loading' );
429+
component.select.prop( 'disabled', false );
430+
component.containing_construct.focus();
431+
}
432+
} );
433+
} );
434+
},
435+
387436
/**
388437
* Re-populate the select options based on the current setting value.
389438
*

‎js/customize-object-selector-control.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,14 @@
3535
args.params.post_query_vars = args.params.post_query_args;
3636
}
3737

38+
if ( true === args.params.select2_options.multiple ) {
39+
args.params.select2_options.width = '100%';
40+
}
3841
args.params.select2_options = _.extend(
3942
{
4043
multiple: false,
4144
cache: false,
42-
width: '100%'
45+
width: '72%'
4346
},
4447
args.params.select2_options
4548
);

‎php/class-control.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ class Control extends \WP_Customize_Control {
3030
public $select2_options = array(
3131
'multiple' => false,
3232
'cache' => false,
33-
'width' => '100%',
33+
'width' => '80%',
3434
);
3535

3636
/**

‎php/class-plugin.php

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ public function register_styles( \WP_Styles $wp_styles ) {
163163
$wp_styles->add( $handle, $src, $deps, $this->version );
164164
}
165165

166-
$handle = 'customize-object-selector';
166+
$handle = 'customize-object-selector-control';
167167
$src = plugins_url( 'css/customize-object-selector' . $suffix, __DIR__ );
168168
$deps = array( 'customize-controls', 'select2' );
169169
$wp_styles->add( $handle, $src, $deps, $this->version );
@@ -661,15 +661,20 @@ public function print_templates() {
661661
<# } #>
662662
>
663663
</select>
664-
664+
<button type="button" class="hidden button button-secondary single-selection select2-selection__choice__edit">
665+
<span class="screen-reader-text"><?php esc_html_e( 'Edit', 'customize-object-selector' ); ?></span>
666+
</button>
665667
<# if ( ! _.isEmpty( data.addable_post_types ) ) { #>
666-
<span class="add-new-post">
667668
<# _.each( data.addable_post_types, function( addable_post_type ) { #>
668-
<button type="button" class="button secondary-button add-new-post-button" data-post-type="{{ addable_post_type.post_type }}">
669-
{{ addable_post_type.add_button_label }}
669+
<#
670+
var button_text = addable_post_type.add_button_label + ' ' + addable_post_type.post_type;
671+
#>
672+
<button class="button-secondary add-new-post-stub add-new-post-button" data-post-type="{{ addable_post_type.post_type }}" title="{{ button_text }}">
673+
<span class="screen-reader-text">
674+
{{ button_text }}
675+
</span>
670676
</button>
671677
<# } ) #>
672-
</span>
673678
<# } #>
674679
</script>
675680

@@ -678,7 +683,14 @@ public function print_templates() {
678683
<span class="select2-thumbnail-wrapper">
679684
<img src="{{ data.featured_image.sizes.thumbnail.url }}">
680685
{{{ data.text }}}
686+
<# if ( data.element && data.multiple ) { #>
687+
<span class="dashicons dashicons-edit select2-selection__choice__edit" role="presentation" data-post-id="{{ data.id }}">
688+
<span class="screen-reader-text"><?php esc_html_e( 'Edit', 'customize-object-selector' ); ?></span>
689+
</span>
690+
<# } #>
681691
</span>
692+
<# } else if ( data.element && data.multiple ) { #>
693+
{{{ 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>
682694
<# } else { #>
683695
<# if ( data.depth ) { #>
684696
<#

0 commit comments

Comments
 (0)