[Summary view] [Print] [Text view]

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