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

Custom background UI updates. props ocean90 for initial patch, see #12186. 

git-svn-id: http://svn.automattic.com/wordpress/trunk@14684 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
nacin 2010-05-16 05:17:57 +00:00
parent fa29e51128
commit d6e2ef4dbf
5 changed files with 42 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
wp-admin/custom-background.php
View File

@ -91,6 +91,7 @@ class Custom_Background {
remove_theme_mod('background_image_thumb'); remove_theme_mod('background_image_thumb');
return; return;
} }
if ( isset($_POST['remove-background']) ) { if ( isset($_POST['remove-background']) ) {
// @TODO: Uploaded files are not removed here. // @TODO: Uploaded files are not removed here.
check_admin_referer('custom-background-remove', '_wpnonce-custom-background-remove'); check_admin_referer('custom-background-remove', '_wpnonce-custom-background-remove');
@ -107,14 +108,16 @@ class Custom_Background {
$repeat = 'repeat'; $repeat = 'repeat';
set_theme_mod('background_repeat', $repeat); set_theme_mod('background_repeat', $repeat);
} }
if ( isset($_POST['background-position']) ) {
if ( isset($_POST['background-position-x']) ) {
check_admin_referer('custom-background'); check_admin_referer('custom-background');
if ( in_array($_POST['background-position'], array('center', 'right', 'left')) ) if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) )
$position = $_POST['background-position']; $position = $_POST['background-position-x'];
else else
$position = 'left'; $position = 'left';
set_theme_mod('background_position', $position); set_theme_mod('background_position_x', $position);
} }
if ( isset($_POST['background-attachment']) ) { if ( isset($_POST['background-attachment']) ) {
check_admin_referer('custom-background'); check_admin_referer('custom-background');
if ( in_array($_POST['background-attachment'], array('fixed', 'scroll')) ) if ( in_array($_POST['background-attachment'], array('fixed', 'scroll')) )
@ -123,6 +126,7 @@ class Custom_Background {
$attachment = 'fixed'; $attachment = 'fixed';
set_theme_mod('background_attachment', $attachment); set_theme_mod('background_attachment', $attachment);
} }
if ( isset($_POST['background-color']) ) { if ( isset($_POST['background-color']) ) {
check_admin_referer('custom-background'); check_admin_referer('custom-background');
$color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['background-color']); $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['background-color']);
@ -155,33 +159,29 @@ class Custom_Background {
call_user_func($this->admin_image_div_callback); call_user_func($this->admin_image_div_callback);
} else { } else {
?> ?>
<h3><?php _e('Background Preview'); ?></h3> <h3><?php _e('Background Image'); ?></h3>
<table class="form-table"> <table class="form-table">
<tbody> <tbody>
<tr valign="top"> <tr valign="top">
<th scope="row"><?php _e('Current Background'); ?></th> <th scope="row"><?php _e('Preview'); ?></th>
<td> <td>
<?php <?php
$background_styles = ''; $background_styles = '';
if ( $bgcolor = get_background_color() ) { if ( $bgcolor = get_background_color() )
$background_styles .= "background-color: #{$bgcolor};"; $background_styles .= 'background-color: #' . $bgcolor . ';';
}
if ( get_background_image() ) { if ( get_background_image() ) {
$background_styles .= " // background-image URL must be single quote, see below
background-image: url(" . get_theme_mod('background_image_thumb', '') . "); $background_styles .= ' background-image: url(\'' . get_theme_mod('background_image_thumb', '') . '\');'
background-repeat: ". get_theme_mod('background_repeat', 'repeat') . "; . ' background-repeat: ' . get_theme_mod('background_repeat', 'repeat') . ';'
background-position: ". get_theme_mod('background_position', 'left') . " top; . ' background-position: top ' . get_theme_mod('background_position_x', 'left');
background-attachment: " . get_theme_mod('background_attachment', 'fixed') . ";
";
} }
?> ?>
<div id="custom-background-image" style="<?php echo $background_styles; ?>"> <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
<?php if ( get_background_image() ) { ?> <?php if ( get_background_image() ) { ?>
<img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" /><br /> <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" /><br />
<img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" /> <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" />
<?php } ?> <?php } ?>
<br class="clear" />
</div> </div>
<?php } ?> <?php } ?>
</td> </td>
@ -189,10 +189,11 @@ if ( get_background_image() ) {
<?php if ( get_background_image() ) : ?> <?php if ( get_background_image() ) : ?>
<tr valign="top"> <tr valign="top">
<th scope="row"><?php _e('Remove Image'); ?></th> <th scope="row"><?php _e('Remove Image'); ?></th>
<td><p><?php _e('This will remove the background image. You will not be able to restore any customizations.') ?></p> <td>
<form method="post" action=""> <form method="post" action="">
<?php wp_nonce_field('custom-background-remove', '_wpnonce-custom-background-remove'); ?> <?php wp_nonce_field('custom-background-remove', '_wpnonce-custom-background-remove'); ?>
<input type="submit" class="button" name="remove-background" value="<?php esc_attr_e('Remove Background'); ?>" /> <input type="submit" class="button" name="remove-background" value="<?php esc_attr_e('Remove Background Image'); ?>" /><br/>
<?php _e('This will remove the background image. You will not be able to restore any customizations.') ?>
</form> </form>
</td> </td>
</tr> </tr>
@ -201,10 +202,11 @@ if ( get_background_image() ) {
<?php if ( defined( 'BACKGROUND_IMAGE' ) ) : // Show only if a default background image exists ?> <?php if ( defined( 'BACKGROUND_IMAGE' ) ) : // Show only if a default background image exists ?>
<tr valign="top"> <tr valign="top">
<th scope="row"><?php _e('Restore Original Image'); ?></th> <th scope="row"><?php _e('Restore Original Image'); ?></th>
<td><p><?php _e('This will restore the original background image. You will not be able to restore any customizations.') ?></p> <td>
<form method="post" action=""> <form method="post" action="">
<?php wp_nonce_field('custom-background-reset', '_wpnonce-custom-background-reset'); ?> <?php wp_nonce_field('custom-background-reset', '_wpnonce-custom-background-reset'); ?>
<input type="submit" class="button" name="reset-background" value="<?php esc_attr_e('Restore Original Image'); ?>" /> <input type="submit" class="button" name="reset-background" value="<?php esc_attr_e('Restore Original Image'); ?>" /><br/>
<?php _e('This will restore the original background image. You will not be able to restore any customizations.') ?>
</form> </form>
</td> </td>
</tr> </tr>
@ -216,8 +218,7 @@ if ( get_background_image() ) {
<label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br /><input type="file" id="upload" name="import" /> <label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br /><input type="file" id="upload" name="import" />
<input type="hidden" name="action" value="save" /> <input type="hidden" name="action" value="save" />
<?php wp_nonce_field('custom-background-upload', '_wpnonce-custom-background-upload') ?> <?php wp_nonce_field('custom-background-upload', '_wpnonce-custom-background-upload') ?>
<p class="submit"> <input type="submit" class="button" value="<?php esc_attr_e('Upload'); ?>" />
<input type="submit" value="<?php esc_attr_e('Upload'); ?>" />
</p> </p>
</form> </form>
</td> </td>
@ -230,28 +231,27 @@ if ( get_background_image() ) {
<table class="form-table"> <table class="form-table">
<tbody> <tbody>
<tr valign="top"> <tr valign="top">
<th scope="row"><?php _e( 'Background Color' ); ?></th> <th scope="row"><?php _e( 'Color' ); ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend> <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" /> <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
<input type="button" class="button" value="<?php esc_attr_e('Select a Color'); ?>" id="pickcolor" /> <input type="button" class="button" value="<?php esc_attr_e('Select a Color'); ?>" id="pickcolor" />
<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div> <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
</fieldset></td> </fieldset></td>
</tr> </tr>
<?php if ( get_background_image() ) : ?>
<tr valign="top"> <tr valign="top">
<th scope="row"><?php _e( 'Background Position' ); ?></th> <th scope="row"><?php _e( 'Position' ); ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend> <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
<label> <label>
<input name="background-position" type="radio" value="left" <?php checked('left', get_theme_mod('background_position', 'left')); ?> /> <input name="background-position-x" type="radio" value="left"<?php checked('left', get_theme_mod('background_position_x', 'left')); ?> />
<?php _e('Left') ?> <?php _e('Left') ?>
</label> </label>
<label> <label>
<input name="background-position" type="radio" value="center" <?php checked('center', get_theme_mod('background_position', 'left')); ?> /> <input name="background-position-x" type="radio" value="center"<?php checked('center', get_theme_mod('background_position_x', 'left')); ?> />
<?php _e('Center') ?> <?php _e('Center') ?>
</label> </label>
<label> <label>
<input name="background-position" type="radio" value="right" <?php checked('right', get_theme_mod('background_position', 'left')); ?> /> <input name="background-position-x" type="radio" value="right"<?php checked('right', get_theme_mod('background_position_x', 'left')); ?> />
<?php _e('Right') ?> <?php _e('Right') ?>
</label> </label>
</fieldset></td> </fieldset></td>
@ -262,10 +262,10 @@ if ( get_background_image() ) {
<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Repeat' ); ?></span></legend> <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Repeat' ); ?></span></legend>
<label> <label>
<select name="background-repeat"> <select name="background-repeat">
<option value="no-repeat" <?php selected('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> ><?php _e('No repeat'); ?></option> <option value="no-repeat"<?php selected('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> ><?php _e('No repeat'); ?></option>
<option value="repeat" <?php selected('repeat', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile'); ?></option> <option value="repeat"<?php selected('repeat', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile'); ?></option>
<option value="repeat-x" <?php selected('repeat-x', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Horizontally'); ?></option> <option value="repeat-x"<?php selected('repeat-x', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Horizontally'); ?></option>
<option value="repeat-y" <?php selected('repeat-y', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Vertically'); ?></option> <option value="repeat-y"<?php selected('repeat-y', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Vertically'); ?></option>
</select> </select>
</label> </label>
</fieldset></td> </fieldset></td>
@ -284,7 +284,7 @@ if ( get_background_image() ) {
</label> </label>
</fieldset></td> </fieldset></td>
</tr> </tr>
<?php endif; // get_background_image() ?>
</tbody> </tbody>
</table> </table>

11
wp-admin/js/custom-background.dev.js
View File

@ -12,8 +12,7 @@ jQuery(document).ready(function() {
}); });
jQuery('#background-color').keyup(function() { jQuery('#background-color').keyup(function() {
var _hex = jQuery('#background-color').val(); var _hex = jQuery('#background-color').val(), hex = _hex;
var hex = _hex;
if ( hex[0] != '#' ) if ( hex[0] != '#' )
hex = '#' + hex; hex = '#' + hex;
hex = hex.replace(/[^#a-fA-F0-9]+/, ''); hex = hex.replace(/[^#a-fA-F0-9]+/, '');
@ -23,17 +22,13 @@ jQuery(document).ready(function() {
pickColor( hex ); pickColor( hex );
}); });
jQuery('input[name="background-position"]').change(function() { jQuery('input[name="background-position-x"]').change(function() {
jQuery('#custom-background-image').css('background-position', 'top ' + jQuery(this).val()); jQuery('#custom-background-image').css('background-position', jQuery(this).val() + ' top');
}); });
jQuery('select[name="background-repeat"]').change(function() { jQuery('select[name="background-repeat"]').change(function() {
jQuery('#custom-background-image').css('background-repeat', jQuery(this).val()); jQuery('#custom-background-image').css('background-repeat', jQuery(this).val());
}); });
jQuery('input[name="background-attachment"]').change(function() {
jQuery('#custom-background-image').css('background-attachment', jQuery(this).val());
});
farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) { farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) {
pickColor(color); pickColor(color);

2
wp-admin/js/custom-background.js
View File

@ -1 +1 @@
var farbtastic;function pickColor(a){farbtastic.setColor(a);jQuery("#background-color").val(a);jQuery("#custom-background-image").css("background-color",a)}jQuery(document).ready(function(){jQuery("#pickcolor").click(function(){jQuery("#colorPickerDiv").show()});jQuery("#background-color").keyup(function(){var b=jQuery("#background-color").val();var a=b;if(a[0]!="#"){a="#"+a}a=a.replace(/[^#a-fA-F0-9]+/,"");if(a!=b){jQuery("#background-color").val(a)}if(a.length==4||a.length==7){pickColor(a)}});jQuery('input[name="background-position"]').change(function(){jQuery("#custom-background-image").css("background-position","top "+jQuery(this).val())});jQuery('select[name="background-repeat"]').change(function(){jQuery("#custom-background-image").css("background-repeat",jQuery(this).val())});jQuery('input[name="background-attachment"]').change(function(){jQuery("#custom-background-image").css("background-attachment",jQuery(this).val())});farbtastic=jQuery.farbtastic("#colorPickerDiv",function(a){pickColor(a)});pickColor(jQuery("#background-color").val());jQuery(document).mousedown(function(){jQuery("#colorPickerDiv").each(function(){var a=jQuery(this).css("display");if(a=="block"){jQuery(this).fadeOut(2)}})})}); var farbtastic;function pickColor(a){farbtastic.setColor(a);jQuery("#background-color").val(a);jQuery("#custom-background-image").css("background-color",a)}jQuery(document).ready(function(){jQuery("#pickcolor").click(function(){jQuery("#colorPickerDiv").show()});jQuery("#background-color").keyup(function(){var b=jQuery("#background-color").val(),a=b;if(a[0]!="#"){a="#"+a}a=a.replace(/[^#a-fA-F0-9]+/,"");if(a!=b){jQuery("#background-color").val(a)}if(a.length==4||a.length==7){pickColor(a)}});jQuery('input[name="background-position-x"]').change(function(){jQuery("#custom-background-image").css("background-position",jQuery(this).val()+" top")});jQuery('select[name="background-repeat"]').change(function(){jQuery("#custom-background-image").css("background-repeat",jQuery(this).val())});farbtastic=jQuery.farbtastic("#colorPickerDiv",function(a){pickColor(a)});pickColor(jQuery("#background-color").val());jQuery(document).mousedown(function(){jQuery("#colorPickerDiv").each(function(){var a=jQuery(this).css("display");if(a=="block"){jQuery(this).fadeOut(2)}})})});

6
wp-includes/script-loader.php
View File

@ -405,9 +405,8 @@ function wp_default_scripts( &$scripts ) {
'warnDeleteMenuItem' => __( "You are about to permanently delete this menu item. \n 'Cancel' to stop, 'OK' to delete." ), 'warnDeleteMenuItem' => __( "You are about to permanently delete this menu item. \n 'Cancel' to stop, 'OK' to delete." ),
) ); ) );
$scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('farbtastic'), '20100321' ); $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('farbtastic'), '20100516' );
$scripts->add_data( 'custom-background', 'group', 1 ); $scripts->add_data( 'custom-background', 'group', 1 );
// See wp_just_in_time_script_localization() for translation data for this object
} }
} }
@ -529,9 +528,6 @@ function wp_just_in_time_script_localization() {
'l10n_print_after' => 'try{convertEntities(autosaveL10n);}catch(e){};' 'l10n_print_after' => 'try{convertEntities(autosaveL10n);}catch(e){};'
) ); ) );
wp_localize_script( 'custom-background', 'customBackgroundL10n', array(
'backgroundcolor' => '#' . get_background_color(),
) );
} }
/** /**

2
wp-includes/theme.php
View File

@ -1553,7 +1553,7 @@ function _custom_background_cb() {
$repeat = 'background-repeat: repeat;'; $repeat = 'background-repeat: repeat;';
} }
switch ( get_theme_mod('background_position', 'left') ) { switch ( get_theme_mod('background_position_x', 'left') ) {
case 'center': case 'center':
$position = 'background-position: top center;'; $position = 'background-position: top center;';
break; break;