IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Customize: Improve custom background properties UI.

Browse Source 
Introduces new control for managing the background position. Adds control for setting the `background-size`.

Props cdog, celloexpressions, grapplerulrich, MikeHansenMe, FolioVision, afercia, helen, melchoyce, karmatosed, westonruter, Kelderic, sebastian.pisula.
Fixes #22058.

Built from https://develop.svn.wordpress.org/trunk@38948


git-svn-id: http://core.svn.wordpress.org/trunk@38891 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter
2016-10-26 06:52:29 +00:00
parent 6b4357e14b
commit a86496aea4
21 changed files with 803 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wp-admin/css/customize-controls-rtl.css
+5
View File
@@ -1090,6 +1090,11 @@ p.customize-section-description {
float: left;
}
/* Background position control */
.customize-control-background_position .background-position-control .button-group {
display: block;
}
/**
* Custom CSS Section
*
wp-admin/css/customize-controls-rtl.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-admin/css/customize-controls.css
+5
View File
@@ -1090,6 +1090,11 @@ p.customize-section-description {
float: right;
}
/* Background position control */
.customize-control-background_position .background-position-control .button-group {
display: block;
}
/**
* Custom CSS Section
*
wp-admin/css/customize-controls.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-admin/css/themes-rtl.css
+129
View File
@@ -1176,6 +1176,135 @@ div#custom-background-image img {
max-height: 300px;
}
.background-position-control input[type="radio"]:checked ~ .button {
background: #eee;
border-color: #999;
-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
z-index: 1;
}
.background-position-control input[type="radio"]:focus ~ .button {
border-color: #5b9dd9;
-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
color: #23282d;
}
.background-position-control .background-position-center-icon,
.background-position-control .background-position-center-icon:before {
display: inline-block;
line-height: 1;
text-align: center;
-webkit-transition: background-color .1s ease-in 0;
transition: background-color .1s ease-in 0;
}
.background-position-control .background-position-center-icon {
height: 20px;
margin-top: 13px;
vertical-align: top;
width: 20px;
}
.background-position-control .background-position-center-icon:before {
background-color: #555;
-webkit-border-radius: 50%;
border-radius: 50%;
content: "";
height: 12px;
width: 12px;
}
.background-position-control .button:hover .background-position-center-icon:before,
.background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before {
background-color: #23282d;
}
.background-position-control .button-group {
display: block;
}
.background-position-control .button-group .button {
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
/* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */
height: 40px !important;
line-height: 37px !important;
margin: 0 0 0 -1px !important;
padding: 0 10px 1px !important;
position: relative;
}
.background-position-control .button-group .button:active,
.background-position-control .button-group .button:hover,
.background-position-control .button-group .button:focus {
z-index: 1;
}
.background-position-control .button-group:last-child .button {
-webkit-box-shadow: 0 1px 0 #ccc;
box-shadow: 0 1px 0 #ccc;
}
.background-position-control .button-group > label {
margin: 0 !important;
}
.background-position-control .button-group:first-child > label:first-child .button {
-webkit-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
.background-position-control .button-group:first-child > label:first-child .dashicons {
-webkit-transform: rotate( -45deg );
-ms-transform: rotate( -45deg );
transform: rotate( -45deg );
}
.background-position-control .button-group:first-child > label:last-child .button {
-webkit-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
.background-position-control .button-group:first-child > label:last-child .dashicons {
-webkit-transform: rotate( 45deg );
-ms-transform: rotate( 45deg );
transform: rotate( 45deg );
}
.background-position-control .button-group:last-child > label:first-child .button {
-webkit-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
}
.background-position-control .button-group:last-child > label:first-child .dashicons {
-webkit-transform: rotate( 45deg );
-ms-transform: rotate( 45deg );
transform: rotate( 45deg );
}
.background-position-control .button-group:last-child > label:last-child .button {
-webkit-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
.background-position-control .button-group:last-child > label:last-child .dashicons {
-webkit-transform: rotate( -45deg );
-ms-transform: rotate( -45deg );
transform: rotate( -45deg );
}
.background-position-control .button-group .dashicons {
margin-top: 9px;
}
.background-position-control .button-group + .button-group {
margin-top: -1px;
}
/*------------------------------------------------------------------------------
23.0 - Full Overlay w/ Sidebar
------------------------------------------------------------------------------*/
wp-admin/css/themes-rtl.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-admin/css/themes.css
+129
View File
@@ -1176,6 +1176,135 @@ div#custom-background-image img {
max-height: 300px;
}
.background-position-control input[type="radio"]:checked ~ .button {
background: #eee;
border-color: #999;
-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
z-index: 1;
}
.background-position-control input[type="radio"]:focus ~ .button {
border-color: #5b9dd9;
-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
color: #23282d;
}
.background-position-control .background-position-center-icon,
.background-position-control .background-position-center-icon:before {
display: inline-block;
line-height: 1;
text-align: center;
-webkit-transition: background-color .1s ease-in 0;
transition: background-color .1s ease-in 0;
}
.background-position-control .background-position-center-icon {
height: 20px;
margin-top: 13px;
vertical-align: top;
width: 20px;
}
.background-position-control .background-position-center-icon:before {
background-color: #555;
-webkit-border-radius: 50%;
border-radius: 50%;
content: "";
height: 12px;
width: 12px;
}
.background-position-control .button:hover .background-position-center-icon:before,
.background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before {
background-color: #23282d;
}
.background-position-control .button-group {
display: block;
}
.background-position-control .button-group .button {
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
/* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */
height: 40px !important;
line-height: 37px !important;
margin: 0 -1px 0 0 !important;
padding: 0 10px 1px !important;
position: relative;
}
.background-position-control .button-group .button:active,
.background-position-control .button-group .button:hover,
.background-position-control .button-group .button:focus {
z-index: 1;
}
.background-position-control .button-group:last-child .button {
-webkit-box-shadow: 0 1px 0 #ccc;
box-shadow: 0 1px 0 #ccc;
}
.background-position-control .button-group > label {
margin: 0 !important;
}
.background-position-control .button-group:first-child > label:first-child .button {
-webkit-border-radius: 3px 0 0;
border-radius: 3px 0 0;
}
.background-position-control .button-group:first-child > label:first-child .dashicons {
-webkit-transform: rotate( 45deg );
-ms-transform: rotate( 45deg );
transform: rotate( 45deg );
}
.background-position-control .button-group:first-child > label:last-child .button {
-webkit-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
.background-position-control .button-group:first-child > label:last-child .dashicons {
-webkit-transform: rotate( -45deg );
-ms-transform: rotate( -45deg );
transform: rotate( -45deg );
}
.background-position-control .button-group:last-child > label:first-child .button {
-webkit-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
.background-position-control .button-group:last-child > label:first-child .dashicons {
-webkit-transform: rotate( -45deg );
-ms-transform: rotate( -45deg );
transform: rotate( -45deg );
}
.background-position-control .button-group:last-child > label:last-child .button {
-webkit-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
}
.background-position-control .button-group:last-child > label:last-child .dashicons {
-webkit-transform: rotate( 45deg );
-ms-transform: rotate( 45deg );
transform: rotate( 45deg );
}
.background-position-control .button-group .dashicons {
margin-top: 9px;
}
.background-position-control .button-group + .button-group {
margin-top: -1px;
}
/*------------------------------------------------------------------------------
23.0 - Full Overlay w/ Sidebar
------------------------------------------------------------------------------*/
wp-admin/css/themes.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-admin/custom-background.php
+136 -56
View File
@@ -133,31 +133,73 @@ class Custom_Background {
return;
}
if ( isset($_POST['background-repeat']) ) {
check_admin_referer('custom-background');
if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat', 'repeat-x', 'repeat-y')) )
$repeat = $_POST['background-repeat'];
else
if ( isset( $_POST['background-preset'] ) ) {
check_admin_referer( 'custom-background' );
if ( in_array( $_POST['background-preset'], array( 'default', 'fill', 'fit', 'repeat', 'custom' ), true ) ) {
$preset = $_POST['background-preset'];
} else {
$preset = 'default';
}
set_theme_mod( 'background_preset', $preset );
}
if ( isset( $_POST['background-position'] ) ) {
check_admin_referer( 'custom-background' );
$position = explode( ' ', $_POST['background-position'] );
if ( in_array( $position[0], array( 'left', 'center', 'right' ), true ) ) {
$position_x = $position[0];
} else {
$position_x = 'left';
}
if ( in_array( $position[1], array( 'top', 'center', 'bottom' ), true ) ) {
$position_y = $position[1];
} else {
$position_y = 'top';
}
set_theme_mod( 'background_position_x', $position_x );
set_theme_mod( 'background_position_y', $position_y );
}
if ( isset( $_POST['background-size'] ) ) {
check_admin_referer( 'custom-background' );
if ( in_array( $_POST['background-size'], array( 'auto', 'contain', 'cover' ), true ) ) {
$size = $_POST['background-size'];
} else {
$size = 'auto';
}
set_theme_mod( 'background_size', $size );
}
if ( isset( $_POST['background-repeat'] ) ) {
check_admin_referer( 'custom-background' );
$repeat = $_POST['background-repeat'];
if ( 'no-repeat' !== $repeat ) {
$repeat = 'repeat';
set_theme_mod('background_repeat', $repeat);
}
set_theme_mod( 'background_repeat', $repeat );
}
if ( isset($_POST['background-position-x']) ) {
check_admin_referer('custom-background');
if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) )
$position = $_POST['background-position-x'];
else
$position = 'left';
set_theme_mod('background_position_x', $position);
}
if ( isset( $_POST['background-attachment'] ) ) {
check_admin_referer( 'custom-background' );
if ( isset($_POST['background-attachment']) ) {
check_admin_referer('custom-background');
if ( in_array($_POST['background-attachment'], array('fixed', 'scroll')) )
$attachment = $_POST['background-attachment'];
else
$attachment = 'fixed';
set_theme_mod('background_attachment', $attachment);
$attachment = $_POST['background-attachment'];
if ( 'fixed' !== $attachment ) {
$attachment = 'scroll';
}
set_theme_mod( 'background_attachment', $attachment );
}
if ( isset($_POST['background-color']) ) {
@@ -219,11 +261,18 @@ class Custom_Background {
$background_image_thumb = get_background_image();
if ( $background_image_thumb ) {
$background_image_thumb = esc_url( set_url_scheme( get_theme_mod( 'background_image_thumb', str_replace( '%', '%%', $background_image_thumb ) ) ) );
$background_position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
$background_position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) );
$background_size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) );
$background_repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
$background_attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
// Background-image URL must be single quote, see below.
$background_styles .= ' background-image: url(\'' . $background_image_thumb . '\');'
. ' background-repeat: ' . get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) . ';'
. ' background-position: top ' . get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
$background_styles .= " background-image: url('$background_image_thumb');"
. " background-size: $background_size;"
. " background-position: $background_position_x $background_position_y;"
. " background-repeat: $background_repeat;"
. " background-attachment: $background_attachment;";
}
?>
<div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
@@ -287,50 +336,81 @@ class Custom_Background {
</tbody>
</table>
<h3><?php _e('Display Options') ?></h3>
<h3><?php _e( 'Display Options' ); ?></h3>
<form method="post">
<table class="form-table">
<tbody>
<?php if ( get_background_image() ) : ?>
<input name="background-preset" type="hidden" value="custom">
<?php
$background_position = sprintf(
'%s %s',
get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ),
get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) )
);
$background_position_options = array(
array(
'left top' => array( 'label' => __( 'Top Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
'center top' => array( 'label' => __( 'Top' ), 'icon' => 'dashicons dashicons-arrow-up-alt' ),
'right top' => array( 'label' => __( 'Top Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
),
array(
'left center' => array( 'label' => __( 'Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
'center center' => array( 'label' => __( 'Center' ), 'icon' => 'background-position-center-icon' ),
'right center' => array( 'label' => __( 'Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
),
array(
'left bottom' => array( 'label' => __( 'Bottom Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
'center bottom' => array( 'label' => __( 'Bottom' ), 'icon' => 'dashicons dashicons-arrow-down-alt' ),
'right bottom' => array( 'label' => __( 'Bottom Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
),
);
?>
<tr>
<th scope="row"><?php _e( 'Position' ); ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
<label>
<input name="background-position-x" type="radio" value="left"<?php checked( 'left', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> />
<?php _e('Left') ?>
</label>
<label>
<input name="background-position-x" type="radio" value="center"<?php checked( 'center', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> />
<?php _e('Center') ?>
</label>
<label>
<input name="background-position-x" type="radio" value="right"<?php checked( 'right', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> />
<?php _e('Right') ?>
</label>
<th scope="row"><?php _e( 'Image Position' ); ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Position' ); ?></span></legend>
<div class="background-position-control">
<?php foreach ( $background_position_options as $group ) : ?>
<div class="button-group">
<?php foreach ( $group as $value => $input ) : ?>
<label>
<input class="screen-reader-text" name="background-position" type="radio" value="<?php echo esc_attr( $value ); ?>"<?php checked( $value, $background_position ); ?>>
<span class="button display-options position"><span class="<?php echo esc_attr( $input['icon'] ); ?>" aria-hidden="true"></span></span>
<span class="screen-reader-text"><?php echo $input['label']; ?></span>
</label>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
</fieldset></td>
</tr>
<tr>
<th scope="row"><?php _e( 'Repeat' ); ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Repeat' ); ?></span></legend>
<label><input type="radio" name="background-repeat" value="no-repeat"<?php checked( 'no-repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('No Repeat'); ?></label>
<label><input type="radio" name="background-repeat" value="repeat"<?php checked( 'repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile'); ?></label>
<label><input type="radio" name="background-repeat" value="repeat-x"<?php checked( 'repeat-x', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile Horizontally'); ?></label>
<label><input type="radio" name="background-repeat" value="repeat-y"<?php checked( 'repeat-y', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile Vertically'); ?></label>
<th scope="row"><label for="background-size"><?php _e( 'Image Size' ); ?></label></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Size' ); ?></span></legend>
<select id="background-size" name="background-size">
<option value="auto"<?php selected( 'auto', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _ex( 'Original', 'Original Size' ); ?></option>
<option value="contain"<?php selected( 'contain', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fit to Screen' ); ?></option>
<option value="cover"<?php selected( 'cover', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fill Screen' ); ?></option>
</select>
</fieldset></td>
</tr>
<tr>
<th scope="row"><?php _ex( 'Attachment', 'Background Attachment' ); ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Attachment' ); ?></span></legend>
<label>
<input name="background-attachment" type="radio" value="scroll" <?php checked( 'scroll', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?> />
<?php _e( 'Scroll' ); ?>
</label>
<label>
<input name="background-attachment" type="radio" value="fixed" <?php checked( 'fixed', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?> />
<?php _e( 'Fixed' ); ?>
</label>
<th scope="row"><?php _ex( 'Repeat', 'Background Repeat' ); ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Repeat', 'Background Repeat' ); ?></span></legend>
<input name="background-repeat" type="hidden" value="no-repeat">
<label><input type="checkbox" name="background-repeat" value="repeat"<?php checked( 'repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?>> <?php _e( 'Repeat Background Image' ); ?></label>
</fieldset></td>
</tr>
<tr>
<th scope="row"><?php _ex( 'Scroll', 'Background Scroll' ); ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Scroll', 'Background Scroll' ); ?></span></legend>
<input name="background-attachment" type="hidden" value="fixed">
<label><input name="background-attachment" type="checkbox" value="scroll" <?php checked( 'scroll', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?>> <?php _e( 'Scroll with Page' ); ?></label>
</fieldset></td>
</tr>
<?php endif; // get_background_image() ?>
@@ -342,7 +422,7 @@ $default_color = '';
if ( current_theme_supports( 'custom-background', 'default-color' ) )
$default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '"';
?>
<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?> />
<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?>>
</fieldset></td>
</tr>
</tbody>
wp-admin/js/custom-background.js
+12 -4
View File
@@ -13,12 +13,20 @@
}
});
$('input[name="background-position-x"]').change(function() {
bgImage.css('background-position', $(this).val() + ' top');
$( 'select[name="background-size"]' ).change( function() {
bgImage.css( 'background-size', $( this ).val() );
});
$('input[name="background-repeat"]').change(function() {
bgImage.css('background-repeat', $(this).val());
$( 'input[name="background-position"]' ).change( function() {
bgImage.css( 'background-position', $( this ).val() );
});
$( 'input[name="background-repeat"]' ).change( function() {
bgImage.css( 'background-repeat', $( this ).is( ':checked' ) ? 'repeat' : 'no-repeat' );
});
$( 'input[name="background-attachment"]' ).change( function() {
bgImage.css( 'background-attachment', $( this ).is( ':checked' ) ? 'scroll' : 'fixed' );
});
$('#choose-from-library-link').click( function( event ) {
wp-admin/js/custom-background.min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
!function(a){a(document).ready(function(){var b,c=a("#custom-background-image");a("#background-color").wpColorPicker({change:function(a,b){c.css("background-color",b.color.toString())},clear:function(){c.css("background-color","")}}),a('input[name="background-position-x"]').change(function(){c.css("background-position",a(this).val()+" top")}),a('input[name="background-repeat"]').change(function(){c.css("background-repeat",a(this).val())}),a("#choose-from-library-link").click(function(c){var d=a(this);return c.preventDefault(),b?void b.open():(b=wp.media.frames.customBackground=wp.media({title:d.data("choose"),library:{type:"image"},button:{text:d.data("update"),close:!1}}),b.on("select",function(){var c=b.state().get("selection").first();a.post(ajaxurl,{action:"set-background-image",attachment_id:c.id,size:"full"}).done(function(){window.location.reload()})}),void b.open())})})}(jQuery);
!function(a){a(document).ready(function(){var b,c=a("#custom-background-image");a("#background-color").wpColorPicker({change:function(a,b){c.css("background-color",b.color.toString())},clear:function(){c.css("background-color","")}}),a('select[name="background-size"]').change(function(){c.css("background-size",a(this).val())}),a('input[name="background-position"]').change(function(){c.css("background-position",a(this).val())}),a('input[name="background-repeat"]').change(function(){c.css("background-repeat",a(this).is(":checked")?"repeat":"no-repeat")}),a('input[name="background-attachment"]').change(function(){c.css("background-attachment",a(this).is(":checked")?"scroll":"fixed")}),a("#choose-from-library-link").click(function(c){var d=a(this);return c.preventDefault(),b?void b.open():(b=wp.media.frames.customBackground=wp.media({title:d.data("choose"),library:{type:"image"},button:{text:d.data("update"),close:!1}}),b.on("select",function(){var c=b.state().get("selection").first();a.post(ajaxurl,{action:"set-background-image",attachment_id:c.id,size:"full"}).done(function(){window.location.reload()})}),void b.open())})})}(jQuery);
wp-admin/js/customize-controls.js
+134 -10
View File
@@ -3157,6 +3157,46 @@
}
});
/**
* A control for positioning a background image.
*
* @since 4.7.0
*
* @class
* @augments wp.customize.Control
* @augments wp.customize.Class
*/
api.BackgroundPositionControl = api.Control.extend( {
/**
* Set up control UI once embedded in DOM and settings are created.
*
* @since 4.7.0
*/
ready: function() {
var control = this, updateRadios;
control.container.on( 'change', 'input[name="background-position"]', function() {
var position = $( this ).val().split( ' ' );
control.settings.x( position[0] );
control.settings.y( position[1] );
} );
updateRadios = _.debounce( function() {
var x, y, radioInput, inputValue;
x = control.settings.x.get();
y = control.settings.y.get();
inputValue = String( x ) + ' ' + String( y );
radioInput = control.container.find( 'input[name="background-position"][value="' + inputValue + '"]' );
radioInput.click();
} );
control.settings.x.bind( updateRadios );
control.settings.y.bind( updateRadios );
updateRadios(); // Set initial UI.
}
} );
/**
* A control for selecting and cropping an image.
*
@@ -4507,15 +4547,16 @@
api.settingConstructor = {};
api.controlConstructor = {
color: api.ColorControl,
media: api.MediaControl,
upload: api.UploadControl,
image: api.ImageControl,
cropped_image: api.CroppedImageControl,
site_icon: api.SiteIconControl,
header: api.HeaderControl,
background: api.BackgroundControl,
theme: api.ThemeControl
color: api.ColorControl,
media: api.MediaControl,
upload: api.UploadControl,
image: api.ImageControl,
cropped_image: api.CroppedImageControl,
site_icon: api.SiteIconControl,
header: api.HeaderControl,
background: api.BackgroundControl,
background_position: api.BackgroundPositionControl,
theme: api.ThemeControl
};
api.panelConstructor = {
themes: api.ThemesPanel
@@ -5531,7 +5572,7 @@
// Control visibility for default controls
$.each({
'background_image': {
controls: [ 'background_repeat', 'background_position_x', 'background_attachment' ],
controls: [ 'background_preset', 'background_position', 'background_size', 'background_repeat', 'background_attachment' ],
callback: function( to ) { return !! to; }
},
'show_on_front': {
@@ -5557,6 +5598,89 @@
});
});
api.control( 'background_preset', function( control ) {
var visibility, defaultValues, values, toggleVisibility, updateSettings, preset;
visibility = { // position, size, repeat, attachment
'default': [ false, false, false, false ],
'fill': [ true, false, false, false ],
'fit': [ true, false, true, false ],
'repeat': [ true, false, false, true ],
'custom': [ true, true, true, true ]
};
defaultValues = [
_wpCustomizeBackground.defaults['default-position-x'],
_wpCustomizeBackground.defaults['default-position-y'],
_wpCustomizeBackground.defaults['default-size'],
_wpCustomizeBackground.defaults['default-repeat'],
_wpCustomizeBackground.defaults['default-attachment']
];
values = { // position_x, position_y, size, repeat, attachment
'default': defaultValues,
'fill': [ 'left', 'top', 'cover', 'no-repeat', 'fixed' ],
'fit': [ 'left', 'top', 'contain', 'no-repeat', 'fixed' ],
'repeat': [ 'left', 'top', 'auto', 'repeat', 'scroll' ]
};
// @todo These should actually toggle the active state, but without the preview overriding the state in data.activeControls.
toggleVisibility = function( preset ) {
api.control( 'background_position' ).container.toggle( visibility[ preset ][0] );
api.control( 'background_size' ).container.toggle( visibility[ preset ][1] );
api.control( 'background_repeat' ).container.toggle( visibility[ preset ][2] );
api.control( 'background_attachment' ).container.toggle( visibility[ preset ][3] );
};
updateSettings = function( preset ) {
api( 'background_position_x' ).set( values[ preset ][0] );
api( 'background_position_y' ).set( values[ preset ][1] );
api( 'background_size' ).set( values[ preset ][2] );
api( 'background_repeat' ).set( values[ preset ][3] );
api( 'background_attachment' ).set( values[ preset ][4] );
};
preset = control.setting.get();
toggleVisibility( preset );
control.setting.bind( 'change', function( preset ) {
toggleVisibility( preset );
if ( 'custom' !== preset ) {
updateSettings( preset );
}
} );
} );
api.control( 'background_repeat', function( control ) {
control.elements[0].unsync( api( 'background_repeat' ) );
control.element = new api.Element( control.container.find( 'input' ) );
control.element.set( 'no-repeat' !== control.setting() );
control.element.bind( function( to ) {
control.setting.set( to ? 'repeat' : 'no-repeat' );
} );
control.setting.bind( function( to ) {
control.element.set( 'no-repeat' !== to );
} );
} );
api.control( 'background_attachment', function( control ) {
control.elements[0].unsync( api( 'background_attachment' ) );
control.element = new api.Element( control.container.find( 'input' ) );
control.element.set( 'fixed' !== control.setting() );
control.element.bind( function( to ) {
control.setting.set( to ? 'scroll' : 'fixed' );
} );
control.setting.bind( function( to ) {
control.element.set( 'fixed' !== to );
} );
} );
// Juggle the two controls that use header_textcolor
api.control( 'display_header_text', function( control ) {
var last = '';
wp-admin/js/customize-controls.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long