1/**
  2 * @output wp-admin/js/custom-background.js
  3 */
  4
  5/* global ajaxurl */
  6
  7/**
  8 * Registers all events for customizing the background.
  9 *
 10 * @since 3.0.0
 11 *
 12 * @requires jQuery
 13 */
 14(function($) {
 15	$( function() {
 16		var frame,
 17			bgImage = $( '#custom-background-image' );
 18
 19		/**
 20		 * Instantiates the WordPress color picker and binds the change and clear events.
 21		 *
 22		 * @since 3.5.0
 23		 *
 24		 * @return {void}
 25		 */
 26		$('#background-color').wpColorPicker({
 27			change: function( event, ui ) {
 28				bgImage.css('background-color', ui.color.toString());
 29			},
 30			clear: function() {
 31				bgImage.css('background-color', '');
 32			}
 33		});
 34
 35		/**
 36		 * Alters the background size CSS property whenever the background size input has changed.
 37		 *
 38		 * @since 4.7.0
 39		 *
 40		 * @return {void}
 41		 */
 42		$( 'select[name="background-size"]' ).on( 'change', function() {
 43			bgImage.css( 'background-size', $( this ).val() );
 44		});
 45
 46		/**
 47		 * Alters the background position CSS property whenever the background position input has changed.
 48		 *
 49		 * @since 4.7.0
 50		 *
 51		 * @return {void}
 52		 */
 53		$( 'input[name="background-position"]' ).on( 'change', function() {
 54			bgImage.css( 'background-position', $( this ).val() );
 55		});
 56
 57		/**
 58		 * Alters the background repeat CSS property whenever the background repeat input has changed.
 59		 *
 60		 * @since 3.0.0
 61		 *
 62		 * @return {void}
 63		 */
 64		$( 'input[name="background-repeat"]' ).on( 'change',  function() {
 65			bgImage.css( 'background-repeat', $( this ).is( ':checked' ) ? 'repeat' : 'no-repeat' );
 66		});
 67
 68		/**
 69		 * Alters the background attachment CSS property whenever the background attachment input has changed.
 70		 *
 71		 * @since 4.7.0
 72		 *
 73		 * @return {void}
 74		 */
 75		$( 'input[name="background-attachment"]' ).on( 'change', function() {
 76			bgImage.css( 'background-attachment', $( this ).is( ':checked' ) ? 'scroll' : 'fixed' );
 77		});
 78
 79		/**
 80		 * Binds the event for opening the WP Media dialog.
 81		 *
 82		 * @since 3.5.0
 83		 *
 84		 * @return {void}
 85		 */
 86		$('#choose-from-library-link').on( 'click', function( event ) {
 87			var $el = $(this);
 88
 89			event.preventDefault();
 90
 91			// If the media frame already exists, reopen it.
 92			if ( frame ) {
 93				frame.open();
 94				return;
 95			}
 96
 97			// Create the media frame.
 98			frame = wp.media.frames.customBackground = wp.media({
 99				// Set the title of the modal.
100				title: $el.data('choose'),
101
102				// Tell the modal to show only images.
103				library: {
104					type: 'image'
105				},
106
107				// Customize the submit button.
108				button: {
109					// Set the text of the button.
110					text: $el.data('update'),
111					/*
112					 * Tell the button not to close the modal, since we're
113					 * going to refresh the page when the image is selected.
114					 */
115					close: false
116				}
117			});
118
119			/**
120			 * When an image is selected, run a callback.
121			 *
122			 * @since 3.5.0
123			 *
124			 * @return {void}
125 			 */
126			frame.on( 'select', function() {
127				// Grab the selected attachment.
128				var attachment = frame.state().get('selection').first();
129				var nonceValue = $( '#_wpnonce' ).val() || '';
130
131				// Run an Ajax request to set the background image.
132				$.post( ajaxurl, {
133					action: 'set-background-image',
134					attachment_id: attachment.id,
135					_ajax_nonce: nonceValue,
136					size: 'full'
137				}).done( function() {
138					// When the request completes, reload the window.
139					window.location.reload();
140				});
141			});
142
143			// Finally, open the modal.
144			frame.open();
145		});
146	});
147})(jQuery);
148