<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><style type="text/css"><!--
#msg dl { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fc0 solid; padding: 6px; }
#msg ul, pre { overflow: auto; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<title>[14684] trunk: Custom background UI updates.</title>
</head>
<body>
<div id="msg">
<dl>
<dt>Revision</dt> <dd><a href="http://trac.wordpress.org/changeset/14684">14684</a></dd>
<dt>Author</dt> <dd>nacin</dd>
<dt>Date</dt> <dd>2010-05-16 05:17:57 +0000 (Sun, 16 May 2010)</dd>
</dl>
<h3>Log Message</h3>
<pre>Custom background UI updates. props ocean90 for initial patch, see <a href="http://trac.wordpress.org/ticket/12186">#12186</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadmincustombackgroundphp">trunk/wp-admin/custom-background.php</a></li>
<li><a href="#trunkwpadminjscustombackgrounddevjs">trunk/wp-admin/js/custom-background.dev.js</a></li>
<li><a href="#trunkwpadminjscustombackgroundjs">trunk/wp-admin/js/custom-background.js</a></li>
<li><a href="#trunkwpincludesscriptloaderphp">trunk/wp-includes/script-loader.php</a></li>
<li><a href="#trunkwpincludesthemephp">trunk/wp-includes/theme.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadmincustombackgroundphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/custom-background.php (14683 => 14684)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/custom-background.php 2010-05-16 03:49:50 UTC (rev 14683)
+++ trunk/wp-admin/custom-background.php 2010-05-16 05:17:57 UTC (rev 14684)
</span><span class="lines">@@ -91,6 +91,7 @@
</span><span class="cx"> remove_theme_mod('background_image_thumb');
</span><span class="cx"> return;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> if ( isset($_POST['remove-background']) ) {
</span><span class="cx"> // @TODO: Uploaded files are not removed here.
</span><span class="cx"> check_admin_referer('custom-background-remove', '_wpnonce-custom-background-remove');
</span><span class="lines">@@ -107,14 +108,16 @@
</span><span class="cx"> $repeat = 'repeat';
</span><span class="cx"> set_theme_mod('background_repeat', $repeat);
</span><span class="cx"> }
</span><del>- if ( isset($_POST['background-position']) ) {
</del><ins>+
+ if ( isset($_POST['background-position-x']) ) {
</ins><span class="cx"> check_admin_referer('custom-background');
</span><del>- if ( in_array($_POST['background-position'], array('center', 'right', 'left')) )
- $position = $_POST['background-position'];
</del><ins>+ if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) )
+ $position = $_POST['background-position-x'];
</ins><span class="cx"> else
</span><span class="cx"> $position = 'left';
</span><del>- set_theme_mod('background_position', $position);
</del><ins>+ set_theme_mod('background_position_x', $position);
</ins><span class="cx"> }
</span><ins>+
</ins><span class="cx"> if ( isset($_POST['background-attachment']) ) {
</span><span class="cx"> check_admin_referer('custom-background');
</span><span class="cx"> if ( in_array($_POST['background-attachment'], array('fixed', 'scroll')) )
</span><span class="lines">@@ -123,6 +126,7 @@
</span><span class="cx"> $attachment = 'fixed';
</span><span class="cx"> set_theme_mod('background_attachment', $attachment);
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> if ( isset($_POST['background-color']) ) {
</span><span class="cx"> check_admin_referer('custom-background');
</span><span class="cx"> $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['background-color']);
</span><span class="lines">@@ -155,33 +159,29 @@
</span><span class="cx"> call_user_func($this->admin_image_div_callback);
</span><span class="cx"> } else {
</span><span class="cx"> ?>
</span><del>-<h3><?php _e('Background Preview'); ?></h3>
</del><ins>+<h3><?php _e('Background Image'); ?></h3>
</ins><span class="cx"> <table class="form-table">
</span><span class="cx"> <tbody>
</span><span class="cx"> <tr valign="top">
</span><del>-<th scope="row"><?php _e('Current Background'); ?></th>
</del><ins>+<th scope="row"><?php _e('Preview'); ?></th>
</ins><span class="cx"> <td>
</span><span class="cx"> <?php
</span><span class="cx"> $background_styles = '';
</span><del>-if ( $bgcolor = get_background_color() ) {
- $background_styles .= "background-color: #{$bgcolor};";
-}
</del><ins>+if ( $bgcolor = get_background_color() )
+ $background_styles .= 'background-color: #' . $bgcolor . ';';
</ins><span class="cx">
</span><del>-if ( get_background_image() ) {
- $background_styles .= "
- background-image: url(" . get_theme_mod('background_image_thumb', '') . ");
- background-repeat: ". get_theme_mod('background_repeat', 'repeat') . ";
- background-position: ". get_theme_mod('background_position', 'left') . " top;
- background-attachment: " . get_theme_mod('background_attachment', 'fixed') . ";
- ";
</del><ins>+if ( get_background_image() ) {
+ // background-image URL must be single quote, see below
+ $background_styles .= ' background-image: url(\'' . get_theme_mod('background_image_thumb', '') . '\');'
+ . ' background-repeat: ' . get_theme_mod('background_repeat', 'repeat') . ';'
+ . ' background-position: top ' . get_theme_mod('background_position_x', 'left');
</ins><span class="cx"> }
</span><span class="cx"> ?>
</span><del>-<div id="custom-background-image" style="<?php echo $background_styles; ?>">
</del><ins>+<div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
</ins><span class="cx"> <?php if ( get_background_image() ) { ?>
</span><span class="cx"> <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" /><br />
</span><span class="cx"> <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" />
</span><span class="cx"> <?php } ?>
</span><del>-<br class="clear" />
</del><span class="cx"> </div>
</span><span class="cx"> <?php } ?>
</span><span class="cx"> </td>
</span><span class="lines">@@ -189,10 +189,11 @@
</span><span class="cx"> <?php if ( get_background_image() ) : ?>
</span><span class="cx"> <tr valign="top">
</span><span class="cx"> <th scope="row"><?php _e('Remove Image'); ?></th>
</span><del>-<td><p><?php _e('This will remove the background image. You will not be able to restore any customizations.') ?></p>
</del><ins>+<td>
</ins><span class="cx"> <form method="post" action="">
</span><span class="cx"> <?php wp_nonce_field('custom-background-remove', '_wpnonce-custom-background-remove'); ?>
</span><del>-<input type="submit" class="button" name="remove-background" value="<?php esc_attr_e('Remove Background'); ?>" />
</del><ins>+<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.') ?>
</ins><span class="cx"> </form>
</span><span class="cx"> </td>
</span><span class="cx"> </tr>
</span><span class="lines">@@ -201,10 +202,11 @@
</span><span class="cx"> <?php if ( defined( 'BACKGROUND_IMAGE' ) ) : // Show only if a default background image exists ?>
</span><span class="cx"> <tr valign="top">
</span><span class="cx"> <th scope="row"><?php _e('Restore Original Image'); ?></th>
</span><del>-<td><p><?php _e('This will restore the original background image. You will not be able to restore any customizations.') ?></p>
</del><ins>+<td>
</ins><span class="cx"> <form method="post" action="">
</span><span class="cx"> <?php wp_nonce_field('custom-background-reset', '_wpnonce-custom-background-reset'); ?>
</span><del>-<input type="submit" class="button" name="reset-background" value="<?php esc_attr_e('Restore Original Image'); ?>" />
</del><ins>+<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.') ?>
</ins><span class="cx"> </form>
</span><span class="cx"> </td>
</span><span class="cx"> </tr>
</span><span class="lines">@@ -216,8 +218,7 @@
</span><span class="cx"> <label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br /><input type="file" id="upload" name="import" />
</span><span class="cx"> <input type="hidden" name="action" value="save" />
</span><span class="cx"> <?php wp_nonce_field('custom-background-upload', '_wpnonce-custom-background-upload') ?>
</span><del>-<p class="submit">
-<input type="submit" value="<?php esc_attr_e('Upload'); ?>" />
</del><ins>+<input type="submit" class="button" value="<?php esc_attr_e('Upload'); ?>" />
</ins><span class="cx"> </p>
</span><span class="cx"> </form>
</span><span class="cx"> </td>
</span><span class="lines">@@ -230,28 +231,27 @@
</span><span class="cx"> <table class="form-table">
</span><span class="cx"> <tbody>
</span><span class="cx"> <tr valign="top">
</span><del>-<th scope="row"><?php _e( 'Background Color' ); ?></th>
</del><ins>+<th scope="row"><?php _e( 'Color' ); ?></th>
</ins><span class="cx"> <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
</span><span class="cx"> <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
</span><span class="cx"> <input type="button" class="button" value="<?php esc_attr_e('Select a Color'); ?>" id="pickcolor" />
</span><del>-
</del><span class="cx"> <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
</span><span class="cx"> </fieldset></td>
</span><span class="cx"> </tr>
</span><del>-
</del><ins>+<?php if ( get_background_image() ) : ?>
</ins><span class="cx"> <tr valign="top">
</span><del>-<th scope="row"><?php _e( 'Background Position' ); ?></th>
</del><ins>+<th scope="row"><?php _e( 'Position' ); ?></th>
</ins><span class="cx"> <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
</span><span class="cx"> <label>
</span><del>-<input name="background-position" type="radio" value="left" <?php checked('left', get_theme_mod('background_position', 'left')); ?> />
</del><ins>+<input name="background-position-x" type="radio" value="left"<?php checked('left', get_theme_mod('background_position_x', 'left')); ?> />
</ins><span class="cx"> <?php _e('Left') ?>
</span><span class="cx"> </label>
</span><span class="cx"> <label>
</span><del>-<input name="background-position" type="radio" value="center" <?php checked('center', get_theme_mod('background_position', 'left')); ?> />
</del><ins>+<input name="background-position-x" type="radio" value="center"<?php checked('center', get_theme_mod('background_position_x', 'left')); ?> />
</ins><span class="cx"> <?php _e('Center') ?>
</span><span class="cx"> </label>
</span><span class="cx"> <label>
</span><del>-<input name="background-position" type="radio" value="right" <?php checked('right', get_theme_mod('background_position', 'left')); ?> />
</del><ins>+<input name="background-position-x" type="radio" value="right"<?php checked('right', get_theme_mod('background_position_x', 'left')); ?> />
</ins><span class="cx"> <?php _e('Right') ?>
</span><span class="cx"> </label>
</span><span class="cx"> </fieldset></td>
</span><span class="lines">@@ -262,10 +262,10 @@
</span><span class="cx"> <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Repeat' ); ?></span></legend>
</span><span class="cx"> <label>
</span><span class="cx"> <select name="background-repeat">
</span><del>- <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-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>
</del><ins>+ <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-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>
</ins><span class="cx"> </select>
</span><span class="cx"> </label>
</span><span class="cx"> </fieldset></td>
</span><span class="lines">@@ -284,7 +284,7 @@
</span><span class="cx"> </label>
</span><span class="cx"> </fieldset></td>
</span><span class="cx"> </tr>
</span><del>-
</del><ins>+<?php endif; // get_background_image() ?>
</ins><span class="cx"> </tbody>
</span><span class="cx"> </table>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkwpadminjscustombackgrounddevjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/custom-background.dev.js (14683 => 14684)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/custom-background.dev.js 2010-05-16 03:49:50 UTC (rev 14683)
+++ trunk/wp-admin/js/custom-background.dev.js 2010-05-16 05:17:57 UTC (rev 14684)
</span><span class="lines">@@ -12,8 +12,7 @@
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> jQuery('#background-color').keyup(function() {
</span><del>- var _hex = jQuery('#background-color').val();
- var hex = _hex;
</del><ins>+ var _hex = jQuery('#background-color').val(), hex = _hex;
</ins><span class="cx"> if ( hex[0] != '#' )
</span><span class="cx"> hex = '#' + hex;
</span><span class="cx"> hex = hex.replace(/[^#a-fA-F0-9]+/, '');
</span><span class="lines">@@ -23,17 +22,13 @@
</span><span class="cx"> pickColor( hex );
</span><span class="cx"> });
</span><span class="cx">
</span><del>- jQuery('input[name="background-position"]').change(function() {
- jQuery('#custom-background-image').css('background-position', 'top ' + jQuery(this).val());
</del><ins>+ jQuery('input[name="background-position-x"]').change(function() {
+ jQuery('#custom-background-image').css('background-position', jQuery(this).val() + ' top');
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> jQuery('select[name="background-repeat"]').change(function() {
</span><span class="cx"> jQuery('#custom-background-image').css('background-repeat', jQuery(this).val());
</span><span class="cx"> });
</span><del>-
- jQuery('input[name="background-attachment"]').change(function() {
- jQuery('#custom-background-image').css('background-attachment', jQuery(this).val());
- });
</del><span class="cx">
</span><span class="cx"> farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) {
</span><span class="cx"> pickColor(color);
</span></span></pre></div>
<a id="trunkwpadminjscustombackgroundjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/custom-background.js (14683 => 14684)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/custom-background.js 2010-05-16 03:49:50 UTC (rev 14683)
+++ trunk/wp-admin/js/custom-background.js 2010-05-16 05:17:57 UTC (rev 14684)
</span><span class="lines">@@ -1 +1 @@
</span><del>-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)}})})});
</del><span class="cx">\ No newline at end of file
</span><ins>+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)}})})});
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpincludesscriptloaderphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/script-loader.php (14683 => 14684)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/script-loader.php 2010-05-16 03:49:50 UTC (rev 14683)
+++ trunk/wp-includes/script-loader.php 2010-05-16 05:17:57 UTC (rev 14684)
</span><span class="lines">@@ -405,9 +405,8 @@
</span><span class="cx"> 'warnDeleteMenuItem' => __( "You are about to permanently delete this menu item. \n 'Cancel' to stop, 'OK' to delete." ),
</span><span class="cx"> ) );
</span><span class="cx">
</span><del>- $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('farbtastic'), '20100321' );
</del><ins>+ $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('farbtastic'), '20100516' );
</ins><span class="cx"> $scripts->add_data( 'custom-background', 'group', 1 );
</span><del>- // See wp_just_in_time_script_localization() for translation data for this object
</del><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -529,9 +528,6 @@
</span><span class="cx"> 'l10n_print_after' => 'try{convertEntities(autosaveL10n);}catch(e){};'
</span><span class="cx"> ) );
</span><span class="cx">
</span><del>- wp_localize_script( 'custom-background', 'customBackgroundL10n', array(
- 'backgroundcolor' => '#' . get_background_color(),
- ) );
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /**
</span></span></pre></div>
<a id="trunkwpincludesthemephp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/theme.php (14683 => 14684)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/theme.php 2010-05-16 03:49:50 UTC (rev 14683)
+++ trunk/wp-includes/theme.php 2010-05-16 05:17:57 UTC (rev 14684)
</span><span class="lines">@@ -1553,7 +1553,7 @@
</span><span class="cx"> $repeat = 'background-repeat: repeat;';
</span><span class="cx"> }
</span><span class="cx">
</span><del>- switch ( get_theme_mod('background_position', 'left') ) {
</del><ins>+ switch ( get_theme_mod('background_position_x', 'left') ) {
</ins><span class="cx"> case 'center':
</span><span class="cx"> $position = 'background-position: top center;';
</span><span class="cx"> break;
</span></span></pre>
</div>
</div>
</body>
</html>