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: https://develop.svn.wordpress.org/trunk@21906 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
30cc580f76
commit
4442437bd5
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 = $('<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
|
||||
});
|
||||
|
||||
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
|
||||
|
|
Loading…
Reference in New Issue