rayelliott
/
cmb2-field-ajax-search
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Initial commit

This commit is contained in:
Ruben Garcia 2017-03-14 20:07:56 +01:00
commit bd0ea78f34
6 changed files with 545 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
cmb-field-ajax-search.php Normal file
View File

@ -0,0 +1,249 @@
<?php
/*
Plugin Name: CMB2 Field Type: Ajax Search
Plugin URI: https://github.com/rubengc/cmb2-field-ajax-search
GitHub Plugin URI: https://github.com/rubengc/cmb2-field-ajax-search
Description: CMB2 field type to attach posts, users or terms.
Version: 1.0.0
Author: Ruben Garcia
Author URI: http://rubengc.com/
License: GPLv2+
*/
// This plugin is an update of CMB2 Field Type: Post Search Ajax (https://github.com/alexis-magina/cmb2-field-post-search-ajax)
// Special thanks to Magina (http://magina.fr/) for him awesome work
if( ! class_exists( 'CMB2_Field_Ajax_Search' ) ) {
/**
* Class CMB2_Field_Ajax_Search
*/
class CMB2_Field_Ajax_Search {
/**
* Current version number
*/
const VERSION = '1.0.0';
/**
* Initialize the plugin by hooking into CMB2
*/
public function __construct() {
// Render
add_action( 'cmb2_render_post_ajax_search', array( $this, 'render' ), 10, 5 );
add_action( 'cmb2_render_user_ajax_search', array( $this, 'render' ), 10, 5 );
add_action( 'cmb2_render_term_ajax_search', array( $this, 'render' ), 10, 5 );
// Sanitize
add_action( 'cmb2_sanitize_post_ajax_search', array( $this, 'sanitize' ), 10, 4 );
add_action( 'cmb2_sanitize_user_ajax_search', array( $this, 'sanitize' ), 10, 4 );
add_action( 'cmb2_sanitize_term_ajax_search', array( $this, 'sanitize' ), 10, 4 );
// Ajax request
add_action( 'wp_ajax_cmb_ajax_search_get_results', array( $this, 'get_results' ) );
}
/**
* Render field
*/
public function render( $field, $value, $object_id, $object_type, $field_type ) {
$this->setup_admin_scripts();
$field_name = $field->_name();
$default_limit = 1;
// Current filter is cmb2_render_{$object_to_search}_ajax_search ( post, user or term )
$object_to_search = str_replace( 'cmb2_render_', '', str_replace( '_ajax_search', '', current_filter() ) );
if( $field->args( 'multiple' ) == true ) {
$default_limit = -1; // 0 or -1 means unlimited
?><ul id="<?php echo $field_name; ?>_results" class="cmb-ajax-search-results cmb-<?php echo $object_to_search; ?>-ajax-search-results"><?php
if( isset( $value ) && ! empty( $value ) ){
if( ! is_array( $value ) ) {
$value = array( $value );
}
foreach( $value as $val ) :
?>
<li>
<?php if( $field->args( 'sortable' ) ) : ?><span class="hndl"></span><?php endif; ?>
<input type="hidden" name="<?php echo $field_name; ?>[]" value="<?php echo $val; ?>">
<a href="<?php echo $this->object_link( $field_name, $val, $object_to_search ); ?>" target="_blank" class="edit-link">
<?php echo $this->object_text( $field_name, $val, $object_to_search ); ?>
</a>
<a class="remover"><span class="dashicons dashicons-no"></span><span class="dashicons dashicons-dismiss"></span></a>
</li>
<?php
endforeach;
}
?></ul><?php
$input_value = '';
} else {
if( is_array( $value ) ) {
$value = $value[0];
}
echo $field_type->input( array(
'type' => 'hidden',
'name' => $field_name,
'value' => $value,
'desc' => false
) );
$input_value = ( $value ? $this->object_text( $field_name, $value, $object_to_search ) : '' );
}
echo $field_type->input( array(
'type' => 'text',
'name' => $field_name . '_input',
'id' => $field_name . '_input',
'class' => 'cmb-ajax-search cmb-' . $object_to_search . '-ajax-search',
'value' => $input_value,
'desc' => false,
'data-multiple' => $field->args( 'multiple' ) ? $field->args( 'multiple' ) : '0',
'data-limit' => $field->args( 'limit' ) ? $field->args( 'limit' ) : $default_limit,
'data-sortable' => $field->args( 'sortable' ) ? $field->args( 'sortable' ) : '0',
'data-object-type' => $object_to_search,
'data-query-args' => $field->args( 'query_args' ) ? htmlspecialchars( json_encode( $field->args( 'query_args' ) ), ENT_QUOTES, 'UTF-8' ) : ''
) );
echo '<img src="'.admin_url( 'images/spinner.gif' ).'" class="cmb-ajax-search-spinner" />';
$field_type->_desc( true, true );
}
/**
* Optionally save the latitude/longitude values into two custom fields
*/
public function sanitize( $override_value, $value, $object_id, $field_args ) {
$fid = $field_args['id'];
if($field_args['render_row_cb'][0]->data_to_save[$field_args['id']]) {
$value = $field_args['render_row_cb'][0]->data_to_save[$field_args['id']];
} else {
$value = false;
}
return $value;
}
/**
* Enqueue scripts and styles
*/
public function setup_admin_scripts() {
wp_register_script( 'jquery-autocomplete', plugins_url( 'js/jquery.autocomplete.min.js', __FILE__ ), array( 'jquery' ), self::VERSION );
wp_register_script( 'cmb-ajax-search', plugins_url( 'js/ajax-search.js', __FILE__ ), array( 'jquery', 'jquery-autocomplete', 'jquery-ui-sortable' ), self::VERSION );
wp_localize_script( 'cmb-ajax-search', 'cmb_ajax_search', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'cmb_ajax_search_get_results' )
) );
wp_enqueue_script( 'cmb-ajax-search' );
wp_enqueue_style( 'cmb-ajax-search', plugins_url( 'css/ajax-search.css', __FILE__ ), array(), self::VERSION );
}
/**
* Ajax request : get results
*/
public function get_results() {
$nonce = $_POST['nonce'];
if ( ! wp_verify_nonce( $nonce, 'cmb_ajax_search_get_results' ) ) {
// Wrong nonce
die( json_encode( array(
'error' => __( 'Error : Unauthorized action' )
) ) );
} else if ( ( ! isset( $_POST['field_id'] ) || empty( $_POST['field_id'] ) )
|| ( ! isset( $_POST['object_type'] ) || empty( $_POST['object_type'] ) ) ) {
// Wrong request parameters (field_id and object_type are mandatory)
die( json_encode( array(
'error' => __( 'Error : Wrong request parameters' )
) ) );
} else {
$query_args = json_decode( stripslashes( htmlspecialchars_decode( $_POST['query_args'] ) ), true );
$data = array();
$results = array();
switch( $_POST['object_type'] ) {
case 'post':
$query_args['s'] = $_POST['query'];
$query = new WP_Query( $query_args );
$results = $query->posts;
break;
case 'user':
$query_args['search'] = '*' . $_POST['query'] . '*';
$query = new WP_User_Query( $query_args );
$results = $query->results;
break;
case 'term':
$query_args['search'] = $_POST['query'];
$query = new WP_Term_Query( $query_args );
$results = $query->terms;
break;
}
foreach ( $results as $result ) :
if( $_POST['object_type'] == 'term' ) {
$result_id = $result->term_id;
} else {
$result_id = $result->ID;
}
$data[] = array(
'id' => $result_id,
'value' => $this->object_text( $_POST['field_id'], $result_id, $_POST['object_type'] ),
'link' => $this->object_link( $_POST['field_id'], $result_id, $_POST['object_type'] )
);
endforeach;
wp_send_json( $data );
exit;
}
}
public function object_text( $field_id, $object_id, $object_type ) {
$text = '';
if( $object_type == 'post' ) {
$text = get_the_title( $object_id );
} else if( $object_type == 'user' ) {
$text = get_the_author_meta('display_name', $object_id);
} else if( $object_type == 'term' ) {
$term = get_term( $object_id );
$text = $term->name;
}
$text = apply_filters( "cmb_{$field_id}_ajax_search_result_text", $text, $object_id, $object_type );
return $text;
}
public function object_link( $field_id, $object_id, $object_type ) {
$link = '#';
if( $object_type == 'post' ) {
$link = get_edit_post_link( $object_id );
} else if( $object_type == 'user' ) {
$link = get_edit_user_link( $object_id );
} else if( $object_type == 'term' ) {
$link = get_edit_term_link( $object_id );
}
$link = apply_filters( "cmb_{$field_id}_ajax_search_result_link", $link, $object_id, $object_type );
return $link;
}
}
$cmb2_field_ajax_search = new CMB2_Field_Ajax_Search();
}

27
css/ajax-search.css Normal file
View File

@ -0,0 +1,27 @@
.autocomplete-suggestions { border: 1px solid #DDD; background: #FFF; overflow: auto; box-sizing: border-box; }
.autocomplete-suggestion { padding: 5px 5px; white-space: nowrap; overflow: hidden; cursor: pointer; }
.autocomplete-no-suggestion { padding: 5px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
input.cmb-ajax-search { width: 30em; }
.cmb-ajax-search-results { width: 30em; padding: 0 1px; box-sizing: border-box; margin-bottom: 5px; }
.cmb-ajax-search-results li { margin: 0; border-bottom: 1px solid #f4f4f4; padding: 7px 5px; background: #fff; }
.cmb-ajax-search-results li:last-child { border-bottom: none; }
.cmb-ajax-search-results li span.hndl { font-size: 13px; line-height: 16px; color: #ccc; margin: 0 8px 0 0; height: 16px; cursor: s-resize; }
.cmb-ajax-search-results li span.hndl:before { content: '\2807'; }
.cmb-ajax-search-results li a.edit-link { color: #333; text-decoration: none; }
.cmb-ajax-search-results li a.edit-link:hover { color: #00a0d2; text-decoration: underline; }
.cmb-ajax-search-results li a.remover { float: right; cursor:pointer; color: #ccc; }
.cmb-ajax-search-results li a.remover span { height: 16px; line-height: 16px; font-size: 14px; }
.cmb-ajax-search-results li a.remover span.dashicons-dismiss { display: none; }
.cmb-ajax-search-results li a.remover:hover { color: #C00; }
.cmb-ajax-search-results li a.remover:hover span.dashicons-dismiss { display: inline-block; }
.cmb-ajax-search-results li a.remover:hover span.dashicons-no { display: none; }
.cmb-ajax-search-results .ui-state-highlight { background: #f4f4f4; }
.cmb-ajax-search-spinner { position: absolute; margin: 9px 0 0 -25px; width: 15px; display:none; }
.columns-2 #postbox-container-1 .cmb-ajax-search-spinner { right: 25px; margin: -23px 0 0 0; }

BIN
example.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

99
js/ajax-search.js Normal file
View File

@ -0,0 +1,99 @@
(function( $ ) {
$('.cmb-ajax-search').each(function () {
var input_id = $(this).attr('id'); // Field id with '_input' sufix (the searchable field)
var field_id = $(this).attr('id').replace( new RegExp('_input$'), '' ); // Field id, the true one field
var object_type = $(this).attr('data-object-type');
var query_args = $(this).attr('data-query-args');
$(this).autocomplete({
serviceUrl: cmb_ajax_search.ajaxurl,
type: 'POST',
triggerSelectOnValidInput: false,
showNoSuggestionNotice: true,
params: {
action : 'cmb_ajax_search_get_results',
nonce : cmb_ajax_search.nonce, // nonce
field_id : field_id, // Field id for hook purposes
object_type : object_type, // post, user or term
query_args : query_args, // Query args passed to field
},
transformResult: function( results ) {
var suggestions = $.parseJSON( results );
if( $('#' + field_id + '_results li').length ) {
var selected_vals = [];
var d = 0;
$('#' + field_id + '_results input').each(function( index, element ) {
selected_vals.push( $(this).val() );
});
// Remove already picked suggestions
$(suggestions).each(function( index, suggestion ) {
if( $.inArray( ( suggestion.id ).toString(), selected_vals ) > -1 ) {
suggestions.splice( index - d, 1 );
d++;
}
});
}
return { suggestions: suggestions };
},
onSearchStart: function(){
$(this).next('img.cmb-ajax-search-spinner').css( 'display', 'inline-block' );
},
onSearchComplete: function(){
$(this).next('img.cmb-ajax-search-spinner').hide();
},
onSelect: function ( suggestion ) {
$(this).autocomplete('clearCache');
var field_name = $(this).attr('id').replace( new RegExp('_input$'), '' );
var multiple = $(this).attr('data-multiple');
var limit = parseInt( $(this).attr('data-limit') );
var sortable = $(this).attr('data-sortable');
if( multiple == 1 ) {
// Multiple
$('#' + field_name + '_results' ).append( '<li>' +
( ( sortable == 1 ) ? '<span class="hndl"></span>' : '' ) +
'<input type="hidden" name="' + field_name + '[]" value="' + suggestion.id + '">' +
'<a href="' + suggestion.link + '" target="_blank" class="edit-link">' + suggestion.value + '</a>' +
'<a class="remover"><span class="dashicons dashicons-no"></span><span class="dashicons dashicons-dismiss"></span></a>' +
'</li>' );
$(this).val( '' );
// Checks if there is the max allowed results, limit < 0 means unlimited
if( limit > 0 && limit == $('#' + field_name + '_results li').length ) {
$(this).prop( 'disabled', 'disabled' );
} else {
$(this).focus();
}
} else {
// Singular
$('input[name=' + field_name + ']').val( suggestion.id ).change();
}
}
});
if( $(this).attr('data-sortable') == 1 ){
$('#' + field_id + '_results').sortable({
handle : '.hndl',
placeholder : 'ui-state-highlight',
forcePlaceholderSize : true
});
}
});
$('.cmb-ajax-search-results').on( 'click', 'a.remover', function() {
$(this).parent('li').fadeOut( 400, function(){
var field_id = $(this).parents('ul').attr('id').replace('_results', '');
$('#' + field_id).removeProp( 'disabled' );
$('#' + field_id).autocomplete('clearCache');
$(this).remove();
});
});
})(jQuery);

8
js/jquery.autocomplete.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

162
readme.md Normal file
View File

@ -0,0 +1,162 @@
CMB2 Field Type: Ajax Search
==================
Custom fields for [CMB2](https://github.com/WebDevStudios/CMB2) to attach posts, users or terms to each others.
Once activated, this plugin adds three new field types `post_ajax_search`, `user_ajax_search` and `term_ajax_search`.
This plugin is an update of [CMB2 Field Type: Post Search Ajax](https://github.com/alexis-magina/cmb2-field-post-search-ajax) by [Magina](http://magina.fr/) with support to attach posts, users or terms.
## Installation
You can install this field type as you would a WordPress plugin:
- Download the plugin
- Place the plugin folder in your /wp-content/plugins/ directory
- Activate the plugin in the Plugin dashboard
## Parameters
Options :
- multiple (bool, default = false) : Turn field into a multiple attached objects
- limit (int, default = -1 : single selection) : Limit the number of posts that can be selected (-1 for unlimited)
- sortable (bool, default = false) : Allow selected items to be sort (only if multiple = true)
- query_args (array) : Query arguments to pass on each request
Query args:
- query_args accepts same parameters as [WP_Query](https://codex.wordpress.org/Class_Reference/WP_Query) for `post_ajax_search`
- query_args accepts same parameters as [WP_User_Query](https://codex.wordpress.org/Class_Reference/WP_User_Query) for `user_ajax_search`
- query_args accepts same parameters as [WP_Term_Query](https://developer.wordpress.org/reference/classes/wp_term_query/) for `term_ajax_search`
## Examples
```php
add_action( 'cmb2_admin_init', 'cmb2_ajax_search_metabox' );
function cmb2_ajax_search_metabox() {
$prefix = 'your_prefix_demo_';
$cmb_demo = new_cmb2_box( array(
'id' => $prefix . 'metabox',
'title' => __( 'Attached posts Metabox', 'cmb2' ),
'object_types' => array( 'page', 'post' ), // Post type
) );
// Single post
$cmb_demo->add_field( array(
'name' => __( 'Attached post', 'cmb2' ),
'desc' => __( 'Field description (optional)', 'cmb2' ),
'id' => $prefix . 'post',
'type' => 'post_ajax_search',
'query_args' => array(
'post_type' => array( 'post' ),
'posts_per_page' => -1
)
) );
// Multiple posts
$cmb_demo->add_field( array(
'name' => __( 'Multiple posts', 'cmb2' ),
'desc' => __( 'Field description (optional)', 'cmb2' ),
'id' => $prefix . 'posts',
'type' => 'post_ajax_search',
'multiple' => true,
'limit' => 10,
'query_args' => array(
'post_type' => array( 'post', 'page' ),
'post_status' => array( 'publish', 'pending' )
)
) );
// Single user
$cmb_demo->add_field( array(
'name' => __( 'Attached user', 'cmb2' ),
'desc' => __( 'Field description (optional)', 'cmb2' ),
'id' => $prefix . 'user',
'type' => 'post_ajax_search',
'query_args' => array(
'role' => array( 'Subscriber' ),
'search_columns' => array( 'user_login', 'user_email' )
)
) );
// Multiple users
$cmb_demo->add_field( array(
'name' => __( 'Multiple users', 'cmb2' ),
'desc' => __( 'Field description (optional)', 'cmb2' ),
'id' => $prefix . 'users',
'type' => 'post_ajax_search',
'multiple' => true,
'limit' => 5,
'query_args' => array(
'role__not_in' => array( 'Administrator', 'Editor' ),
)
) );
// Single term
$cmb_demo->add_field( array(
'name' => __( 'Attached term', 'cmb2' ),
'desc' => __( 'Field description (optional)', 'cmb2' ),
'id' => $prefix . 'term',
'type' => 'post_ajax_search',
'query_args' => array(
'taxonomy' => 'category',
'childless' => true
)
) );
// Multiple terms
$cmb_demo->add_field( array(
'name' => __( 'Multiple terms', 'cmb2' ),
'desc' => __( 'Field description (optional)', 'cmb2' ),
'id' => $prefix . 'terms',
'type' => 'post_ajax_search',
'multiple' => true,
'limit' => -1,
'query_args' => array(
'taxonomy' => 'post_tag',
'hide_empty' => false
)
) );
}
```
## Customize results output
You can use `cmb_{$field_id}_ajax_search_result_text` to customize the text returned from ajax searches and `cmb_{$field_id}_ajax_search_result_link` to customize the link, check next example:
```php
add_filter( 'cmb_your_prefix_demo_posts_ajax_search_result_text', 'cmb2_ajax_search_custom_field_text', 10, 3 );
function cmb2_ajax_search_custom_field_text( $text, $object_id, $object_type ) {
$text = sprintf( '#%s - %s', $object_id, $text ); // #123 - Post title
return $text;
}
add_filter( 'cmb_your_prefix_demo_posts_ajax_search_result_link', 'cmb2_ajax_search_custom_field_link', 10, 3 );
function cmb2_ajax_search_custom_field_link( $link, $object_id, $object_type ) {
if( $object_id == 123 ) {
$link = '#';
}
return $link;
}
```
## Retrieve the field value
If multiple == false will return the ID of attached object:
`get_post_meta( get_the_ID(), 'your_field_id', true );`
If multiple == true will return an array of IDs of attached object:
`get_post_meta( get_the_ID(), 'your_field_id', false );`
## Screenshot
![example](example.gif)
## Changelog
### 1.0.0
* Initial commit