[Summary view] [Print] [Text view]

   1  /* global ajaxurl */
   2  (function($) {
   3      $(document).ready(function() {
   4          var frame,
   5              bgImage = $( '#custom-background-image' );
   6  
   7          $('#background-color').wpColorPicker({
   8              change: function( event, ui ) {
   9                  bgImage.css('background-color', ui.color.toString());
  10              },
  11              clear: function() {
  12                  bgImage.css('background-color', '');
  13              }
  14          });
  15  
  16          $('input[name="background-position-x"]').change(function() {
  17              bgImage.css('background-position', $(this).val() + ' top');
  18          });
  19  
  20          $('input[name="background-repeat"]').change(function() {
  21              bgImage.css('background-repeat', $(this).val());
  22          });
  23  
  24          $('#choose-from-library-link').click( function( event ) {
  25              var $el = $(this);
  26  
  27              event.preventDefault();
  28  
  29              // If the media frame already exists, reopen it.
  30              if ( frame ) {
  31                  frame.open();
  32                  return;
  33              }
  34  
  35              // Create the media frame.
  36              frame = wp.media.frames.customBackground = wp.media({
  37                  // Set the title of the modal.
  38                  title: $el.data('choose'),
  39  
  40                  // Tell the modal to show only images.
  41                  library: {
  42                      type: 'image'
  43                  },
  44  
  45                  // Customize the submit button.
  46                  button: {
  47                      // Set the text of the button.
  48                      text: $el.data('update'),
  49                      // Tell the button not to close the modal, since we're
  50                      // going to refresh the page when the image is selected.
  51                      close: false
  52                  }
  53              });
  54  
  55              // When an image is selected, run a callback.
  56              frame.on( 'select', function() {
  57                  // Grab the selected attachment.
  58                  var attachment = frame.state().get('selection').first();
  59  
  60                  // Run an AJAX request to set the background image.
  61                  $.post( ajaxurl, {
  62                      action: 'set-background-image',
  63                      attachment_id: attachment.id,
  64                      size: 'full'
  65                  }).done( function() {
  66                      // When the request completes, reload the window.
  67                      window.location.reload();
  68                  });
  69              });
  70  
  71              // Finally, open the modal.
  72              frame.open();
  73          });
  74      });
  75  })(jQuery);