Permalink
Browse files

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
  • Loading branch information...
1 parent 9a0255e commit 0b6cf768538d9668c39356b1df7b55945facdbf2 @nacin nacin committed Sep 27, 2012
@@ -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;
+}
No changes.
@@ -108,7 +108,7 @@ function admin_load() {
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 @@ function admin_page() {
<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>
@@ -175,7 +175,7 @@ function js_includes() {
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 @@ function css_includes() {
$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 @@ function js() {
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 @@ function pickColor(color) {
$('#name').css('color', color);
$('#desc').css('color', color);
$('#text-color').val(color);
- farbtastic.setColor(color);
}
function toggle_text() {
@@ -360,45 +358,20 @@ function toggle_text() {
}
$(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 @@ function step_1() {
<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>
@@ -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 ) );
No changes.
Oops, something went wrong. Retry.

0 comments on commit 0b6cf76

Please sign in to comment.