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