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                 $( 'select[name="background-size"]' ).change( function() {
  17                         bgImage.css( 'background-size', $( this ).val() );
  18                 });
  19
  20                 $( 'input[name="background-position"]' ).change( function() {
  21                         bgImage.css( 'background-position', $( this ).val() );
  22                 });
  23
  24                 $( 'input[name="background-repeat"]' ).change( function() {
  25                         bgImage.css( 'background-repeat', $( this ).is( ':checked' ) ? 'repeat' : 'no-repeat' );
  26                 });
  27
  28                 $( 'input[name="background-attachment"]' ).change( function() {
  29                         bgImage.css( 'background-attachment', $( this ).is( ':checked' ) ? 'scroll' : 'fixed' );
  30                 });
  31
  32                 $('#choose-from-library-link').click( function( event ) {
  33                         var $el = $(this);
  34
  35                         event.preventDefault();
  36
  37                         // If the media frame already exists, reopen it.
  38                         if ( frame ) {
  39                                 frame.open();
  40                                 return;
  41                         }
  42
  43                         // Create the media frame.
  44                         frame = wp.media.frames.customBackground = wp.media({
  45                                 // Set the title of the modal.
  46                                 title: $el.data('choose'),
  47
  48                                 // Tell the modal to show only images.
  49                                 library: {
  50                                         type: 'image'
  51                                 },
  52
  53                                 // Customize the submit button.
  54                                 button: {
  55                                         // Set the text of the button.
  56                                         text: $el.data('update'),
  57                                         // Tell the button not to close the modal, since we're
  58                                         // going to refresh the page when the image is selected.
  59                                         close: false
  60                                 }
  61                         });
  62
  63                         // When an image is selected, run a callback.
  64                         frame.on( 'select', function() {
  65                                 // Grab the selected attachment.
  66                                 var attachment = frame.state().get('selection').first();
  67
  68                                 // Run an AJAX request to set the background image.
  69                                 $.post( ajaxurl, {
  70                                         action: 'set-background-image',
  71                                         attachment_id: attachment.id,
  72                                         size: 'full'
  73                                 }).done( function() {
  74                                         // When the request completes, reload the window.
  75                                         window.location.reload();
  76                                 });
  77                         });
  78
  79                         // Finally, open the modal.
  80                         frame.open();
  81                 });
  82         });
  83 })(jQuery);