Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-25 22:35:02 +02:00
Code Issues Projects Releases Wiki Activity

Theme Customizer: Add a Control object to better encapsulate different UI elements and make it easy to switch between hard refreshes and postMessage. see #19910.

Browse Source 
git-svn-id: http://svn.automattic.com/wordpress/trunk@20128 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2012-03-06 22:48:07 +00:00
parent 8199ae99aa
commit e9652cf3fd
5 changed files with 94 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wp-includes/class-wp-customize-section.php
View File

@ -72,7 +72,7 @@ class WP_Customize_Section {
<?php endif; ?>
<?php foreach ( $this->settings as $setting ) : ?>
<li>
<li id="customize-control-<?php echo esc_attr( $setting->id ); ?>" class="customize-control">
<?php $setting->_render(); ?>
</li>
<?php endforeach; ?>

2
wp-includes/class-wp-customize-setting.php
View File

@ -343,7 +343,7 @@ class WP_Customize_Setting {
<label>
<span><?php echo esc_html( $this->label ); ?></span>
<div class="color-picker">
<input class="color-picker-value" type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
<a href="#"></a>
<div class="color-picker-controls">
<div class="farbtastic-placeholder"></div>

13
wp-includes/customize-controls.php
View File

@ -49,7 +49,7 @@ do_action( 'customize_controls_print_scripts' );
<input type="hidden" name="customize" value="on" />
<input type="hidden" id="customize-template" name="template" value="<?php echo esc_attr( $theme['Template'] ); ?>" />
<input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
<div id="customize-header-actions" class="customize-section">&nbsp;</div>
<div id="customize-info" class="customize-section">
@ -94,13 +94,16 @@ do_action( 'customize_controls_print_scripts' );
// Check current scheme and load the preview with the same scheme
$scheme = is_ssl() ? 'https' : 'http';
$settings = array(
'preview' => esc_url( home_url( '/', $scheme ) ),
'values' => array(),
'prefix' => WP_Customize_Setting::name_prefix,
'preview' => esc_url( home_url( '/', $scheme ) ),
'controls' => array(),
'prefix' => WP_Customize_Setting::name_prefix,
);
foreach ( $this->settings as $id => $setting ) {
$settings['values'][ $id ] = $setting->value();
$settings['controls'][ $id ] = array(
'value' => $setting->value(),
'control' => $setting->control,
);
}
?>

2
wp-includes/js/customize-base.dev.js
View File

@ -152,7 +152,7 @@ if ( typeof wp === 'undefined' )
api.Value = api.Class.extend({
initialize: function( initial, options ) {
this._value = initial;
this._value = initial; // @todo: potentially change this to a this.set() call.
this.callbacks = $.Callbacks();
$.extend( this, options || {} );

138
wp-includes/js/customize-controls.dev.js
View File

@ -1,6 +1,78 @@
(function( exports, $ ){
var api = wp.customize;
/*
* @param options
* - previewer - The Previewer instance to sync with.
* - method - The method to use for syncing. Supports 'refresh' and 'postMessage'.
*/
api.Control = api.Value.extend({
initialize: function( id, value, options ) {
var name = '[name="' + api.settings.prefix + id + '"]';
api.Value.prototype.initialize.call( this, value, options );
this.id = id;
this.container = $( '#customize-control-' + id );
this.element = this.element || new api.Element( this.container.find( name ) );
this.method = this.method || 'refresh';
this.element.link( this );
this.link( this.element );
this.bind( this.sync );
},
sync: function() {
switch ( this.method ) {
case 'refresh':
return this.previewer.refresh();
case 'postMessage':
return this.previewer.send( 'setting', [ this.id, this() ] );
}
}
});
api.ColorControl = api.Control.extend({
initialize: function( id, value, options ) {
var self = this,
picker, ui, text, toggle, update;
api.Control.prototype.initialize.call( this, id, value, options );
picker = this.container.find( '.color-picker' );
ui = picker.find( '.color-picker-controls' );
toggle = picker.find( 'a' );
update = function( color ) {
color = '#' + color;
toggle.css( 'background', color );
self.farbtastic.setColor( color );
};
this.input = new api.Element( ui.find( 'input' ) ); // Find text input.
this.link( this.input );
this.input.link( this );
picker.on( 'click', 'a', function() {
ui.toggle();
});
this.farbtastic = $.farbtastic( picker.find('.farbtastic-placeholder'), function( color ) {
self.set( color.replace( '#', '' ) );
});
this.bind( update );
update( this() );
},
validate: function( to ) {
return /^[a-fA-F0-9]{3}([a-fA-F0-9]{3})?$/.test( to ) ? to : null;
}
});
// Change objects contained within the main customize object to Settings.
api.defaultConstructor = api.Setting;
api.Previewer = api.Messenger.extend({
refreshBuffer: 250,
@ -121,32 +193,26 @@
* Ready.
* ===================================================================== */
api.controls = {
color: api.ColorControl
};
$( function() {
if ( ! api.settings )
return;
var controls = $('[name^="' + api.settings.prefix + '"]'),
previewer, pickers, validateColor, sendSetting;
// Initialize Previewer
previewer = new api.Previewer({
var previewer = new api.Previewer({
iframe: '#customize-preview iframe',
form: '#customize-controls',
url: api.settings.preview
});
$.each( api.settings.values, function( id, value ) {
var elements = controls.filter( '[name="' + api.settings.prefix + id + '"]' ),
setting = api.set( id, value );
setting.control = new wp.customize.Element( elements );
setting.control.link( setting );
setting.link( setting.control );
setting.bind( previewer.refresh );
$.each( api.settings.controls, function( id, data ) {
var constructor = api.controls[ data.control ] || api.Control;
api.add( id, new constructor( id, data.value, {
previewer: previewer
} ) );
});
// Temporary accordion code.
@ -161,46 +227,8 @@
return false;
});
// Set up color pickers
pickers = $('.color-picker');
validateColor = function( to ) {
return /^[a-fA-F0-9]{3}([a-fA-F0-9]{3})?$/.test( to ) ? to : null;
};
$( '.farbtastic-placeholder', pickers ).each( function() {
var picker = $(this),
text = new api.Element( picker.siblings('input') ),
parent = picker.parent(),
toggle = parent.siblings('a'),
value = api( parent.siblings('input').prop('name').replace( api.settings.prefix, '' ) ),
farb, update;
value.validate = validateColor;
text.link( value );
value.link( text );
farb = $.farbtastic( this, function( color ) {
value.set( color.replace( '#', '' ) );
});
update = function( color ) {
color = '#' + color;
toggle.css( 'background', color );
farb.setColor( color );
};
value.bind( update );
update( value() );
});
$('.color-picker a').click( function(e) {
$(this).siblings('div').toggle();
});
// Background color uses postMessage by default
api('background_color').unbind( previewer.refresh ).bind( function() {
previewer.send( 'setting', [ 'background_color', this() ] );
});
api('background_color').method = 'postMessage';
});
})( wp, jQuery );