diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css index f350c816e3..d7234787f7 100644 --- a/wp-includes/css/media-views.css +++ b/wp-includes/css/media-views.css @@ -726,8 +726,7 @@ margin-top: 10px; } -.attachments-browser .attachments, -.attachments-browser .uploader-inline { +.attachments-browser .attachments { position: absolute; top: 50px; left: 0; @@ -932,7 +931,7 @@ display: block; } -.media-frame .uploader-inline { +.region-content.uploader-inline { margin: 20px; padding: 20px; text-align: center; @@ -1374,7 +1373,6 @@ } .attachments-browser .attachments, - .attachments-browser .uploader-inline, .attachments-browser .media-toolbar { right: 180px; } diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index 99607cc2cf..e694c476c7 100644 --- a/wp-includes/js/media-views.js +++ b/wp-includes/js/media-views.js @@ -262,7 +262,6 @@ describe: false, toolbar: 'main-attachments', sidebar: 'settings', - content: 'browse', searchable: true, filterable: false, uploads: true @@ -305,11 +304,19 @@ selection.on( 'add remove reset', this.refreshSelection, this ); + this._updateEmpty(); + library.on( 'add remove reset', this._updateEmpty, this ); + this.on( 'change:empty', this.refresh, this ); this.refresh(); + + this.on( 'insert', this._insertDisplaySettings, this ); }, deactivate: function() { + this.off( 'change:empty', this.refresh, this ); + this.get('library').off( 'add remove reset', this._updateEmpty, this ); + // Unbind all event handlers that use this state as the context // from the selection. this.get('selection').off( null, null, this ); @@ -327,7 +334,23 @@ this.resetDisplays(); }, + content: function() { + var frame = this.frame; + + if ( this.get('empty') ) { + // Attempt to fetch any Attachments we don't already have. + this.get('library').more(); + + // In the meantime, render an inline uploader. + frame.content.mode('upload'); + } else { + // Browse our library of attachments. + frame.content.mode('browse'); + } + }, + refresh: function() { + this.frame.$el.toggleClass( 'hide-toolbar', this.get('empty') ); this.content(); this.refreshSelection(); }, @@ -366,6 +389,17 @@ setUserSetting( 'urlbutton', display.link ); }, + _updateEmpty: function() { + var library = this.get('library'), + props = library.props; + + // If we're filtering the library, bail. + if ( this.get('filterable') && ( props.get('type') || props.get('parent') ) ) + return; + + this.set( 'empty', ! library.length && ! library.props.get('search') ); + }, + refreshSelection: function() { var selection = this.get('selection'), mode = this.frame.content.mode(); @@ -1268,8 +1302,6 @@ browseContent: function() { var state = this.state(); - this.$el.removeClass('hide-toolbar'); - // Browse our library of attachments. this.content.view( new media.view.AttachmentsBrowser({ controller: this, @@ -2978,10 +3010,8 @@ }); this.createToolbar(); - this.updateContent(); + this.createAttachments(); this.createSidebar(); - - this.collection.on( 'add remove reset', this.updateContent, this ); }, dispose: function() { @@ -3029,39 +3059,7 @@ } }, - updateContent: function() { - var view = this; - - if( ! this.attachments ) - this.createAttachments(); - - if ( ! this.collection.length ) { - this.collection.more().done( function() { - if ( ! view.collection.length ) - view.createUploader(); - }); - } - }, - - createUploader: function() { - if ( this.attachments ) { - this.attachments.remove(); - delete this.attachments; - } - - this.uploader = new media.view.UploaderInline({ - controller: this.controller - }); - - this.views.add( this.uploader ); - }, - createAttachments: function() { - if ( this.uploader ) { - this.uploader.remove(); - delete this.uploader; - } - this.attachments = new media.view.Attachments({ controller: this.controller, collection: this.collection,