Changeset 21906

Timestamp:

09/19/2012 12:34:00 AM (11 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 );
         }