balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

custom-background.js (3435B)

      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);