mirror of
https://github.com/WordPress/WordPress.git
synced 2024-09-27 06:42:56 +02:00
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;
|
||||
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;
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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 );
|
||||
|
Loading…
Reference in New Issue
Block a user