golem
/
twentyGOLEM
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Theme Customizer: Add working color pickers. First pass. see #19910. 

git-svn-id: http://svn.automattic.com/wordpress/trunk@20120 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2012-03-06 02:03:50 +00:00
parent 08a7de8ab1
commit 380985868b
3 changed files with 70 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -340,10 +340,17 @@ class WP_Customize_Setting {
break;
case 'color':
?>
<label><?php echo esc_html( $this->label ); ?><br/>
<span class="hex-prepend">#</span>
<input type="text" class="hex-input" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
<a href="#" class="pickcolor hex-color-example"></a>
<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(); ?> />
<a href="#"></a>
<div class="color-picker-controls">
<div class="farbtastic-placeholder"></div>
<span>#</span>
<input type="text" />
</div>
</div>
</label>
<?php
break;

34
wp-includes/css/customize-controls.dev.css
View File

@ -226,7 +226,29 @@ body {
max-width: 150px;
}
.customize-section .hex-prepend {
/*
* Color Picker
*/
.customize-section .color-picker {
margin-top: 4px;
}
.customize-section .color-picker a {
display: block;
height: 20px;
width: 40px;
border: solid 3px rgba( 0, 0, 0, 0.1 );
background-color: #fff;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.customize-section .color-picker .color-picker-controls {
display: none;
}
.customize-section .color-picker span {
float: left;
display: block;
margin: 1px -2px 0 0;
@ -240,16 +262,8 @@ body {
border-radius: 3px 0 0 3px;
}
.customize-section input[type="text"].hex-input {
.customize-section .color-picker input[type="text"] {
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
width: 150px;
}
.customize-section .hex-color-example {
border: 1px solid #dfdfdf;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 3px 14px;
background-color: #ef45da
}

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

@ -126,8 +126,8 @@
if ( ! api.settings )
return;
var previewer,
controls = $('[name^="' + api.settings.prefix + '"]');
var controls = $('[name^="' + api.settings.prefix + '"]'),
previewer, pickers, validateColor;
// Initialize Previewer
previewer = new api.Previewer({
@ -160,6 +160,39 @@
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;
value.validate = validateColor;
text.link( value );
value.link( text );
farb = $.farbtastic( this, function( color ) {
value.set( color.replace( '#', '' ) );
});
value.bind( function( color ) {
color = '#' + color;
toggle.css( 'background', color );
farb.setColor( color );
});
});
$('.color-picker a').click( function(e) {
$(this).siblings('div').toggle();
});
// Fetch prefixed settings.
$('[name^="' + api.settings.prefix + '"]').each( function() {
// console.log( this.name );