Skip to content

Editing entities from select2. #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Sep 24, 2016
Merged

Editing entities from select2. #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
89021fe
Start editing from select2
miina Aug 29, 2016
cc0575e
Continue with select2 edit.
miina Aug 29, 2016
a49a0bd
Fix scrolling not working when returning.
miina Aug 31, 2016
cc63d04
Use data.element instead of data.edit_disabled
miina Sep 1, 2016
6be5e65
Add dashicon. Remove event delegation.
miina Sep 2, 2016
b8acc65
Remove debugging info.
miina Sep 2, 2016
7a80d1b
Clean up styles
valendesigns Sep 2, 2016
b72e36b
Fix phpcs issue
valendesigns Sep 2, 2016
a4de325
Fix scrolling issue.
miina Sep 2, 2016
2fb98be
Merge develop. Use startEditPostFlow.
miina Sep 22, 2016
e0ddbfb
Fix cs.
miina Sep 22, 2016
7a5de3c
Match adding new button with Customize Posts.
miina Sep 22, 2016
363224a
Change edit button according to Customize Posts.
miina Sep 23, 2016
97d57ff
Remove unused focusConstructWithBreadcrumb.
miina Sep 23, 2016
3905518
Fix edit button visibility & position, and add new button text
valendesigns Sep 24, 2016
2554cb1
Fix eslint issues
valendesigns Sep 24, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions css/customize-object-selector.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
Binary file added images/spinner.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 49 additions & 0 deletions js/customize-object-selector-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a better way how to get it from template that it's multiple select field?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't look like. I checked this and if there are any other arguments, and I see none. So yeah, looks good.

return $.trim( component.select2_selection_template( data ) );
},
escapeMarkup: function( m ) {
Expand Down Expand Up @@ -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 );
Expand Down Expand Up @@ -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.
*
Expand Down
5 changes: 4 additions & 1 deletion js/customize-object-selector-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
Expand Down
2 changes: 1 addition & 1 deletion php/class-control.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ class Control extends \WP_Customize_Control {
public $select2_options = array(
'multiple' => false,
'cache' => false,
'width' => '100%',
'width' => '80%',
);

/**
Expand Down
24 changes: 18 additions & 6 deletions php/class-plugin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -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>

Expand All @@ -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 ) { #>
<#
Expand Down