Changeset 22816

Timestamp:

11/22/2012 09:32:21 AM (11 years ago)

Author:

koopersmith

Message:

Media: Add global upload progress to the sidebar. see #21390.

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (4 diffs)
• js/media-models.js (modified) (1 diff)
• js/media-views.js (modified) (7 diffs)
• js/plupload/wp-plupload.js (modified) (2 diffs)
• media.php (modified) (1 diff)

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

@@ -716 +716 @@
 .media-progress-bar {
     position: relative;
-    height: 8px;
+    height: 10px;
     width: 70%;
     margin: 10px auto;
-    padding: 2px;
-    border: 2px solid #ccc;
-    border-radius: 8px;
-    background: #fff;
+    border-radius: 10px;
+    background: #dfdfdf;
+    background: rgba( 0, 0, 0, 0.1 );
 }
 
 .media-progress-bar div {
-    height: 8px;
-    min-width: 8px;
+    height: 10px;
+    min-width: 20px;
     width: 0;
-    background: #ccc;
+    background: #aaa;
+    background: rgba( 0, 0, 0, 0.2 );
     border-radius: 10px;
     -webkit-transition: width 300ms;
@@ -738 +738 @@
 }
 
+.media-uploader-status .media-progress-bar {
+    width: 100%;
+}
+
 .attachment-preview .media-progress-bar {
     position: absolute;
@@ -743 +747 @@
     left: 15%;
     width: 70%;
-    margin: -8px 0 0 -4px;
+    margin: -5px 0 0 0;
+}
+
+.media-uploader-status {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #dfdfdf;
+    box-shadow: 0 1px 0 #fff;
+}
+
+.media-uploader-status .upload-details {
+    font-size: 12px;
+    color: #666;
+    text-shadow: 0 1px 0 #fff;
+}
+
+.media-uploader-status .upload-detail-separator {
+    padding: 0 4px;
+}
+
+.media-uploader-status .upload-count {
+    color: #464646;
 }
 
@@ -1060 +1084 @@
 
 .uploading .attachment-info .media-progress-bar {
-    margin-top: 32px;
+    margin-top: 35px;
 }
 

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

@@ -192 +192 @@
                 };
             }
+        },
+
+        // Truncates a string by injecting an ellipsis into the middle.
+        // Useful for filenames.
+        truncate: function( string, length, replacement ) {
+            length = length || 30;
+            replacement = replacement || '…';
+
+            if ( string.length <= length )
+                return string;
+
+            return string.substr( 0, length / 2 ) + replacement + string.substr( -1 * length / 2 );
         }
     });

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

@@ -256 +256 @@
             sidebar:    'settings',
             searchable: true,
-            filterable: false
+            filterable: false,
+            uploads:    true
         },
 
@@ -477 +478 @@
             content: 'upload',
             toolbar: 'empty',
+            uploads: true,
 
             // The state to navigate to when files are uploading.
@@ -1291 +1293 @@
                 sortable:   state.get('sortable'),
                 search:     state.get('searchable'),
-                upload:     state.get('upload'),
+                uploads:    state.get('uploads'),
                 filters:    state.get('filterable'),
                 display:    state.get('displaySettings'),
@@ -1828 +1830 @@
 
     /**
+     * wp.media.view.UploaderStatus
+     */
+    media.view.UploaderStatus = media.View.extend({
+        className: 'media-uploader-status',
+        template:  media.template('uploader-status'),
+
+        initialize: function() {
+            this.controller = this.options.controller;
+
+            this.queue = wp.Uploader.queue;
+            this.queue.on( 'add remove reset', this.visibility, this );
+            this.queue.on( 'add remove reset change:percent', this.progress, this );
+            this.queue.on( 'add remove reset change:uploading', this.info, this );
+
+            this.errors = wp.Uploader.errors;
+        },
+
+        dispose: function() {
+            wp.Uploader.queue.off( null, null, this );
+            media.View.prototype.dispose.apply( this, arguments );
+            return this;
+        },
+
+        visibility: function() {
+            this.$el.toggleClass( 'uploading', !! this.queue.length );
+            this.$el.toggle( !! this.queue.length || !! this.errors.length );
+        },
+
+        ready: function() {
+            _.each({
+                '$bar':      '.media-progress-bar div',
+                '$index':    '.upload-index',
+                '$total':    '.upload-total',
+                '$filename': '.upload-filename'
+            }, function( selector, key ) {
+                this[ key ] = this.$( selector );
+            }, this );
+
+            this.visibility();
+            this.progress();
+            this.info();
+        },
+
+        progress: function() {
+            var queue = this.queue,
+                $bar = this.$bar,
+                memo = 0;
+
+            if ( ! $bar || ! queue.length )
+                return;
+
+            $bar.width( ( queue.reduce( function( memo, attachment ) {
+                if ( ! attachment.get('uploading') )
+                    return memo + 100;
+
+                var percent = attachment.get('percent');
+                return memo + ( _.isNumber( percent ) ? percent : 100 );
+            }, 0 ) / queue.length ) + '%' );
+        },
+
+        info: function() {
+            var queue = this.queue,
+                index = 0, active;
+
+            if ( ! queue.length )
+                return;
+
+            active = this.queue.find( function( attachment, i ) {
+                index = i;
+                return attachment.get('uploading');
+            });
+
+            this.$index.text( index + 1 );
+            this.$total.text( queue.length );
+            this.$filename.html( active ? media.truncate( _.escape( active.get('filename') ), 24 ) : '' );
+        }
+    });
+
+    /**
      * wp.media.view.Toolbar
      */
@@ -2861 +2942 @@
                 filters: false,
                 search:  true,
-                upload:  false,
+                uploads: false,
                 display: false,
 
@@ -2915 +2996 @@
                 }) );
             }
-
-            if ( this.options.upload && this.controller.uploader ) {
-                this.toolbar.set( 'upload', new media.view.Button( _.extend({
-                    el:       this.controller.uploader.$browser.detach()[0],
-                    priority: -60,
-                    size:     'large',
-                    text:     l10n.selectFiles
-                }, this.options.upload ) ).render() );
-            }
         },
 
@@ -2942 +3014 @@
 
         createSidebar: function() {
-            this.sidebar = new media.view.Sidebar({
-                controller: this.controller
-            });
-
-            this.views.add( this.sidebar );
-
-            this.options.selection.on( 'selection:single', this.createSingle, this );
-            this.options.selection.on( 'selection:unsingle', this.disposeSingle, this );
+            var options = this.options,
+                selection = options.selection,
+                sidebar = this.sidebar = new media.view.Sidebar({
+                    controller: this.controller
+                });
+
+            this.views.add( sidebar );
+
+            if ( options.uploads && this.controller.uploader ) {
+                sidebar.set( 'uploads', new media.view.UploaderStatus({
+                    controller: this.controller,
+                    priority:   40
+                }) );
+            }
+
+            selection.on( 'selection:single', this.createSingle, this );
+            selection.on( 'selection:unsingle', this.disposeSingle, this );
+
+            if ( selection.single() )
+                this.createSingle();
         },
 

trunk/wp-includes/js/plupload/wp-plupload.js

@@ -87 +87 @@
             if ( file.attachment )
                 file.attachment.destroy();
+
+            Uploader.errors.unshift({
+                message: message,
+                data:    data,
+                file:    file
+            });
+
             self.error( message, data, file );
         };
@@ -285 +292 @@
 
     Uploader.queue = new wp.media.model.Attachments( [], { query: false });
+    Uploader.errors = new Backbone.Collection();
 
     exports.Uploader = Uploader;

trunk/wp-includes/media.php

@@ -1444 +1444 @@
     </script>
 
+    <script type="text/html" id="tmpl-uploader-status">
+        <h3><?php _e( 'Uploading' ); ?></h3>
+        <div class="media-progress-bar"><div></div></div>
+        <div class="upload-details">
+            <span class="upload-count">
+                <span class="upload-index"></span> / <span class="upload-total"></span>
+            </span>
+            <span class="upload-detail-separator">&ndash;</span>
+            <span class="upload-filename"></span>
+        </div>
+        <div class="upload-errors">
+        </div>
+    </script>
+
     <script type="text/html" id="tmpl-attachment">
         <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">