WordPress.org

Make WordPress Core

Ticket #28842: 28842.10.diff

File 28842.10.diff, 14.2 KB (added by wonderboymusic, 5 years ago)
  • src/wp-includes/css/media-views.css

     
    729729        -webkit-box-sizing: border-box;
    730730        -moz-box-sizing: border-box;
    731731        box-sizing: border-box;
     732        opacity: 1;
    732733}
    733734
     735.media-frame.mode-select .attachment {
     736        opacity: 0.65;
     737        -webkit-transition: opacity 250ms;
     738        transition: opacity 250ms;
     739}
     740
     741.media-frame.mode-select .attachment.selected {
     742        opacity: 1;
     743}
     744
    734745.attachment:focus {
    735746        -webkit-box-shadow:
    736747                inset 0 0 0 5px #fff,
     
    741752        outline: none;
    742753}
    743754
     755.media-frame.mode-grid .attachment:focus {
     756        -webkit-box-shadow:
     757                inset 0 0 0 6px #f1f1f1,
     758                inset 0 0 1px 7px #5b9dd9;
     759        box-shadow:
     760                inset 0 0 0 6px #f1f1f1,
     761                inset 0 0 1px 7px #5b9dd9;
     762}
     763
    744764.selected.attachment {
    745765        -webkit-box-shadow:
    746766                inset 0 0 0 5px #fff,
     
    750770                inset 0 0 0 7px #ccc;
    751771}
    752772
     773.media-frame.mode-grid .selected.attachment {
     774        -webkit-box-shadow:
     775                inset 0 0 0 6px #f1f1f1,
     776                inset 0 0 0 7px #ccc;
     777        box-shadow:
     778                inset 0 0 0 6px #f1f1f1,
     779                inset 0 0 0 7px #ccc;
     780}
     781
    753782.attachment-preview {
    754783        position: relative;
    755784        -webkit-box-shadow:
     
    922951}
    923952
    924953.selected.attachment:focus,
    925 .attachment.details,
    926 .media-frame.mode-grid .selected.attachment {
     954.attachment.details {
    927955        -webkit-box-shadow:
    928956                inset 0 0 0 3px #fff,
    929957                inset 0 0 0 7px #1e8cbe;
     
    932960                inset 0 0 0 7px #1e8cbe;
    933961}
    934962
     963.media-frame.mode-grid .selected.attachment:focus {
     964        -webkit-box-shadow:
     965                inset 0 0 0 3px #f1f1f1,
     966                inset 0 0 0 7px #1e8cbe;
     967        box-shadow:
     968                inset 0 0 0 3px #f1f1f1,
     969                inset 0 0 0 7px #1e8cbe;
     970}
     971
    935972.attachment.details .check,
    936973.attachment.selected .check:focus,
    937974.media-frame.mode-grid .attachment.selected .check {
     
    944981                0 0 0 2px #1e8cbe;
    945982}
    946983
    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 
    955984.attachment.details .check div,
    956985.media-frame.mode-grid .attachment.selected .check div {
    957986        background-position: -21px 0;
     
    9971026.attachments-browser .media-toolbar-primary > .media-button-group,
    9981027.attachments-browser .media-toolbar-secondary > .media-button,
    9991028.attachments-browser .media-toolbar-secondary > .media-button-group {
    1000         margin-top: 10px;
     1029        margin: 11px 0;
    10011030}
    10021031
    10031032.attachments-browser .attachments,
     
    24532482
    24542483/* Regions we don't use at all */
    24552484.media-frame.mode-grid .media-frame-title,
    2456 .media-frame.mode-grid .media-frame-toolbar,
    24572485.media-frame.mode-grid .media-frame-router,
    24582486.media-frame.mode-grid .media-frame-menu {
    24592487        display: none;
     
    24882516        padding: 2px;
    24892517}
    24902518
     2519.media-frame.mode-select .attachments {
     2520        padding: 2px;
     2521}
     2522
    24912523/**
    24922524 * Copied styles from the Add theme toolbar.
    24932525 *
     
    25112543        border: none;
    25122544}
    25132545
     2546.media-frame.mode-select .attachments-browser .media-toolbar.fixed {
     2547        position: fixed;
     2548        top: 28px;
     2549        left: 182px;
     2550        right: 20px;
     2551        width: auto;
     2552}
     2553
    25142554.media-frame.mode-grid input[type="search"] {
    25152555        margin: 1px;
    25162556        padding: 3px 5px;
     
    25392579        margin-top: 15px;
    25402580}
    25412581
     2582.attachments-browser .media-toolbar-secondary > .select-mode-toggle-button {
     2583        margin-right: 10px;
     2584}
     2585
    25422586.media-frame.mode-grid .attachments-browser {
    25432587        padding: 0;
    25442588}
  • 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');
     
    9699                        // Call 'initialize' directly on the parent class.
    97100                        media.view.MediaFrame.prototype.initialize.apply( this, arguments );
    98101
     102                        this.on( 'all', function () { console.log( arguments ); } );
     103
    99104                        // Append the frame view directly the supplied container.
    100105                        this.$el.appendTo( this.options.container );
    101106
     
    130135                                        multiple:           options.multiple,
    131136                                        title:              options.title,
    132137                                        content:            'browse',
     138                                        toolbar:            'select',
    133139                                        contentUserSetting: false,
    134140                                        filterable:         'all'
    135141                                })
     
    146152                        this.on( 'edit:attachment', this.openEditAttachmentModal, this );
    147153                },
    148154
     155                fixPosition: function() {
     156                        var $browser;
     157                        if ( ! this.isModeActive( 'select' ) ) {
     158                                return;
     159                        }
     160
     161                        $browser = this.$('.attachments-browser');
     162
     163                        if ( $browser.offset().top < this.$window.scrollTop() + this.$adminBar.height() ) {
     164                                $browser.find('.media-toolbar').addClass( 'fixed' );
     165                        } else {
     166                                $browser.find('.media-toolbar').removeClass( 'fixed' );
     167                        }
     168                },
     169
    149170                /**
    150171                 * Click handler for the `Add New` button.
    151172                 */
     
    542563                }
    543564        });
    544565
    545         /**
    546          * Controller for bulk selection.
    547          */
    548         media.view.BulkSelection = media.View.extend({
    549                 className: 'bulk-select',
    550 
     566        media.view.SelectModeToggleButton = media.view.Button.extend({
    551567                initialize: function() {
    552                         this.model = new Backbone.Model({
    553                                 currentAction: ''
     568                        media.view.Button.prototype.initialize.apply( this, arguments );
     569                        this.listenTo( this.controller, 'select:activate select:deactivate', this.toggleBulkEditHandler );
     570                },
    554571
    555                         });
     572                click: function() {
     573                        media.view.Button.prototype.click.apply( this, arguments );
     574                        if ( this.controller.isModeActive( 'select' ) ) {
     575                                this.controller.deactivateMode( 'select' ).activateMode( 'edit' );
     576                        } else {
     577                                this.controller.deactivateMode( 'edit' ).activateMode( 'select' );
     578                        }
     579                },
    556580
    557                         this.views.add( new media.view.Label({
    558                                 value: l10n.bulkActionsLabel,
    559                                 attributes: {
    560                                         'for': 'bulk-select-dropdown'
    561                                 }
    562                         }) );
     581                render: function() {
     582                        media.view.Button.prototype.render.apply( this, arguments );
     583                        this.$el.addClass( 'select-mode-toggle-button' );
     584                        return this;
     585                },
    563586
    564                         this.views.add(
    565                                 new media.view.BulkSelectionActionDropdown({
    566                                         controller: this
    567                                 })
    568                         );
     587                toggleBulkEditHandler: function() {
     588                        var toolbar = this.controller.content.get().toolbar, children;
    569589
    570                         this.views.add(
    571                                 new media.view.BulkSelectionActionButton({
    572                                         disabled:   true,
    573                                         text:       l10n.apply,
    574                                         controller: this
    575                                 })
    576                         );
     590                        children = toolbar.$( '.media-toolbar-secondary > *, .media-toolbar-primary > *');
     591
     592                        if ( this.controller.isModeActive( 'select' ) ) {
     593                                this.model.set( 'text', l10n.cancelSelection );
     594                                children.not( '.delete-selected-button' ).hide();
     595                                toolbar.$( '.select-mode-toggle-button' ).show();
     596                                toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
     597                        } else {
     598                                this.model.set( 'text', l10n.bulkSelect );
     599                                toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
     600                                children.not( '.spinner, .delete-selected-button' ).show();
     601                                this.controller.state().get( 'selection' ).reset();
     602                        }
    577603                }
    578604        });
    579605
    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 
     606        media.view.DeleteSelectedButton = media.view.Button.extend({
    592607                initialize: function() {
    593608                        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 ) );
     609                        this.listenTo( this.controller, 'selection:toggle', this.toggleDisabled );
    599610                },
    600611
    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() } );
     612                toggleDisabled: function() {
     613                        this.$el.attr( 'disabled', ! this.controller.state().get( 'selection' ).length );
    608614                },
    609615
    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                render: function() {
     617                        media.view.Button.prototype.render.apply( this, arguments );
     618                        this.$el.addClass( 'delete-selected-button hidden' );
     619                        return this;
    616620                }
    617621        });
    618622
    619623        /**
    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',
    631 
    632                 initialize: function() {
    633                         media.view.Button.prototype.initialize.apply( this, arguments );
    634 
    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                                 }
    652                         }
    653 
    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 );
    665                 }
    666         });
    667 
    668         /**
    669624         * A filter dropdown for month/dates.
    670625         */
    671626        media.view.DateFilter = media.view.AttachmentFilters.extend({
  • 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 ) {
     
    48394845                                method: method
    48404846                        });
    48414847
     4848                        this.controller.trigger( 'selection:toggle' );
     4849
    48424850                        // Don't scroll the view and don't attempt to submit anything.
    48434851                        event.stopPropagation();
    48444852                },
     
    57845792                                        priority: -90
    57855793                                }).render() );
    57865794
    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 
    57935795                                // DateFilter is a <select>, screen reader text needs to be rendered before
    57945796                                this.toolbar.set( 'dateFilterLabel', new media.view.Label({
    57955797                                        value: l10n.filterByDate,
     
    58035805                                        model:      this.collection.props,
    58045806                                        priority: -75
    58055807                                }).render() );
     5808
     5809                                // BulkSelection is a <div> with subviews, including screen reader text
     5810                                this.toolbar.set( 'selectModeToggleButton', new media.view.SelectModeToggleButton({
     5811                                        text: l10n.bulkSelect,
     5812                                        controller: this.controller,
     5813                                        priority: -70
     5814                                }).render() );
     5815
     5816                                this.toolbar.set( 'deleteSelectedButton', new media.view.DeleteSelectedButton({
     5817                                        style: 'primary',
     5818                                        disabled: true,
     5819                                        text:  l10n.deleteSelected,
     5820                                        controller: this.controller,
     5821                                        priority: -60,
     5822                                        click: function() {
     5823                                                while ( this.controller.state().get( 'selection' ).length > 0 ) {
     5824                                                        this.controller.state().get( 'selection' ).at( 0 ).destroy();
     5825                                                }
     5826                                        }
     5827                                }).render() );
    58065828                        }
    58075829
    58085830                        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' ),