Changeset 21906

Timestamp:

09/19/2012 12:34:00 AM (14 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:

• css/media-views.css (modified) (1 diff)
• js/media-views.js (modified) (10 diffs)

trunk/wp-includes/css/media-views.css

@@ -179 +179 @@
 }
 
-.media-workspace .media-toolbar .add-to-gallery,
-.media-workspace .media-toolbar .create-new-gallery {
+.media-workspace .media-toolbar .add-to-gallery {
         display: none;
 }

trunk/wp-includes/js/media-views.js

@@ -32 +32 @@
 
                         // Add default views.
-                        this.add( 'library', media.view.Workspace );
+                        this.add( 'library', media.view.Workspace.Library, { collection: media.query() } );
+                        this.add( 'gallery', media.view.Workspace.Gallery, { collection: this.selection } );
                 },
 
@@ -213 +214 @@
 
                 content: function( $content ) {
+                        // Detach any existing content to prevent events from being lost.
+                        if ( this.options.$content )
+                                this.options.$content.detach();
+
+                        // Set and render the content.
                         this.options.$content = ( $content instanceof Backbone.View ) ? $content.$el : $content;
                         return this.render();
@@ -294 +300 @@
                 initialize: function() {
                         _.defaults( this.options, {
-                                style:   'secondary',
                                 text:    '',
                                 classes: []
@@ -301 +306 @@
 
                 render: function() {
-                        var classes = [ this.className ];
+                        var classes = [ 'button', this.className ];
 
                         if ( this.options.style )
                                 classes.push( 'button-' + this.options.style );
+
+                        if ( this.options.size )
+                                classes.push( 'button-' + this.options.size );
 
                         classes = classes.concat( this.options.classes );
@@ -342 +350 @@
                         this.$content = $('<div class="existing-attachments" />');
 
-                        // If this supports multiple attachments, initialize the sample toolbar view.
-                        if ( this.controller.get('multiple') )
-                                this.initToolbarView();
-
                         this.attachmentsView = new media.view.Attachments({
                                 controller: this.controller,
                                 directions: 'Select stuff.',
-                                collection: media.query()
+                                collection: this.collection
                         });
 
@@ -359 +363 @@
 
                 render: function() {
+                        this.$content.detach();
+
                         this.attachmentsView.render();
                         this.renderUploadProgress();
@@ -394 +400 @@
                                         return memo + 100;
                         }, 0 ) / queue.length ) + '%' );
+                }
+        });
+
+        /**
+         * wp.media.view.Workspace.Library
+         */
+        media.view.Workspace.Library = media.view.Workspace.extend({
+                initialize: function() {
+                        media.view.Workspace.prototype.initialize.apply( this, arguments );
+
+                        // If this supports multiple attachments, initialize the sample toolbar view.
+                        if ( this.controller.get('multiple') )
+                                this.initToolbarView();
                 },
 
@@ -401 +420 @@
                 // to test multiple selections.
                 initToolbarView: function() {
+                        var controller = this.controller;
+
                         this.toolbarView = new media.view.Toolbar({
                                 items: {
@@ -416 +437 @@
                                                 style: 'primary',
                                                 text:  'Create a new gallery',
-                                                priority: 30
+                                                priority: 30,
+                                                click:  function() {
+                                                        controller.render('gallery');
+                                                }
                                         },
                                         'add-to-gallery': {
@@ -429 +453 @@
                         }, this );
 
+                        this.$content.append( this.toolbarView.$el );
+                }
+        });
+
+        /**
+         * wp.media.view.Workspace.Gallery
+         */
+        media.view.Workspace.Gallery = media.view.Workspace.extend({
+                initialize: function() {
+                        media.view.Workspace.prototype.initialize.apply( this, arguments );
+                        this.initToolbarView();
+                },
+
+                // Initializes the toolbar view. Currently uses defaults set for
+                // inserting media into a post. This should be pulled out into the
+                // appropriate workflow when the time comes, but is currently here
+                // to test multiple selections.
+                initToolbarView: function() {
+                        var controller = this.controller;
+
+                        this.toolbarView = new media.view.Toolbar({
+                                items: {
+                                        'return-to-library': {
+                                                text:  'Return to media library',
+                                                priority: -40,
+                                                click:  function() {
+                                                        controller.render('library');
+                                                }
+                                        },
+
+                                        'insert-gallery-into-post': {
+                                                style: 'primary',
+                                                text:  'Insert gallery into post',
+                                                priority: 40,
+                                                click:  function() {
+                                                        controller.close();
+                                                }
+                                        },
+
+                                        'add-images': {
+                                                text:  'Add images from media library',
+                                                priority: 30
+                                        }
+                                }
+                        });
+
+                        this.$el.addClass('with-toolbar');
                         this.$content.append( this.toolbarView.$el );
                 }