sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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:
Daryl Koopersmith 2012-09-19 00:34:00 +00:00
parent 30cc580f76
commit 4442437bd5
2 changed files with 81 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
wp-includes/css/media-views.css
View File

@ -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;
}

89
wp-includes/js/media-views.js
View File

@ -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