WordPress.org
Get WordPress

Make WordPress Core

Ticket #28842: 28842.9.diff

File 28842.9.diff, 11.7 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;
    … …  
    24882479        padding: 2px;
    24892480}
    24902481
     2482.media-frame.mode-select .attachments {
     2483        padding: 2px;
     2484}
     2485
    24912486/**
    24922487 * Copied styles from the Add theme toolbar.
    24932488 *
    … …  
    25112506        border: none;
    25122507}
    25132508
     2509.media-frame.mode-select .attachments-browser .media-toolbar.fixed {
     2510        position: fixed;
     2511        top: 28px;
     2512        left: 182px;
     2513        right: 20px;
     2514        width: auto;
     2515}
     2516
    25142517.media-frame.mode-grid input[type="search"] {
    25152518        margin: 1px;
    25162519        padding: 3px 5px;
    … …  
    25392542        margin-top: 15px;
    25402543}
    25412544
     2545.attachments-browser .media-toolbar-secondary > .select-mode-toggle-button {
     2546        margin-right: 10px;
     2547}
     2548
    25422549.media-frame.mode-grid .attachments-browser {
    25432550        padding: 0;
    25442551}

  • 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
    68                         $(document).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) );
     68                        this.$window = $( window );
     69                        this.$adminBar = $( '#wpadminbar' );
     70                        this.$window.on( 'scroll', _.debounce( _.bind( this.fixPosition, this ), 15 ) );
     71                        $( document ).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) );
    6972
    7073                        // Ensure core and media grid view UI is enabled.
    7174                        this.$el.addClass('wp-core-ui');
    … …  
    130133                                        multiple:           options.multiple,
    131134                                        title:              options.title,
    132135                                        content:            'browse',
     136                                        toolbar:            'select',
    133137                                        contentUserSetting: false,
    134138                                        filterable:         'all'
    135139                                })
    … …  
    146150                        this.on( 'edit:attachment', this.openEditAttachmentModal, this );
    147151                },
    148152
     153                fixPosition: function() {
     154                        var $browser;
     155                        if ( ! this.isModeActive( 'select' ) ) {
     156                                return;
     157                        }
     158
     159                        $browser = this.$('.attachments-browser');
     160
     161                        if ( $browser.offset().top < this.$window.scrollTop() + this.$adminBar.height() ) {
     162                                $browser.find('.media-toolbar').addClass( 'fixed' );
     163                        } else {
     164                                $browser.find('.media-toolbar').removeClass( 'fixed' );
     165                        }
     166                },
     167
    149168                /**
    150169                 * Click handler for the `Add New` button.
    151170                 */
    … …  
    542561                }
    543562        });
    544563
    545         /**
    546          * Controller for bulk selection.
    547          */
    548         media.view.BulkSelection = media.View.extend({
    549                 className: 'bulk-select',
    550 
     564        media.view.SelectModeToggleButton = media.view.Button.extend({
    551565                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() {
    593566                        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 ) );
     567                        this.listenTo( this.controller, 'select:activate select:deactivate', this.toggleBulkEditHandler );
    599568                },
    600569
    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() } );
     570                click: function() {
     571                        media.view.Button.prototype.click.apply( this, arguments );
     572                        if ( this.controller.isModeActive( 'select' ) ) {
     573                                this.controller.deactivateMode( 'select' ).activateMode( 'edit' );
     574                        } else {
     575                                this.controller.deactivateMode( 'edit' ).activateMode( 'select' );
     576                        }
    608577                },
    609578
    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         });
     579                render: function() {
     580                        media.view.Button.prototype.render.apply( this, arguments );
     581                        this.$el.addClass( 'select-mode-toggle-button' );
     582                        return this;
     583                },
    618584
    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',
     585                toggleBulkEditHandler: function() {
     586                        var toolbar = this.controller.content.get().toolbar, children;
    631587
    632                 initialize: function() {
    633                         media.view.Button.prototype.initialize.apply( this, arguments );
     588                        children = toolbar.$( '.media-toolbar-secondary > *, .media-toolbar-primary > *');
    634589
    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                                 }
     590                        if ( this.controller.isModeActive( 'select' ) ) {
     591                                this.model.set( 'text', l10n.cancelSelection );
     592                                children.not( '.delete-selected-button' ).hide();
     593                                toolbar.$( '.select-mode-toggle-button' ).show();
     594                                toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
     595                        } else {
     596                                this.model.set( 'text', l10n.bulkSelect );
     597                                toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
     598                                children.not( '.spinner, .delete-selected-button' ).show();
     599                                this.controller.state().get( 'selection' ).reset();
    652600                        }
     601                }
     602        });
    653603
    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 );
     604        media.view.DeleteSelectedButton = media.view.Button.extend({
     605                render: function() {
     606                        media.view.Button.prototype.render.apply( this, arguments );
     607                        this.$el.addClass( 'delete-selected-button hidden' );
     608                        return this;
    665609                }
    666610        });
    667611

  • 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 );
    … …  
    48214821
    48224822                        // In the grid view, bubble up an edit:attachment event to the controller.
    48234823                        if ( this.controller.isModeActive( 'grid' ) ) {
    4824                                 // Pass the current target to restore focus when closing
    4825                                 this.controller.trigger( 'edit:attachment', this.model, event.currentTarget );
     4824                                if ( this.controller.isModeActive( 'edit' ) ) {
     4825                                        // Pass the current target to restore focus when closing
     4826                                        this.controller.trigger( 'edit:attachment', this.model, event.currentTarget );
    48264827
    4827                                 // Don't scroll the view and don't attempt to submit anything.
    4828                                 event.stopPropagation();
    4829                                 return;
     4828                                        // Don't scroll the view and don't attempt to submit anything.
     4829                                        event.stopPropagation();
     4830                                        return;
     4831                                }
     4832
     4833                                if ( this.controller.isModeActive( 'select' ) ) {
     4834                                        method = 'toggle';
     4835                                }
    48304836                        }
    48314837
    48324838                        if ( event.shiftKey ) {
    … …  
    57845790                                        priority: -90
    57855791                                }).render() );
    57865792
    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 
    57935793                                // DateFilter is a <select>, screen reader text needs to be rendered before
    57945794                                this.toolbar.set( 'dateFilterLabel', new media.view.Label({
    57955795                                        value: l10n.filterByDate,
    … …  
    58035803                                        model:      this.collection.props,
    58045804                                        priority: -75
    58055805                                }).render() );
     5806
     5807                                // BulkSelection is a <div> with subviews, including screen reader text
     5808                                this.toolbar.set( 'selectModeToggleButton', new media.view.SelectModeToggleButton({
     5809                                        text: l10n.bulkSelect,
     5810                                        controller: this.controller,
     5811                                        priority: -70
     5812                                }).render() );
     5813
     5814                                this.toolbar.set( 'deleteSelectedButton', new media.view.DeleteSelectedButton({
     5815                                        style: 'primary',
     5816                                        text:  l10n.deleteSelected,
     5817                                        controller: this.controller,
     5818                                        priority: -60,
     5819                                        click: function() {
     5820                                                while ( this.controller.state().get( 'selection' ).length > 0 ) {
     5821                                                        this.controller.state().get( 'selection' ).at( 0 ).destroy();
     5822                                                }
     5823                                        }
     5824                                }).render() );
    58065825                        }
    58075826
    58085827                        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                'cancelSelection'        => __( 'Cancel Selection' ),
     2941                'deleteSelected'         => __( 'Delete Selected' ),
    29392942                'deletePermanently'      => __( 'Delete Permanently' ),
    29402943                'apply'                  => __( 'Apply' ),
    29412944                'filterByDate'           => __( 'Filter by date' ),