Gallery preview: add a "No items found" state which is displayed when rendering the gallery wpview and no attachments are found. Props gcorne, fixes #27558
git-svn-id: https://develop.svn.wordpress.org/trunk@27899 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
d4f99c2142
commit
c5f7f95979
|
@ -26,7 +26,7 @@ window.wp = window.wp || {};
|
||||||
|
|
||||||
_.extend( wp.mce.View.prototype, {
|
_.extend( wp.mce.View.prototype, {
|
||||||
initialize: function() {},
|
initialize: function() {},
|
||||||
html: function() {},
|
getHtml: function() {},
|
||||||
render: function() {
|
render: function() {
|
||||||
var html = this.getHtml();
|
var html = this.getHtml();
|
||||||
// Search all tinymce editor instances and update the placeholders
|
// Search all tinymce editor instances and update the placeholders
|
||||||
|
@ -267,27 +267,30 @@ window.wp = window.wp || {};
|
||||||
|
|
||||||
fetch: function() {
|
fetch: function() {
|
||||||
this.attachments = wp.media.gallery.attachments( this.shortcode, this.postID );
|
this.attachments = wp.media.gallery.attachments( this.shortcode, this.postID );
|
||||||
this.attachments.more().done( _.bind( this.render, this ) );
|
this.dfd = this.attachments.more().done( _.bind( this.render, this ) );
|
||||||
},
|
},
|
||||||
|
|
||||||
getHtml: function() {
|
getHtml: function() {
|
||||||
var attrs = this.shortcode.attrs.named,
|
var attrs = this.shortcode.attrs.named,
|
||||||
options,
|
attachments = false,
|
||||||
attachments;
|
options;
|
||||||
|
|
||||||
if ( ! this.attachments.length ) {
|
// Don't render errors while still fetching attachments
|
||||||
|
if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
attachments = this.attachments.toJSON();
|
if ( this.attachments.length ) {
|
||||||
|
attachments = this.attachments.toJSON();
|
||||||
|
|
||||||
_.each( attachments, function( attachment ) {
|
_.each( attachments, function( attachment ) {
|
||||||
if ( attachment.sizes.thumbnail ) {
|
if ( attachment.sizes.thumbnail ) {
|
||||||
attachment.thumbnail = attachment.sizes.thumbnail;
|
attachment.thumbnail = attachment.sizes.thumbnail;
|
||||||
} else {
|
} else {
|
||||||
attachment.thumbnail = attachment.sizes.full;
|
attachment.thumbnail = attachment.sizes.full;
|
||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
options = {
|
options = {
|
||||||
attachments: attachments,
|
attachments: attachments,
|
||||||
|
|
|
@ -328,6 +328,30 @@ audio {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gallery-error {
|
||||||
|
border: 1px solid #dedede;
|
||||||
|
padding: 20px 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected .gallery-error {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-error .dashicons {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-error p {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
.gallery .gallery-item {
|
.gallery .gallery-item {
|
||||||
float: left;
|
float: left;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
@ -970,26 +970,32 @@ function wp_print_media_templates() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="text/html" id="tmpl-editor-gallery">
|
<script type="text/html" id="tmpl-editor-gallery">
|
||||||
<div class="toolbar">
|
<div class="toolbar">
|
||||||
<div class="dashicons dashicons-edit edit"></div><div class="dashicons dashicons-no-alt remove"></div>
|
<div class="dashicons dashicons-edit edit"></div><div class="dashicons dashicons-no-alt remove"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gallery gallery-columns-{{ data.columns }}">
|
<# if ( data.attachments ) { #>
|
||||||
<# _.each( data.attachments, function( attachment, index ) { #>
|
<div class="gallery gallery-columns-{{{ data.columns }}}">
|
||||||
<dl class="gallery-item">
|
<# _.each( data.attachments, function( attachment, index ) { #>
|
||||||
<dt class="gallery-icon">
|
<dl class="gallery-item">
|
||||||
<img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" />
|
<dt class="gallery-icon">
|
||||||
</dt>
|
<img src="{{{ attachment.thumbnail.url }}}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" />
|
||||||
<dd class="wp-caption-text gallery-caption">
|
</dt>
|
||||||
{{ attachment.caption }}
|
<dd class="wp-caption-text gallery-caption">
|
||||||
</dd>
|
{{ attachment.caption }}
|
||||||
</dl>
|
</dd>
|
||||||
<# if ( index % data.columns === data.columns - 1 ) { #>
|
</dl>
|
||||||
<br style="clear: both;">
|
<# if ( index % data.columns === data.columns - 1 ) { #>
|
||||||
<# } #>
|
<br style="clear: both;">
|
||||||
|
<# } #>
|
||||||
<# } ); #>
|
<# } ); #>
|
||||||
</div>
|
</div>
|
||||||
|
<# } else { #>
|
||||||
|
<div class="gallery-error">
|
||||||
|
<div class="dashicons dashicons-format-gallery"></div><p><?php _e( 'No items found.' ); ?></p>
|
||||||
|
</div>
|
||||||
|
<# } #>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="text/html" id="tmpl-editor-audio">
|
<script type="text/html" id="tmpl-editor-audio">
|
||||||
|
|
Loading…
Reference in New Issue