Ticket #21785: 21785-customize-header.2.diff

src/wp-admin/css/customize-controls.css

@@ -455 +455 @@
         -webkit-overflow-scrolling: touch;
 }
 
+/** Header control **/
+
+#customize-control-header_image .current {
+        margin-bottom: 8px;
+}
+
+#customize-control-header_image .uploaded {
+        margin-bottom: 18px;
+}
+
+/* Header control: current image container */
+
+#customize-control-header_image .current .container {
+        overflow: hidden;
+        border-radius: 2px;
+}
+
+#customize-control-header_image .placeholder {
+        width: 100%;
+        position: relative;
+        background: #262626;
+        text-align: center;
+        cursor: default;
+}
+
+#customize-control-header_image .inner {
+        display: none;
+        position: absolute;
+        width: 100%;
+        height: 18px;
+        margin-top: -9px;
+        top: 50%;
+        color: #eee;
+}
+
+/* Header control: overlay "close" button */
+
+#customize-control-header_image .header-view {
+        position: relative;
+}
+
+#customize-control-header_image .uploaded .header-view .close {
+        font-size: 2em;
+        color: grey;
+        position: absolute;
+        visibility: hidden;
+        top: 10px;
+        right: 10px;
+        z-index: 1;
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+}
+
+#customize-control-header_image .uploaded .header-view .close:hover {
+ color: black;
+ text-shadow:
+    -1px -1px 0 #fff,
+    1px -1px 0 #fff,
+    -1px 1px 0 #fff,
+    1px 1px 0 #fff; 
+}
+
+#customize-control-header_image .header-view:hover .close {
+        visibility: visible;
+}
+
+/* Header control: randomiz(s)er */
+
+#customize-control-header_image .random.placeholder {
+        cursor: pointer;
+        border-radius: 2px;
+        height: 40px;
+}
+
+#customize-control-header_image .random .inner {
+        display: block;
+}
+
+#customize-control-header_image .dice {
+        font-size: 16px;
+        vertical-align: -1px;
+}
+
+#customize-control-header_image .placeholder:hover .dice {
+        -webkit-animation: dice-color-change 3s infinite;
+        -moz-animation: dice-color-change 3s infinite;
+        -ms-animation: dice-color-change 3s infinite;
+        animation: dice-color-change 3s infinite;
+}
+
+@-webkit-keyframes dice-color-change {
+        0% { color: #d4b146; }
+        50% { color: #ef54b0; }
+        75% { color: #7190d3; }
+        100% { color: #d4b146; }
+}
+
+@-moz-keyframes dice-color-change {
+        0% { color: #d4b146; }
+        50% { color: #ef54b0; }
+        75% { color: #7190d3; }
+        100% { color: #d4b146; }
+}
+
+@-ms-keyframes dice-color-change {
+        0% { color: #d4b146; }
+        50% { color: #ef54b0; }
+        75% { color: #7190d3; }
+        100% { color: #d4b146; }
+}
+
+@keyframes dice-color-change {
+        0% { color: #d4b146; }
+        50% { color: #ef54b0; }
+        75% { color: #7190d3; }
+        100% { color: #d4b146; }
+}
+
+/* Header control: actions and choices */
+
+#customize-control-header_image .actions {
+        margin-bottom: 32px;
+}
+
+#customize-control-header_image .choice {
+        position: relative;
+        display: block;
+        margin-bottom: 9px;
+}
+
+#customize-control-header_image .choice.random:before {
+        position: absolute;
+        content: attr(data-label);
+        left: 0;
+        top: 0;
+}
+
+#customize-control-header_image .uploaded div:last-child > .choice {
+        margin-bottom: 0;
+}
+
+#customize-control-header_image .choices hr {
+        visibility: hidden;
+}
+
+#customize-control-header_image img {
+        width: 100%;
+        border-radius: 2px;
+}
+
+#customize-control-header_image .remove {
+        float: left;
+        margin-right: 3px;
+}
+
+#customize-control-header_image .new {
+        float: right;
+}
+
+
 /** Handle cheaters. */
 body.cheatin {
         min-width: 0;

src/wp-admin/custom-header.php

@@ -43 +43 @@
         var $default_headers = array();
 
         /**
-         * Holds custom headers uploaded by the user
+         * Holds custom headers uploaded by the user.
          *
          * @var array
          * @since 3.2.0
@@ -72 +72 @@
                 $this->admin_header_callback = $admin_header_callback;
                 $this->admin_image_div_callback = $admin_image_div_callback;
 
+                if ( current_theme_supports( 'custom-header' ) ) {
+                        add_action( 'customize_save_after', array( $this, 'set_last_used' ) );
+                        add_action( 'wp_ajax_header_crop', array( $this, 'ajax_header_crop' ) );
+                        add_action( 'wp_ajax_header_add', array( $this, 'ajax_header_add' ) );
+                        add_action( 'wp_ajax_header_remove', array( $this, 'ajax_header_remove' ) );
+                }
+
                 add_action( 'admin_menu', array( $this, 'init' ) );
         }
 
@@ -93 +100 @@
                 add_action("admin_head-$page", array($this, 'js'), 50);
                 if ( $this->admin_header_callback )
                         add_action("admin_head-$page", $this->admin_header_callback, 51);
+
         }
 
         /**
@@ -819 +827 @@
                 $attachment_id = absint( $_POST['attachment_id'] );
                 $original = get_attached_file($attachment_id);
 
-
-                $max_width = 0;
-                // For flex, limit size of image displayed to 1500px unless theme says otherwise
-                if ( current_theme_supports( 'custom-header', 'flex-width' ) )
-                        $max_width = 1500;
-
-                if ( current_theme_supports( 'custom-header', 'max-width' ) )
-                        $max_width = max( $max_width, get_theme_support( 'custom-header', 'max-width' ) );
-                $max_width = max( $max_width, get_theme_support( 'custom-header', 'width' ) );
-
-                if ( ( current_theme_supports( 'custom-header', 'flex-height' ) && ! current_theme_supports( 'custom-header', 'flex-width' ) ) || $_POST['width'] > $max_width )
-                        $dst_height = absint( $_POST['height'] * ( $max_width / $_POST['width'] ) );
-                elseif ( current_theme_supports( 'custom-header', 'flex-height' ) && current_theme_supports( 'custom-header', 'flex-width' ) )
-                        $dst_height = absint( $_POST['height'] );
-                else
-                        $dst_height = get_theme_support( 'custom-header', 'height' );
-
-                if ( ( current_theme_supports( 'custom-header', 'flex-width' ) && ! current_theme_supports( 'custom-header', 'flex-height' ) ) || $_POST['width'] > $max_width )
-                        $dst_width = absint( $_POST['width'] * ( $max_width / $_POST['width'] ) );
-                elseif ( current_theme_supports( 'custom-header', 'flex-width' ) && current_theme_supports( 'custom-header', 'flex-height' ) )
-                        $dst_width = absint( $_POST['width'] );
-                else
-                        $dst_width = get_theme_support( 'custom-header', 'width' );
+                extract( $this->get_header_dimensions( array(
+                        'width' => $_POST['width'],
+                        'height' => $_POST['height'],
+                ) ) );
 
                 if ( empty( $_POST['skip-cropping'] ) )
                         $cropped = wp_crop_image( $attachment_id, (int) $_POST['x1'], (int) $_POST['y1'], (int) $_POST['width'], (int) $_POST['height'], $dst_width, $dst_height );
@@ -856 +845 @@
                 /** This filter is documented in wp-admin/custom-header.php */
                 $cropped = apply_filters( 'wp_create_file_in_uploads', $cropped, $attachment_id ); // For replication
 
-                $parent = get_post($attachment_id);
-                $parent_url = $parent->guid;
-                $url = str_replace( basename( $parent_url ), basename( $cropped ), $parent_url );
-
-                $size = @getimagesize( $cropped );
-                $image_type = ( $size ) ? $size['mime'] : 'image/jpeg';
+                $object = $this->create_attachment_object( $cropped, $attachment_id );
 
-                // Construct the object array
-                $object = array(
-                        'ID' => $attachment_id,
-                        'post_title' => basename($cropped),
-                        'post_content' => $url,
-                        'post_mime_type' => $image_type,
-                        'guid' => $url,
-                        'context' => 'custom-header'
-                );
                 if ( ! empty( $_POST['create-new-attachment'] ) )
                         unset( $object['ID'] );
 
                 // Update the attachment
-                $attachment_id = wp_insert_attachment( $object, $cropped );
-                wp_update_attachment_metadata( $attachment_id, wp_generate_attachment_metadata( $attachment_id, $cropped ) );
+                $attachment_id = $this->insert_attachment( $object, $cropped );
 
                 $width = $dst_width;
                 $height = $dst_height;
+                $url = $object['guid'];
                 $this->set_header_image( compact( 'url', 'attachment_id', 'width', 'height' ) );
 
                 // cleanup
@@ -1041 +1016 @@
                 set_theme_mod( 'header_image', $default );
                 set_theme_mod( 'header_image_data', (object) $default_data );
         }
+
+        /**
+         * Calculate dst_width and dst_height based on what the currently selected theme supports.
+         *
+         * @return array dst_height and dst_width of header image.
+         */
+        final public function get_header_dimensions( $dimensions ) {
+                $max_width = 0;
+                $width = absint( $dimensions['width'] );
+                $height = absint( $dimensions['height'] );
+                $theme_height = get_theme_support( 'custom-header', 'height' );
+                $theme_width = get_theme_support( 'custom-header', 'width' );
+                $has_flex_width = current_theme_supports( 'custom-header', 'flex-width' );
+                $has_flex_height = current_theme_supports( 'custom-header', 'flex-height' );
+                $has_max_width = current_theme_supports( 'custom-header', 'max-width' ) ;
+                $dst = array();
+
+                // For flex, limit size of image displayed to 1500px unless theme says otherwise
+                if ( $has_flex_width )
+                        $max_width = 1500;
+
+                if ( $has_max_width )
+                        $max_width = max( $max_width, get_theme_support( 'custom-header', 'max-width' ) );
+                $max_width = max( $max_width, $theme_width );
+
+                if ( $has_flex_height && ( ! $has_flex_width || $width > $max_width ) )
+                        $dst['dst_height'] = absint( $height * ( $max_width / $width ) );
+                elseif ( $has_flex_height && $has_flex_width )
+                        $dst['dst_height'] = $height;
+                else
+                        $dst['dst_height'] = $theme_height;
+
+                if ( $has_flex_width && ( ! $has_flex_height || $width > $max_width ) )
+                        $dst['dst_width'] = absint( $width * ( $max_width / $width ) );
+                elseif ( $has_flex_width && $has_flex_height )
+                        $dst['dst_width'] = $width;
+                else
+                        $dst['dst_width'] = $theme_width;
+
+                return $dst;
+        }
+
+        /**
+         * Create an attachment 'object'.
+         *
+         * @param string $cropped Cropped image URL.
+         * @param int $parent_attachment_id Attachment ID of parent image.
+         *
+         * @return array Attachment object.
+         */
+        final public function create_attachment_object( $cropped, $parent_attachment_id ) {
+                $parent = get_post( $parent_attachment_id );
+                $parent_url = $parent->guid;
+                $url = str_replace( basename( $parent_url ), basename( $cropped ), $parent_url );
+
+                $size = @getimagesize( $cropped );
+                $image_type = ( $size ) ? $size['mime'] : 'image/jpeg';
+
+                $object = array(
+                        'ID' => $parent_attachment_id,
+                        'post_title' => basename($cropped),
+                        'post_content' => $url,
+                        'post_mime_type' => $image_type,
+                        'guid' => $url,
+                        'context' => 'custom-header'
+                );
+
+                return $object;
+        }
+
+        /**
+         * Insert an attachment & its metadata.
+         *
+         * @param array $object Attachment object.
+         * @param string $cropped Cropped image URL.
+         *
+         * @return int Attachment ID.
+         */
+        final public function insert_attachment( $object, $cropped ) {
+                $attachment_id = wp_insert_attachment( $object, $cropped );
+                $metadata = wp_generate_attachment_metadata( $attachment_id, $cropped );
+                /**
+                 * Allows us to insert custom meta data for an attachment.
+                 *
+                 */
+                $metadata = apply_filters( 'wp_header_image_attachment_metadata', $metadata );
+                wp_update_attachment_metadata( $attachment_id, $metadata );
+                return $attachment_id;
+        }
+
+        function ajax_check_permission( $name, $nonce, $attachment_id = null ) {
+                $name = $attachment_id === null ? $name : "${name}_${attachment_id}";
+                if ( ! isset( $nonce ) || ! wp_verify_nonce( $nonce, $name ) ||
+                                        ! current_user_can('edit_theme_options') ) {
+                        wp_die( __( 'Cheatin’ uh?' ) );
+                }
+        }
+
+        /**
+         * Gets attachment uploaded by Media Manager, crops it, then saves it as a
+         * new object. Returns JSON-encoded object details.
+         */
+        function ajax_header_crop() {
+                $data = $_POST['data'];
+                $this->ajax_check_permission( 'crop-image', $data['nonces']['crop'], $data['id'] );
+                if ( ! current_theme_supports( 'custom-header', 'uploads' ) )
+                        wp_die( __( 'Cheatin’ uh?' ) );
+
+                if ( ! empty( $data['skip-cropping'] ) && ! ( current_theme_supports( 'custom-header', 'flex-height' ) || current_theme_supports( 'custom-header', 'flex-width' ) ) )
+                        wp_die( __( 'Cheatin’ uh?' ) );
+
+                $crop_details = $data['cropDetails'];
+
+                $dimensions = $this->get_header_dimensions( array(
+                        'width' => $crop_details['width'],
+                        'height' => $crop_details['height'],
+                ) );
+
+                $attachment_id = absint( $data['id'] );
+
+                $cropped = wp_crop_image( $attachment_id, (int) $crop_details['x1'], (int) $crop_details['y1'], (int) $crop_details['width'], (int) $crop_details['height'], (int) $dimensions['dst_width'], (int) $dimensions['dst_height'] );
+
+                if ( ! $cropped || is_wp_error( $cropped ) )
+                        wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) );
+
+                $cropped = apply_filters( 'wp_create_file_in_uploads', $cropped, $attachment_id ); // For replication
+
+                $object = $this->create_attachment_object( $cropped, $attachment_id );
+
+                unset( $object['ID'] );
+
+                $new_attachment_id = $this->insert_attachment( $object, $cropped );
+
+                $object['attachment_id'] = $new_attachment_id;
+                $object['width']         = $dimensions['dst_width'];
+                $object['height']        = $dimensions['dst_height'];
+
+                echo json_encode($object);
+                wp_die();
+        }
+
+        /**
+         * Given an attachment ID for a header image, updates its "last used"
+         * timestamp to now.
+         *
+         * Triggered when the user tries adds a new header image from the
+         * Media Manager, even if s/he doesn't save that change.
+         */
+        function ajax_header_add() {
+                $data = $_POST['data'];
+                $this->ajax_check_permission( 'header-add', $_REQUEST['nonce'] );
+
+                $attachment_id = absint( $data['attachment_id'] );
+                if ( $attachment_id < 1 )
+                        return;
+
+                $key = '_wp_attachment_custom_header_last_used_' . get_stylesheet();
+                update_post_meta( $attachment_id, $key, time() );
+                update_post_meta( $attachment_id, '_wp_attachment_is_custom_header', get_stylesheet() );
+
+                wp_die();
+        }
+
+        /**
+         * Given an attachment ID for a header image, unsets it as a user-uploaded
+         * header image for the current theme.
+         *
+         * Triggered when the user clicks the overlay "X" button next to each image
+         * choice in the Customizer's Header tool.
+         */
+        function ajax_header_remove() {
+                $data = $_POST['data'];
+                $this->ajax_check_permission( 'header-remove', $_REQUEST['nonce'] );
+
+                $attachment_id = absint( $data['attachment_id'] );
+                if ( $attachment_id < 1 )
+                        return;
+
+                $key = '_wp_attachment_custom_header_last_used_' . get_stylesheet();
+                delete_post_meta( $attachment_id, $key );
+                delete_post_meta( $attachment_id, '_wp_attachment_is_custom_header', get_stylesheet() );
+
+                wp_die();
+        }
+
+        function set_last_used( $manager ) {
+                $data = $manager->get_setting( 'header_image_data' )->post_value();
+
+                if ( !isset( $data['attachment_id'] ) )
+                        return;
+
+                $attachment_id = $data['attachment_id'];
+                $key = '_wp_attachment_custom_header_last_used_' . get_stylesheet();
+                update_post_meta( $attachment_id, $key, time() );
+        }
 }

src/wp-admin/js/customize-controls.js

@@ +1 @@
+/* globals _wpCustomizeHeader, _wpMediaViewsL10n */
 (function( exports, $ ){
         var api = wp.customize;
 
@@ -306 +307 @@
                 }
         });
 
+        api.HeaderControl = api.Control.extend({
+                ready: function() {
+                        this.btnRemove        = $('.actions .remove');
+                        this.btnNew           = $('.actions .new');
+
+                        _.bindAll(this, 'openMM', 'removeImage');
+
+                        this.btnNew.on( 'click', this.openMM );
+                        this.btnRemove.on( 'click', this.removeImage );
+
+                        api.HeaderTool.currentHeader = new api.HeaderTool.ImageModel();
+
+                        new api.HeaderTool.CurrentView({
+                                model: api.HeaderTool.currentHeader,
+                                el: '.current .container'
+                        });
+
+                        new api.HeaderTool.ChoiceListView({
+                                collection: api.HeaderTool.UploadsList = new api.HeaderTool.ChoiceList(),
+                                el: '.choices .uploaded .list'
+                        });
+
+                        new api.HeaderTool.ChoiceListView({
+                                collection: api.HeaderTool.DefaultsList = new api.HeaderTool.DefaultsList(),
+                                el: '.choices .default .list'
+                        });
+
+                        api.HeaderTool.combinedList = api.HeaderTool.CombinedList = new api.HeaderTool.CombinedList([
+                                api.HeaderTool.UploadsList,
+                                api.HeaderTool.DefaultsList
+                        ]);
+                },
+
+                /**
+                 * Returns a set of options, computed from the attached image data and
+                 * theme-specific data, to be fed to the imgAreaSelect plugin in
+                 * wp.media.view.Cropper.
+                 *
+                 * @param {wp.media.model.Attachment} attachment
+                 * @param {wp.media.controller.Cropper} controller
+                 * @returns {Object} Options
+                 */
+                calculateImageSelectOptions: function(attachment, controller) {
+                        var xInit = parseInt(_wpCustomizeHeader.data.width, 10),
+                                yInit = parseInt(_wpCustomizeHeader.data.height, 10),
+                                flexWidth = !! parseInt(_wpCustomizeHeader.data['flex-width'], 10),
+                                flexHeight = !! parseInt(_wpCustomizeHeader.data['flex-height'], 10),
+                                ratio, xImg, yImg, realHeight, realWidth,
+                                imgSelectOptions;
+
+                        realWidth = attachment.get('width');
+                        realHeight = attachment.get('height');
+
+                        this.headerImage = new api.HeaderTool.ImageModel();
+                        this.headerImage.set({
+                                themeWidth: xInit,
+                                themeHeight: yInit,
+                                themeFlexWidth: flexWidth,
+                                themeFlexHeight: flexHeight,
+                                imageWidth: realWidth,
+                                imageHeight: realHeight
+                        });
+
+                        controller.set( 'canSkipCrop', ! this.headerImage.shouldBeCropped() );
+
+                        ratio = xInit / yInit;
+                        xImg = realWidth;
+                        yImg = realHeight;
+
+                        if ( xImg / yImg > ratio ) {
+                                yInit = yImg;
+                                xInit = yInit * ratio;
+                        } else {
+                                xInit = xImg;
+                                yInit = xInit / ratio;
+                        }
+
+                        imgSelectOptions = {
+                                handles: true,
+                                keys: true,
+                                instance: true,
+                                persistent: true,
+                                parent: this.$el,
+                                imageWidth: realWidth,
+                                imageHeight: realHeight,
+                                x1: 0,
+                                y1: 0,
+                                x2: xInit,
+                                y2: yInit
+                        };
+
+                        if (flexHeight === false && flexWidth === false) {
+                                imgSelectOptions.aspectRatio = xInit + ':' + yInit;
+                        }
+                        if (flexHeight === false ) {
+                                imgSelectOptions.maxHeight = yInit;
+                        }
+                        if (flexWidth === false ) {
+                                imgSelectOptions.maxWidth = xInit;
+                        }
+
+                        return imgSelectOptions;
+                },
+
+                /**
+                 * Sets up and opens the Media Manager in order to select an image.
+                 * Depending on both the size of the image and the properties of the
+                 * current theme, a cropping step after selection may be required or
+                 * skippable.
+                 *
+                 * @param {event} event
+                 */
+                openMM: function(event) {
+                        var title, suggestedWidth, suggestedHeight,
+                                l10n = _wpMediaViewsL10n;
+
+                        event.preventDefault();
+
+                        suggestedWidth = l10n.suggestedWidth.replace('%d', _wpCustomizeHeader.data.width);
+                        suggestedHeight = l10n.suggestedHeight.replace('%d', _wpCustomizeHeader.data.height);
+
+                        title = {
+                                html: l10n.chooseImage + ' <span class="suggested-dimensions">' +
+                                                        suggestedWidth + ' ' + suggestedHeight +'</span>',
+                                text: l10n.chooseImage
+                        };
+
+                        this.frame = wp.media({
+                                title: title,
+                                library: {
+                                        type: 'image'
+                                },
+                                button: {
+                                        text: l10n.selectAndCrop,
+                                        close: false
+                                },
+                                multiple: false,
+                                imgSelectOptions: this.calculateImageSelectOptions
+                        });
+
+                        this.frame.states.add([new wp.media.controller.Cropper()]);
+
+                        this.frame.on('select', this.onSelect, this);
+                        this.frame.on('cropped', this.onCropped, this);
+                        this.frame.on('skippedcrop', this.onSkippedCrop, this);
+
+                        this.frame.open();
+                },
+
+                onSelect: function() {
+                        this.frame.setState('cropper');
+                },
+                onCropped: function(croppedImage) {
+                        var url = croppedImage.post_content,
+                                attachmentId = croppedImage.attachment_id,
+                                w = croppedImage.width,
+                                h = croppedImage.height;
+                        this.setImageFromURL(url, attachmentId, w, h);
+                },
+                onSkippedCrop: function(selection) {
+                        var url = selection.get('url'),
+                                w = selection.get('width'),
+                                h = selection.get('height');
+                        this.setImageFromURL(url, selection.id, w, h);
+                },
+
+                /**
+                 * Creates a new wp.customize.HeaderTool.ImageModel from provided
+                 * header image data and inserts it into the user-uploaded headers
+                 * collection.
+                 *
+                 * @param {String} url
+                 * @param {Number} attachmentId
+                 * @param {Number} width
+                 * @param {Number} height
+                 */
+                setImageFromURL: function(url, attachmentId, width, height) {
+                        var choice, data = {};
+
+                        data.url = url;
+                        data.thumbnail_url = url;
+
+                        if (attachmentId) {
+                                data.attachment_id = attachmentId;
+                        }
+
+                        if (width) {
+                                data.width = width;
+                        }
+
+                        if (height) {
+                                data.height = height;
+                        }
+
+                        choice = new api.HeaderTool.ImageModel({
+                                header: data,
+                                choice: url.split('/').pop()
+                        });
+                        api.HeaderTool.UploadsList.add(choice);
+                        api.HeaderTool.currentHeader.set(choice.toJSON());
+                        choice.save();
+                        choice.importImage();
+                },
+
+                /**
+                 * Triggers the necessary events to deselect an image which was set as
+                 * the currently selected one.
+                 */
+                removeImage: function() {
+                        api.HeaderTool.currentHeader.trigger('hide');
+                        api.HeaderTool.CombinedList.trigger('control:removeImage');
+                }
+
+        });
+
         // Change objects contained within the main customize object to Settings.
         api.defaultConstructor = api.Setting;
 
@@ -686 +902 @@
         api.controlConstructor = {
                 color:  api.ColorControl,
                 upload: api.UploadControl,
-                image:  api.ImageControl
+                image:  api.ImageControl,
+                header: api.HeaderControl
         };
 
         $( function() {
@@ -961 +1178 @@
                         });
                 });
 
-                // Handle header image data
-                api.control( 'header_image', function( control ) {
-                        control.setting.bind( function( to ) {
-                                if ( to === control.params.removed )
-                                        control.settings.data.set( false );
-                        });
-
-                        control.library.on( 'click', 'a', function() {
-                                control.settings.data.set( $(this).data('customizeHeaderImageData') );
-                        });
-
-                        control.uploader.success = function( attachment ) {
-                                var data;
-
-                                api.ImageControl.prototype.success.call( control, attachment );
-
-                                data = {
-                                        attachment_id: attachment.get('id'),
-                                        url:           attachment.get('url'),
-                                        thumbnail_url: attachment.get('url'),
-                                        height:        attachment.get('height'),
-                                        width:         attachment.get('width')
-                                };
-
-                                attachment.element.data( 'customizeHeaderImageData', data );
-                                control.settings.data.set( data );
-                        };
-                });
-
                 api.trigger( 'ready' );
 
                 // Make sure left column gets focus

src/wp-includes/class-wp-customize-control.php

@@ -691 +691 @@
         }
 }
 
-/**
- * Customize Header Image Control Class
- *
- * @package WordPress
- * @subpackage Customize
- * @since 3.4.0
- */
-class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
-        /**
-         * The processed default headers.
-         * @since 3.4.2
-         * @var array
-         */
-        protected $default_headers;
-
-        /**
-         * The uploaded headers.
-         * @since 3.4.2
-         * @var array
-         */
-        protected $uploaded_headers;
+class WP_Customize_Header_Image_Control extends WP_Customize_Control {
+        public $type = 'header';
 
-        /**
-         * Constructor.
-         *
-         * @since 3.4.0
-         * @uses WP_Customize_Image_Control::__construct()
-         * @uses WP_Customize_Image_Control::add_tab()
-         *
-         * @param WP_Customize_Manager $manager
-         */
         public function __construct( $manager ) {
                 parent::__construct( $manager, 'header_image', array(
                         'label'    => __( 'Header Image' ),
@@ -733 +705 @@
                         'context'  => 'custom-header',
                         'removed'  => 'remove-header',
                         'get_url'  => 'get_header_image',
-                        'statuses' => array(
-                                ''                      => __('Default'),
-                                'remove-header'         => __('No Image'),
-                                'random-default-image'  => __('Random Default Image'),
-                                'random-uploaded-image' => __('Random Uploaded Image'),
+                ) );
+
+        }
+
+        public function to_json() {
+                parent::to_json();
+        }
+
+        public function enqueue() {
+                wp_enqueue_media();
+                wp_enqueue_script( 'customize-header-views' );
+
+                $this->prepare_control();
+
+                wp_localize_script( 'customize-header-views', '_wpCustomizeHeader', array(
+                        'data' => array(
+                                'width' => absint( get_theme_support( 'custom-header', 'width' ) ),
+                                'height' => absint( get_theme_support( 'custom-header', 'height' ) ),
+                                'flex-width' => absint( get_theme_support( 'custom-header', 'flex-width' ) ),
+                                'flex-height' => absint( get_theme_support( 'custom-header', 'flex-height' ) ),
+                                'currentImgSrc' => $this->get_current_image_src(),
+                        ),
+                        'nonces' => array(
+                                'add' => wp_create_nonce( 'header-add' ),
+                                'remove' => wp_create_nonce( 'header-remove' ),
+                        ),
+                        'l10n' => array(
+                                /* translators: header images uploaded by user */
+                                'uploaded' => __( 'uploaded' ),
+                                /* translators: header images suggested by the current theme */
+                                'default' => __( 'suggested' )
+                        ),
+                        'uploads' => $this->uploaded_headers,
+                        'defaults' => $this->default_headers
+                ) );
+
+                parent::enqueue();
+        }
+
+        public function get_default_header_images() {
+                global $custom_image_header;
+
+                // Get *the* default image if there is one
+                $default = get_theme_support( 'custom-header', 'default-image' );
+
+                if ( ! $default ) { // If not,
+                        return $custom_image_header->default_headers; // easy peasy.
+                }
+
+                $default = sprintf( $default,
+                        get_template_directory_uri(),
+                        get_stylesheet_directory_uri() );
+
+                $header_images = array();
+                $already_has_default = false;
+
+                // Get the whole set of default images
+                $default_header_images = $custom_image_header->default_headers;
+                foreach ( $default_header_images as $k => $h ) {
+                        if ( $h['url'] == $default ) {
+                                $already_has_default = true;
+                                break;
+                        }
+                }
+
+                // If *the one true image* isn't included in the default set, add it in
+                // first position
+                if ( ! $already_has_default ) {
+                        $header_images['default'] = array(
+                                'url' => $default,
+                                'thumbnail_url' => $default,
+                                'description' => 'Default'
+                        );
+                }
+
+                // The rest of the set comes after
+                $header_images = array_merge( $header_images, $default_header_images );
+
+                return $header_images;
+        }
+
+        public function get_uploaded_header_images() {
+                $key = '_wp_attachment_custom_header_last_used_' . get_stylesheet();
+                $header_images = array();
+
+                $headers_not_dated = get_posts( array(
+                        'post_type' => 'attachment',
+                        'meta_key' => '_wp_attachment_is_custom_header',
+                        'meta_value' => get_option('stylesheet'),
+                        'orderby' => 'none',
+                        'nopaging' => true,
+                        'meta_query' => array(
+                                array(
+                                        'key' => '_wp_attachment_is_custom_header',
+                                        'value' => get_option( 'stylesheet' ),
+                                        'compare' => 'LIKE'
+                                ),
+                                array(
+                                        'key' => $key,
+                                        'value' => 'this string must not be empty',
+                                        'compare' => 'NOT EXISTS'
+                                ),
                         )
                 ) );
 
-                // Remove the upload tab.
-                $this->remove_tab( 'upload-new' );
+                $headers_dated = get_posts( array(
+                        'post_type' => 'attachment',
+                        'meta_key' => $key,
+                        'orderby' => 'meta_value_num',
+                        'order' => 'DESC',
+                        'nopaging' => true,
+                        'meta_query' => array(
+                                array(
+                                        'key' => '_wp_attachment_is_custom_header',
+                                        'value' => get_option( 'stylesheet' ),
+                                        'compare' => 'LIKE'
+                                ),
+                        ),
+                ) );
+
+                $limit = apply_filters( 'custom_header_uploaded_limit', 15 );
+                $headers = array_merge( $headers_dated, $headers_not_dated );
+                $headers = array_slice( $headers, 0, $limit );
+
+                foreach ( (array) $headers as $header ) {
+                        $url = esc_url_raw( $header->guid );
+                        $header_data = wp_get_attachment_metadata( $header->ID );
+                        $timestamp = get_post_meta( $header->ID,
+                                '_wp_attachment_custom_header_last_used_' . get_stylesheet(),
+                                true );
+
+                        $h = array(
+                                'attachment_id' => $header->ID,
+                                'url'           => $url,
+                                'thumbnail_url' => $url,
+                                'timestamp'     => $timestamp ? $timestamp : 0,
+                        );
+
+                        if ( isset( $header_data['width'] ) ) {
+                                $h['width'] = $header_data['width'];
+                        }
+                        if ( isset( $header_data['height'] ) ) {
+                                $h['height'] = $header_data['height'];
+                        }
+
+                        $header_images[] = $h;
+                }
+
+                return $header_images;
         }
 
-        /**
-         * Prepares the control.
-         *
-         * If no tabs exist, removes the control from the manager.
-         *
-         * @since 3.4.2
-         */
         public function prepare_control() {
                 global $custom_image_header;
-                if ( empty( $custom_image_header ) )
-                        return parent::prepare_control();
+                if ( empty( $custom_image_header ) ) {
+                        return;
+                }
 
                 // Process default headers and uploaded headers.
                 $custom_image_header->process_default_headers();
-                $this->default_headers = $custom_image_header->default_headers;
-                $this->uploaded_headers = get_uploaded_header_images();
+                $this->default_headers = $this->get_default_header_images();
+                $this->uploaded_headers = $this->get_uploaded_header_images();
+        }
 
-                if ( $this->default_headers )
-                        $this->add_tab( 'default',  __('Default'),  array( $this, 'tab_default_headers' ) );
+        function print_header_image_template() {
+                ?>
+                <script type="text/template" id="tmpl-header-choice">
+                        <% if (random) { %>
+
+                        <div class="placeholder random">
+                                <div class="inner">
+                                        <span><span class="dice">&#9860;</span>
+                                                <?php /* translators: "nImages" is a number, "type" is either "uploaded" or "suggested" */ ?>
+                                                <?php _e( 'Randomize <%- nImages %> <%- type %> headers' ); ?>
+                                        </span>
+                                </div>
+                        </div>
 
-                if ( ! $this->uploaded_headers )
-                        $this->remove_tab( 'uploaded' );
+                        <% } else { %>
 
-                return parent::prepare_control();
-        }
+                        <% if (type == 'uploaded') { %>
+                        <div class="dashicons dashicons-no close"></div>
+                        <% } %>
 
-        /**
-         * @since 3.4.0
-         *
-         * @param mixed $choice Which header image to select. (@see Custom_Image_Header::get_header_image() )
-         * @param array $header
-         */
-        public function print_header_image( $choice, $header ) {
-                $header['url']           = set_url_scheme( $header['url'] );
-                $header['thumbnail_url'] = set_url_scheme( $header['thumbnail_url'] );
+                        <a href="#" class="choice thumbnail %>"
+                                data-customize-image-value="<%- header.url %>"
+                                data-customize-header-image-data="<%- JSON.stringify(header) %>">
+                                <img src="<%- header.thumbnail_url %>">
+                        </a>
 
-                $header_image_data = array( 'choice' => $choice );
-                foreach ( array( 'attachment_id', 'width', 'height', 'url', 'thumbnail_url' ) as $key ) {
-                        if ( isset( $header[ $key ] ) )
-                                $header_image_data[ $key ] = $header[ $key ];
-                }
+                        <% } %>
+                </script>
 
+                <script type="text/template" id="tmpl-header-current">
+                        <% if (choice) { %>
+                                <% if (random) { %>
 
-                ?>
-                <a href="#" class="thumbnail"
-                        data-customize-image-value="<?php echo esc_url( $header['url'] ); ?>"
-                        data-customize-header-image-data="<?php echo esc_attr( json_encode( $header_image_data ) ); ?>">
-                        <img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
-                </a>
+                        <div class="placeholder">
+                                <div class="inner">
+                                        <span><span class="dice">&#9860;</span>
+                                                <?php /* translators: "nImages" is a number, "type" is either "uploaded" or "suggested" */ ?>
+                                                <?php _e( 'Randomizing <%- nImages %> <%- type %> headers' ); ?>
+                                        </span>
+                                </div>
+                        </div>
+
+                                <% } else { %>
+
+                        <img src="<%- header.thumbnail_url %>" />
+
+                                <% } %>
+                        <% } else { %>
+
+                        <div class="placeholder">
+                                <div class="inner">
+                                        <span>
+                                                <?php _e( 'No image set' ); ?>
+                                        </span>
+                                </div>
+                        </div>
+
+                        <% } %>
+                </script>
                 <?php
         }
 
-        /**
-         * @since 3.4.0
-         */
-        public function tab_uploaded() {
-                ?><div class="uploaded-target"></div><?php
-
-                foreach ( $this->uploaded_headers as $choice => $header )
-                        $this->print_header_image( $choice, $header );
+        public function get_current_image_src() {
+                $src = $this->value();
+                if ( isset( $this->get_url ) ) {
+                        $src = call_user_func( $this->get_url, $src );
+                        return $src;
+                }
+                return null;
         }
 
-        /**
-         * @since 3.4.0
-         */
-        public function tab_default_headers() {
-                foreach ( $this->default_headers as $choice => $header )
-                        $this->print_header_image( $choice, $header );
+        public function render_content() {
+                $this->print_header_image_template();
+                $visibility = $this->get_current_image_src() ? '' : ' style="display:none" ';
+                $width = absint( get_theme_support( 'custom-header', 'width' ) );
+                $height = absint( get_theme_support( 'custom-header', 'height' ) );
+                ?>
+
+
+                <div class="customize-control-content">
+                        <p class="customizer-section-intro">
+                                <?php _e( 'Personalize your blog with your own header image.' ); ?>
+                                <?php
+                                if ( $width && $height ) {
+                                        printf( __( 'While you can crop images to your liking after clicking <strong>%s</strong>, your theme recommends a header size of <strong>%dx%d</strong> pixels.' ),
+                                                _x( 'Add new', 'new image', 'custom-header' ), $width, $height );
+                                } else {
+                                        if ( $width ) {
+                                                printf( __( 'While you can crop images to your liking after clicking <strong>%s</strong>, your theme recommends a header width of <strong>%d</strong> pixels.' ),
+                                                        _x( 'Add new', 'new image', 'custom-header' ), $width );
+                                        }
+                                        if ( $height ) {
+                                                printf( __( 'While you can crop images to your liking after clicking <strong>%s</strong>, your theme recommends a header height of <strong>%d</strong> pixels.' ),
+                                                        _x( 'Add new', 'new image', 'custom-header' ), $height );
+                                        }
+                                }
+                                ?>
+                        </p>
+                        <div class="current">
+                                <span class="customize-control-title">
+                                        <?php _e( 'Current header', 'custom-header' ); ?>
+                                </span>
+                                <div class="container">
+                                </div>
+                        </div>
+                        <div class="actions">
+                                <?php /* translators: Hide as in hide header image via the Customizer */ ?>
+                                <a href="#" <?php echo $visibility ?> class="button remove"><?php _e( 'Hide', 'custom-header' ); ?></a>
+                                <?php /* translators: New as in add new header image via the Customizer */ ?>
+                                <a href="#" class="button new"><?php _ex( 'Add new', 'new image', 'custom-header' ); ?></a>
+                                <div style="clear:both"></div>
+                        </div>
+                        <div class="choices">
+                                <span class="customize-control-title header-previously-uploaded">
+                                        <?php _e( 'Previously uploaded', 'custom-header' ); ?>
+                                </span>
+                                <div class="uploaded">
+                                        <div class="list">
+                                        </div>
+                                </div>
+                                <span class="customize-control-title header-default">
+                                        <?php _e( 'Suggested', 'custom-header' ); ?>
+                                </span>
+                                <div class="default">
+                                        <div class="list">
+                                        </div>
+                                </div>
+                        </div>
+                </div>
+                <?php
         }
-}
- No newline at end of file
+
+}

new file src/wp-includes/js/customize-header-models.js

@@ +1 @@
+/* globals jQuery, _wpCustomizeHeader, _wpCustomizeSettings */
+;( function( $, wp ) {
+        var api = wp.customize;
+        api.HeaderTool = {};
+
+
+        /**
+         * wp.customize.HeaderTool.ImageModel
+         *
+         * A header image. This is where saves via the Customizer API are
+         * abstracted away, plus our own AJAX calls to add images to and remove
+         * images from the user's recently uploaded images setting on the server.
+         * These calls are made regardless of whether the user actually saves new
+         * Customizer settings.
+         *
+         * @constructor
+         * @augments Backbone.Model
+         */
+        api.HeaderTool.ImageModel = Backbone.Model.extend({
+                defaults: function() {
+                        return {
+                                header: {
+                                        attachment_id: 0,
+                                        url: '',
+                                        timestamp: Date.now(),
+                                        thumbnail_url: ''
+                                },
+                                choice: '',
+                                hidden: false,
+                                random: false
+                        };
+                },
+
+                initialize: function() {
+                        this.on('hide', this.hide, this);
+                },
+
+                hide: function() {
+                        this.set('choice', '');
+                        api('header_image').set('remove-header');
+                        api('header_image_data').set('remove-header');
+                },
+
+                destroy: function() {
+                        var data = this.get('header'),
+                                curr = api.HeaderTool.currentHeader.get('header').attachment_id;
+
+                        // If the image we're removing is also the current header, unset
+                        // the latter
+                        if (curr && data.attachment_id === curr) {
+                                api.HeaderTool.currentHeader.trigger('hide');
+                        }
+
+                        $.post(_wpCustomizeSettings.url.ajax, {
+                                wp_customize: 'on',
+                                theme: api.settings.theme.stylesheet,
+                                dataType: 'json',
+                                action: 'header_remove',
+                                nonce: _wpCustomizeHeader.nonces.remove,
+                                data: data
+                        });
+
+                        this.trigger('destroy', this, this.collection);
+                },
+
+                save: function() {
+                        if (this.get('random')) {
+                                api('header_image').set(this.get('header').random);
+                                api('header_image_data').set(this.get('header').random);
+                        } else {
+                                if (this.get('header').defaultName) {
+                                        api('header_image').set(this.get('header').url);
+                                        api('header_image_data').set(this.get('header').defaultName);
+                                } else {
+                                        api('header_image').set(this.get('header').url);
+                                        api('header_image_data').set(this.get('header'));
+                                }
+                        }
+
+                        api.HeaderTool.combinedList.trigger('control:setImage', this);
+                },
+
+                importImage: function() {
+                        var data = this.get('header');
+                        if (data.attachment_id === undefined) {
+                                return;
+                        }
+
+                        $.post(_wpCustomizeSettings.url.ajax, {
+                                wp_customize: 'on',
+                                theme: api.settings.theme.stylesheet,
+                                dataType: 'json',
+                                action: 'header_add',
+                                nonce: _wpCustomizeHeader.nonces.add,
+                                data: data
+                        });
+                },
+
+                shouldBeCropped: function() {
+                        if (this.get('themeFlexWidth') === true &&
+                                                this.get('themeFlexHeight') === true) {
+                                return false;
+                        }
+
+                        if (this.get('themeFlexWidth') === true &&
+                                this.get('themeHeight') === this.get('imageHeight')) {
+                                return false;
+                        }
+
+                        if (this.get('themeFlexHeight') === true &&
+                                this.get('themeWidth') === this.get('imageWidth')) {
+                                return false;
+                        }
+
+                        if (this.get('themeWidth') === this.get('imageWidth') &&
+                                this.get('themeHeight') === this.get('imageHeight')) {
+                                return false;
+                        }
+
+                        return true;
+                }
+        });
+
+
+        /**
+         * wp.customize.HeaderTool.ChoiceList
+         *
+         * @constructor
+         * @augments Backbone.Collection
+         */
+        api.HeaderTool.ChoiceList = Backbone.Collection.extend({
+                model: api.HeaderTool.ImageModel,
+
+                // Ordered from most recently used to least
+                comparator: function(model) {
+                        return -model.get('header').timestamp;
+                },
+
+                initialize: function() {
+                        var current = api.HeaderTool.currentHeader.get('choice').replace(/^https?:\/\//, ''),
+                                isRandom = this.isRandomChoice(api.get().header_image);
+
+                        // Overridable by an extending class
+                        if (!this.type) {
+                                this.type = 'uploaded';
+                        }
+
+                        // Overridable by an extending class
+                        if (!this.data) {
+                                this.data = _wpCustomizeHeader.uploads;
+                        }
+
+                        if (isRandom) {
+                                // So that when adding data we don't hide regular images
+                                current = api.get().header_image;
+                        }
+
+                        this.on('control:setImage', this.setImage, this);
+                        this.on('control:removeImage', this.removeImage, this);
+                        this.on('add', this.maybeAddRandomChoice, this);
+
+                        _.each(this.data, function(elt, index) {
+                                if (!elt.attachment_id) {
+                                        elt.defaultName = index;
+                                }
+
+                                this.add({
+                                        header: elt,
+                                        choice: elt.url.split('/').pop(),
+                                        hidden: current === elt.url.replace(/^https?:\/\//, '')
+                                }, { silent: true });
+                        }, this);
+
+                        if (this.size() > 0) {
+                                this.addRandomChoice(current);
+                        }
+                },
+
+                maybeAddRandomChoice: function() {
+                        if (this.size() === 1) {
+                                this.addRandomChoice();
+                        }
+                },
+
+                addRandomChoice: function(initialChoice) {
+                        var isRandomSameType = RegExp(this.type).test(initialChoice),
+                                randomChoice = 'random-' + this.type + '-image';
+
+                        this.add({
+                                header: {
+                                        timestamp: 0,
+                                        random: randomChoice,
+                                        width: 245,
+                                        height: 41
+                                },
+                                choice: randomChoice,
+                                random: true,
+                                hidden: isRandomSameType
+                        });
+                },
+
+                isRandomChoice: function(choice) {
+                        return (/^random-(uploaded|default)-image$/).test(choice);
+                },
+
+                shouldHideTitle: function() {
+                        return _.every(this.pluck('hidden'));
+                },
+
+                setImage: function(model) {
+                        this.each(function(m) {
+                                m.set('hidden', false);
+                        });
+
+                        if (model) {
+                                model.set('hidden', true);
+                                // Bump images to top except for special "Randomize" images
+                                if (!model.get('random')) {
+                                        model.get('header').timestamp = Date.now();
+                                        this.sort();
+                                }
+                        }
+                },
+
+                removeImage: function() {
+                        this.each(function(m) {
+                                m.set('hidden', false);
+                        });
+                },
+
+                shown: function() {
+                        var filtered = this.where({ hidden: false });
+                        return new api.HeaderTool.ChoiceList( filtered );
+                }
+        });
+
+
+        /**
+         * wp.customize.HeaderTool.DefaultsList
+         *
+         * @constructor
+         * @augments wp.customize.HeaderTool.ChoiceList
+         * @augments Backbone.Collection
+         */
+        api.HeaderTool.DefaultsList = api.HeaderTool.ChoiceList.extend({
+                initialize: function() {
+                        this.type = 'default';
+                        this.data = _wpCustomizeHeader.defaults;
+                        api.HeaderTool.ChoiceList.prototype.initialize.apply(this);
+                }
+        });
+
+})( jQuery, this.wp );

new file src/wp-includes/js/customize-header-views.js

@@ +1 @@
+/* globals jQuery, _, Backbone, _wpCustomizeHeader */
+;( function( $, wp, _ ) {
+        if ( ! wp || ! wp.customize ) { return; }
+        var api = wp.customize;
+
+
+        /**
+         * wp.customize.HeaderTool.CurrentView
+         *
+         * Displays the currently selected header image, or a placeholder in lack
+         * thereof.
+         *
+         * Instantiate with model wp.customize.HeaderTool.currentHeader.
+         *
+         * @constructor
+         * @augments Backbone.View
+         */
+        api.HeaderTool.CurrentView = Backbone.View.extend({
+                template: _.template($('#tmpl-header-current').html()),
+
+                initialize: function() {
+                        this.listenTo(this.model, 'change', this.render);
+                        this.render();
+                },
+
+                render: function() {
+                        this.$el.html(this.template(this.model.toJSON()));
+                        this.setPlaceholder();
+                        this.setButtons();
+                        return this;
+                },
+
+                getHeight: function() {
+                        var image = this.$el.find('img'),
+                                saved = this.model.get('savedHeight'),
+                                height = image.height() || saved,
+                                headerImageData;
+
+                        if (image.length) {
+                                this.$el.find('.inner').hide();
+                        } else {
+                                this.$el.find('.inner').show();
+                        }
+
+                        // happens at ready
+                        if (!height) {
+                                headerImageData = api.get().header_image_data;
+
+                                if (headerImageData && headerImageData.width && headerImageData.height) {
+                                        // hardcoded container width
+                                        height = 260 / headerImageData.width * headerImageData.height;
+                                }
+                                else {
+                                        // fallback for when no image is set
+                                        height = 40;
+                                }
+                        }
+
+                        return height;
+                },
+
+                setPlaceholder: function(_height) {
+                        var height = _height || this.getHeight();
+                        this.model.set('savedHeight', height);
+                        this.$el
+                                .add(this.$el.find('.placeholder'))
+                                .height(height);
+                },
+
+                setButtons: function() {
+                        var elements = $('.actions .remove');
+                        if (this.model.get('choice')) {
+                                elements.show();
+                        } else {
+                                elements.hide();
+                        }
+                }
+        });
+
+
+        /**
+         * wp.customize.HeaderTool.ChoiceView
+         *
+         * Represents a choosable header image, be it user-uploaded,
+         * theme-suggested or a special Randomize choice.
+         *
+         * Takes a wp.customize.HeaderTool.ImageModel.
+         *
+         * Manually changes model wp.customize.HeaderTool.currentHeader via the
+         * `select` method.
+         *
+         * @constructor
+         * @augments Backbone.View
+         */
+        (function () { // closures FTW
+        var lastHeight = 0;
+        api.HeaderTool.ChoiceView = Backbone.View.extend({
+                template: _.template($('#tmpl-header-choice').html()),
+
+                className: 'header-view',
+
+                events: {
+                        'click .choice,.random': 'select',
+                        'click .close': 'removeImage'
+                },
+
+                initialize: function() {
+                        var properties = [
+                                this.model.get('header').url,
+                                this.model.get('choice')
+                        ];
+
+                        this.listenTo(this.model, 'change', this.render);
+
+                        if (_.contains(properties, api.get().header_image)) {
+                                api.HeaderTool.currentHeader.set(this.extendedModel());
+                        }
+                },
+
+                render: function() {
+                        var model = this.model;
+
+                        this.$el.html(this.template(this.extendedModel()));
+
+                        if (model.get('random')) {
+                                this.setPlaceholder(40);
+                        }
+                        else {
+                                lastHeight = this.getHeight();
+                        }
+
+                        this.$el.toggleClass('hidden', model.get('hidden'));
+                        return this;
+                },
+
+                extendedModel: function() {
+                        var c = this.model.get('collection'),
+                                t = _wpCustomizeHeader.l10n[c.type] || '';
+
+                        return _.extend(this.model.toJSON(), {
+                                // -1 to exclude the randomize button
+                                nImages: c.size() - 1,
+                                type: t
+                        });
+                },
+
+                getHeight: api.HeaderTool.CurrentView.prototype.getHeight,
+
+                setPlaceholder: api.HeaderTool.CurrentView.prototype.setPlaceholder,
+
+                select: function() {
+                        this.model.save();
+                        api.HeaderTool.currentHeader.set(this.extendedModel());
+                },
+
+                removeImage: function(e) {
+                        e.stopPropagation();
+                        this.model.destroy();
+                        this.remove();
+                }
+        });
+        })();
+
+
+        /**
+         * wp.customize.HeaderTool.ChoiceListView
+         *
+         * A container for ChoiceViews. These choices should be of one same type:
+         * user-uploaded headers or theme-defined ones.
+         *
+         * Takes a wp.customize.HeaderTool.ChoiceList.
+         *
+         * @constructor
+         * @augments Backbone.View
+         */
+        api.HeaderTool.ChoiceListView = Backbone.View.extend({
+                initialize: function() {
+                        this.listenTo(this.collection, 'add', this.addOne);
+                        this.listenTo(this.collection, 'remove', this.render);
+                        this.listenTo(this.collection, 'sort', this.render);
+                        this.listenTo(this.collection, 'change:hidden', this.toggleTitle);
+                        this.listenTo(this.collection, 'change:hidden', this.setMaxListHeight);
+                        this.render();
+                },
+
+                render: function() {
+                        this.$el.empty();
+                        this.collection.each(this.addOne, this);
+                        this.toggleTitle();
+                },
+
+                addOne: function(choice) {
+                        var view;
+                        choice.set({ collection: this.collection });
+                        view = new api.HeaderTool.ChoiceView({ model: choice });
+                        this.$el.append(view.render().el);
+                },
+
+                toggleTitle: function() {
+                        var title = this.$el.parents().prev('.customize-control-title');
+                        if (this.collection.shouldHideTitle()) {
+                                title.hide();
+                        } else {
+                                title.show();
+                        }
+                }
+        });
+
+
+        /**
+         * wp.customize.HeaderTool.CombinedList
+         *
+         * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any
+         * Backbone object, really) and acts as a bus to feed them events.
+         *
+         * @constructor
+         * @augments Backbone.View
+         */
+        api.HeaderTool.CombinedList = Backbone.View.extend({
+                initialize: function(collections) {
+                        this.collections = collections;
+                        this.on('all', this.propagate, this);
+                },
+                propagate: function(event, arg) {
+                        _.each(this.collections, function(collection) {
+                                collection.trigger(event, arg);
+                        });
+                }
+        });
+
+})( jQuery, this.wp, _ );

src/wp-includes/script-loader.php

@@ -381 +381 @@
                 'allowedFiles' => __( 'Allowed Files' ),
         ) );
 
+        $scripts->add( 'customize-header-models',  "/wp-includes/js/customize-header-models.js",  array( 'underscore', 'backbone' ), false, 1 );
+        $scripts->add( 'customize-header-views',  "/wp-includes/js/customize-header-views.js",  array( 'jquery', 'underscore', 'imgareaselect', 'customize-header-models' ), false, 1 );
+
         $scripts->add( 'accordion', "/wp-admin/js/accordion$suffix.js", array( 'jquery' ), false, 1 );
 
         $scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 );
@@ -602 +605 @@
         $styles->add( 'login',              "/wp-admin/css/login$suffix.css", array( 'buttons', 'open-sans', 'dashicons' ) );
         $styles->add( 'install',            "/wp-admin/css/install$suffix.css", array( 'buttons', 'open-sans' ) );
         $styles->add( 'wp-color-picker',    "/wp-admin/css/color-picker$suffix.css" );
-        $styles->add( 'customize-controls', "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'ie' ) );
+        $styles->add( 'customize-controls', "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'ie', 'imgareaselect' ) );
         $styles->add( 'ie',                 "/wp-admin/css/ie$suffix.css" );
 
         $styles->add_data( 'ie', 'conditional', 'lte IE 7' );