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