WordPress.org

Make WordPress Core

Changeset 22594


Ignore:
Timestamp:
11/15/12 02:36:06 (17 months 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.