Changeset 20545 for trunk/wp-includes/class-wp-customize-control.php

Timestamp:

04/20/2012 02:39:55 AM (14 years ago)

Author:

koopersmith

Message:

Theme Customizer: Improve image picker control. see #19910.

Overhauled image pickers:

• Add support for drag and drop uploads to image controls.
• Improve the 'uploaded' tab in image controls: automatically add images uploaded during the current session, hide the tab when no uploaded images exist.
• Move the header image control to the WP_Customize_Header_Image_Control class. Remove wp_customize_print_uploaded_headers() and wp_customize_print_uploaded_headers() functions.
• Abstract the dropdown functionality from the color picker to the .dropdown class.
• In wp.Uploader, unset element keys if passed an empty jQuery collection.

File:

• trunk/wp-includes/class-wp-customize-control.php (modified) (3 diffs)

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

@@ -181 +181 @@
                                 <label>
                                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-                                        <a href="#" class="color-picker-toggle">
-                                                <div class="color-picker-spot"></div>
-                                                <div class="color-picker-dropdown"></div>
-                                        </a>
+                                        <div class="dropdown color-picker-toggle">
+                                                <div class="dropdown-content color-picker-spot"></div>
+                                                <div class="dropdown-arrow"></div>
+                                        </div>
                                         <div class="color-picker-control color-picker-hex">
                                                 <span>#</span>
@@ -292 +292 @@
 class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
         public $type = 'image';
-        public $tabs = array();
         public $get_url;
+
+        protected $tabs = array();
+
+        public function __construct( $manager, $id, $args ) {
+                parent::__construct( $manager, $id, $args );
+
+                $this->add_tab( 'upload-new', __('Upload New'), array( $this, 'tab_upload_new' ) );
+                $this->add_tab( 'uploaded',   __('Uploaded'),   array( $this, 'tab_uploaded' ) );
+        }
 
         public function render_content() {
@@ -304 +312 @@
                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
 
-                        <div class="thumbnail">
-                                <?php if ( empty( $src ) ): ?>
-                                        <img style="display:none;" />
-                                <?php else: ?>
-                                        <img src="<?php echo esc_url( $src ); ?>" />
-                                <?php endif; ?>
-                        </div>
-
-                        <div class="actions">
-                                <a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
-                                <a href="#" class="change"><?php _e( 'Change Image' ); ?></a>
-                                <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
+
+                        <div class="dropdown preview-thumbnail">
+                                <div class="dropdown-content">
+                                        <?php if ( empty( $src ) ): ?>
+                                                <img style="display:none;" />
+                                        <?php else: ?>
+                                                <img src="<?php echo esc_url( $src ); ?>" />
+                                        <?php endif; ?>
+                                </div>
+                                <div class="dropdown-arrow"></div>
                         </div>
 
                         <div class="library">
                                 <ul>
-                                        <?php foreach ( $this->tabs as $tab ): ?>
-                                                <li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
-                                                        <?php echo esc_html( $tab[1] ); ?>
+                                        <?php foreach ( $this->tabs as $id => $tab ): ?>
+                                                <li data-customize-tab='<?php echo esc_attr( $id ); ?>'>
+                                                        <?php echo esc_html( $tab['label'] ); ?>
                                                 </li>
                                         <?php endforeach; ?>
                                 </ul>
-                                <?php foreach ( $this->tabs as $tab ): ?>
-                                        <div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
-                                                <?php call_user_func( $tab[2] ); ?>
+                                <?php foreach ( $this->tabs as $id => $tab ): ?>
+                                        <div class="library-content" data-customize-tab='<?php echo esc_attr( $id ); ?>'>
+                                                <?php call_user_func( $tab['callback'] ); ?>
                                         </div>
                                 <?php endforeach; ?>
                         </div>
+
+                        <div class="actions">
+                                <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
+                        </div>
                 </label>
                 <?php
         }
+
+        public function add_tab( $id, $label, $callback ) {
+                $this->tabs[ $id ] = array(
+                        'label'    => $label,
+                        'callback' => $callback,
+                );
+        }
+
+        public function remove_tab( $id ) {
+                unset( $this->tabs[ $id ] );
+        }
+
+        public function tab_upload_new() {
+                ?>
+                <div class="upload-dropzone">
+                        <?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
+                </div>
+                <?php
+        }
+
+        public function tab_uploaded() {
+                ?>
+                <div class="uploaded-target"></div>
+                <?php
+        }
 }
+
+class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
+        public function __construct( $manager ) {
+                parent::__construct( $manager, 'header_image', array(
+                        'label'   => __( 'Header Image' ),
+                        'section' => 'header',
+                        'context' => 'custom-header',
+                        'removed' => 'remove-header',
+                        'get_url' => 'get_header_image',
+                ) );
+
+                $this->add_tab( 'default',  __('Default'),  array( $this, 'tab_default_headers' ) );
+        }
+
+        public function tab_uploaded() {
+                $headers = get_uploaded_header_images();
+
+                ?><div class="uploaded-target"></div><?php
+
+                foreach ( $headers as $header ) : ?>
+                        <a href="#" class="thumbnail" data-customize-image-value="<?php echo esc_url( $header['url'] ); ?>">
+                                <img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
+                        </a>
+                <?php endforeach;
+        }
+
+        public function tab_default_headers() {
+                global $custom_image_header;
+                $custom_image_header->process_default_headers();
+
+                foreach ( $custom_image_header->default_headers as $header ) : ?>
+                        <a href="#" class="thumbnail" data-customize-image-value="<?php echo esc_url( $header['url'] ); ?>">
+                                <img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
+                        </a>
+                <?php endforeach;
+        }
+}