New color picker, props mattwiebe. see #21206.

Replaces Farbtastic. May change further in response to user testing.



git-svn-id: http://core.svn.wordpress.org/trunk@22030 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin
2012-09-27 01:57:38 +00:00
parent 9a0255e60d
commit 0b6cf76853
11 changed files with 295 additions and 135 deletions

View File

@@ -351,8 +351,8 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
* @since 3.4.0
*/
public function enqueue() {
wp_enqueue_script( 'farbtastic' );
wp_enqueue_style( 'farbtastic' );
wp_enqueue_script( 'wp-color-picker' );
wp_enqueue_style( 'wp-color-picker' );
}
/**
@@ -372,19 +372,20 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
* @since 3.4.0
*/
public function render_content() {
$this_default = $this->setting->default;
$default_attr = '';
if ( $this_default ) {
if ( false === strpos( $this_default, '#' ) )
$this_default = '#' . $this_default;
$default_attr = ' data-default-color="' . esc_attr( $this_default ) . '"';
}
// The input's value gets set by JS. Don't fill it.
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<div class="customize-control-content">
<div class="dropdown">
<div class="dropdown-content">
<div class="dropdown-status"></div>
</div>
<div class="dropdown-arrow"></div>
</div>
<input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e('Hex Value'); ?>" />
<input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>"<?php echo $default_attr ?> />
</div>
<div class="farbtastic-placeholder"></div>
</label>
<?php
}

View File

@@ -422,6 +422,15 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'farbtastic', '/wp-admin/js/farbtastic.js', array('jquery'), '1.2' );
$scripts->add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
$scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker$suffix.js", array( 'iris' ), false, 1 );
did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array(
'clear' => __( 'Clear' ),
'defaultString' => __( 'Default' ),
'pick' => __( 'Select Color' ),
'current' => __( 'Current Color' ),
) );
$scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 );
$scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" );
@@ -449,7 +458,7 @@ function wp_default_scripts( &$scripts ) {
'saveAlert' => __('The changes you made will be lost if you navigate away from this page.')
) );
$scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('farbtastic'), false, 1 );
$scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array( 'wp-color-picker' ), false, 1 );
$scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );
}
}
@@ -502,6 +511,7 @@ function wp_default_styles( &$styles ) {
$styles->add( 'install', "/wp-admin/css/install$suffix.css" );
$styles->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.css' );
$styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.3u1' );
$styles->add( 'wp-color-picker', "/wp-admin/css/color-picker$suffix.css" );
$styles->add( 'jcrop', "/wp-includes/js/jcrop/jquery.Jcrop.min.css", array(), '0.9.10' );
$styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.8' );
$styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css" );