Changeset 22945

Timestamp:

11/30/2012 06:01:47 AM (12 years ago)

Author:

ryan

Message:

Improve switching between browser and upload state.

Props koopersmith
fixes #22628

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (3 diffs)
• js/media-views.js (modified) (8 diffs)

trunk/wp-includes/css/media-views.css

@@ -727 +727 @@
 }
 
-.attachments-browser .attachments {
+.attachments-browser .attachments,
+.attachments-browser .uploader-inline {
     position: absolute;
     top: 50px;
@@ -932 +933 @@
 }
 
-.region-content.uploader-inline {
+.media-frame .uploader-inline {
     margin: 20px;
     padding: 20px;
@@ -1374 +1375 @@
 
     .attachments-browser .attachments,
+    .attachments-browser .uploader-inline,
     .attachments-browser .media-toolbar {
         right: 180px;

trunk/wp-includes/js/media-views.js

@@ -263 +263 @@
             toolbar:    'main-attachments',
             sidebar:    'settings',
+            content:    'browse',
             searchable: true,
             filterable: false,
@@ -305 +306 @@
             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.
@@ -335 +328 @@
         },
 
-        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();
@@ -388 +365 @@
             setUserSetting( 'imgsize', display.size );
             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') );
         },
 
@@ -525 +491 @@
             sortable:   true,
             searchable: false,
-            toolbar:    'gallery-edit'
+            toolbar:    'gallery-edit',
+            content:    'browse'
         },
 
@@ -1301 +1268 @@
         browseContent: function() {
             var state = this.state();
+
+            this.$el.removeClass('hide-toolbar');
 
             // Browse our library of attachments.
@@ -3018 +2987 @@
 
             this.createToolbar();
-            this.createAttachments();
+            this.updateContent();
             this.createSidebar();
+
+            this.collection.on( 'add remove reset', this.updateContent, this );
         },
 
@@ -3067 +3038 @@
         },
 
+        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,