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:
parent
08a7de8ab1
commit
380985868b
|
@ -340,10 +340,17 @@ class WP_Customize_Setting {
|
||||||
break;
|
break;
|
||||||
case 'color':
|
case 'color':
|
||||||
?>
|
?>
|
||||||
<label><?php echo esc_html( $this->label ); ?><br/>
|
<label>
|
||||||
<span class="hex-prepend">#</span>
|
<span><?php echo esc_html( $this->label ); ?></span>
|
||||||
<input type="text" class="hex-input" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
|
<div class="color-picker">
|
||||||
<a href="#" class="pickcolor hex-color-example"></a>
|
<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>
|
</label>
|
||||||
<?php
|
<?php
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -226,7 +226,29 @@ body {
|
||||||
max-width: 150px;
|
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;
|
float: left;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 1px -2px 0 0;
|
margin: 1px -2px 0 0;
|
||||||
|
@ -240,16 +262,8 @@ body {
|
||||||
border-radius: 3px 0 0 3px;
|
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;
|
-webkit-border-radius: 0 3px 3px 0;
|
||||||
border-radius: 0 3px 3px 0;
|
border-radius: 0 3px 3px 0;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.customize-section .hex-color-example {
|
|
||||||
border: 1px solid #dfdfdf;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 3px 14px;
|
|
||||||
background-color: #ef45da
|
|
||||||
}
|
|
||||||
|
|
|
@ -126,8 +126,8 @@
|
||||||
if ( ! api.settings )
|
if ( ! api.settings )
|
||||||
return;
|
return;
|
||||||
|
|
||||||
var previewer,
|
var controls = $('[name^="' + api.settings.prefix + '"]'),
|
||||||
controls = $('[name^="' + api.settings.prefix + '"]');
|
previewer, pickers, validateColor;
|
||||||
|
|
||||||
// Initialize Previewer
|
// Initialize Previewer
|
||||||
previewer = new api.Previewer({
|
previewer = new api.Previewer({
|
||||||
|
@ -160,6 +160,39 @@
|
||||||
return false;
|
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.
|
// Fetch prefixed settings.
|
||||||
$('[name^="' + api.settings.prefix + '"]').each( function() {
|
$('[name^="' + api.settings.prefix + '"]').each( function() {
|
||||||
// console.log( this.name );
|
// console.log( this.name );
|
||||||
|
|
Loading…
Reference in New Issue