Skip to content
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

Jump to bottom

Ensure component can be used outside customizer #27

Merged
merged 7 commits into from
Jan 9, 2017
Merged

Ensure component can be used outside customizer #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1941709
Allow post query requests to be made outside of customizer
westonruter Jan 9, 2017
eac4a42
Suppress console log about Customize Posts not being available if not…
westonruter Jan 9, 2017
a7e3ed3
Fix getSettingValues to handle case where value is Number
westonruter Jan 9, 2017
5789bf4
Prevent error when containing_construct is not supplied
westonruter Jan 9, 2017
dfac21b
Rename css handle to customize-object-selector; remove customize-cont…
westonruter Jan 9, 2017
3724539
Ensure that templates are only printed once
westonruter Jan 9, 2017
26b7684
Print templates in customizer, frontend, and admin if script is enqueued
westonruter Jan 9, 2017
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
60 changes: 47 additions & 13 deletions js/customize-object-selector-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,23 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {

return api.Class.extend({

// Note the translations are exported from PHP via \CustomizeObjectSelector\Plugin::register_scripts().
/**
* Initial nonce for requests.
*
* Note This is is exported from PHP via \CustomizeObjectSelector\Plugin::register_scripts().
* This property will be used in lieu of `wp.customize.settings.nonce` being available.
*
* @var string
*/
nonce: '',

/**
* Note the translations are exported from PHP via \CustomizeObjectSelector\Plugin::register_scripts().
*
* Note This is is exported from PHP via \CustomizeObjectSelector\Plugin::register_scripts().
*
* @var object
*/
l10n: {
missing_model_arg: '',
failed_to_fetch_selections: '',
Expand Down Expand Up @@ -51,8 +67,8 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
component.post_query_vars = null;
component.show_add_buttons = _.isUndefined( args.show_add_buttons ) ? true : args.show_add_buttons;
if ( component.show_add_buttons && ( ! api.Posts || ! _.isFunction( api.Posts.startCreatePostFlow ) ) ) {
if ( 'undefined' !== typeof console && _.isFunction( console.warn ) ) {
console.warn( component.l10n.add_new_buttons_customize_posts_dependency );
if ( 'undefined' !== typeof console && _.isFunction( console.warn ) && api.Section ) {
console.info( component.l10n.add_new_buttons_customize_posts_dependency );
}
component.show_add_buttons = false;
}
Expand Down Expand Up @@ -245,8 +261,20 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
queryPosts: function queryPosts( extraQueryVars ) {
var component = this, action, data, postQueryArgs = {};
action = 'customize_object_selector_query';
data = api.previewer.query();
data.customize_object_selector_query_nonce = api.settings.nonce[ action ];
data = {
customize_object_selector_query_nonce: component.nonce
};

// Include customized state if in customizer.
if ( api.previewer && api.previewer.query ) {
_.extend( data, api.previewer.query() );
}

// Use refreshed nonce from in customizer if available.
if ( api.settings && api.settings.nonce && api.settings.nonce[ action ] ) {
data.customize_object_selector_query_nonce = api.settings.nonce[ action ];
}

_.extend(
postQueryArgs,
component.post_query_vars || {},
Expand Down Expand Up @@ -283,15 +311,21 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
* @returns {Number[]} IDs.
*/
getSettingValues: function() {
var component = this, settingValues, value;
var component = this, settingValues, parsedIds;
settingValues = component.model.get();
if ( ! _.isArray( settingValues ) ) {
value = parseInt( settingValues, 10 );
if ( isNaN( value ) || value <= 0 ) {
settingValues = [];
} else {
settingValues = [ value ];
parsedIds = [];
if ( _.isNumber( settingValues ) ) {
parsedIds.push( settingValues );
} else if ( _.isString( settingValues ) ) {
_.each( settingValues.split( /\s*,\s*/ ), function( value ) {
var parsedValue = parseInt( value, 10 );
if ( ! isNaN( parsedValue ) && parsedValue > 0 ) {
parsedIds.push( parsedValue );
}
} );
}
settingValues = parsedIds;
}
return settingValues;
},
Expand Down Expand Up @@ -462,7 +496,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
orderby: 'post__in'
});
component.currentRequest.done( function( data ) {
if ( component.containing_construct.notifications ) {
if ( component.containing_construct && component.containing_construct.notifications ) {
component.containing_construct.notifications.remove( 'select2_init_failure' );
}
component.select.empty();
Expand All @@ -478,7 +512,7 @@ wp.customize.ObjectSelectorComponent = (function( api, $ ) {
} );
component.currentRequest.fail( function( jqXHR, status, statusText ) {
var notification;
if ( 'abort' !== status && api.Notification && component.containing_construct.notifications ) {
if ( 'abort' !== status && api.Notification && component.containing_construct && component.containing_construct.notifications ) {

// @todo Allow clicking on this notification to re-call populateSelectOptions()
// @todo The error should be triggered on the component itself so that the control adds it to its notifications. Too much coupling here.
Expand Down
25 changes: 21 additions & 4 deletions php/class-plugin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ function init() {

add_action( 'customize_controls_enqueue_scripts', array( $this, 'customize_controls_enqueue_scripts' ) );
add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_templates' ) );
add_action( 'admin_print_footer_scripts', array( $this, 'print_templates' ) );
add_action( 'wp_print_footer_scripts', array( $this, 'print_templates' ) );

add_action( 'wp_ajax_' . static::OBJECT_SELECTOR_QUERY_AJAX_ACTION, array( $this, 'handle_ajax_object_selector_query' ) );
add_filter( 'customize_refresh_nonces', array( $this, 'add_customize_object_selector_nonce' ) );
}
Expand Down Expand Up @@ -128,9 +131,11 @@ public function register_scripts( \WP_Scripts $wp_scripts ) {
'failed_to_fetch_selections' => __( 'Failed to fetch selections: %s', 'customize-object-selector' ),
'add_new_buttons_customize_posts_dependency' => __( '[Customize Object Selector] The show_add_buttons option depends on the Customize Posts plugin v0.8.0.', 'customize-object-selector' ),
);
$nonce = wp_create_nonce( static::OBJECT_SELECTOR_QUERY_AJAX_ACTION );
$wp_scripts->add_inline_script(
$handle,
sprintf( 'wp.customize.ObjectSelectorComponent.prototype.l10n = %s;', wp_json_encode( $l10n ) ),
sprintf( 'wp.customize.ObjectSelectorComponent.prototype.l10n = %s;', wp_json_encode( $l10n ) ) .
sprintf( 'wp.customize.ObjectSelectorComponent.prototype.nonce = %s;', wp_json_encode( $nonce ) ),
'after'
);

Expand Down Expand Up @@ -163,9 +168,9 @@ public function register_styles( \WP_Styles $wp_styles ) {
$wp_styles->add( $handle, $src, $deps, $this->version );
}

$handle = 'customize-object-selector-control';
$handle = 'customize-object-selector';
$src = plugins_url( 'css/customize-object-selector' . $suffix, __DIR__ );
$deps = array( 'customize-controls', 'select2' );
$deps = array( 'select2' );
$wp_styles->add( $handle, $src, $deps, $this->version );
}

Expand All @@ -178,7 +183,7 @@ public function customize_controls_enqueue_scripts() {
global $wp_customize;

wp_enqueue_script( 'customize-object-selector-control' );
wp_enqueue_style( 'customize-object-selector-control' );
wp_enqueue_style( 'customize-object-selector' );

if ( $wp_customize->get_section( 'static_front_page' ) ) {
wp_enqueue_script( 'customize-object-selector-static-front-page' );
Expand Down Expand Up @@ -649,10 +654,22 @@ public function add_customize_object_selector_nonce( $nonces ) {
return $nonces;
}

/**
* Whether templates have been printed.
*
* @var bool
*/
protected $templates_printed = false;

/**
* Print templates.
*/
public function print_templates() {
if ( $this->templates_printed || ! wp_script_is( 'customize-object-selector-component' ) ) {
return;
}
$this->templates_printed = true;

?>
<script id="tmpl-customize-object-selector-component" type="text/html">
<select id="{{ data.select_id }}"
Expand Down