wp/wp-admin/js/custom-background.js
changeset 18 be944660c56a
parent 16 a86126ab1dd4
equal deleted inserted replaced
17:34716fd837a4 18:be944660c56a
    10  * @since 3.0.0
    10  * @since 3.0.0
    11  *
    11  *
    12  * @requires jQuery
    12  * @requires jQuery
    13  */
    13  */
    14 (function($) {
    14 (function($) {
    15 	$(document).ready(function() {
    15 	$( function() {
    16 		var frame,
    16 		var frame,
    17 			bgImage = $( '#custom-background-image' );
    17 			bgImage = $( '#custom-background-image' );
    18 
    18 
    19 		/**
    19 		/**
    20 		 * Instantiates the WordPress color picker and binds the change and clear events.
    20 		 * Instantiates the WordPress color picker and binds the change and clear events.
    37 		 *
    37 		 *
    38 		 * @since 4.7.0
    38 		 * @since 4.7.0
    39 		 *
    39 		 *
    40 		 * @return {void}
    40 		 * @return {void}
    41 		 */
    41 		 */
    42 		$( 'select[name="background-size"]' ).change( function() {
    42 		$( 'select[name="background-size"]' ).on( 'change', function() {
    43 			bgImage.css( 'background-size', $( this ).val() );
    43 			bgImage.css( 'background-size', $( this ).val() );
    44 		});
    44 		});
    45 
    45 
    46 		/**
    46 		/**
    47 		 * Alters the background position CSS property whenever the background position input has changed.
    47 		 * Alters the background position CSS property whenever the background position input has changed.
    48 		 *
    48 		 *
    49 		 * @since 4.7.0
    49 		 * @since 4.7.0
    50 		 *
    50 		 *
    51 		 * @return {void}
    51 		 * @return {void}
    52 		 */
    52 		 */
    53 		$( 'input[name="background-position"]' ).change( function() {
    53 		$( 'input[name="background-position"]' ).on( 'change', function() {
    54 			bgImage.css( 'background-position', $( this ).val() );
    54 			bgImage.css( 'background-position', $( this ).val() );
    55 		});
    55 		});
    56 
    56 
    57 		/**
    57 		/**
    58 		 * Alters the background repeat CSS property whenever the background repeat input has changed.
    58 		 * Alters the background repeat CSS property whenever the background repeat input has changed.
    59 		 *
    59 		 *
    60 		 * @since 3.0.0
    60 		 * @since 3.0.0
    61 		 *
    61 		 *
    62 		 * @return {void}
    62 		 * @return {void}
    63 		 */
    63 		 */
    64 		$( 'input[name="background-repeat"]' ).change( function() {
    64 		$( 'input[name="background-repeat"]' ).on( 'change',  function() {
    65 			bgImage.css( 'background-repeat', $( this ).is( ':checked' ) ? 'repeat' : 'no-repeat' );
    65 			bgImage.css( 'background-repeat', $( this ).is( ':checked' ) ? 'repeat' : 'no-repeat' );
    66 		});
    66 		});
    67 
    67 
    68 		/**
    68 		/**
    69 		 * Alters the background attachment CSS property whenever the background attachment input has changed.
    69 		 * Alters the background attachment CSS property whenever the background attachment input has changed.
    70 		 *
    70 		 *
    71 		 * @since 4.7.0
    71 		 * @since 4.7.0
    72 		 *
    72 		 *
    73 		 * @return {void}
    73 		 * @return {void}
    74 		 */
    74 		 */
    75 		$( 'input[name="background-attachment"]' ).change( function() {
    75 		$( 'input[name="background-attachment"]' ).on( 'change', function() {
    76 			bgImage.css( 'background-attachment', $( this ).is( ':checked' ) ? 'scroll' : 'fixed' );
    76 			bgImage.css( 'background-attachment', $( this ).is( ':checked' ) ? 'scroll' : 'fixed' );
    77 		});
    77 		});
    78 
    78 
    79 		/**
    79 		/**
    80 		 * Binds the event for opening the WP Media dialog.
    80 		 * Binds the event for opening the WP Media dialog.
    81 		 *
    81 		 *
    82 		 * @since 3.5.0
    82 		 * @since 3.5.0
    83 		 *
    83 		 *
    84 		 * @return {void}
    84 		 * @return {void}
    85 		 */
    85 		 */
    86 		$('#choose-from-library-link').click( function( event ) {
    86 		$('#choose-from-library-link').on( 'click', function( event ) {
    87 			var $el = $(this);
    87 			var $el = $(this);
    88 
    88 
    89 			event.preventDefault();
    89 			event.preventDefault();
    90 
    90 
    91 			// If the media frame already exists, reopen it.
    91 			// If the media frame already exists, reopen it.
   124 			 * @return {void}
   124 			 * @return {void}
   125  			 */
   125  			 */
   126 			frame.on( 'select', function() {
   126 			frame.on( 'select', function() {
   127 				// Grab the selected attachment.
   127 				// Grab the selected attachment.
   128 				var attachment = frame.state().get('selection').first();
   128 				var attachment = frame.state().get('selection').first();
       
   129 				var nonceValue = $( '#_wpnonce' ).val() || '';
   129 
   130 
   130 				// Run an Ajax request to set the background image.
   131 				// Run an Ajax request to set the background image.
   131 				$.post( ajaxurl, {
   132 				$.post( ajaxurl, {
   132 					action: 'set-background-image',
   133 					action: 'set-background-image',
   133 					attachment_id: attachment.id,
   134 					attachment_id: attachment.id,
       
   135 					_ajax_nonce: nonceValue,
   134 					size: 'full'
   136 					size: 'full'
   135 				}).done( function() {
   137 				}).done( function() {
   136 					// When the request completes, reload the window.
   138 					// When the request completes, reload the window.
   137 					window.location.reload();
   139 					window.location.reload();
   138 				});
   140 				});