WordPress.org

Make WordPress Core

Changeset 22816


Ignore:
Timestamp:
11/22/2012 09:32:21 AM (8 years ago)
Author:
koopersmith
Message:

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

Location:
trunk/wp-includes
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/css/media-views.css

    r22809 r22816  
    716716.media-progress-bar {
    717717    position: relative;
    718     height: 8px;
     718    height: 10px;
    719719    width: 70%;
    720720    margin: 10px auto;
    721     padding: 2px;
    722     border: 2px solid #ccc;
    723     border-radius: 8px;
    724     background: #fff;
     721    border-radius: 10px;
     722    background: #dfdfdf;
     723    background: rgba( 0, 0, 0, 0.1 );
    725724}
    726725
    727726.media-progress-bar div {
    728     height: 8px;
    729     min-width: 8px;
     727    height: 10px;
     728    min-width: 20px;
    730729    width: 0;
    731     background: #ccc;
     730    background: #aaa;
     731    background: rgba( 0, 0, 0, 0.2 );
    732732    border-radius: 10px;
    733733    -webkit-transition: width 300ms;
     
    738738}
    739739
     740.media-uploader-status .media-progress-bar {
     741    width: 100%;
     742}
     743
    740744.attachment-preview .media-progress-bar {
    741745    position: absolute;
     
    743747    left: 15%;
    744748    width: 70%;
    745     margin: -8px 0 0 -4px;
     749    margin: -5px 0 0 0;
     750}
     751
     752.media-uploader-status {
     753    padding-bottom: 10px;
     754    border-bottom: 1px solid #dfdfdf;
     755    box-shadow: 0 1px 0 #fff;
     756}
     757
     758.media-uploader-status .upload-details {
     759    font-size: 12px;
     760    color: #666;
     761    text-shadow: 0 1px 0 #fff;
     762}
     763
     764.media-uploader-status .upload-detail-separator {
     765    padding: 0 4px;
     766}
     767
     768.media-uploader-status .upload-count {
     769    color: #464646;
    746770}
    747771
     
    10601084
    10611085.uploading .attachment-info .media-progress-bar {
    1062     margin-top: 32px;
     1086    margin-top: 35px;
    10631087}
    10641088
  • trunk/wp-includes/js/media-models.js

    r22809 r22816  
    192192                };
    193193            }
     194        },
     195
     196        // Truncates a string by injecting an ellipsis into the middle.
     197        // Useful for filenames.
     198        truncate: function( string, length, replacement ) {
     199            length = length || 30;
     200            replacement = replacement || '…';
     201
     202            if ( string.length <= length )
     203                return string;
     204
     205            return string.substr( 0, length / 2 ) + replacement + string.substr( -1 * length / 2 );
    194206        }
    195207    });
  • trunk/wp-includes/js/media-views.js

    r22809 r22816  
    256256            sidebar:    'settings',
    257257            searchable: true,
    258             filterable: false
     258            filterable: false,
     259            uploads:    true
    259260        },
    260261
     
    477478            content: 'upload',
    478479            toolbar: 'empty',
     480            uploads: true,
    479481
    480482            // The state to navigate to when files are uploading.
     
    12911293                sortable:   state.get('sortable'),
    12921294                search:     state.get('searchable'),
    1293                 upload:     state.get('upload'),
     1295                uploads:    state.get('uploads'),
    12941296                filters:    state.get('filterable'),
    12951297                display:    state.get('displaySettings'),
     
    18281830
    18291831    /**
     1832     * wp.media.view.UploaderStatus
     1833     */
     1834    media.view.UploaderStatus = media.View.extend({
     1835        className: 'media-uploader-status',
     1836        template:  media.template('uploader-status'),
     1837
     1838        initialize: function() {
     1839            this.controller = this.options.controller;
     1840
     1841            this.queue = wp.Uploader.queue;
     1842            this.queue.on( 'add remove reset', this.visibility, this );
     1843            this.queue.on( 'add remove reset change:percent', this.progress, this );
     1844            this.queue.on( 'add remove reset change:uploading', this.info, this );
     1845
     1846            this.errors = wp.Uploader.errors;
     1847        },
     1848
     1849        dispose: function() {
     1850            wp.Uploader.queue.off( null, null, this );
     1851            media.View.prototype.dispose.apply( this, arguments );
     1852            return this;
     1853        },
     1854
     1855        visibility: function() {
     1856            this.$el.toggleClass( 'uploading', !! this.queue.length );
     1857            this.$el.toggle( !! this.queue.length || !! this.errors.length );
     1858        },
     1859
     1860        ready: function() {
     1861            _.each({
     1862                '$bar':      '.media-progress-bar div',
     1863                '$index':    '.upload-index',
     1864                '$total':    '.upload-total',
     1865                '$filename': '.upload-filename'
     1866            }, function( selector, key ) {
     1867                this[ key ] = this.$( selector );
     1868            }, this );
     1869
     1870            this.visibility();
     1871            this.progress();
     1872            this.info();
     1873        },
     1874
     1875        progress: function() {
     1876            var queue = this.queue,
     1877                $bar = this.$bar,
     1878                memo = 0;
     1879
     1880            if ( ! $bar || ! queue.length )
     1881                return;
     1882
     1883            $bar.width( ( queue.reduce( function( memo, attachment ) {
     1884                if ( ! attachment.get('uploading') )
     1885                    return memo + 100;
     1886
     1887                var percent = attachment.get('percent');
     1888                return memo + ( _.isNumber( percent ) ? percent : 100 );
     1889            }, 0 ) / queue.length ) + '%' );
     1890        },
     1891
     1892        info: function() {
     1893            var queue = this.queue,
     1894                index = 0, active;
     1895
     1896            if ( ! queue.length )
     1897                return;
     1898
     1899            active = this.queue.find( function( attachment, i ) {
     1900                index = i;
     1901                return attachment.get('uploading');
     1902            });
     1903
     1904            this.$index.text( index + 1 );
     1905            this.$total.text( queue.length );
     1906            this.$filename.html( active ? media.truncate( _.escape( active.get('filename') ), 24 ) : '' );
     1907        }
     1908    });
     1909
     1910    /**
    18301911     * wp.media.view.Toolbar
    18311912     */
     
    28612942                filters: false,
    28622943                search:  true,
    2863                 upload: false,
     2944                uploads: false,
    28642945                display: false,
    28652946
     
    29152996                }) );
    29162997            }
    2917 
    2918             if ( this.options.upload && this.controller.uploader ) {
    2919                 this.toolbar.set( 'upload', new media.view.Button( _.extend({
    2920                     el:       this.controller.uploader.$browser.detach()[0],
    2921                     priority: -60,
    2922                     size:     'large',
    2923                     text:     l10n.selectFiles
    2924                 }, this.options.upload ) ).render() );
    2925             }
    29262998        },
    29272999
     
    29423014
    29433015        createSidebar: function() {
    2944             this.sidebar = new media.view.Sidebar({
    2945                 controller: this.controller
    2946             });
    2947 
    2948             this.views.add( this.sidebar );
    2949 
    2950             this.options.selection.on( 'selection:single', this.createSingle, this );
    2951             this.options.selection.on( 'selection:unsingle', this.disposeSingle, this );
     3016            var options = this.options,
     3017                selection = options.selection,
     3018                sidebar = this.sidebar = new media.view.Sidebar({
     3019                    controller: this.controller
     3020                });
     3021
     3022            this.views.add( sidebar );
     3023
     3024            if ( options.uploads && this.controller.uploader ) {
     3025                sidebar.set( 'uploads', new media.view.UploaderStatus({
     3026                    controller: this.controller,
     3027                    priority:   40
     3028                }) );
     3029            }
     3030
     3031            selection.on( 'selection:single', this.createSingle, this );
     3032            selection.on( 'selection:unsingle', this.disposeSingle, this );
     3033
     3034            if ( selection.single() )
     3035                this.createSingle();
    29523036        },
    29533037
  • trunk/wp-includes/js/plupload/wp-plupload.js

    r22798 r22816  
    8787            if ( file.attachment )
    8888                file.attachment.destroy();
     89
     90            Uploader.errors.unshift({
     91                message: message,
     92                data:    data,
     93                file:    file
     94            });
     95
    8996            self.error( message, data, file );
    9097        };
     
    285292
    286293    Uploader.queue = new wp.media.model.Attachments( [], { query: false });
     294    Uploader.errors = new Backbone.Collection();
    287295
    288296    exports.Uploader = Uploader;
  • trunk/wp-includes/media.php

    r22809 r22816  
    14441444    </script>
    14451445
     1446    <script type="text/html" id="tmpl-uploader-status">
     1447        <h3><?php _e( 'Uploading' ); ?></h3>
     1448        <div class="media-progress-bar"><div></div></div>
     1449        <div class="upload-details">
     1450            <span class="upload-count">
     1451                <span class="upload-index"></span> / <span class="upload-total"></span>
     1452            </span>
     1453            <span class="upload-detail-separator">&ndash;</span>
     1454            <span class="upload-filename"></span>
     1455        </div>
     1456        <div class="upload-errors">
     1457        </div>
     1458    </script>
     1459
    14461460    <script type="text/html" id="tmpl-attachment">
    14471461        <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
Note: See TracChangeset for help on using the changeset viewer.