WordPress.org

Make WordPress Core

Changeset 22594


Ignore:
Timestamp:
11/15/2012 02:36:06 AM (8 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.