mirror of
https://github.com/WordPress/WordPress.git
synced 2024-06-25 22:35:02 +02:00
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. git-svn-id: http://svn.automattic.com/wordpress/trunk@20545 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith
parent
f58a801e62
commit
a20bfcd6b1
|
|
@ -180,10 +180,10 @@ class WP_Customize_Control {
|
|||
?>
|
||||
<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>
|
||||
<input type="text" <?php $this->link(); ?> />
|
||||
|
|
@ -291,9 +291,17 @@ class WP_Customize_Upload_Control extends WP_Customize_Control {
|
|||
|
||||
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() {
|
||||
$src = $this->value();
|
||||
if ( isset( $this->get_url ) )
|
||||
|
|
@ -303,35 +311,99 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
|
|||
<label class="customize-image-picker">
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
|
@ -537,17 +537,7 @@ final class WP_Customize {
|
|||
'theme_supports' => 'custom-header',
|
||||
) );
|
||||
|
||||
$this->add_control( new WP_Customize_Image_Control( $this, 'header_image', array(
|
||||
'label' => 'Header Image',
|
||||
'section' => 'header',
|
||||
'context' => 'custom-header',
|
||||
'removed' => 'remove-header',
|
||||
'get_url' => 'get_header_image',
|
||||
'tabs' => array(
|
||||
array( 'uploaded', __('Uploaded'), 'wp_customize_print_uploaded_headers' ),
|
||||
array( 'included', __('Included'), 'wp_customize_print_included_headers' ),
|
||||
),
|
||||
) ) );
|
||||
$this->add_control( new WP_Customize_Header_Image_Control( $this ) );
|
||||
|
||||
/* Custom Background */
|
||||
|
||||
|
|
@ -758,25 +748,4 @@ function sanitize_hexcolor( $color ) {
|
|||
return $color;
|
||||
|
||||
return $color;
|
||||
}
|
||||
|
||||
function wp_customize_print_uploaded_headers() {
|
||||
$headers = get_uploaded_header_images();
|
||||
|
||||
foreach ( $headers as $header ) : ?>
|
||||
<a href="<?php echo esc_url( $header['url'] ); ?>">
|
||||
<img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
|
||||
</a>
|
||||
<?php endforeach;
|
||||
}
|
||||
|
||||
function wp_customize_print_included_headers() {
|
||||
global $custom_image_header;
|
||||
$custom_image_header->process_default_headers();
|
||||
|
||||
foreach ( $custom_image_header->default_headers as $header ) : ?>
|
||||
<a href="<?php echo esc_url( $header['url'] ); ?>">
|
||||
<img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
|
||||
</a>
|
||||
<?php endforeach;
|
||||
}
|
||||
|
|
@ -196,34 +196,37 @@ body {
|
|||
}
|
||||
|
||||
/*
|
||||
* Color Picker
|
||||
* Dropdowns
|
||||
*/
|
||||
.customize-section .color-picker-toggle {
|
||||
.customize-section .dropdown {
|
||||
float: left;
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.customize-section .color-picker-spot,
|
||||
.customize-section .color-picker-dropdown {
|
||||
.customize-section .dropdown-content {
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
min-width: 30px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.customize-section .color-picker-spot {
|
||||
min-width: 30px;
|
||||
margin-right: 16px;
|
||||
padding: 0 5px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba( 0, 0, 0, 0.15 );
|
||||
background-color: #eee;
|
||||
border: 1px solid #ccc;
|
||||
-webkit-border-radius: 3px 0 0 3px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.customize-section .color-picker-dropdown {
|
||||
position: relative;
|
||||
.customize-control .dropdown-arrow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 15px;
|
||||
|
||||
border-color: #ccc;
|
||||
|
|
@ -233,43 +236,52 @@ body {
|
|||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.customize-section .color-picker-dropdown:after {
|
||||
.customize-control .dropdown-arrow:after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: #ccc transparent transparent transparent;
|
||||
border-color: #ccc transparent;
|
||||
border-style: solid;
|
||||
border-width: 4px;
|
||||
border-width: 4px 4px 0 4px;
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
top: 50%;
|
||||
margin-top: -1px;
|
||||
right: 4px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.customize-section .color-picker-toggle.open .color-picker-dropdown:after {
|
||||
border-color: transparent transparent #ccc transparent;
|
||||
top: 6px;
|
||||
.customize-control.open .dropdown-arrow:after {
|
||||
border-width: 0 4px 4px 4px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.customize-section .color-picker-toggle:hover .color-picker-spot {
|
||||
border-color: rgba( 0, 0, 0, 0.25 );
|
||||
}
|
||||
|
||||
.customize-section .color-picker-toggle:hover .color-picker-dropdown {
|
||||
.customize-section .dropdown:hover .dropdown-content,
|
||||
.customize-control .dropdown:hover .dropdown-arrow {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.customize-section .color-picker-toggle:hover .color-picker-dropdown:after {
|
||||
border-color: #aaa transparent transparent transparent;
|
||||
.customize-section .dropdown:hover .dropdown-arrow:after {
|
||||
border-color: #aaa transparent;
|
||||
}
|
||||
|
||||
.customize-section .color-picker-toggle.open:hover .color-picker-dropdown:after {
|
||||
border-color: transparent transparent #aaa transparent;
|
||||
}
|
||||
|
||||
.customize-section .color-picker-control {
|
||||
/*
|
||||
* Color Picker
|
||||
*/
|
||||
.customize-control .color-picker-control {
|
||||
display: none;
|
||||
}
|
||||
.customize-control.open .color-picker-control {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.customize-control .dropdown .color-picker-spot {
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba( 0, 0, 0, 0.15 );
|
||||
}
|
||||
|
||||
.customize-section .dropdown:hover .color-picker-spot {
|
||||
border-color: rgba( 0, 0, 0, 0.25 );
|
||||
}
|
||||
|
||||
.customize-section .color-picker-hex {
|
||||
float: left;
|
||||
|
|
@ -317,24 +329,31 @@ body {
|
|||
/*
|
||||
* Image Picker
|
||||
*/
|
||||
.customize-section .customize-control-image .thumbnail {
|
||||
float: right;
|
||||
width: 138px;
|
||||
min-height: 25px;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 5px;
|
||||
background: #eee;
|
||||
|
||||
.customize-control-image .library,
|
||||
.customize-control-image .actions {
|
||||
display: none;
|
||||
}
|
||||
.customize-control-image.open .library,
|
||||
.customize-control-image.open .actions {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .thumbnail img {
|
||||
.customize-section .customize-control-image .dropdown-content {
|
||||
height: auto;
|
||||
min-height: 24px;
|
||||
min-width: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .preview-thumbnail img {
|
||||
display: block;
|
||||
max-width: 138px;
|
||||
max-width: 122px;
|
||||
max-height: 98px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .actions {
|
||||
width: 140px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
@ -342,39 +361,17 @@ body {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .library {
|
||||
display: none;
|
||||
/* float: left;*/
|
||||
}
|
||||
|
||||
/*.customize-section .customize-control-image .library label {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
padding: 0 0 5px 20px;
|
||||
}
|
||||
.customize-section .customize-control-image .library input {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -7px;
|
||||
}*/
|
||||
/*.customize-section .customize-control-image .library .wp-tab-panel {
|
||||
padding: 10px 10px 5px 8px;
|
||||
}*/
|
||||
|
||||
.customize-section .customize-control-image .library ul {
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .library li {
|
||||
color: #999;
|
||||
float: left;
|
||||
padding: 4px 6px;
|
||||
padding: 3px 5px;
|
||||
margin: 0;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
|
|
@ -382,38 +379,53 @@ body {
|
|||
}
|
||||
|
||||
.customize-section .customize-control-image .library li.library-selected {
|
||||
color: #777;
|
||||
border-color: #dfdfdf;
|
||||
background: #f5f5f5;
|
||||
margin-bottom: -1px;
|
||||
padding-bottom: 5px;
|
||||
padding-bottom: 4px;
|
||||
|
||||
color: #777;
|
||||
background: #f5f5f5;
|
||||
border-color: #dfdfdf;
|
||||
-webkit-border-radius: 3px 3px 0 0;
|
||||
border-radius: 3px 3px 0 0 ;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .library div {
|
||||
width: 100%;
|
||||
.customize-section .customize-control-image .library-content {
|
||||
display: none;
|
||||
width: 260px;
|
||||
float: left;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .library a {
|
||||
.customize-section .customize-control-image .library-content.library-selected {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .library .thumbnail {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .library .thumbnail:hover img {
|
||||
border-color: #21759b;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .library .thumbnail img {
|
||||
display: block;
|
||||
max-width: 220px;
|
||||
max-height: 80px;
|
||||
|
||||
margin: 5px auto;
|
||||
padding: 4px;
|
||||
background: #fff;
|
||||
border: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .library a:hover {
|
||||
border-color: #21759b;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .library img {
|
||||
display: block;
|
||||
max-width: 220px;
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
.customize-section .customize-control-image .library-content {
|
||||
display: none;
|
||||
}
|
||||
.customize-section .customize-control-upload .upload-dropzone,
|
||||
.customize-section .customize-control-image .upload-dropzone {
|
||||
padding: 15px 10px;
|
||||
border: 3px dashed #dfdfdf;
|
||||
margin: 5px auto;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -90,6 +90,12 @@
|
|||
element.set( setting() );
|
||||
});
|
||||
});
|
||||
|
||||
// Support the .dropdown class to open/close complex elements
|
||||
this.container.on( 'click', '.dropdown', function( event ) {
|
||||
event.preventDefault();
|
||||
control.container.toggleClass('open');
|
||||
});
|
||||
},
|
||||
ready: function() {}
|
||||
});
|
||||
|
|
@ -97,23 +103,15 @@
|
|||
api.ColorControl = api.Control.extend({
|
||||
ready: function() {
|
||||
var control = this,
|
||||
toggle, spot, ui, text, update;
|
||||
spot, text, update;
|
||||
|
||||
toggle = this.container.find( '.color-picker-toggle' );
|
||||
spot = toggle.find('.color-picker-spot');
|
||||
ui = this.container.find( '.color-picker-control' );
|
||||
spot = this.container.find('.color-picker-spot');
|
||||
update = function( color ) {
|
||||
color = '#' + color;
|
||||
spot.css( 'background', color );
|
||||
control.farbtastic.setColor( color );
|
||||
};
|
||||
|
||||
toggle.on( 'click', function( event ) {
|
||||
ui.toggle();
|
||||
toggle.toggleClass( 'open' );
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), function( color ) {
|
||||
control.setting.set( color.replace( '#', '' ) );
|
||||
});
|
||||
|
|
@ -129,11 +127,12 @@
|
|||
|
||||
this.params.removed = this.params.removed || '';
|
||||
|
||||
this.success = $.proxy( this.success, this );
|
||||
|
||||
this.uploader = new wp.Uploader({
|
||||
browser: this.container.find('.upload'),
|
||||
success: function( attachment ) {
|
||||
control.setting.set( attachment.url );
|
||||
}
|
||||
browser: this.container.find('.upload'),
|
||||
dropzone: this.container.find('.upload-dropzone'),
|
||||
success: this.success
|
||||
});
|
||||
|
||||
this.remover = this.container.find('.remove');
|
||||
|
|
@ -149,6 +148,9 @@
|
|||
if ( this.params.context )
|
||||
control.uploader.param( 'post_data[context]', this.params.context );
|
||||
},
|
||||
success: function( attachment ) {
|
||||
this.setting.set( attachment.url );
|
||||
},
|
||||
removerVisibility: function( to ) {
|
||||
this.remover.toggle( to != this.params.removed );
|
||||
}
|
||||
|
|
@ -156,43 +158,79 @@
|
|||
|
||||
api.ImageControl = api.UploadControl.extend({
|
||||
ready: function() {
|
||||
var control = this;
|
||||
var control = this,
|
||||
panels;
|
||||
|
||||
api.UploadControl.prototype.ready.call( this );
|
||||
|
||||
this.thumbnail = this.container.find('.thumbnail img');
|
||||
this.thumbnail = this.container.find('.preview-thumbnail img');
|
||||
this.thumbnailSrc = $.proxy( this.thumbnailSrc, this );
|
||||
this.setting.bind( this.thumbnailSrc );
|
||||
|
||||
this.library = this.container.find('.library');
|
||||
this.changer = this.container.find('.change');
|
||||
|
||||
this.changer.click( function( event ) {
|
||||
control.library.toggle();
|
||||
event.preventDefault();
|
||||
// Generate tab objects
|
||||
this.tabs = {};
|
||||
panels = this.library.find('.library-content');
|
||||
|
||||
this.library.children('ul').children('li').each( function() {
|
||||
var link = $(this),
|
||||
id = link.data('customizeTab'),
|
||||
panel = panels.filter('[data-customize-tab="' + id + '"]');
|
||||
|
||||
control.tabs[ id ] = {
|
||||
both: link.add( panel ),
|
||||
link: link,
|
||||
panel: panel
|
||||
};
|
||||
});
|
||||
|
||||
this.library.on( 'click', 'li', function( event ) {
|
||||
var tab = $(this),
|
||||
id = tab.data('customizeTab');
|
||||
// Select a tab
|
||||
this.selected = this.tabs[ panels.first().data('customizeTab') ];
|
||||
this.selected.both.addClass('library-selected');
|
||||
|
||||
// Bind tab switch events
|
||||
this.library.children('ul').on( 'click', 'li', function( event ) {
|
||||
var id = $(this).data('customizeTab'),
|
||||
tab = control.tabs[ id ];
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if ( tab.hasClass('library-selected') )
|
||||
if ( tab.link.hasClass('library-selected') )
|
||||
return;
|
||||
|
||||
tab.siblings('.library-selected').removeClass('library-selected');
|
||||
tab.addClass('library-selected');
|
||||
|
||||
control.library.find('div').hide().filter( function() {
|
||||
return $(this).data('customizeTab') === id;
|
||||
}).show();
|
||||
control.selected.both.removeClass('library-selected');
|
||||
control.selected = tab;
|
||||
control.selected.both.addClass('library-selected');
|
||||
});
|
||||
|
||||
this.library.on( 'click', 'a', function( event ) {
|
||||
control.setting.set( $(this).attr('href') );
|
||||
event.preventDefault();
|
||||
var value = $(this).data('customizeImageValue');
|
||||
|
||||
if ( value ) {
|
||||
control.setting.set( value );
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
if ( this.tabs.uploaded ) {
|
||||
this.tabs.uploaded.target = this.library.find('.uploaded-target');
|
||||
if ( ! this.tabs.uploaded.panel.find('.thumbnail').length )
|
||||
this.tabs.uploaded.both.addClass('hidden');
|
||||
}
|
||||
},
|
||||
success: function( attachment ) {
|
||||
api.UploadControl.prototype.success.call( this, attachment );
|
||||
|
||||
// Add the uploaded image to the uploaded tab.
|
||||
if ( this.tabs.uploaded && this.tabs.uploaded.target.length ) {
|
||||
this.tabs.uploaded.both.removeClass('hidden');
|
||||
|
||||
$( '<a href="#" class="thumbnail"></a>' )
|
||||
.data( 'customizeImageValue', attachment.url )
|
||||
.append( '<img src="' + attachment.url+ '" />' )
|
||||
.appendTo( this.tabs.uploaded.target );
|
||||
}
|
||||
},
|
||||
thumbnailSrc: function( to ) {
|
||||
if ( /^(https?:)?\/\//.test( to ) )
|
||||
|
|
|
|||
|
|
@ -47,6 +47,12 @@ if ( typeof wp === 'undefined' )
|
|||
continue;
|
||||
|
||||
this[ key ] = $( this[ key ] ).first();
|
||||
|
||||
if ( ! this[ key ].length ) {
|
||||
delete this[ key ];
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( ! this[ key ].prop('id') )
|
||||
this[ key ].prop( 'id', '__wp-uploader-id-' + Uploader.uuid++ );
|
||||
this.plupload[ elements[ key ] ] = this[ key ].prop('id');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user