Changeset 22816

Timestamp:

11/22/2012 09:32:21 AM (14 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 }}">