Changeset 22502

Timestamp:

11/09/2012 11:37:24 AM (14 years ago)

Author:

koopersmith

Message:

Integrate media with the custom background page. fixes #21818, see #21390.

Location:

trunk

Files:

• wp-admin/custom-background.php (modified) (2 diffs)
• wp-admin/js/custom-background.js (modified) (2 diffs)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/wp-admin/custom-background.php

@@ -107 +107 @@
 
                 add_thickbox();
-                wp_enqueue_script('media-upload');
+                wp_enqueue_media();
                 wp_enqueue_script('custom-background');
                 wp_enqueue_style('wp-color-picker');
@@ -270 +270 @@
         <p>
                 <label for="choose-from-library-link"><?php _e( 'Or choose an image from your media library:' ); ?></label><br />
-                <a id="choose-from-library-link" class="button thickbox" href="<?php echo esc_url( $image_library_url ); ?>"><?php _e( 'Choose Image' ); ?></a>
+                <a id="choose-from-library-link" class="button"
+                        data-choose="<?php esc_attr_e( 'Choose a Background Image' ); ?>"
+                        data-update="<?php esc_attr_e( 'Set as background' ); ?>"><?php _e( 'Choose Image' ); ?></a>
         </p>
         </form>

trunk/wp-admin/js/custom-background.js

@@ -1 +1 @@
 (function($) {
-
         $(document).ready(function() {
-                var bgImage = $("#custom-background-image");
+                var bgImage = $("#custom-background-image"),
+                        frame;
 
                 $('#background-color').wpColorPicker({
@@ -20 +20 @@
                         bgImage.css('background-repeat', $(this).val());
                 });
+
+                $('#choose-from-library-link').click( function( event ) {
+                        var $el = $(this);
+
+                        event.preventDefault();
+
+                        if ( frame ) {
+                                frame.open();
+                                return;
+                        }
+
+                        frame = wp.media({
+                                title:     $el.data('choose'),
+                                library:   {
+                                        type: 'image'
+                                }
+                        });
+
+                        frame.toolbar.on( 'activate:select', function() {
+                                frame.toolbar.view().add({
+                                        select: {
+                                                style: 'primary',
+                                                text:  $el.data('update'),
+
+                                                click: function() {
+                                                        var attachment = frame.state().get('selection').first();
+                                                        $.post( ajaxurl, {
+                                                                action: 'set-background-image',
+                                                                attachment_id: attachment.id,
+                                                                size: 'full'
+                                                        }, function() {
+                                                                window.location.reload();
+                                                        });
+                                                }
+                                        }
+                                });
+                        });
+
+                        frame.state('library');
+                });
         });
-
 })(jQuery);

trunk/wp-includes/script-loader.php

@@ -502 +502 @@
 
                 $scripts->add( 'custom-header', "/wp-admin/js/custom-header.js", array( 'jquery-masonry' ), false, 1 );
-                $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array( 'wp-color-picker' ), false, 1 );
+                $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array( 'wp-color-picker', 'media-views' ), false, 1 );
                 $scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );
         }