diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css index f03ab5f0b7..f4238e11cb 100644 --- a/wp-includes/css/media-views.css +++ b/wp-includes/css/media-views.css @@ -295,6 +295,36 @@ box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.4 ); } +.attachment .insert { + display: none; + position: absolute; + left: 7px; + bottom: 7px; +} + +.attachment:hover .insert { + display: block; +} + +.attachment .close { + /*display: none;*/ + position: absolute; + top: 0; + right: 0; + height: 26px; + width: 26px; + font-size: 20px; + line-height: 24px; + text-align: center; + text-decoration: none; + color: #464646; + background: #fff; +} + +.attachment:hover .close { + display: block; +} + /* Square crop with overflow visible on hover. */ /* diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index 2d8467760a..ff50802c0e 100644 --- a/wp-includes/js/media-views.js +++ b/wp-includes/js/media-views.js @@ -378,6 +378,8 @@ 'click': 'toggleSelection' }, + buttons: {}, + initialize: function() { this.controller = this.options.controller; @@ -385,6 +387,9 @@ this.model.on( 'change:percent', this.progress, this ); this.model.on( 'add', this.select, this ); this.model.on( 'remove', this.deselect, this ); + + // Prevent default navigation on all links. + this.$el.on( 'click', 'a', this.preventDefault ); }, render: function() { @@ -394,7 +399,8 @@ uploading: attachment.uploading, orientation: attachment.orientation || 'landscape', type: attachment.type, - subtype: attachment.subtype + subtype: attachment.subtype, + buttons: this.buttons }; // Use the medium image size if possible. If the medium size @@ -445,6 +451,10 @@ return; this.$el.removeClass('selected'); + }, + + preventDefault: function( event ) { + event.preventDefault(); } }); @@ -452,14 +462,33 @@ * wp.media.view.Attachment.Library */ media.view.Attachment.Library = media.view.Attachment.extend({ - className: 'attachment library' + className: 'attachment library', + + buttons: { + insert: true + }, + + events: _.defaults({ + 'click .insert': 'insert' + }, media.view.Attachment.prototype.events ), + + insert: function() { + this.controller.selection.reset([ this.model ]); + this.controller.update(); + } }); /** * wp.media.view.Attachment.Gallery */ media.view.Attachment.Gallery = media.view.Attachment.extend({ - events: {} + buttons: { + close: true + }, + + events: { + 'click .close': 'toggleSelection' + } }); /** diff --git a/wp-includes/media.php b/wp-includes/media.php index ee9d10de70..4e454f4ca9 100644 --- a/wp-includes/media.php +++ b/wp-includes/media.php @@ -1399,7 +1399,14 @@ function wp_print_media_templates( $attachment ) { <% if ( uploading ) { %>
<% } %> - + + <% if ( buttons.close ) { %> + × + <% } %> + + <% if ( buttons.insert ) { %> + + <% } %>