From 3ec7265074dec0c4b71aac19de849728eaca8613 Mon Sep 17 00:00:00 2001 From: Daryl Koopersmith Date: Wed, 19 Sep 2012 00:34:00 +0000 Subject: [PATCH] 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. git-svn-id: http://core.svn.wordpress.org/trunk@21906 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/css/media-views.css | 3 +- wp-includes/js/media-views.js | 89 +++++++++++++++++++++++++++++---- 2 files changed, 81 insertions(+), 11 deletions(-) diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css index 5e46cbae16..22db077694 100644 --- a/wp-includes/css/media-views.css +++ b/wp-includes/css/media-views.css @@ -178,8 +178,7 @@ margin-top: 0; } -.media-workspace .media-toolbar .add-to-gallery, -.media-workspace .media-toolbar .create-new-gallery { +.media-workspace .media-toolbar .add-to-gallery { display: none; } diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index 535ddb5bc8..fe93e5d2e8 100644 --- a/wp-includes/js/media-views.js +++ b/wp-includes/js/media-views.js @@ -31,7 +31,8 @@ this.modal = new media.view.Modal({ controller: this }); // 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 } ); }, @@ -212,6 +213,11 @@ }, 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(); }, @@ -293,18 +299,20 @@ initialize: function() { _.defaults( this.options, { - style: 'secondary', text: '', classes: [] }); }, 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 ); this.el.className = classes.join(' '); this.$el.text( this.options.text ); @@ -341,14 +349,10 @@ this.$content = $('
'); - // 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 }); this.$content.append( this.attachmentsView.$el ); @@ -358,6 +362,8 @@ }, render: function() { + this.$content.detach(); + this.attachmentsView.render(); this.renderUploadProgress(); this.$el.html( this.template( this.options ) ).append( this.$content ); @@ -393,6 +399,19 @@ else 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(); }, // Initializes the toolbar view. Currently uses defaults set for @@ -400,6 +419,8 @@ // 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: { 'selection-preview': new media.view.SelectionPreview({ @@ -415,7 +436,10 @@ 'create-new-gallery': { style: 'primary', text: 'Create a new gallery', - priority: 30 + priority: 30, + click: function() { + controller.render('gallery'); + } }, 'add-to-gallery': { text: 'Add to gallery', @@ -432,6 +456,53 @@ } }); + /** + * 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 ); + } + }); + /** * wp.media.view.Attachments