wp-admin/js/custom-background.js

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