wp-admin/js/custom-background.js

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