WordPress.org

Make WordPress Core

Changeset 21906


Ignore:
Timestamp:
09/19/2012 12:34:00 AM (8 years ago)
Author:
koopersmith
Message:

The first inklings of a gallery management screen.

  • Adds view.Workspace.Library and view.Workspace.Gallery as extensions of view.Workspace to implement the individual screens
  • Shifts the toolbar logic that was library-specific from the generic Workspace view to Workspace.Library.
  • Adds a toolbar to the Gallery view.
  • 'Create a gallery' and 'Return to media library' buttons toggle between the two views.
  • 'Insert gallery into post' closes the modal, but does not actually perform its namesake action.
  • Note that elements can still be deselected in the gallery view. This will be fixed in a future commit.

Improvements to avoid over-eager event unbinding:

  • Modal views now properly detach their contents before replacing them with a new element.
  • Likewise, Workspace views detach their main content blocks when re-rendering the view.

To test the gallery workflow (which is incomplete), run the following in your browser's console:

wp.media({ multiple: true });

see #21809, #21390.

Location:
trunk/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/css/media-views.css

    r21786 r21906  
    179179}
    180180
    181 .media-workspace .media-toolbar .add-to-gallery,
    182 .media-workspace .media-toolbar .create-new-gallery {
     181.media-workspace .media-toolbar .add-to-gallery {
    183182    display: none;
    184183}
  • trunk/wp-includes/js/media-views.js

    r21902 r21906  
    3232
    3333            // Add default views.
    34             this.add( 'library', media.view.Workspace );
     34            this.add( 'library', media.view.Workspace.Library, { collection: media.query() } );
     35            this.add( 'gallery', media.view.Workspace.Gallery, { collection: this.selection } );
    3536        },
    3637
     
    213214
    214215        content: function( $content ) {
     216            // Detach any existing content to prevent events from being lost.
     217            if ( this.options.$content )
     218                this.options.$content.detach();
     219
     220            // Set and render the content.
    215221            this.options.$content = ( $content instanceof Backbone.View ) ? $content.$el : $content;
    216222            return this.render();
     
    294300        initialize: function() {
    295301            _.defaults( this.options, {
    296                 style:   'secondary',
    297302                text:    '',
    298303                classes: []
     
    301306
    302307        render: function() {
    303             var classes = [ this.className ];
     308            var classes = [ 'button', this.className ];
    304309
    305310            if ( this.options.style )
    306311                classes.push( 'button-' + this.options.style );
     312
     313            if ( this.options.size )
     314                classes.push( 'button-' + this.options.size );
    307315
    308316            classes = classes.concat( this.options.classes );
     
    342350            this.$content = $('<div class="existing-attachments" />');
    343351
    344             // If this supports multiple attachments, initialize the sample toolbar view.
    345             if ( this.controller.get('multiple') )
    346                 this.initToolbarView();
    347 
    348352            this.attachmentsView = new media.view.Attachments({
    349353                controller: this.controller,
    350354                directions: 'Select stuff.',
    351                 collection: media.query()
     355                collection: this.collection
    352356            });
    353357
     
    359363
    360364        render: function() {
     365            this.$content.detach();
     366
    361367            this.attachmentsView.render();
    362368            this.renderUploadProgress();
     
    394400                    return memo + 100;
    395401            }, 0 ) / queue.length ) + '%' );
     402        }
     403    });
     404
     405    /**
     406     * wp.media.view.Workspace.Library
     407     */
     408    media.view.Workspace.Library = media.view.Workspace.extend({
     409        initialize: function() {
     410            media.view.Workspace.prototype.initialize.apply( this, arguments );
     411
     412            // If this supports multiple attachments, initialize the sample toolbar view.
     413            if ( this.controller.get('multiple') )
     414                this.initToolbarView();
    396415        },
    397416
     
    401420        // to test multiple selections.
    402421        initToolbarView: function() {
     422            var controller = this.controller;
     423
    403424            this.toolbarView = new media.view.Toolbar({
    404425                items: {
     
    416437                        style: 'primary',
    417438                        text:  'Create a new gallery',
    418                         priority: 30
     439                        priority: 30,
     440                        click:  function() {
     441                            controller.render('gallery');
     442                        }
    419443                    },
    420444                    'add-to-gallery': {
     
    429453            }, this );
    430454
     455            this.$content.append( this.toolbarView.$el );
     456        }
     457    });
     458
     459    /**
     460     * wp.media.view.Workspace.Gallery
     461     */
     462    media.view.Workspace.Gallery = media.view.Workspace.extend({
     463        initialize: function() {
     464            media.view.Workspace.prototype.initialize.apply( this, arguments );
     465            this.initToolbarView();
     466        },
     467
     468        // Initializes the toolbar view. Currently uses defaults set for
     469        // inserting media into a post. This should be pulled out into the
     470        // appropriate workflow when the time comes, but is currently here
     471        // to test multiple selections.
     472        initToolbarView: function() {
     473            var controller = this.controller;
     474
     475            this.toolbarView = new media.view.Toolbar({
     476                items: {
     477                    'return-to-library': {
     478                        text:  'Return to media library',
     479                        priority: -40,
     480                        click:  function() {
     481                            controller.render('library');
     482                        }
     483                    },
     484
     485                    'insert-gallery-into-post': {
     486                        style: 'primary',
     487                        text:  'Insert gallery into post',
     488                        priority: 40,
     489                        click:  function() {
     490                            controller.close();
     491                        }
     492                    },
     493
     494                    'add-images': {
     495                        text:  'Add images from media library',
     496                        priority: 30
     497                    }
     498                }
     499            });
     500
     501            this.$el.addClass('with-toolbar');
    431502            this.$content.append( this.toolbarView.$el );
    432503        }
Note: See TracChangeset for help on using the changeset viewer.