WordPress.org

Make WordPress Core

Ticket #24716: 24716.37.diff

File 24716.37.diff, 15.1 KB (added by ericlewis, 3 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 8a5990e..a565f45 100644
    a b  
    228228.media-toolbar-secondary > .media-button, 
    229229.media-toolbar-secondary > .media-button-group { 
    230230        margin-right: 10px; 
    231         float: left; 
    232231        margin-top: 15px; 
    233232} 
    234233 
     
    996995        bottom: 0; 
    997996        overflow: auto; 
    998997        outline: none; 
     998        -webkit-transition: 1s ease-in-out; 
     999    -moz-transition: 1s ease-in-out; 
     1000    -o-transition: 1s ease-in-out; 
     1001    transition: 1s ease-in-out; 
     1002} 
     1003 
     1004.attachments-browser .uploader-inline:not(.hidden) + .attachments { 
     1005        -webkit-transform: translateY( 300px ); 
     1006        -ms-transform: translateY( 300px ); 
     1007        transform: translateY( 300px ); 
     1008} 
     1009 
     1010.attachments-browser .uploader-inline.hidden { 
     1011        display: block; 
     1012        -webkit-transform: translateY( -100% ); 
     1013        -ms-transform: translateY( -100% ); 
     1014        transform: translateY( -100% ); 
     1015} 
     1016 
     1017.attachments-browser .uploader-inline-content { 
     1018        top: 0; 
    9991019} 
    10001020 
    10011021.inline-toolbar { 
    video#inline-media-node { 
    10811101        left: 0; 
    10821102} 
    10831103 
    1084 .attachments-browser.hide-sidebar .attachments { 
     1104.attachments-browser.hide-sidebar .attachments, 
     1105.attachments-browser.hide-sidebar .uploader-inline { 
    10851106        right: 0; 
    10861107        margin-right: 0; 
    10871108} 
    video#inline-media-node { 
    26572678        left: 0; 
    26582679} 
    26592680 
     2681.edit-attachment-frame .media-frame-content { 
     2682        border-bottom: none; 
     2683        bottom: 0; 
     2684} 
     2685 
    26602686/* Hiding this for the moment instead of removing it from the template. */ 
    26612687.edit-attachment-frame h3 { 
    26622688        display: none; 
  • 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 0ebbc67..a2814ae 100644
    a b  
    2525                        menu:    false, 
    2626                        router:  'edit-metadata', 
    2727                        content: 'edit-metadata', 
    28                         toolbar: 'toolbar', 
    2928 
    3029                        url:     '' 
    3130                }, 
     
    3433                        media.controller._State.prototype.initialize.apply( this, arguments ); 
    3534                }, 
    3635 
    37                 activate: function() { 
    38                         this.listenTo( this.frame, 'toolbar:render:edit-image', this.toolbar ); 
    39                 }, 
    40  
    4136                _postActivate: function() { 
    4237                        this._content(); 
    4338                        this._router(); 
     
    4742                        this.stopListening( this.frame ); 
    4843                }, 
    4944 
    50                 toolbar: function() { 
    51                         var frame = this.frame, 
    52                                 lastState = frame.lastState(), 
    53                                 previous = lastState && lastState.id; 
    54  
    55                         frame.toolbar.set( new media.view.Toolbar({ 
    56                                 controller: frame, 
    57                                 items: { 
    58                                         back: { 
    59                                                 style: 'primary', 
    60                                                 text:     l10n.back, 
    61                                                 priority: 20, 
    62                                                 click:    function() { 
    63                                                         if ( previous ) { 
    64                                                                 frame.setState( previous ); 
    65                                                         } else { 
    66                                                                 frame.close(); 
    67                                                         } 
    68                                                 } 
    69                                         } 
    70                                 } 
    71                         }) ); 
    72                 }, 
    73  
    7445                /** 
    7546                 * @access private 
    7647                 */ 
     
    12596                                modal:     false, 
    12697                                selection: [], 
    12798                                library:   {}, 
    128                                 multiple:  false, 
     99                                multiple:  'add', 
    129100                                state:     'library', 
    130101                                uploader:  true, 
    131102                                mode:      [ 'grid', 'edit' ] 
    132103                        }); 
    133104 
     105                        $(document).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) ); 
    134106                        // Ensure core and media grid view UI is enabled. 
    135107                        this.$el.addClass('wp-core-ui media-grid-view'); 
    136108 
     
    192164                                return; 
    193165                        } 
    194166 
     167                        var libraryState = new media.controller.Library({ 
     168                                library:    media.query( options.library ), 
     169                                multiple:   options.multiple, 
     170                                title:      options.title, 
     171                                priority:   20, 
     172                                toolbar:    false, 
     173                                router:     false, 
     174                                content:    'browse', 
     175                                filterable: 'mime-types' 
     176                        }); 
     177 
     178                        libraryState._renderTitle = function( view ) { 
     179                                var text = this.get('title') || ''; 
     180                                view.$el.addClass( 'wrap' ); 
     181                                text += '<a class="add-new-h2">Add New</a>'; 
     182                                view.$el.html( text ); 
     183                        }; 
    195184                        // Add the default states. 
    196185                        this.states.add([ 
    197                                 new media.controller.Library({ 
    198                                         library:    media.query( options.library ), 
    199                                         multiple:   options.multiple, 
    200                                         title:      options.title, 
    201                                         priority:   20, 
    202                                         toolbar:    false, 
    203                                         router:     false, 
    204                                         content:    'browse', 
    205                                         filterable: 'mime-types' 
    206                                 }) 
     186                                libraryState 
    207187                        ]); 
    208188                }, 
    209189 
     
    217197                        this.on( 'edit:attachment:previous', this.editPreviousAttachment, this ); 
    218198                }, 
    219199 
     200                addNewClickHandler: function() { 
     201                        this.trigger( 'show:upload:attachment' ); 
     202                }, 
     203 
    220204                editPreviousAttachment: function( currentModel ) { 
    221205                        var library = this.state().get('library'), 
    222206                                currentModelIndex = library.indexOf( currentModel ); 
     
    233217                 * Open the Edit Attachment modal. 
    234218                 */ 
    235219                editAttachment: function( model ) { 
    236                         var library = this.state().get('library'), hasPrevious, hasNext; 
    237                         if ( library.indexOf( model ) > 0 ) { 
    238                                 hasPrevious = true; 
    239                         } 
    240                         else { 
    241                                 hasPrevious = false; 
    242                         } 
    243                         if ( library.indexOf( model ) < library.length - 1 ) { 
    244                                 hasNext = true; 
    245                         } 
    246                         else { 
    247                                 hasNext = false; 
    248                         } 
     220                        var library = this.state().get('library'); 
    249221 
    250                         new media.view.Frame.EditAttachment({ 
    251                                 hasPrevious:    hasPrevious, 
    252                                 hasNext:        hasNext, 
    253                                 model:          model, 
    254                                 gridController: this 
     222                        // Create a new EditAttachment frame, passing along the library and the attachment model. 
     223                        this.editAttachmentFrame = new media.view.Frame.EditAttachment({ 
     224                                library:        library, 
     225                                model:          model 
    255226                        }); 
     227 
     228                        // Listen to events on the edit attachment frame for triggering pagination callback handlers. 
     229                        this.listenTo( this.editAttachmentFrame, 'edit:attachment:next', this.editNextAttachment ); 
     230                        this.listenTo( this.editAttachmentFrame, 'edit:attachment:previous', this.editPreviousAttachment ); 
    256231                }, 
    257232 
    258233                /** 
     
    363338                                this.on( 'router:render', this.browseRouter, this ); 
    364339                        } 
    365340 
     341                        this.options.hasPrevious = ( this.options.library.indexOf( this.options.model ) > 0 ) ? true : false; 
     342                        this.options.hasNext = ( this.options.library.indexOf( this.options.model ) < this.options.library.length - 1 ) ? true : false; 
     343 
    366344                        // Initialize modal container view. 
    367345                        if ( this.options.modal ) { 
    368346                                this.modal = new media.view.Modal({ 
     
    471449                        if ( ! this.options.hasPrevious ) 
    472450                                return; 
    473451                        this.modal.close(); 
    474                         this.options.gridController.trigger( 'edit:attachment:previous', this.model ); 
     452                        this.trigger( 'edit:attachment:previous', this.model ); 
    475453                }, 
    476454 
    477455                /** 
     
    481459                        if ( ! this.options.hasNext ) 
    482460                                return; 
    483461                        this.modal.close(); 
    484                         this.options.gridController.trigger( 'edit:attachment:next', this.model ); 
     462                        this.trigger( 'edit:attachment:next', this.model ); 
    485463                } 
    486  
    487464        }); 
    488465 
    489466        media.view.GridFieldOptions = media.View.extend({ 
     
    514491                } 
    515492        }); 
    516493 
     494        media.view.BulkSelectionToggleButton = media.view.Button.extend({ 
     495                initialize: function() { 
     496                        media.view.Button.prototype.initialize.apply( this, arguments ); 
     497                        this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.toggleBulkEditHandler, this ) ); 
     498                }, 
     499 
     500                click: function() { 
     501                        var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length; 
     502                        media.view.Button.prototype.click.apply( this, arguments ); 
     503 
     504                        if ( bulkEditActive ) { 
     505                                this.controller.deactivateMode( 'bulk-edit' ); 
     506                                this.controller.activateMode( 'edit' ); 
     507                        } else { 
     508                                this.controller.deactivateMode( 'edit' ); 
     509                                this.controller.activateMode( 'bulk-edit' ); 
     510                        } 
     511                }, 
     512 
     513                toggleBulkEditHandler: function() { 
     514                        var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length; 
     515                        if ( bulkEditActive ) { 
     516                                this.$el.addClass( 'button-primary' ); 
     517                        } else { 
     518                                this.$el.removeClass( 'button-primary' ); 
     519                                this.controller.state().get('selection').reset(); 
     520                        } 
     521                } 
     522        }); 
     523 
     524        media.view.BulkDeleteButton = media.view.Button.extend({ 
     525                initialize: function() { 
     526                        media.view.Button.prototype.initialize.apply( this, arguments ); 
     527                        this.$el.hide(); 
     528                        this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.visibility, this ) ); 
     529                }, 
     530 
     531                click: function() { 
     532                        media.view.Button.prototype.click.apply( this, arguments ); 
     533                        while (this.controller.state().get('selection').length > 0) { 
     534                                this.controller.state().get('selection').at(0).destroy(); 
     535                        } 
     536                }, 
     537 
     538                visibility: function() { 
     539                        var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length; 
     540                        if ( bulkEditActive ) { 
     541                                this.$el.show(); 
     542                        } else { 
     543                                this.$el.hide(); 
     544                        } 
     545                } 
     546        }); 
     547 
    517548}(jQuery, _, Backbone, wp)); 
     549 No newline at end of file 
  • 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 6bf147c..328f59a 100644
    a b  
    665665                        } 
    666666 
    667667                        if ( ! this.get('edge') ) { 
    668                                 this.set( 'edge', 120 ); 
     668                                this.set( 'edge', 150 ); 
    669669                        } 
    670670 
    671671                        if ( ! this.get('gutter') ) { 
     
    17851785                 * @global wp.Uploader 
    17861786                 */ 
    17871787                initialize: function() { 
    1788  
    17891788                        media.view.Frame.prototype.initialize.apply( this, arguments ); 
    17901789 
    17911790                        _.defaults( this.options, { 
    17921791                                title:    '', 
    17931792                                modal:    true, 
    17941793                                uploader: true, 
    1795                                 mode:     ['select'] 
     1794                                mode:     [ 'select' ] 
    17961795                        }); 
    17971796 
    17981797                        // Ensure core UI is enabled. 
     
    18081807                                this.modal.content( this ); 
    18091808                        } 
    18101809 
     1810                        // Store active "modes" that the frame is in. Unrelated to region modes. 
     1811                        this.activeModes = new Backbone.Collection(); 
     1812                        this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) ); 
     1813 
     1814                        _.each( this.options.mode, function( mode ) { 
     1815                                this.activeModes.add( new Backbone.Model( { id: mode } ) ); 
     1816                        }, this ); 
     1817 
    18111818                        // Force the uploader off if the upload limit has been exceeded or 
    18121819                        // if the browser isn't supported. 
    18131820                        if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported ) { 
     
    19721979 
    19731980                        window.tb_remove = this._tb_remove; 
    19741981                        delete this._tb_remove; 
     1982                }, 
     1983 
     1984                /** 
     1985                 * Map activeMode collection events to the frame. 
     1986                 */ 
     1987                triggerModeEvents: function( model, collection, options ) { 
     1988                        var collectionEvent, 
     1989                                modeEventMap = { 
     1990                                        add: 'activate', 
     1991                                        remove: 'deactivate' 
     1992                                }, 
     1993                                eventToTrigger; 
     1994                        // Probably a better way to do this. 
     1995                        _.each( options, function( value, key ) { 
     1996                                if ( value ) { 
     1997                                        collectionEvent = key; 
     1998                                } 
     1999                        } ); 
     2000 
     2001                        if ( ! _.has( modeEventMap, collectionEvent ) ) 
     2002                                return; 
     2003 
     2004                        eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent]; 
     2005                        this.trigger( eventToTrigger ); 
     2006                }, 
     2007                activateMode: function( mode ) { 
     2008                        this.activeModes.add( [ { id: mode } ] ); 
     2009                        this.trigger( mode + ':activate' ); 
     2010                }, 
     2011                deactivateMode: function( mode ) { 
     2012                        // Bail if the mode isn't active. 
     2013                        if ( ! this.activeModes.where( { id: mode } ).length ) { 
     2014                                return; 
     2015                        } 
     2016                        this.activeModes.remove( this.activeModes.where( { id: mode } ) ); 
     2017                        this.trigger( mode + ':deactivate' ); 
    19752018                } 
    19762019        }); 
    19772020 
     
    46734716                        } 
    46744717 
    46754718                        // In the grid view, bubble up an edit:attachment event to the controller. 
    4676                         if ( _.contains( this.controller.options.mode, 'grid' ) ) { 
     4719                        if ( this.controller.activeModes.where( { id: 'edit' } ).length ) { 
    46774720                                this.controller.trigger( 'edit:attachment', this.model ); 
    46784721                                return; 
    46794722                        } 
     
    50815124                        if ( this.options.resize ) { 
    50825125                                $(window).on( 'resize.attachments', this._resizeCss ); 
    50835126                        } 
    5084                         this.css(); 
     5127 
     5128                        // Call this.css() after this view has been rendered in the DOM so 
     5129                        // attachments get proper width applied. 
     5130                        _.defer( this.css, this ); 
    50855131                }, 
    50865132 
    50875133                dispose: function() { 
     
    55315577                                AttachmentView: media.view.Attachment.Library 
    55325578                        }); 
    55335579 
     5580                        this.listenTo( this.controller, 'show:upload:attachment', _.bind( this.showUploader, this ) ); 
    55345581                        this.createToolbar(); 
     5582                        this.createUploader(); 
     5583                        this.createAttachments(); 
    55355584                        this.updateContent(); 
    55365585                        if ( this.options.sidebar ) { 
    55375586                                this.createSidebar(); 
     
    55685617                        // Feels odd to bring the global media library switcher into the Attachment 
    55695618                        // browser view. Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar ); 
    55705619                        // which the controller can tap into and add this view? 
    5571                         if ( _.contains( this.controller.options.mode, 'grid' ) ) { 
     5620                        if ( this.controller.activeModes.where( { id: 'grid' } ).length ) { 
    55725621                                LibraryViewSwitcher = media.View.extend({ 
    55735622                                        className: 'view-switch media-grid-view-switch', 
    55745623                                        template: media.template( 'media-library-view-switcher') 
     
    55785627                                        priority: -90 
    55795628                                }).render() ); 
    55805629 
     5630                                this.toolbar.set( 'bulkSelectionToggleButton', new media.view.BulkSelectionToggleButton({ 
     5631                                        text: 'Bulk Edit', 
     5632                                        controller: this.controller, 
     5633                                        priority: -70 
     5634                                }).render() ); 
     5635 
     5636                                this.toolbar.set( 'BulkDeleteButton', new media.view.BulkDeleteButton({ 
     5637                                        text: 'Bulk Delete', 
     5638                                        controller: this.controller, 
     5639                                        priority: -69 
     5640                                }).render() ); 
     5641 
    55815642                                this.toolbar.set( 'gridFieldOptions', new media.view.GridFieldOptions({ 
    55825643                                        controller: this.controller, 
    55835644                                        priority: -50 
     
    56355696 
    56365697                updateContent: function() { 
    56375698                        var view = this; 
    5638  
    5639                         if( ! this.attachments ) { 
    5640                                 this.createAttachments(); 
    5641                         } 
    5642  
    56435699                        if ( ! this.collection.length ) { 
    56445700                                this.toolbar.get( 'spinner' ).show(); 
    56455701                                this.collection.more().done(function() { 
    56465702                                        if ( ! view.collection.length ) { 
    5647                                                 view.createUploader(); 
     5703                                                view.attachmentsNoResults.$el.removeClass( 'hidden' ); 
     5704                                        } else { 
     5705                                                view.attachmentsNoResults.$el.addClass( 'hidden' ); 
    56485706                                        } 
    56495707                                        view.toolbar.get( 'spinner' ).hide(); 
    56505708                                }); 
    56515709                        } else { 
     5710                                this.attachmentsNoResults.$el.addClass( 'hidden' ); 
    56525711                                view.toolbar.get( 'spinner' ).hide(); 
    56535712                        } 
    56545713                }, 
    56555714 
    5656                 removeContent: function() { 
    5657                         _.each(['attachments','uploader'], function( key ) { 
    5658                                 if ( this[ key ] ) { 
    5659                                         this[ key ].remove(); 
    5660                                         delete this[ key ]; 
    5661                                 } 
    5662                         }, this ); 
    5663                 }, 
    5664  
    56655715                createUploader: function() { 
    5666                         this.removeContent(); 
    5667  
    56685716                        this.uploader = new media.view.UploaderInline({ 
    56695717                                controller: this.controller, 
    56705718                                status:     false, 
    56715719                                message:    l10n.noItemsFound 
    56725720                        }); 
    56735721 
     5722                        this.uploader.$el.addClass( 'hidden' ); 
    56745723                        this.views.add( this.uploader ); 
    56755724                }, 
    56765725 
    5677                 createAttachments: function() { 
    5678                         this.removeContent(); 
     5726                showUploader: function() { 
     5727                        this.uploader.$el.removeClass( 'hidden' ); 
     5728                }, 
    56795729 
     5730                createAttachments: function() { 
    56805731                        this.attachments = new media.view.Attachments({ 
    56815732                                controller:           this.controller, 
    56825733                                collection:           this.collection, 
     
    56905741                        }); 
    56915742 
    56925743                        this.views.add( this.attachments ); 
     5744 
     5745                        this.attachmentsNoResults = new media.View({ 
     5746                                controller: this.controller 
     5747                        }); 
     5748 
     5749                        this.attachmentsNoResults.$el.addClass( 'hidden' ); 
     5750                        this.attachmentsNoResults.$el.html( 'No media found.' ); 
     5751 
     5752                        this.views.add( this.attachmentsNoResults ); 
     5753 
     5754 
    56935755                }, 
    56945756 
    56955757                createSidebar: function() { 
  • src/wp-includes/media-template.php

    diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
    index 098a03a..8a72e1b 100644
    a b function wp_print_media_templates() { 
    276276                </div> 
    277277                <div class="media-frame-router"></div> 
    278278                <div class="media-frame-content"></div> 
    279                 <div class="media-frame-toolbar"></div> 
    280279        </script> 
    281280 
    282281        <script type="text/html" id="tmpl-attachment-details-two-column">