Changeset 20278

Timestamp:

03/24/2012 04:35:13 AM (13 years ago)

Author:

koopersmith

Message:

Theme Customizer: First pass at image controls. Use header_image as the initial case. Add a 'removed' control param for upload/image controls to map 'removed' to a value other than the empty string. see #19910.

Location:

trunk/wp-includes

Files:

• class-wp-customize-setting.php (modified) (2 diffs)
• class-wp-customize.php (modified) (1 diff)
• css/customize-controls.dev.css (modified) (1 diff)
• js/customize-controls.dev.js (modified) (3 diffs)

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

@@ -406 +406 @@
                 break;
             case 'upload':
-                $value = $this->value();
-                $style = empty( $value ) ? 'style="display:none;"' : '';
                 ?>
                 <label>
@@ -414 +412 @@
                         <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
                         <a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
-                        <a href="#" class="remove" <?php echo $style; ?>><?php _e( 'Remove' ); ?></a>
+                        <a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
+                    </div>
+                </label>
+                <?php
+                break;
+            case 'image':
+                $value = $this->value();
+
+                $image = $value;
+                if ( isset( $this->control_params['get_url'] ) )
+                    $image = call_user_func( $this->control_params['get_url'], $image );
+
+                ?>
+                <label>
+                    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+                    <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
+                    <div class="customize-image-picker">
+                        <div class="thumbnail">
+                            <?php if ( empty( $image ) ): ?>
+                                <img style="display:none;" />
+                            <?php else: ?>
+                                <img src="<?php echo esc_url( $image ); ?>" />
+                            <?php endif; ?>
+                        </div>
+                        <div class="actions">
+                            <a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
+                            <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
+                        </div>
                     </div>
                 </label>

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

@@ -537 +537 @@
             'label'          => 'Header Image',
             'section'        => 'header',
-            'control'        => 'upload',
+            'control'        => 'image',
             'default'        => get_theme_support( 'custom-header', 'default-image' ),
             'control_params' => array(
                 'context'        => 'custom-header',
+                'removed'        => 'remove-header',
+                'get_url'        => 'get_header_image',
             ),
         ) );

trunk/wp-includes/css/customize-controls.dev.css

@@ -303 +303 @@
     background: transparent;
 }
+
+/*
+ * Image Picker
+ */
+.customize-section .customize-image-picker {
+    float: left;
+}
+.customize-section .customize-image-picker .thumbnail {
+    float: left;
+    clear: left;
+    width: 100px;
+    margin-right: 20px;
+    min-height: 1em;
+}
+.customize-section .customize-image-picker .thumbnail img {
+    max-width: 98px;
+    max-height: 98px;
+    border: 1px solid #ccc;
+}
+.customize-section .customize-image-picker .actions {
+    width: 140px;
+    float: left;
+}
+.customize-section .customize-image-picker .actions a {
+    display: block;
+}

trunk/wp-includes/js/customize-controls.dev.js

@@ -77 +77 @@
 
             api.Control.prototype.initialize.call( this, id, value, options );
+            this.params.removed = this.params.removed || '';
 
             this.uploader = new wp.Uploader({
@@ -87 +88 @@
             this.remover = this.container.find('.remove');
             this.remover.click( function( event ) {
-                control.set('');
+                control.set( control.params.removed );
                 event.preventDefault();
             });
 
             this.bind( this.removerVisibility );
+            this.removerVisibility( this.get() );
 
             if ( this.params.context )
                 control.uploader.param( 'post_data[context]', this.params.context );
         },
-        removerVisibility: function( on ) {
-            this.remover.toggle( !! on );
+        removerVisibility: function( to ) {
+            this.remover.toggle( to != this.params.removed );
+        }
+    });
+
+    api.ImageControl = api.UploadControl.extend({
+        initialize: function( id, value, options ) {
+            api.UploadControl.prototype.initialize.call( this, id, value, options );
+
+            this.thumbnail = this.container.find('.thumbnail img');
+            this.bind( this.thumbnailSrc );
+        },
+        thumbnailSrc: function( to ) {
+            if ( /^(http:\/\/|https:\/\/|\/\/)/.test( to ) )
+                this.thumbnail.prop( 'src', to ).show();
+            else
+                this.thumbnail.hide();
         }
     });
@@ -226 +243 @@
     api.controls = {
         color:  api.ColorControl,
-        upload: api.UploadControl
+        upload: api.UploadControl,
+        image:  api.ImageControl
     };