WordPress.org
Get WordPress

Make WordPress Core

Ticket #28842: 28842.7.diff

File 28842.7.diff, 10.4 KB (added by wonderboymusic, 11 years ago)

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

     
    944944                0 0 0 2px #1e8cbe;
    945945}
    946946
    947 .media-frame.mode-grid .attachment .check {
    948         display: block;
    949 }
    950 
    951 .media-frame.mode-grid .attachment .check div {
    952         background-position: 21px 0;
    953 }
    954 
    955947.attachment.details .check div,
    956948.media-frame.mode-grid .attachment.selected .check div {
    957949        background-position: -21px 0;
    … …  
    997989.attachments-browser .media-toolbar-primary > .media-button-group,
    998990.attachments-browser .media-toolbar-secondary > .media-button,
    999991.attachments-browser .media-toolbar-secondary > .media-button-group {
    1000         margin-top: 10px;
     992        margin: 11px 0;
    1001993}
    1002994
    1003995.attachments-browser .attachments,
    … …  
    24532445
    24542446/* Regions we don't use at all */
    24552447.media-frame.mode-grid .media-frame-title,
    2456 .media-frame.mode-grid .media-frame-toolbar,
    24572448.media-frame.mode-grid .media-frame-router,
    24582449.media-frame.mode-grid .media-frame-menu {
    24592450        display: none;
    … …  
    25392530        margin-top: 15px;
    25402531}
    25412532
     2533.media-frame.mode-grid .delete-selected-button {
     2534        margin: 11px 20px;
     2535}
     2536
    25422537.media-frame.mode-grid .attachments-browser {
    25432538        padding: 0;
    25442539}

  • src/wp-includes/js/media-grid.js

     
    6262                                multiple:  'add',
    6363                                state:     'library',
    6464                                uploader:  true,
    65                                 mode:      [ 'grid' ]
     65                                mode:      [ 'grid', 'edit' ]
    6666                        });
    6767
    6868                        $(document).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) );
    … …  
    130130                                        multiple:           options.multiple,
    131131                                        title:              options.title,
    132132                                        content:            'browse',
     133                                        toolbar:            'select',
    133134                                        contentUserSetting: false,
    134135                                        filterable:         'all'
    135136                                })
    … …  
    144145
    145146                        // Handle a frame-level event for editing an attachment.
    146147                        this.on( 'edit:attachment', this.openEditAttachmentModal, this );
     148                        this.on( 'toolbar:render:select', this.toggleToolbar, this );
     149                        this.on( 'select:activate edit:activate', this.toggleToolbar, this );
    147150                },
    148151
    149152                /**
    … …  
    219222                                        pushState: true
    220223                                } );
    221224                        }
     225                },
     226
     227                toggleToolbar: function() {
     228                        if ( this.isModeActive( 'edit' ) ) {
     229                                this.$el.addClass( 'hide-toolbar' );
     230                        } else {
     231                                this.$el.removeClass( 'hide-toolbar' );
     232                        }
    222233                }
    223234        });
    224235
    … …  
    542553                }
    543554        });
    544555
    545         /**
    546          * Controller for bulk selection.
    547          */
    548         media.view.BulkSelection = media.View.extend({
    549                 className: 'bulk-select',
    550 
     556        media.view.SelectModeToggleButton = media.view.Button.extend({
    551557                initialize: function() {
    552                         this.model = new Backbone.Model({
    553                                 currentAction: ''
    554 
    555                         });
    556 
    557                         this.views.add( new media.view.Label({
    558                                 value: l10n.bulkActionsLabel,
    559                                 attributes: {
    560                                         'for': 'bulk-select-dropdown'
    561                                 }
    562                         }) );
    563 
    564                         this.views.add(
    565                                 new media.view.BulkSelectionActionDropdown({
    566                                         controller: this
    567                                 })
    568                         );
    569 
    570                         this.views.add(
    571                                 new media.view.BulkSelectionActionButton({
    572                                         disabled:   true,
    573                                         text:       l10n.apply,
    574                                         controller: this
    575                                 })
    576                         );
    577                 }
    578         });
    579 
    580         /**
    581          * Bulk Selection dropdown view.
    582          *
    583          * @constructor
    584          * @augments wp.media.View
    585          * @augments wp.Backbone.View
    586          * @augments Backbone.View
    587          */
    588         media.view.BulkSelectionActionDropdown = media.View.extend({
    589                 tagName: 'select',
    590                 id:      'bulk-select-dropdown',
    591 
    592                 initialize: function() {
    593558                        media.view.Button.prototype.initialize.apply( this, arguments );
    594                         this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
    595                         this.$el.append( $('<option></option>').val( '' ).html( l10n.bulkActions ) )
    596                                 .append( $('<option></option>').val( 'delete' ).html( l10n.deletePermanently ) );
    597                         this.$el.prop( 'disabled', true );
    598                         this.$el.on( 'change', _.bind( this.changeHandler, this ) );
     559                        this.listenTo( this.controller, 'select:activate select:deactivate', this.toggleBulkEditHandler );
    599560                },
    600561
    601                 /**
    602                  * Change handler for the dropdown.
    603                  *
    604                  * Sets the bulk selection controller's currentAction.
    605                  */
    606                 changeHandler: function() {
    607                         this.controller.model.set( { 'currentAction': this.$el.val() } );
     562                click: function() {
     563                        media.view.Button.prototype.click.apply( this, arguments );
     564                        if ( this.controller.isModeActive( 'select' ) ) {
     565                                this.controller.deactivateMode( 'select' ).activateMode( 'edit' );
     566                        } else {
     567                                this.controller.deactivateMode( 'edit' ).activateMode( 'select' );
     568                        }
    608569                },
    609570
    610                 /**
    611                  * Enable or disable the dropdown if attachments have been selected.
    612                  */
    613                 enabled: function() {
    614                         var disabled = ! this.controller.controller.state().get('selection').length;
    615                         this.$el.prop( 'disabled', disabled );
    616                 }
    617         });
     571                render: function() {
     572                        media.view.Button.prototype.render.apply( this, arguments );
     573                        this.$el.addClass( 'select-mode-toggle-button' );
     574                        return this;
     575                },
    618576
    619         /**
    620          * Bulk Selection dropdown view.
    621          *
    622          * @constructor
    623          *
    624          * @augments wp.media.view.Button
    625          * @augments wp.media.View
    626          * @augments wp.Backbone.View
    627          * @augments Backbone.View
    628          */
    629         media.view.BulkSelectionActionButton = media.view.Button.extend({
    630                 tagName: 'button',
     577                toggleBulkEditHandler: function() {
     578                        var toolbar = this.controller.content.get().toolbar, children;
    631579
    632                 initialize: function() {
    633                         media.view.Button.prototype.initialize.apply( this, arguments );
     580                        children = toolbar.$( '.media-toolbar-secondary > *, .media-toolbar-primary > *');
    634581
    635                         this.listenTo( this.controller.model, 'change', this.enabled, this );
    636                         this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
    637                 },
    638                 /**
    639                  * Button click handler.
    640                  */
    641                 click: function() {
    642                         var selection = this.controller.controller.state().get('selection');
    643                         media.view.Button.prototype.click.apply( this, arguments );
    644 
    645                         if ( 'delete' === this.controller.model.get( 'currentAction' ) ) {
    646                                 // Currently assumes delete is the only action
    647                                 if ( confirm( l10n.warnBulkDelete ) ) {
    648                                         while ( selection.length > 0 ) {
    649                                                 selection.at(0).destroy();
    650                                         }
    651                                 }
     582                        if ( this.controller.isModeActive( 'select' ) ) {
     583                                this.model.set( 'text', l10n.cancel );
     584                                children.not( '.delete-selected-button' ).hide();
     585                                toolbar.$( '.select-mode-toggle-button' ).show();
     586                                toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
     587                        } else {
     588                                this.model.set( 'text', l10n.bulkSelect );
     589                                toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
     590                                children.not( '.spinner, .delete-selected-button' ).show();
     591                                this.controller.state().get( 'selection' ).reset();
    652592                        }
     593                }
     594        });
    653595
    654                         this.enabled();
    655                 },
    656                 /**
    657                  * Enable or disable the button depending if a bulk action is selected
    658                  * in the bulk select dropdown, and if attachments have been selected.
    659                  */
    660                 enabled: function() {
    661                         var currentAction = this.controller.model.get( 'currentAction' ),
    662                                 selection = this.controller.controller.state().get('selection'),
    663                                 disabled = ! currentAction || ! selection.length;
    664                         this.$el.prop( 'disabled', disabled );
     596        media.view.DeleteSelectedButton = media.view.Button.extend({
     597                render: function() {
     598                        media.view.Button.prototype.render.apply( this, arguments );
     599                        this.$el.addClass( 'delete-selected-button hidden' );
     600                        return this;
    665601                }
    666602        });
    667603

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

     
    17921792                deactivateMode: function( mode ) {
    17931793                        // Bail if the mode isn't active.
    17941794                        if ( ! this.isModeActive( mode ) ) {
    1795                                 return;
     1795                                return this;
    17961796                        }
    17971797                        this.activeModes.remove( this.activeModes.where( { id: mode } ) );
    17981798                        this.$el.removeClass( 'mode-' + mode );
    … …  
    48204820                        }
    48214821
    48224822                        // In the grid view, bubble up an edit:attachment event to the controller.
    4823                         if ( this.controller.isModeActive( 'grid' ) ) {
     4823                        if ( this.controller.isModeActive( 'grid' ) && this.controller.isModeActive( 'edit' ) ) {
    48244824                                // Pass the current target to restore focus when closing
    48254825                                this.controller.trigger( 'edit:attachment', this.model, event.currentTarget );
    48264826
    … …  
    57845784                                        priority: -90
    57855785                                }).render() );
    57865786
    5787                                 // BulkSelection is a <div> with subviews, including screen reader text
    5788                                 this.toolbar.set( 'bulkSelection', new media.view.BulkSelection({
    5789                                         controller: this.controller,
    5790                                         priority: -70
    5791                                 }).render() );
    5792 
    57935787                                // DateFilter is a <select>, screen reader text needs to be rendered before
    57945788                                this.toolbar.set( 'dateFilterLabel', new media.view.Label({
    57955789                                        value: l10n.filterByDate,
    … …  
    58035797                                        model:      this.collection.props,
    58045798                                        priority: -75
    58055799                                }).render() );
     5800
     5801                                // BulkSelection is a <div> with subviews, including screen reader text
     5802                                this.toolbar.set( 'selectModeToggleButton', new media.view.SelectModeToggleButton({
     5803                                        text: l10n.bulkSelect,
     5804                                        controller: this.controller,
     5805                                        priority: -70
     5806                                }).render() );
     5807
     5808                                this.toolbar.set( 'deleteSelectedButton', new media.view.DeleteSelectedButton({
     5809                                        style: 'primary',
     5810                                        text:  l10n.deleteSelected,
     5811                                        controller: this.controller,
     5812                                        priority: -60,
     5813                                        click: function() {
     5814                                                while ( this.controller.state().get( 'selection' ).length > 0 ) {
     5815                                                        this.controller.state().get( 'selection' ).at( 0 ).destroy();
     5816                                                }
     5817                                        }
     5818                                }).render() );
    58065819                        }
    58075820
    58085821                        this.toolbar.set( 'spinner', new media.view.Spinner({

  • src/wp-includes/media.php

     
    29362936                'warnBulkDelete'         => __( "You are about to permanently delete these items.\n  'Cancel' to stop, 'OK' to delete." ),
    29372937                'bulkActions'            => __( 'Bulk Actions' ),
    29382938                'bulkActionsLabel'       => __( 'Select bulk action' ),
     2939                'bulkSelect'             => __( 'Bulk Select' ),
     2940                'deleteSelected'         => __( 'Delete Selected' ),
    29392941                'deletePermanently'      => __( 'Delete Permanently' ),
    29402942                'apply'                  => __( 'Apply' ),
    29412943                'filterByDate'           => __( 'Filter by date' ),