Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-12-22 17:18:32 +01:00
Code Issues Projects Releases Wiki Activity

New color picker, props mattwiebe. see #21206.

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
wp-admin/css/color-picker.css Normal file
View File

@ -0,0 +1,105 @@
.wp-color-picker {
width: 80px;
}
.wp-picker-container .hidden {
display: none;
}
.wp-color-result {
background-color: #f9f9f9;
border: 1px solid #c4c4c4;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
box-shadow: inset 1px 1px 0 rgba(0,0,0,.05);
-moz-box-shadow: inset 1px 1px 0 rgba(0,0,0,.05);
-ms-box-shadow: inset 1px 1px 0 rgba(0,0,0,.05);
-o-box-shadow: inset 1px 1px 0 rgba(0,0,0,.05);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.05);
cursor: pointer;
display: inline-block;
height: 21px;
margin: 0 6px 1px 0px;
position: relative;
top: 1px;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
vertical-align: bottom;
display: inline-block;
padding-left: 30px;
}
.wp-color-result::after {
background-color: #f9f9f9;
background-image: -moz-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -ms-linear-gradient(top, #fff 0%, #eee 100%);
background-image: -o-linear-gradient(top, #fff 0%, #eee 100%);
background-image: linear-gradient(top, #fff 0%, #eee 100%);
-moz-border-radius-bottomright: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
border-bottom-right-radius: 3px;
border-left: 1px solid #c4c4c4;
content: attr( title );
color: #555;
display: block;
font-size: 11px;
line-height: 21px;
padding: 0 6px;
position: relative;
right: 0px;
text-align: center;
top: 0px;
}
.wp-color-result:hover {
border-color: #aaa;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-ms-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-o-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.wp-color-result:hover:after {
color: #222;
border-color: #aaa;
border-left: 1px solid #999;
}
.wp-color-result.wp-picker-open {
top: 0;
/*width: 5px;*/
}
.wp-color-result.wp-picker-open:after {
content: attr( data-current );
}
.wp-picker-container, .wp-picker-container:active {
display: inline-block;
outline: 0;
}
.wp-color-result:focus {
border-color: #888;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.wp-color-result:focus:after {
border-color: #888;
}
.wp-picker-container .button {
margin-left: 6px;
}
.wp-picker-container .iris-square-slider .ui-slider-handle:focus {
background-color: #555
}
.wp-picker-container .iris-picker {
border-color: #dfdfdf;
margin-top: 6px;
}
input[type="text"].iris-error {
background-color: #ffebe8;
border-color: #c00;
color: #000;
}

0
wp-admin/css/color-picker.min.css vendored Normal file
View File

13
wp-admin/custom-background.php
View File

@ -108,7 +108,7 @@ class Custom_Background {
add_thickbox();
wp_enqueue_script('media-upload');
wp_enqueue_script('custom-background');
wp_enqueue_style('farbtastic');
wp_enqueue_style('wp-color-picker');
}
/**
@ -327,11 +327,12 @@ if ( get_background_image() ) {
<tr valign="top">
<th scope="row"><?php _e( 'Background Color' ); ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
<?php $show_clear = get_theme_mod('background_color') ? '' : ' style="display:none"'; ?>
<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
<a class="hide-if-no-js" href="#" id="pickcolor"><?php _e('Select a Color'); ?></a> <span<?php echo $show_clear; ?> class="hide-if-no-js" id="clearcolor"> (<a href="#"><?php current_theme_supports( 'custom-background', 'default-color' ) ? _e( 'Default' ) : _e( 'Clear' ); ?></a>)</span>
<input type="hidden" id="defaultcolor" value="<?php if ( current_theme_supports( 'custom-background', 'default-color' ) ) echo '#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ); ?>" />
<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
<?php
$default_color = '';
if ( current_theme_supports( 'custom-background', 'default-color' ) )
$default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '"';
?>
<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?> />
</fieldset></td>
</tr>
</tbody>

65
wp-admin/custom-header.php
View File

@ -175,7 +175,7 @@ class Custom_Image_Header {
wp_enqueue_script( 'media-upload' );
wp_enqueue_script( 'custom-header' );
if ( current_theme_supports( 'custom-header', 'header-text' ) )
wp_enqueue_script('farbtastic');
wp_enqueue_script( 'wp-color-picker' );
} elseif ( 2 == $step ) {
wp_enqueue_script('imgareaselect');
}
@ -190,7 +190,7 @@ class Custom_Image_Header {
$step = $this->step();
if ( ( 1 == $step || 3 == $step ) && current_theme_supports( 'custom-header', 'header-text' ) )
wp_enqueue_style('farbtastic');
wp_enqueue_style( 'wp-color-picker' );
elseif ( 2 == $step )
wp_enqueue_style('imgareaselect');
}
@ -332,7 +332,6 @@ class Custom_Image_Header {
function js_1() { ?>
<script type="text/javascript">
/* <![CDATA[ */
var farbtastic;
(function($){
var default_color = '#<?php echo get_theme_support( 'custom-header', 'default-text-color' ); ?>',
header_text_fields;
@ -341,7 +340,6 @@ var farbtastic;
$('#name').css('color', color);
$('#desc').css('color', color);
$('#text-color').val(color);
farbtastic.setColor(color);
}
function toggle_text() {
@ -360,45 +358,20 @@ var farbtastic;
}
$(document).ready(function() {
var text_color = $('#text-color');
header_text_fields = $('.displaying-header-text');
$('#pickcolor').click(function(e) {
e.preventDefault();
$('#color-picker').show();
text_color.wpColorPicker({
change: function( event, ui ) {
pickColor( text_color.wpColorPicker('color') );
},
clear: function() {
pickColor( '' );
}
});
$('#display-header-text').click( toggle_text );
$('#defaultcolor').click(function() {
pickColor(default_color);
$('#text-color').val(default_color);
});
$('#text-color').keyup(function() {
var _hex = $('#text-color').val();
var hex = _hex;
if ( hex[0] != '#' )
hex = '#' + hex;
hex = hex.replace(/[^#a-fA-F0-9]+/, '');
if ( hex != _hex )
$('#text-color').val(hex);
if ( hex.length == 4 || hex.length == 7 )
pickColor( hex );
});
$(document).mousedown(function(){
$('#color-picker').each( function() {
var display = $(this).css('display');
if (display == 'block')
$(this).fadeOut(2);
});
});
farbtastic = $.farbtastic('#color-picker', function(color) { pickColor(color); });
<?php if ( display_header_text() ) { ?>
pickColor('#<?php echo get_header_textcolor(); ?>');
<?php } else { ?>
<?php if ( ! display_header_text() ) : ?>
toggle_text();
<?php } ?>
<?php endif; ?>
});
})(jQuery);
/* ]]> */
@ -647,14 +620,14 @@ var farbtastic;
<th scope="row"><?php _e( 'Text Color' ); ?></th>
<td>
<p>
<?php if ( display_header_text() ) : ?>
<input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( get_header_textcolor() ); ?>" />
<?php else : ?>
<input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ); ?>" />
<?php endif; ?>
<a href="#" class="hide-if-no-js" id="pickcolor"><?php _e( 'Select a Color' ); ?></a>
<?php
$header_textcolor = display_header_text() ? get_header_textcolor() : get_theme_support( 'custom-header', 'default-text-color' );
$default_color = '';
if ( current_theme_supports( 'custom-header', 'default-text-color' ) )
$default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ) . '"';
?>
<input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( $header_textcolor ); ?>"<?php echo $default_color; ?> />
</p>
<div id="color-picker" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
</td>
</tr>

119
wp-admin/js/color-picker.js Normal file
View File

@ -0,0 +1,119 @@
( function( $, undef ){
// html stuff
var _before = '<a tabindex="0" class="wp-color-result" />';
var _after = '<div class="wp-picker-holder" />';
var _wrap = '<div class="wp-picker-container" />';
var _button = '<input type="button" class="button button-tiny hidden" />';
// jQuery UI Widget constructor
var ColorPicker = {
options: {
defaultColor: false,
change: false,
clear: false,
hide: true
},
_create: function() {
// bail early for IE < 8
if ( $.browser.msie && parseInt( $.browser.version, 10 ) < 8 )
return;
var self = this;
var el = self.element;
$.extend( self.options, el.data() );
self.initialValue = el.val();
// Set up HTML structure, hide things
el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
self.wrap = el.parent();
self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( "title", wpColorPickerL10n.pick ).attr( "data-current", wpColorPickerL10n.current );
self.pickerContainer = $( _after ).insertAfter( el );
self.button = $( _button );
if ( self.options.defaultColor )
self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
else
self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
self.button.insertAfter( el );
el.iris( {
target: self.pickerContainer,
hide: true,
change: function( event, ui ) {
self.toggler.css( { backgroundColor: ui.color.toString() } );
// check for a custom cb
if ( $.isFunction( self.options.change ) )
self.options.change.call( this, event, ui );
}
} );
el.val( self.initialValue );
self._addListeners();
if ( ! self.options.hide )
self.toggler.click();
},
_addListeners: function() {
var self = this;
self.toggler.click( function( event ){
event.stopPropagation();
self.element.toggle().iris( 'toggle' );
self.button.toggleClass('hidden');
self.toggler.toggleClass( 'wp-picker-open' );
// close picker when you click outside it
if ( self.toggler.hasClass( 'wp-picker-open' ) )
$( "body" ).on( 'click', { wrap: self.wrap, toggler: self.toggler }, self._bodyListener );
else
$( "body" ).off( 'click', self._bodyListener );
});
self.element.change(function( event ) {
var me = $(this),
val = me.val();
// Empty = clear
if ( val === '' || val === '#' ) {
self.toggler.css('backgroundColor', '');
// fire clear callback if we have one
if ( $.isFunction( self.options.clear ) )
self.options.clear.call( this, event );
}
});
// open a keyboard-focused closed picker with space or enter
$( document ).keydown( function( e ) {
if ( self.toggler.is( ':focus' ) && ( e.keyCode === 13 || e.keyCode === 32 ) ) {
e.preventDefault();
self.toggler.trigger('click').next().focus();
}
});
self.button.click( function( event ) {
var me = $(this);
if ( me.hasClass( 'wp-picker-clear' ) ) {
self.element.val( '' );
self.toggler.css('backgroundColor', '');
if ( $.isFunction( self.options.clear ) )
self.options.clear.call( this, event );
} else if ( me.hasClass( 'wp-picker-default' ) ) {
self.element.val( self.options.defaultColor ).change();
}
});
},
_bodyListener: function( event ) {
if ( ! event.data.wrap.find( event.target ).length )
event.data.toggler.click();
},
// $("#input").wpColorPicker('color') returns the current color
// $("#input").wpColorPicker('color', '#bada55') to set
color: function( newColor ) {
if ( newColor === undef )
return this.element.iris( "option", "color" );
this.element.iris( "option", "color", newColor );
}
}
$.widget( 'wp.wpColorPicker', ColorPicker );
}( jQuery ) );

0
wp-admin/js/color-picker.min.js vendored Normal file
View File

62
wp-admin/js/custom-background.js
View File

@ -1,65 +1,23 @@
var farbtastic, pickColor;
(function($) {
var defaultColor = '';
pickColor = function(color) {
farbtastic.setColor(color);
$('#background-color').val(color);
$('#custom-background-image').css('background-color', color);
// If we have a default color, and they match, then we need to hide the 'Default' link.
// Otherwise, we hide the 'Clear' link when it is empty.
if ( ( defaultColor && color === defaultColor ) || ( ! defaultColor && ( '' === color || '#' === color ) ) )
$('#clearcolor').hide();
else
$('#clearcolor').show();
}
$(document).ready(function() {
var bgImage = $("#custom-background-image");
defaultColor = $('#defaultcolor').val();
$('#pickcolor').click(function() {
$('#colorPickerDiv').show();
return false;
});
$('#clearcolor a').click( function(e) {
pickColor( defaultColor );
e.preventDefault();
});
$('#background-color').keyup(function() {
var _hex = $('#background-color').val(), hex = _hex;
if ( hex.charAt(0) != '#' )
hex = '#' + hex;
hex = hex.replace(/[^#a-fA-F0-9]+/, '');
if ( hex != _hex )
$('#background-color').val(hex);
if ( hex.length == 4 || hex.length == 7 )
pickColor( hex );
$('#background-color').wpColorPicker({
change: function( event, ui ) {
bgImage.css('background-color', ui.color.toString());
},
clear: function() {
bgImage.css('background-color', '');
}
});
$('input[name="background-position-x"]').change(function() {
$('#custom-background-image').css('background-position', $(this).val() + ' top');
bgImage.css('background-position', $(this).val() + ' top');
});
$('input[name="background-repeat"]').change(function() {
$('#custom-background-image').css('background-repeat', $(this).val());
});
farbtastic = $.farbtastic('#colorPickerDiv', function(color) {
pickColor(color);
});
pickColor($('#background-color').val());
$(document).mousedown(function(){
$('#colorPickerDiv').each(function(){
var display = $(this).css('display');
if ( display == 'block' )
$(this).fadeOut(2);
});
bgImage.css('background-repeat', $(this).val());
});
});

29
wp-admin/js/customize-controls.js
View File

@ -109,27 +109,16 @@
api.ColorControl = api.Control.extend({
ready: function() {
var control = this,
rhex, spot, input, text, update;
picker = this.container.find('.color-picker-hex');
rhex = /^#([A-Fa-f0-9]{3}){0,2}$/;
spot = this.container.find('.dropdown-content');
input = new api.Element( this.container.find('.color-picker-hex') );
update = function( color ) {
spot.css( 'background', color );
control.farbtastic.setColor( color );
};
this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), control.setting.set );
// Only pass through values that are valid hexes/empty.
input.sync( this.setting ).validate = function( to ) {
return rhex.test( to ) ? to : null;
};
this.setting.bind( update );
update( this.setting() );
this.dropdownInit();
picker.val( control.setting() ).wpColorPicker({
change: function( event, options ) {
control.setting.set( picker.wpColorPicker('color') );
},
clear: function() {
control.setting.set( false );
}
});
}
});

4
wp-admin/js/iris.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

21
wp-includes/class-wp-customize-control.php
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
}

12
wp-includes/script-loader.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" );