WordPress.org
Get WordPress

Make WordPress Core

Changeset 22321


Ignore:
Timestamp:
10/29/2012 06:56:23 AM (11 years ago)
Author:
koopersmith
Message:

Add a sidebar to the media modal.

  • Adds wp.media.view.Sidebar, to aid in rendering the sidebar.
  • Removes the directions from the Attachments view and shifts search into a separate view (wp.mce.view.Search) that can be relocated at will. This also serves to simplify the Attachments view by removing the nested list and $list parameters.
  • Show the toolbar on the featured image workflow, effectively requiring confirmation before closing the dialog.

see #21390, #21776, #21808.

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/includes/meta-boxes.php

    r22320 r22321  
    10191019            $thumbnailId = $element.find('input[name="thumbnail_id"]'),
    10201020            title        = '<?php _e( "Choose a Featured Image" ); ?>',
    1021             workflow, selection, setFeaturedImage;
     1021            update       = '<?php _e( "Update Featured Image" ); ?>',
     1022            frame, selection, setFeaturedImage;
    10221023
    10231024        setFeaturedImage = function( thumbnailId ) {
    … …  
    10301031            event.preventDefault();
    10311032
    1032             if ( ! workflow ) {
    1033                 workflow = wp.media({
     1033            if ( ! frame ) {
     1034                frame = wp.media({
    10341035                    title:   title,
    10351036                    library: {
    … …  
    10381039                });
    10391040
    1040                 selection = workflow.state().get('selection');
    1041 
    1042                 selection.on( 'add', function( model ) {
    1043                     var sizes = model.get('sizes'),
    1044                         size;
    1045 
    1046                     setFeaturedImage( model.id );
    1047 
    1048                     // @todo: might need a size hierarchy equivalent.
    1049                     if ( sizes )
    1050                         size = sizes['post-thumbnail'] || sizes.medium;
    1051 
    1052                     // @todo: Need a better way of accessing full size
    1053                     // data besides just calling toJSON().
    1054                     size = size || model.toJSON();
    1055 
    1056                     workflow.close();
    1057                     selection.clear();
    1058 
    1059                     $( '<img />', {
    1060                         src:    size.url,
    1061                         width:  size.width
    1062                     }).prependTo( $element );
    1063                 });
     1041                frame.toolbar( new wp.media.view.Toolbar({
     1042                    controller: frame,
     1043                    items: {
     1044                        update: {
     1045                            style:    'primary',
     1046                            text:     update,
     1047                            priority: 40,
     1048
     1049                            click: function() {
     1050                                var selection = frame.state().get('selection'),
     1051                                    model = selection.first(),
     1052                                    sizes = model.get('sizes'),
     1053                                    size;
     1054
     1055                                setFeaturedImage( model.id );
     1056
     1057                                // @todo: might need a size hierarchy equivalent.
     1058                                if ( sizes )
     1059                                    size = sizes['post-thumbnail'] || sizes.medium;
     1060
     1061                                // @todo: Need a better way of accessing full size
     1062                                // data besides just calling toJSON().
     1063                                size = size || model.toJSON();
     1064
     1065                                frame.close();
     1066                                selection.clear();
     1067
     1068                                $( '<img />', {
     1069                                    src:    size.url,
     1070                                    width:  size.width
     1071                                }).prependTo( $element );
     1072                            }
     1073                        }
     1074                    }
     1075                }) );
    10641076            }
    10651077
    1066             workflow.open();
     1078            frame.open();
    10671079        });
    10681080

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

    r22320 r22321  
    7373 */
    7474.media-toolbar {
    75     position: relative;
    76     z-index: 50;
    77     height: 60px;
     75    position: absolute;
     76    top: 0;
     77    left: 220px;
     78    right: 0;
     79    z-index: 100;
     80    height: 50px;
    7881    padding: 0 10px;
    7982    border-bottom: 1px solid #dfdfdf;
    … …  
    9295    margin-left: 10px;
    9396    float: left;
    94     margin-top: 16px;
     97    margin-top: 10px;
    9598}
    9699
    … …  
    99102    margin-right: 10px;
    100103    float: left;
    101     margin-top: 16px;
     104    margin-top: 10px;
     105}
     106
     107/**
     108 * Sidebar
     109 */
     110.media-sidebar {
     111    position: absolute;
     112    top: 0;
     113    left: 0;
     114    bottom: 0;
     115    width: 219px;
     116    z-index: 50;
     117    background: #f5f5f5;
     118    border-right: 1px solid #dfdfdf;
     119}
     120
     121.hide-sidebar .media-sidebar {
     122    display: none;
     123}
     124
     125.media-sidebar .sidebar-title {
     126    font-weight: 200;
     127    font-size: 20px;
     128    margin: 0;
     129    padding: 12px 10px 10px;
     130    line-height: 28px;
     131    /*border-bottom: 1px solid #dfdfdf;*/
     132}
     133
     134.media-sidebar .sidebar-content {
     135    padding: 0 10px;
     136}
     137
     138.media-sidebar .search {
     139    display: block;
     140    width: 100%;
     141}
     142
     143.media-sidebar .selection-preview {
     144    display: block;
     145    padding-top: 5px;
    102146}
    103147
    … …  
    106150 */
    107151
    108 .media-frame .attachments,
    109 .media-frame .media-toolbar {
     152.media-frame .media-content,
     153.media-frame .media-toolbar,
     154.media-frame .media-sidebar {
    110155    -webkit-transition-property: left, right, top, bottom, margin;
    111156    -moz-transition-property:    left, right, top, bottom, margin;
    … …  
    121166}
    122167
    123 .media-frame .attachments {
    124     position: absolute;
    125     top: 61px;
    126     left: 0;
     168.media-frame .media-content {
     169    position: absolute;
     170    top: 51px;
     171    left: 220px;
    127172    right: 0;
    128173    bottom: 0;
    129174    height: auto;
    130175    width: auto;
    131 }
    132 
    133 .media-frame.hide-toolbar .attachments {
    134     top: 0;
    135 }
    136 
    137 .media-frame .media-toolbar {
    138     margin-top: 0;
    139 }
    140 
    141 .media-frame.hide-toolbar .media-toolbar {
    142     margin-top: -61px;
     176    overflow: auto;
     177}
     178
     179.media-frame.hide-sidebar .media-content {
     180    left: 0;
    143181}
    144182
    … …  
    146184    display: none;
    147185}
    148 /**
    149  * Attachments
    150  */
    151 .attachments {
    152     position: relative;
    153     width: 100%;
    154     height: 100%;
    155 }
    156 
    157 .attachments-header {
    158     position: absolute;
    159     top: 0;
    160     left: 0;
    161     right: 0;
    162     height: 50px;
    163     padding: 0 10px;
    164     background: #fff;
    165 }
    166 
    167 .attachments-header h3 {
    168     float: left;
    169     margin: 0;
    170     padding: 0;
    171     line-height: 50px;
    172     font-size: 18px;
    173     font-weight: 200;
    174 }
    175 
    176 .attachments-header .search {
    177     float: right;
     186
     187/**
     188 * Search
     189 */
     190.media-frame .search {
    178191    margin-top: 11px;
    179192    padding: 4px;
    … …  
    184197}
    185198
     199/**
     200 * Attachments
     201 */
     202/*.attachments {
     203    position: relative;
     204    width: 100%;
     205    height: 100%;
     206}
     207
     208.attachments-header {
     209    position: absolute;
     210    top: 0;
     211    left: 0;
     212    right: 0;
     213    height: 50px;
     214    padding: 0 10px;
     215    background: #fff;
     216}
     217
     218.attachments-header h3 {
     219    float: left;
     220    margin: 0;
     221    padding: 0;
     222    line-height: 50px;
     223    font-size: 18px;
     224    font-weight: 200;
     225}
     226
    186227.attachments ul {
    187228    position: absolute;
    … …  
    192233    overflow: auto;
    193234    margin: 0 0 20px;
    194 }
     235}*/
    195236
    196237/**
    … …  
    402443    background: rgba( 0, 86, 132, 0.9 );
    403444
    404     /*z-index: -200;*/
    405445    z-index: 250000;
    406446    display: none;
    … …  
    414454    transition:         opacity 250ms;
    415455}
    416 
    417 /*.drag-over .uploader-window {
    418     z-index: 250000;
    419 }*/
    420456
    421457.uploader-window-content {

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

    r22320 r22321  
    114114            id:       'library',
    115115            multiple: false,
    116             describe: false
     116            describe: false,
     117            title:    l10n.mediaLibrary
    117118        },
    118119
    … …  
    131132                toolbar;
    132133
     134            // Toolbar.
    133135            toolbar = this._postLibraryToolbar = new media.view.Toolbar.PostLibrary({
    134136                controller: frame,
    135                 selection:  this.get('selection')
     137                state:      this
    136138            });
    137139
    … …  
    139141            this.get('selection').on( 'add remove', toolbar.visibility, toolbar );
    140142
     143            // Sidebar.
     144            frame.sidebar( new media.view.Sidebar({
     145                controller: frame,
     146                views: {
     147                    search: new media.view.Search({
     148                        controller: frame,
     149                        model:      this.get('library').props,
     150                        priority:   20
     151                    }),
     152
     153                    selection: new media.view.SelectionPreview({
     154                        controller: frame,
     155                        collection: this.get('selection'),
     156                        priority:   40
     157                    })
     158                }
     159            }) );
     160
     161            // Content.
    141162            frame.content( new media.view.Attachments({
    142                 directions: this.get('multiple') ? l10n.selectMediaMultiple : l10n.selectMediaSingular,
    143163                controller: frame,
    144164                collection: this.get('library'),
    … …  
    146166                AttachmentView: media.view.Attachment.Library
    147167            }).render() );
    148 
    149             if ( ! this.get('selection').length )
    150                 frame.$el.addClass('hide-toolbar');
    151168
    152169            // If we're in a workflow that supports multiple attachments,
    … …  
    174191            id:         'gallery',
    175192            multiple:   true,
    176             describe:   true
     193            describe:   true,
     194            title:      l10n.createGallery
    177195        },
    178196
    … …  
    187205            var frame = this.frame;
    188206
     207            // Toolbar.
    189208            frame.toolbar( new media.view.Toolbar.Gallery({
    190209                controller: frame,
    191                 editing:    this.get('editing'),
    192                 selection:  this.get('selection')
     210                state:      this
    193211            }) );
    194212
     213            // Sidebar.
     214            frame.sidebar( new media.view.Sidebar({
     215                controller: frame
     216            }).render() );
     217
     218            // Content.
    195219            frame.content( new media.view.Attachments({
    196                 directions: 'Gallery time!',
    197220                controller: frame,
    198221                collection: this.get('selection'),
    … …  
    246269
    247270        render: function() {
    248             var els = [ this.sidebar().el, this.toolbar().el, this.content().el ];
     271            var els = [ this.toolbar().el, this.sidebar().el, this.content().el ];
    249272
    250273            if ( this.modal )
    … …  
    635658    media.view.Toolbar.PostLibrary = media.view.Toolbar.extend({
    636659        initialize: function() {
    637             var selection = this.options.selection,
     660            var state = this.options.state,
     661                selection = state.get('selection'),
    638662                controller = this.options.controller;
    639663
    640664            this.options.items = {
    641                 'selection-preview': new media.view.SelectionPreview({
    642                     controller: controller,
    643                     collection: selection,
    644                     priority: -40
    645                 }),
    646 
    647665                'create-new-gallery': {
    648666                    style:    'primary',
    … …  
    663681                            click: function() {
    664682                                controller.close();
    665                                 controller.state().trigger( 'insert', selection );
     683                                state.trigger( 'insert', selection );
    666684                                selection.clear();
    667685                            }
    … …  
    699717
    700718            media.view.Toolbar.prototype.initialize.apply( this, arguments );
     719            this.visibility();
    701720        },
    702721
    703722        visibility: function() {
    704             var selection = this.options.selection,
     723            var state = this.options.state,
     724                selection = state.get('selection'),
    705725                controller = this.options.controller,
    706726                count = selection.length,
    707727                showGallery;
    708 
    709             controller.$el.toggleClass( 'hide-toolbar', ! count );
    710728
    711729            // Check if every attachment in the selection is an image.
    … …  
    719737                button.model.set( 'style', showGallery ? '' : 'primary' );
    720738            });
     739
     740            _.first( insert.buttons ).model.set( 'disabled', ! count );
    721741        }
    722742    });
    … …  
    726746    media.view.Toolbar.Gallery = media.view.Toolbar.extend({
    727747        initialize: function() {
    728             var editing = this.options.editing,
    729                 selection = this.options.selection,
     748            var state = this.options.state,
     749                editing = state.get('editing'),
     750                selection = state.get('selection'),
    730751                controller = this.options.controller;
    731752
    … …  
    737758                    click:    function() {
    738759                        controller.close();
    739                         controller.state().trigger( 'update', selection );
     760                        state.trigger( 'update', selection );
    740761                        selection.clear();
    741762                        controller.state('library');
    … …  
    770791
    771792        defaults: {
    772             text:  '',
    773             style: '',
    774             size:  'large'
     793            text:     '',
     794            style:    '',
     795            size:     'large',
     796            disabled: false
    775797        },
    776798
    … …  
    797819
    798820        render: function() {
    799             var classes = [ 'button', this.className ];
    800 
    801             if ( this.model.get('style') )
    802                 classes.push( 'button-' + this.model.get('style') );
    803 
    804             if ( this.model.get('size') )
    805                 classes.push( 'button-' + this.model.get('size') );
     821            var classes = [ 'button', this.className ],
     822                model = this.model.toJSON();
     823
     824            if ( model.style )
     825                classes.push( 'button-' + model.style );
     826
     827            if ( model.size )
     828                classes.push( 'button-' + model.size );
    806829
    807830            classes = _.uniq( classes.concat( this.options.classes ) );
    808831            this.el.className = classes.join(' ');
    809832
     833            this.$el.attr( 'disabled', model.disabled );
    810834
    811835            // Detach the dropdown.
    … …  
    823847        click: function( event ) {
    824848            event.preventDefault();
    825             if ( this.options.click )
     849            if ( this.options.click && ! this.model.get('disabled') )
    826850                this.options.click.apply( this, arguments );
    827851        }
    … …  
    851875        render: function() {
    852876            this.$el.html( $( _.pluck( this.buttons, 'el' ) ).detach() );
     877            return this;
     878        }
     879    });
     880
     881    /**
     882     * wp.media.view.Sidebar
     883     */
     884    media.view.Sidebar = Backbone.View.extend({
     885        tagName:   'div',
     886        className: 'media-sidebar',
     887        template:  media.template('sidebar'),
     888
     889        initialize: function() {
     890            this.controller = this.options.controller;
     891            this._views     = {};
     892
     893            if ( this.options.views )
     894                this.add( this.options.views, { silent: true }).render();
     895        },
     896
     897        render: function() {
     898            var els = _( this._views ).chain().sortBy( function( view ) {
     899                    return view.options.priority || 10;
     900                }).pluck('el').value();
     901
     902            // Make sure to detach the elements we want to reuse.
     903            // Otherwise, `jQuery.html()` will unbind their events.
     904            $( els ).detach();
     905
     906            this.$el.html( this.template({
     907                title:    this.controller.state().get('title') || '',
     908                uploader: this.controller.options.uploader
     909            }) );
     910
     911            this.$('.sidebar-content').html( els );
     912
     913            return this;
     914        },
     915
     916        add: function( id, view, options ) {
     917            // Accept an object with an `id` : `view` mapping.
     918            if ( _.isObject( id ) ) {
     919                _.each( id, function( view, id ) {
     920                    this.add( id, view, options );
     921                }, this );
     922                return this;
     923            }
     924
     925            view.controller = view.controller || this.controller;
     926
     927            this._views[ id ] = view;
     928            if ( ! options || ! options.silent )
     929                this.render();
     930            return this;
     931        },
     932
     933        get: function( id ) {
     934            return this._views[ id ];
     935        },
     936
     937        remove: function( id, options ) {
     938            delete this._views[ id ];
     939            if ( ! options || ! options.silent )
     940                this.render();
    853941            return this;
    854942        }
    … …  
    10691157     */
    10701158    media.view.Attachments = Backbone.View.extend({
    1071         tagName:   'div',
     1159        tagName:   'ul',
    10721160        className: 'attachments',
    1073         template:  media.template('attachments'),
    10741161
    10751162        events: {
    1076             'keyup .search': 'search'
     1163            'scroll': 'scroll'
    10771164        },
    10781165
    … …  
    10931180            }, this );
    10941181
    1095             this.collection.on( 'reset', this.refresh, this );
    1096 
    1097             this.$list = $('<ul />');
    1098             this.list  = this.$list[0];
    1099 
     1182            this.collection.on( 'reset', this.render, this );
     1183
     1184            // Throttle the scroll handler.
    11001185            this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
    1101             this.$list.on( 'scroll.attachments', this.scroll );
    11021186
    11031187            this.initSortable();
    … …  
    11111195                return;
    11121196
    1113             this.$list.sortable({
     1197            this.$el.sortable({
    11141198                // If the `collection` has a `comparator`, disable sorting.
    11151199                disabled: !! collection.comparator,
    … …  
    11171201                // Prevent attachments from being dragged outside the bounding
    11181202                // box of the list.
    1119                 containment: this.$list,
     1203                containment: this.$el,
    11201204
    11211205                // Change the position of the attachment as soon as the
    … …  
    11451229            // check to see if we have a `comparator`. If so, disable sorting.
    11461230            collection.props.on( 'change:orderby', function() {
    1147                 this.$list.sortable( 'option', 'disabled', !! collection.comparator );
     1231                this.$el.sortable( 'option', 'disabled', !! collection.comparator );
    11481232            }, this );
    11491233        },
    11501234
    11511235        render: function() {
    1152             // Detach the list from the DOM to prevent event removal.
    1153             this.$list.detach();
    1154 
    1155             this.$el.html( this.template( this.options ) ).append( this.$list );
    1156             this.refresh();
    1157             return this;
    1158         },
    1159 
    1160         refresh: function() {
    11611236            // If there are no elements, load some.
    11621237            if ( ! this.collection.length ) {
    11631238                this.collection.more();
    1164                 this.$list.empty();
     1239                this.$el.empty();
    11651240                return this;
    11661241            }
    … …  
    11681243            // Otherwise, create all of the Attachment views, and replace
    11691244            // the list in a single DOM operation.
    1170             this.$list.html( this.collection.map( function( attachment ) {
     1245            this.$el.html( this.collection.map( function( attachment ) {
    11711246                return new this.options.AttachmentView({
    11721247                    controller: this.controller,
    … …  
    11891264            }).render();
    11901265
    1191             children = this.$list.children();
     1266            children = this.$el.children();
    11921267
    11931268            if ( children.length > index )
    11941269                children.eq( index ).before( view.$el );
    11951270            else
    1196                 this.$list.append( view.$el );
     1271                this.$el.append( view.$el );
    11971272        },
    11981273
    11991274        remove: function( attachment, index ) {
    1200             var children = this.$list.children();
     1275            var children = this.$el.children();
    12011276            if ( children.length )
    12021277                children.eq( index ).detach();
    … …  
    12051280        scroll: function( event ) {
    12061281            // @todo: is this still necessary?
    1207             if ( ! this.$list.is(':visible') )
     1282            if ( ! this.$el.is(':visible') )
    12081283                return;
    12091284
    1210             if ( this.list.scrollHeight < this.list.scrollTop + ( this.list.clientHeight * this.options.refreshThreshold ) ) {
     1285            if ( this.el.scrollHeight < this.el.scrollTop + ( this.el.clientHeight * this.options.refreshThreshold ) ) {
    12111286                this.collection.more();
    12121287            }
     1288        }
     1289    });
     1290
     1291    /**
     1292     * wp.media.view.Search
     1293     */
     1294    media.view.Search = Backbone.View.extend({
     1295        tagName:   'input',
     1296        className: 'search',
     1297
     1298        attributes: {
     1299            type:        'text',
     1300            placeholder: l10n.search
     1301        },
     1302
     1303        events: {
     1304            'keyup': 'search'
     1305        },
     1306
     1307        render: function() {
     1308            this.el.value = this.model.escape('search');
     1309            return this;
    12131310        },
    12141311
    12151312        search: function( event ) {
    1216             var props = this.collection.props;
    1217 
    12181313            if ( event.target.value )
    1219                 props.set( 'search', event.target.value );
     1314                this.model.set( 'search', event.target.value );
    12201315            else
    1221                 props.unset('search');
     1316                this.model.unset('search');
    12221317        }
    12231318    });

  • trunk/wp-includes/media.php

    r22320 r22321  
    13101310    </script>
    13111311
    1312     <script type="text/html" id="tmpl-attachments">
    1313         <div class="attachments-header">
    1314             <h3><%- directions %></h3>
    1315             <input class="search" type="text" placeholder="<?php esc_attr_e('Search'); ?>" />
    1316         </div>
     1312    <script type="text/html" id="tmpl-sidebar">
     1313        <h2 class="sidebar-title"><%- title %></h2>
     1314        <div class="sidebar-content"></div>
    13171315    </script>
    13181316

  • trunk/wp-includes/script-loader.php

    r22236 r22321  
    324324    did_action( 'init' ) && $scripts->localize( 'media-views', '_wpMediaViewsL10n', array(
    325325        // Generic
    326         'insertMedia'           => __( 'Insert Media' ),
    327         'selectMediaSingular'   => __( 'Select a media file:' ),
    328         'selectMediaMultiple'   => __( 'Select one or more media files:' ),
     326        'insertMedia' => __( 'Insert Media' ),
     327        'search'      => __( 'Search' ),
    329328
    330329        // Library
     330        'mediaLibrary'          => __( 'Media Library' ),
    331331        'createNewGallery'      => __( 'Create a new gallery' ),
    332332        'insertIntoPost'        => __( 'Insert into post' ),
    … …  
    334334
    335335        // Gallery
     336        'createGallery'          => __( 'Create Gallery' ),
    336337        'returnToLibrary'        => __( 'Return to media library' ),
    337338        'continueEditingGallery' => __( 'Continue editing gallery' ),
Note: See TracChangeset for help on using the changeset viewer.