From 527ddc519532aa600a81c9a88a485eb9544d5287 Mon Sep 17 00:00:00 2001 From: Ruben Garcia Date: Thu, 1 Jun 2017 16:26:57 +0200 Subject: [PATCH] v1.0.1 Group fields support Widget area support Use of devbridgeAutocomplete() instead of autocomplete() to avoid errors --- cmb2-field-ajax-search.php | 8 +- css/ajax-search.css | 7 +- js/ajax-search.js | 180 ++++++++++++++++++++----------------- readme.md | 5 ++ 4 files changed, 114 insertions(+), 86 deletions(-) diff --git a/cmb2-field-ajax-search.php b/cmb2-field-ajax-search.php index f69f335..0f961ce 100644 --- a/cmb2-field-ajax-search.php +++ b/cmb2-field-ajax-search.php @@ -4,7 +4,7 @@ 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 +Version: 1.0.1 Author: Ruben Garcia Author URI: http://rubengc.com/ License: GPLv2+ @@ -23,7 +23,7 @@ if( ! class_exists( 'CMB2_Field_Ajax_Search' ) ) { /** * Current version number */ - const VERSION = '1.0.0'; + const VERSION = '1.0.1'; /** * Initialize the plugin by hooking into CMB2 @@ -179,8 +179,8 @@ if( ! class_exists( 'CMB2_Field_Ajax_Search' ) ) { */ public function setup_admin_scripts() { - wp_register_script( 'jquery-autocomplete', plugins_url( 'js/jquery.autocomplete.min.js', __FILE__ ), array( 'jquery' ), self::VERSION, true ); - wp_register_script( 'cmb-ajax-search', plugins_url( 'js/ajax-search.js', __FILE__ ), array( 'jquery', 'jquery-autocomplete', 'jquery-ui-sortable' ), self::VERSION, true ); + wp_register_script( 'jquery-autocomplete-ajax-search', plugins_url( 'js/jquery.autocomplete.min.js', __FILE__ ), array( 'jquery' ), self::VERSION, true ); + wp_register_script( 'cmb-ajax-search', plugins_url( 'js/ajax-search.js', __FILE__ ), array( 'jquery', 'jquery-autocomplete-ajax-search', 'jquery-ui-sortable' ), self::VERSION, true ); wp_localize_script( 'cmb-ajax-search', 'cmb_ajax_search', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), diff --git a/css/ajax-search.css b/css/ajax-search.css index 9a8f454..299cde9 100644 --- a/css/ajax-search.css +++ b/css/ajax-search.css @@ -6,8 +6,8 @@ .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; } +input.cmb-ajax-search { width: 25em; } +.cmb-ajax-search-results { width: 25em; 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; } @@ -27,3 +27,6 @@ input.cmb-ajax-search { width: 30em; } #side-sortables .cmb2-wrap input + input.cmb-ajax-search { margin-top: 1px; } /* Fix extra margin from CMB2 */ +/* Repeatable groups */ +.cmb-repeatable-group .cmb-type-post-ajax-search .cmb-td, .cmb-repeatable-group .cmb-type-user-ajax-search .cmb-td, .cmb-repeatable-group .cmb-type-term-ajax-search .cmb-td { position: relative; } +.cmb-repeatable-group .cmb-ajax-search-spinner { position: absolute; top: 50%; right: 10px; margin: -7px 0 0 0; } diff --git a/js/ajax-search.js b/js/ajax-search.js index 32f17db..3609a44 100644 --- a/js/ajax-search.js +++ b/js/ajax-search.js @@ -1,99 +1,119 @@ -(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'); +(function( document, $ ) { + function init_ajax_search() { + $('.cmb-ajax-search:not([data-ajax-search="true"])').each(function () { + $(this).attr('data-ajax-search', true); - $(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 ); + 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'); - if( $('#' + field_id + '_results li').length ) { - var selected_vals = []; - var d = 0; + $(this).devbridgeAutocomplete({ + 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 ); - $('#' + field_id + '_results input').each(function( index, element ) { - selected_vals.push( $(this).val() ); - }); + if( $('#' + field_id + '_results li').length ) { + var selected_vals = []; + var d = 0; - // Remove already picked suggestions - $(suggestions).each(function( index, suggestion ) { - if( $.inArray( ( suggestion.id ).toString(), selected_vals ) > -1 ) { - suggestions.splice( index - d, 1 ); - d++; - } - }); - } + $('#' + field_id + '_results input').each(function( index, element ) { + selected_vals.push( $(this).val() ); + }); - 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( '
  • ' + - ( ( sortable == 1 ) ? '' : '' ) + - '' + - '' + suggestion.value + '' + - '' + - '
    • ' ); - - $(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(); + // 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).devbridgeAutocomplete('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( '
  • ' + + ( ( sortable == 1 ) ? '' : '' ) + + '' + + '' + suggestion.value + '' + + '' + + '
    • ' ); + + $(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(); } - } 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 + }); } }); + } - if( $(this).attr('data-sortable') == 1 ){ - $('#' + field_id + '_results').sortable({ - handle : '.hndl', - placeholder : 'ui-state-highlight', - forcePlaceholderSize : true - }); - } + // Initialize ajax search + init_ajax_search(); + + // Initialize on group fields add row + $( document ).on( 'cmb2_add_row', function( evt, $row ) { + $row.find('.cmb-ajax-search').attr('data-ajax-search', false); + + init_ajax_search(); }); - - $('.cmb-ajax-search-results').on( 'click', 'a.remover', function() { + + // Initialize on widgets area + $(document).on('widget-updated widget-added', function() { + init_ajax_search(); + }); + + // On click remover listener + $('body').on( 'click', '.cmb-ajax-search-results 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'); + $('#' + field_id).devbridgeAutocomplete('clearCache'); $(this).remove(); }); }); -})(jQuery); \ No newline at end of file +})(document, jQuery); \ No newline at end of file diff --git a/readme.md b/readme.md index 2f37c13..f98722d 100644 --- a/readme.md +++ b/readme.md @@ -156,5 +156,10 @@ If multiple == true will return an array of IDs of attached object: ## Changelog +### 1.0.1 +* Group fields support +* Widget area support +* Use of devbridgeAutocomplete() instead of autocomplete() to avoid errors + ### 1.0.0 * Initial commit