WordPress.org
Get WordPress

Make WordPress Core

Changeset 22594


Ignore:
Timestamp:
11/15/2012 02:36:06 AM (14 years ago)
Author:
koopersmith
Message:

Media: Enter batch insert workflow by editing the selection instead of having an explicit button. see #21390.

Location:
trunk/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r22570 r22594  
    812812}
    813813
    814 .media-selection .clear-selection {
    815         display: block;
     814.media-selection .selection-info a {
     815        display: block;
     816        float: left;
     817        padding: 1px 8px;
     818        margin: 1px 8px 1px -8px;
     819        line-height: 16px;
    816820        text-decoration: none;
    817         line-height: 16px;
     821        border-right: 1px solid #dfdfdf;
     822        color: #21759B;
     823}
     824
     825.media-selection .selection-info a:hover {
     826        background: #21759B;
     827        color: #fff;
     828        border-color: transparent;
     829}
     830
     831.media-selection .selection-info a:last-child {
     832        border-right: 0;
     833}
     834
     835.media-selection .selection-info .clear-selection {
     836        color: red;
     837}
     838
     839.media-selection .selection-info .clear-selection:hover {
     840        background: red;
    818841}
    819842
    … …  
    826849}
    827850
    828 .media-selection .selected.attachment {
     851.attachment.selection.selected {
    829852        box-shadow: none;
    830853}
    831854
    832 .media-selection .details.attachment {
     855.attachment.selection.details {
     856        box-shadow:
     857                0 0 0 1px #fff,
     858                0 0 0 4px #1e8cbe;
     859}
     860
     861.media-selection .attachment.selection.details {
    833862        box-shadow:
    834863                0 0 0 1px #fff,

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

    r22583 r22594  
    373373
    374374                refreshSelection: function() {
     375                        var selection = this.get('selection'),
     376                                mode = this.frame.content.mode();
     377
    375378                        this.frame.toolbar.view().refresh();
    376                         this.trigger( 'refresh:selection', this, this.get('selection') );
     379                        this.trigger( 'refresh:selection', this, selection );
     380
     381                        if ( ! selection.length && 'browse' !== mode && 'upload' !== mode )
     382                                this.content();
    377383                },
    378384
    379385                selectUpload: function( attachment ) {
    380386                        this.get('selection').add( attachment );
    381                 },
    382 
    383                 toggleSelection: function( model ) {
    384                         var selection = this.get('selection');
    385 
    386                         if ( ! model )
    387                                 return;
    388 
    389                         if ( selection.has( model ) ) {
    390                                 // If the model is the single model, remove it.
    391                                 // If it is not the same as the single model,
    392                                 // it now becomes the single model.
    393                                 selection[ selection.single() === model ? 'remove' : 'single' ]( model );
    394                         } else {
    395                                 selection.add( model ).single();
    396                         }
    397 
    398                         return this;
    399387                },
    400388
    … …  
    519507                        // The single `Attachment` view to be used in the `Attachments` view.
    520508                        if ( ! this.get('AttachmentView') )
    521                                 this.set( 'AttachmentView', media.view.Attachment.Gallery );
     509                                this.set( 'AttachmentView', media.view.Attachment.EditLibrary );
    522510                        media.controller.Library.prototype.initialize.apply( this, arguments );
    523511                },
    … …  
    868856                                controller: this,
    869857                                collection: state.get('library'),
     858                                selection:  state.get('selection'),
    870859                                model:      state,
    871860                                sortable:   state.get('sortable'),
    … …  
    981970                                multiple: this.options.multiple,
    982971                                menu:      'main',
     972                                sidebar:   'attachment-settings',
    983973
    984974                                // Update user settings when users adjust the
    … …  
    10591049                        var handlers = {
    10601050                                        menu: {
    1061                                                 batch:   'batchMenu',
    1062                                                 gallery: 'galleryMenu'
     1051                                                'batch':   'batchMenu',
     1052                                                'gallery': 'galleryMenu'
    10631053                                        },
    10641054
    10651055                                        content: {
    1066                                                 embed: 'embedContent'
     1056                                                'embed':          'embedContent',
     1057                                                'edit-selection': 'editSelectionContent'
    10671058                                        },
    10681059
    … …  
    10841075                                _.each( regionHandlers, function( callback, handler ) {
    10851076                                        this[ region ].on( 'activate:' + handler, this[ callback ], this );
    1086                                 }, this );
    1087                         }, this );
    1088 
    1089                         _.each(['library', 'upload'], function( id ) {
    1090                                 this.get( id ).on( 'refresh:selection', function( state, selection ) {
    1091                                         var sidebar = this.sidebar;
    1092 
    1093                                         if ( ! selection.length )
    1094                                                 sidebar.mode('clear');
    1095                                         else if ( selection.length === 1 )
    1096                                                 sidebar.mode('attachment-settings');
    1097                                         else
    1098                                                 sidebar.mode('settings');
    10991077                                }, this );
    11001078                        }, this );
    … …  
    12051183                },
    12061184
     1185                editSelectionContent: function() {
     1186                        var state = this.state(),
     1187                                selection = state.get('selection'),
     1188                                view;
     1189
     1190                        view = new media.view.AttachmentsBrowser({
     1191                                controller: this,
     1192                                collection: selection,
     1193                                selection:  selection,
     1194                                model:      state,
     1195                                sortable:   true,
     1196                                search:     false,
     1197
     1198                                AttachmentView: media.view.Attachment.EditSelection
     1199                        }).render();
     1200
     1201                        view.toolbar.set( 'backToLibrary', {
     1202                                text:     l10n.returnToLibrary,
     1203                                priority: -100,
     1204
     1205                                click: function() {
     1206                                        this.controller.content.mode('browse');
     1207                                }
     1208                        });
     1209
     1210                        // Browse our library of attachments.
     1211                        this.content.view( view );
     1212                },
     1213
    12071214                // Sidebars
    12081215                onSidebarGallerySettings: function( options ) {
    … …  
    17621769                                        controller: controller,
    17631770                                        collection: selection,
    1764                                         priority:   -40
     1771                                        priority:   -40,
     1772
     1773                                        editable: function() {
     1774                                                this.controller.content.mode('edit-selection');
     1775                                        }
    17651776                                }).render(),
    17661777
    … …  
    17721783                                        click: function() {
    17731784                                                controller.close();
    1774                                                 controller.state().trigger( 'insert', selection );
    1775                                                 selection.clear();
     1785                                                controller.state().trigger( 'insert', selection ).reset();
    17761786                                        }
    17771787                                },
    … …  
    17831793                                                return selection.where({ type: 'image' });
    17841794                                        })
    1785                                 },
    1786 
    1787                                 batch: {
    1788                                         text:     l10n.batchInsert,
    1789                                         priority: 60,
    1790                                         click:    selectionToLibrary('batch-edit')
    17911795                                }
    17921796                        });
    … …  
    18011805                        this.get('insert').model.set( 'disabled', ! selection.length );
    18021806
    1803                         // Check if every attachment in the selection is an image.
     1807                        // Check if any attachment in the selection is an image.
    18041808                        this.get('gallery').$el.toggle( count > 1 && selection.any( function( attachment ) {
    18051809                                return 'image' === attachment.get('type');
    18061810                        }) );
    1807 
    1808                         // Batch insert shows for multiple selected attachments.
    1809                         this.get('batch').$el.toggle( count > 1 );
    1810 
    1811                         // Insert only shows for single attachments.
    1812                         this.get('insert').$el.toggle( count <= 1 );
    18131811                }
    18141812        });
    … …  
    20762074                        'change [data-setting] input':    'updateSetting',
    20772075                        'change [data-setting] select':   'updateSetting',
    2078                         'change [data-setting] textarea': 'updateSetting'
     2076                        'change [data-setting] textarea': 'updateSetting',
     2077                        'click .close':                   'removeFromLibrary'
    20792078                },
    20802079
    … …  
    21482147
    21492148                toggleSelection: function( event ) {
    2150                         this.controller.state().toggleSelection( this.model );
     2149                        var selection = this.options.selection,
     2150                                model = this.model;
     2151
     2152                        if ( ! selection )
     2153                                return;
     2154
     2155                        if ( selection.has( model ) ) {
     2156                                // If the model is the single model, remove it.
     2157                                // If it is not the same as the single model,
     2158                                // it now becomes the single model.
     2159                                selection[ selection.single() === model ? 'remove' : 'single' ]( model );
     2160                        } else {
     2161                                selection.add( model ).single();
     2162                        }
    21512163                },
    21522164
    21532165                selected: function() {
    2154                         var selection = this.controller.state().get('selection');
     2166                        var selection = this.options.selection;
    21552167                        if ( selection )
    21562168                                return selection.has( this.model );
    … …  
    21582170
    21592171                select: function( model, collection ) {
    2160                         var selection = this.controller.state().get('selection');
     2172                        var selection = this.options.selection;
    21612173
    21622174                        // Check if a selection exists and if it's the collection provided.
    … …  
    21702182
    21712183                deselect: function( model, collection ) {
    2172                         var selection = this.controller.state().get('selection');
     2184                        var selection = this.options.selection;
    21732185
    21742186                        // Check if a selection exists and if it's the collection provided.
    … …  
    21822194
    21832195                details: function( model, collection ) {
    2184                         var selection = this.controller.state().get('selection'),
     2196                        var selection = this.options.selection,
    21852197                                details;
    21862198
    … …  
    22212233
    22222234                        this.model.save( $setting.data('setting'), event.target.value );
     2235                },
     2236
     2237                removeFromLibrary: function( event ) {
     2238                        // Stop propagation so the model isn't selected.
     2239                        event.stopPropagation();
     2240
     2241                        this.collection.remove( this.model );
    22232242                }
    22242243        });
    … …  
    22322251
    22332252        /**
    2234          * wp.media.view.Attachment.Gallery
    2235          */
    2236         media.view.Attachment.Gallery = media.view.Attachment.extend({
     2253         * wp.media.view.Attachment.EditLibrary
     2254         */
     2255        media.view.Attachment.EditLibrary = media.view.Attachment.extend({
    22372256                buttons: {
    22382257                        close: true
    2239                 },
    2240 
    2241                 events: (function() {
    2242                         var events = _.clone( media.view.Attachment.prototype.events );
    2243                         events['click .close'] = 'removeFromGallery';
    2244                         return events;
    2245                 }()),
    2246 
    2247                 removeFromGallery: function( event ) {
    2248                         // Stop propagation so the model isn't selected.
    2249                         event.stopPropagation();
    2250 
    2251                         this.controller.state().get('library').remove( this.model );
    22522258                }
    22532259        });
    … …  
    23892395                                return new this.options.AttachmentView({
    23902396                                        controller: this.controller,
    2391                                         model:      attachment
     2397                                        model:      attachment,
     2398                                        collection: this.collection,
     2399                                        selection:  this.options.selection
    23922400                                }).render().$el;
    23932401                        }, this ) );
    … …  
    24052413                        view = new this.options.AttachmentView({
    24062414                                controller: this.controller,
    2407                                 model:      attachment
     2415                                model:      attachment,
     2416                                collection: this.collection,
     2417                                selection:  this.options.selection
    24082418                        }).render();
    24092419
    … …  
    25222532                                controller: this.controller,
    25232533                                collection: this.collection,
     2534                                selection:  this.options.selection,
    25242535                                model:      this.model,
    25252536                                sortable:   this.options.sortable,
    … …  
    26042615
    26052616                events: {
     2617                        'click .edit-selection':  'edit',
    26062618                        'click .clear-selection': 'clear'
    26072619                },
    … …  
    26092621                initialize: function() {
    26102622                        _.defaults( this.options, {
     2623                                editable:  false,
    26112624                                clearable: true
    26122625                        });
    … …  
    26162629                                controller: this.controller,
    26172630                                collection: this.collection,
     2631                                selection:  this.collection,
    26182632                                sortable:   true,
    26192633                                model:      new Backbone.Model({
    … …  
    26562670                },
    26572671
     2672                edit: function( event ) {
     2673                        event.preventDefault();
     2674                        if ( this.options.editable )
     2675                                this.options.editable.call( this, this.collection );
     2676                },
     2677
    26582678                clear: function( event ) {
    26592679                        event.preventDefault();
    … …  
    26672687         */
    26682688        media.view.Attachment.Selection = media.view.Attachment.extend({
     2689                className: 'attachment selection',
     2690
    26692691                // On click, just select the model, instead of removing the model from
    26702692                // the selection.
    26712693                toggleSelection: function() {
    2672                         this.controller.state().get('selection').single( this.model );
     2694                        this.options.selection.single( this.model );
     2695                }
     2696        });
     2697
     2698        media.view.Attachment.EditSelection = media.view.Attachment.Selection.extend({
     2699                buttons: {
     2700                        close: true
    26732701                }
    26742702        });

  • trunk/wp-includes/media.php

    r22580 r22594  
    13561356                'createNewGallery'  => __( 'Create a new gallery' ),
    13571357                'insertIntoPost'    => __( 'Insert into post' ),
     1358                'returnToLibrary'   => __( '&#8592; Return to library' ),
    13581359
    13591360                // Embed
    … …  
    15231524                <div class="selection-info">
    15241525                        <span class="count"></span>
     1526                        <# if ( data.editable ) { #>
     1527                                <a class="edit-selection" href="#"><?php _e('Edit'); ?></a>
     1528                        <# } #>
    15251529                        <# if ( data.clearable ) { #>
    15261530                                <a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
Note: See TracChangeset for help on using the changeset viewer.