WordPress.org

Make WordPress Core

Ticket #28842: 28842.6.diff

File 28842.6.diff, 11.8 KB (added by ericlewis, 5 years ago)
  • src/wp-includes/css/media-views.css

    diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
    index 541f488..da1cd9c 100644
    a b  
    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;
    24602451}
    24612452
     2453.media-frame.mode-grid .media-frame-toolbar {
     2454        position: fixed;
     2455        bottom: 0;
     2456        left: 0;
     2457        right: 0;
     2458}
     2459
    24622460.media-frame.mode-grid .media-frame-content {
    24632461        background-color: transparent;
    24642462        border: none;
     
    24852483}
    24862484
    24872485.media-frame.mode-grid .attachments {
    2488         padding: 2px;
     2486        padding: 92px 2px 2px;
    24892487}
    24902488
    24912489/**
     
    24932491 *
    24942492 * This should be OOCSS'd so both use a shared selector.
    24952493 */
     2494.media-frame.mode-grid .media-toolbar,
    24962495.media-frame.mode-grid .attachments-browser .media-toolbar {
    24972496        background: #fff;
    24982497        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
     
    25012500        -moz-box-sizing: border-box;
    25022501        box-sizing: border-box;
    25032502        color: #555;
    2504         display: inline-block;
    25052503        font-size: 13px;
    25062504        margin: 20px 0;
    25072505        padding: 0 20px;
    2508         position: relative;
    2509         width: 100%;
    25102506        height: auto;
    25112507        border: none;
    25122508}
    25132509
     2510.media-frame.mode-grid .media-frame-toolbar .media-toolbar {
     2511        position: fixed;
     2512        height: 60px;
     2513        top: auto;
     2514        right: 20px;
     2515        bottom: 0;
     2516        left: 182px;
     2517}
     2518
     2519.media-frame.mode-grid.hide-toolbar .media-frame-toolbar .media-toolbar {
     2520        display: none;
     2521}
     2522
     2523.media-frame.mode-grid .attachments-browser .media-toolbar {
     2524        position: absolute;
     2525        width: 100%;
     2526}
     2527
     2528.media-frame.mode-grid .attachments-browser .media-toolbar.fixed {
     2529        position: fixed;
     2530        top: 28px;
     2531        left: 182px;
     2532        right: 20px;
     2533        width: auto;
     2534}
     2535
    25142536.media-frame.mode-grid input[type="search"] {
    25152537        margin: 1px;
    25162538        padding: 3px 5px;
  • src/wp-includes/js/media-grid.js

    diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js
    index bf864fe..68a9acd 100644
    a b  
    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 ) );
     
    103103                        this.bindRegionModeHandlers();
    104104                        this.render();
    105105
     106                        this.toggleToolbar();
     107                        this.on( 'select:activate edit:activate', _.bind( this.toggleToolbar, this ) );
     108
    106109                        // Update the URL when entering search string (at most once per second)
    107110                        $( '#media-search-input' ).on( 'input', _.debounce( function(e) {
    108111                                var val = $( e.currentTarget ).val(), url = '';
     
    130133                                        multiple:           options.multiple,
    131134                                        title:              options.title,
    132135                                        content:            'browse',
     136                                        toolbar:            'select',
    133137                                        contentUserSetting: false,
    134138                                        filterable:         'all'
    135139                                })
     
    144148
    145149                        // Handle a frame-level event for editing an attachment.
    146150                        this.on( 'edit:attachment', this.openEditAttachmentModal, this );
     151                        this.on( 'toolbar:create:select', this.createToolbar, this );
    147152                },
    148153
    149154                /**
     
    203208                        this.errors.on( 'add remove reset', this.sidebarVisibility, this );
    204209                },
    205210
     211                createToolbar: function( toolbar ) {
     212                        toolbar.view = new media.view.Toolbar({
     213                                controller: this,
     214                                items: {
     215                                        delete: {
     216                                                style: 'primary',
     217                                                text:     'Delete Selected',
     218                                                priority: 10,
     219                                                click:    function() {
     220                                                        // media.view.Button.prototype.click.apply( this, arguments );
     221                                                        while ( this.controller.state().get('selection').length > 0 ) {
     222                                                                this.controller.state().get('selection').at(0).destroy();
     223                                                        }
     224                                                }
     225                                        }
     226                                }
     227                        });
     228                },
     229
    206230                sidebarVisibility: function() {
    207231                        this.browserView.$( '.media-sidebar' ).toggle( this.errors.length );
    208232                },
     
    219243                                        pushState: true
    220244                                } );
    221245                        }
     246                },
     247
     248                toggleToolbar: function() {
     249                        if ( this.isModeActive( 'edit' ) ) {
     250                                this.$el.addClass( 'hide-toolbar' );
     251                        } else {
     252                                this.$el.removeClass( 'hide-toolbar' );
     253                        }
    222254                }
    223255        });
    224256
     
    507539                }
    508540        });
    509541
    510         /**
    511          * Controller for bulk selection.
    512          */
    513         media.view.BulkSelection = media.View.extend({
    514                 className: 'bulk-select',
    515 
    516                 initialize: function() {
    517                         this.model = new Backbone.Model({
    518                                 currentAction: ''
    519 
    520                         });
    521 
    522                         this.views.add( new media.view.Label({
    523                                 value: l10n.bulkActionsLabel,
    524                                 attributes: {
    525                                         'for': 'bulk-select-dropdown'
    526                                 }
    527                         }) );
    528 
    529                         this.views.add(
    530                                 new media.view.BulkSelectionActionDropdown({
    531                                         controller: this
    532                                 })
    533                         );
    534 
    535                         this.views.add(
    536                                 new media.view.BulkSelectionActionButton({
    537                                         disabled:   true,
    538                                         text:       l10n.apply,
    539                                         controller: this
    540                                 })
    541                         );
    542                 }
    543         });
    544 
    545         /**
    546          * Bulk Selection dropdown view.
    547          *
    548          * @constructor
    549          * @augments wp.media.View
    550          * @augments wp.Backbone.View
    551          * @augments Backbone.View
    552          */
    553         media.view.BulkSelectionActionDropdown = media.View.extend({
    554                 tagName: 'select',
    555                 id:      'bulk-select-dropdown',
    556 
     542        media.view.SelectModeToggleButton = media.view.Button.extend({
    557543                initialize: function() {
    558544                        media.view.Button.prototype.initialize.apply( this, arguments );
    559                         this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
    560                         this.$el.append( $('<option></option>').val( '' ).html( l10n.bulkActions ) )
    561                                 .append( $('<option></option>').val( 'delete' ).html( l10n.deletePermanently ) );
    562                         this.$el.prop( 'disabled', true );
    563                         this.$el.on( 'change', _.bind( this.changeHandler, this ) );
     545                        this.listenTo( this.controller, 'select:activate select:deactivate', _.bind( this.toggleBulkEditHandler, this ) );
    564546                },
    565547
    566                 /**
    567                  * Change handler for the dropdown.
    568                  *
    569                  * Sets the bulk selection controller's currentAction.
    570                  */
    571                 changeHandler: function() {
    572                         this.controller.model.set( { 'currentAction': this.$el.val() } );
    573                 },
    574 
    575                 /**
    576                  * Enable or disable the dropdown if attachments have been selected.
    577                  */
    578                 enabled: function() {
    579                         var disabled = ! this.controller.controller.state().get('selection').length;
    580                         this.$el.prop( 'disabled', disabled );
    581                 }
    582         });
    583 
    584         /**
    585          * Bulk Selection dropdown view.
    586          *
    587          * @constructor
    588          *
    589          * @augments wp.media.view.Button
    590          * @augments wp.media.View
    591          * @augments wp.Backbone.View
    592          * @augments Backbone.View
    593          */
    594         media.view.BulkSelectionActionButton = media.view.Button.extend({
    595                 tagName: 'button',
    596 
    597                 initialize: function() {
    598                         media.view.Button.prototype.initialize.apply( this, arguments );
    599 
    600                         this.listenTo( this.controller.model, 'change', this.enabled, this );
    601                         this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
    602                 },
    603                 /**
    604                  * Button click handler.
    605                  */
    606548                click: function() {
    607                         var selection = this.controller.controller.state().get('selection');
    608549                        media.view.Button.prototype.click.apply( this, arguments );
    609 
    610                         if ( 'delete' === this.controller.model.get( 'currentAction' ) ) {
    611                                 // Currently assumes delete is the only action
    612                                 if ( confirm( l10n.warnBulkDelete ) ) {
    613                                         while ( selection.length > 0 ) {
    614                                                 selection.at(0).destroy();
    615                                         }
    616                                 }
     550                        if ( this.controller.isModeActive( 'select' ) ) {
     551                                this.controller.deactivateMode( 'select' ).activateMode( 'edit' );
     552                        } else {
     553                                this.controller.deactivateMode( 'edit' ).activateMode( 'select' );
    617554                        }
     555                },
    618556
    619                         this.enabled();
     557                render: function() {
     558                        media.view.Button.prototype.render.apply( this, arguments );
     559                        this.el.className = this.el.className + ' select-mode-toggle-button';
     560                        return this;
    620561                },
    621                 /**
    622                  * Enable or disable the button depending if a bulk action is selected
    623                  * in the bulk select dropdown, and if attachments have been selected.
    624                  */
    625                 enabled: function() {
    626                         var currentAction = this.controller.model.get( 'currentAction' ),
    627                                 selection = this.controller.controller.state().get('selection'),
    628                                 disabled = ! currentAction || ! selection.length;
    629                         this.$el.prop( 'disabled', disabled );
     562
     563                toggleBulkEditHandler: function() {
     564                        if ( this.controller.isModeActive( 'select' ) ) {
     565                                this.model.set( 'text', 'Cancel' );
     566                                this.controller.content.get().toolbar.$el.find( '.media-toolbar-secondary > *, .media-toolbar-primary > *').hide();
     567                                this.controller.content.get().toolbar.$el.find( '.select-mode-toggle-button').show();
     568                        } else {
     569                                this.model.set( 'text', 'Select' );
     570                                this.controller.content.get().toolbar.$el.find( '.media-toolbar-secondary > *, .media-toolbar-primary > *').not('.spinner').show();
     571                                this.controller.state().get('selection').reset();
     572                        }
    630573                }
    631574        });
    632575
  • src/wp-includes/js/media-views.js

    diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
    index 4fa1303..d1dbfb1 100644
    a b  
    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 );
     
    39473947
    39483948                        this._views = {};
    39493949
     3950                        $(window).on( 'scroll', this.fixPosition );
    39503951                        // The toolbar is composed of two `PriorityList` views.
    39513952                        this.primary   = new media.view.PriorityList();
    39523953                        this.secondary = new media.view.PriorityList();
     
    39713972                                library.on( 'add remove reset', this.refresh, this );
    39723973                        }
    39733974                },
     3975
     3976                fixPosition: function() {
     3977                        $adminBar = $( '#wpadminbar' );
     3978                        var parentOffset = $('.attachments-browser').offset().top;
     3979                        // debugger;
     3980                        if ( parentOffset < $(window).scrollTop() + $adminBar.height() ) {
     3981                                $('.attachments-browser .media-toolbar').addClass( 'fixed' );
     3982                        } else {
     3983                                $('.attachments-browser .media-toolbar').removeClass( 'fixed' );
     3984                        }
     3985                },
    39743986                /**
    39753987                 * @returns {wp.media.view.Toolbar} Returns itsef to allow chaining
    39763988                 */
     
    48044816                        }
    48054817
    48064818                        // In the grid view, bubble up an edit:attachment event to the controller.
    4807                         if ( this.controller.isModeActive( 'grid' ) ) {
     4819                        if ( this.controller.isModeActive( 'grid' ) && this.controller.isModeActive( 'edit' ) ) {
    48084820                                // Pass the current target to restore focus when closing
    48094821                                this.controller.trigger( 'edit:attachment', this.model, event.currentTarget );
    48104822
     
    57585770                        // browser view. Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar );
    57595771                        // which the controller can tap into and add this view?
    57605772                        if ( this.controller.activeModes.where( { id: 'grid' } ).length ) {
    5761                                 LibraryViewSwitcher = media.View.extend({
     5773                                var LibraryViewSwitcher = media.View.extend({
    57625774                                        className: 'view-switch media-grid-view-switch',
    57635775                                        template: media.template( 'media-library-view-switcher')
    57645776                                });
     
    57695781                                }).render() );
    57705782
    57715783                                // BulkSelection is a <div> with subviews, including screen reader text
    5772                                 this.toolbar.set( 'bulkSelection', new media.view.BulkSelection({
     5784                                this.toolbar.set( 'selectModeToggleButton', new media.view.SelectModeToggleButton({
     5785                                        text: 'Select',
    57735786                                        controller: this.controller,
    57745787                                        priority: -70
    57755788                                }).render() );