mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-23 09:37:42 +01:00
Twenty Eleven: Fix up the color picker JS. Use a separate color swatch rather than the input background. While cool, it doesn't have suffficient contrast. Also set farbtastic as a JS dependency. see #17198.
git-svn-id: http://svn.automattic.com/wordpress/trunk@17737 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
c85ae9cc94
commit
4964598cea
@ -19,4 +19,13 @@
|
||||
}
|
||||
.image-radio-option img {
|
||||
margin: 0 0 0 -2px;
|
||||
}
|
||||
#link-color-example {
|
||||
padding: 4px 14px;
|
||||
margin: 0 7px 0 3px;
|
||||
-moz-border-radius: 4px;
|
||||
-khtml-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dfdfdf;
|
||||
}
|
@ -1,39 +1,35 @@
|
||||
var farbtastic;
|
||||
function pickColor(a) {
|
||||
farbtastic.setColor(a);
|
||||
jQuery("#link-color").val(a);
|
||||
jQuery("#link-color").css("background-color", a);
|
||||
}
|
||||
jQuery(document).ready(function() {
|
||||
jQuery("#pickcolor").click(function() {
|
||||
jQuery("#colorPickerDiv").show();
|
||||
return false;
|
||||
});
|
||||
jQuery("#link-color").keyup(function() {
|
||||
var b = jQuery("#link-color").val(),
|
||||
a = b;
|
||||
if (a.charAt(0) != "#") {
|
||||
a = "#" + a;
|
||||
}
|
||||
a = a.replace(/[^#a-fA-F0-9]+/, "");
|
||||
if (a != b) {
|
||||
jQuery("#link-color").val(a);
|
||||
}
|
||||
if (a.length == 4 || a.length == 7) {
|
||||
pickColor(a);
|
||||
}
|
||||
});
|
||||
farbtastic = jQuery.farbtastic("#colorPickerDiv",
|
||||
function(a) {
|
||||
pickColor(a);
|
||||
});
|
||||
pickColor(jQuery("#link-color").val());
|
||||
jQuery(document).mousedown(function() {
|
||||
jQuery("#colorPickerDiv").each(function() {
|
||||
var a = jQuery(this).css("display");
|
||||
if (a == "block") {
|
||||
jQuery(this).fadeOut(2);
|
||||
}
|
||||
|
||||
(function($){
|
||||
var pickColor = function(a) {
|
||||
farbtastic.setColor(a);
|
||||
$('#link-color').val(a);
|
||||
$('#link-color-example').css('background-color', a);
|
||||
}
|
||||
|
||||
$(document).ready( function() {
|
||||
farbtastic = $.farbtastic('#colorPickerDiv', pickColor);
|
||||
|
||||
pickColor( $('#link-color').val() );
|
||||
|
||||
$('#pickcolor').click( function(e) {
|
||||
$('#colorPickerDiv').show();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$('#link-color').keyup( function() {
|
||||
var a = $('#link-color').val(),
|
||||
b = a;
|
||||
|
||||
a = a.replace(/[^a-fA-F0-9]/, '');
|
||||
if ( '#' + a !== b )
|
||||
$('#link-color').val(a);
|
||||
if ( a.length === 3 || a.length === 6 )
|
||||
pickColor( '#' + a );
|
||||
});
|
||||
|
||||
$(document).mousedown( function() {
|
||||
$('#colorPickerDiv').hide();
|
||||
});
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
@ -21,10 +21,9 @@ function twentyeleven_admin_enqueue_scripts( $hook_suffix ) {
|
||||
if ( $hook_suffix != 'appearance_page_theme_options' )
|
||||
return;
|
||||
|
||||
wp_enqueue_style( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.css', '', '0.1' );
|
||||
wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js' );
|
||||
wp_enqueue_style( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.css', false, '2011-04-28' );
|
||||
wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js', array( 'farbtastic' ), '2011-04-28' );
|
||||
wp_enqueue_style( 'farbtastic' );
|
||||
wp_enqueue_script( 'farbtastic' );
|
||||
}
|
||||
add_action( 'admin_enqueue_scripts', 'twentyeleven_admin_enqueue_scripts' );
|
||||
|
||||
@ -193,7 +192,7 @@ function theme_options_render_page() {
|
||||
<td>
|
||||
<fieldset><legend class="screen-reader-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend>
|
||||
<input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
|
||||
<a class="hide-if-no-js" href="#" id="pickcolor"><?php _e( 'Select a Color', 'twentyeleven' ); ?></a>
|
||||
<span id="link-color-example"></span> <a class="hide-if-no-js" href="#" id="pickcolor"><?php _e( 'Select a Color', 'twentyeleven' ); ?></a>
|
||||
<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
|
||||
<br />
|
||||
<small class="description"><?php printf( __( 'Default color: %s', 'twentyeleven' ), $default_options['link_color'] ); ?></small>
|
||||
|
Loading…
Reference in New Issue
Block a user