Make WordPress Core

Ticket #24716: 24716.37.diff

File 24716.37.diff, 15.1 KB (added by ericlewis, 10 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">