From 17622c2daa627efc514f03759ae65891ebb6a9a3 Mon Sep 17 00:00:00 2001
From: Ryan Boren <ryan@git.wordpress.org>
Date: Fri, 30 Nov 2012 06:01:47 +0000
Subject: [PATCH] Improve switching between browser and upload state.

Props koopersmith
fixes #22628


git-svn-id: https://develop.svn.wordpress.org/trunk@22945 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-includes/css/media-views.css |  6 ++-
 wp-includes/js/media-views.js   | 77 +++++++++++++++++----------------
 2 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css
index d7234787f7..f350c816e3 100644
--- a/wp-includes/css/media-views.css
+++ b/wp-includes/css/media-views.css
@@ -726,7 +726,8 @@
 	margin-top: 10px;
 }
 
-.attachments-browser .attachments {
+.attachments-browser .attachments,
+.attachments-browser .uploader-inline {
 	position: absolute;
 	top: 50px;
 	left: 0;
@@ -931,7 +932,7 @@
 	display: block;
 }
 
-.region-content.uploader-inline {
+.media-frame .uploader-inline {
 	margin: 20px;
 	padding: 20px;
 	text-align: center;
@@ -1373,6 +1374,7 @@
 	}
 
 	.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 08170b9047..19e230aae3 100644
--- a/wp-includes/js/media-views.js
+++ b/wp-includes/js/media-views.js
@@ -262,6 +262,7 @@
 			describe:   false,
 			toolbar:    'main-attachments',
 			sidebar:    'settings',
+			content:    'browse',
 			searchable: true,
 			filterable: false,
 			uploads:    true
@@ -304,19 +305,11 @@
 
 			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 );
@@ -334,23 +327,7 @@
 			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();
 		},
@@ -389,17 +366,6 @@
 			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();
@@ -524,7 +490,8 @@
 			editing:    false,
 			sortable:   true,
 			searchable: false,
-			toolbar:    'gallery-edit'
+			toolbar:    'gallery-edit',
+			content:    'browse'
 		},
 
 		initialize: function() {
@@ -1301,6 +1268,8 @@
 		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,
@@ -3017,8 +2986,10 @@
 			});
 
 			this.createToolbar();
-			this.createAttachments();
+			this.updateContent();
 			this.createSidebar();
+
+			this.collection.on( 'add remove reset', this.updateContent, this );
 		},
 
 		dispose: function() {
@@ -3066,7 +3037,39 @@
 			}
 		},
 
+		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,