Gallery editing in the media modal.

The edit button on gallery MCE views will open a new instance of the media modal. Images can be removed, uploaded, and reordered. However, the "Add images from media library" button is not yet functional.

see #21390, #21809, #21815.


git-svn-id: http://core.svn.wordpress.org/trunk@22155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith 2012-10-10 08:31:12 +00:00
parent 24d9eefa46
commit 70bd368ad8
4 changed files with 74 additions and 27 deletions

View File

@ -90,7 +90,7 @@ var tb_position;
// WordPress, TinyMCE, and Media
// -----------------------------
(function($){
// Stores the editors' `wp.media.controller.Workflow` instaces.
// Stores the editors' `wp.media.controller.Workflow` instances.
var workflows = {};
wp.mce.media = {

View File

@ -546,7 +546,8 @@ window.wp = window.wp || {};
},
shortcode: function( attachments ) {
var attrs = _.pick( attachments.props.toJSON(), 'include', 'exclude', 'orderby', 'order' ),
var props = attachments.props.toJSON(),
attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order' ),
shortcode;
attrs.ids = attachments.pluck('id');
@ -557,7 +558,11 @@ window.wp = window.wp || {};
type: 'single'
});
galleries[ shortcode.string() ] = attachments;
// Use a cloned version of the gallery.
galleries[ shortcode.string() ] = new wp.media.model.Attachments( attachments.models, {
props: props
});
return shortcode;
}
};
@ -574,14 +579,18 @@ window.wp = window.wp || {};
parent: $('#post_ID').val(),
events: {
'click .close': 'remove'
'click .close': 'remove',
'click .edit': 'edit'
},
initialize: function() {
var view = mceview.get('gallery'),
shortcode = this.options.shortcode;
this.update();
},
this.attachments = view.gallery.attachments( shortcode, this.parent );
update: function() {
var view = mceview.get('gallery');
this.attachments = view.gallery.attachments( this.options.shortcode, this.parent );
this.attachments.more().done( _.bind( this.render, this ) );
},
@ -601,6 +610,34 @@ window.wp = window.wp || {};
};
this.$el.html( this.template( options ) );
},
edit: function() {
if ( ! wp.media.view || this.workflow )
return;
this.workflow = wp.media({
view: 'gallery',
selection: this.attachments.models,
title: mceview.l10n.editGallery,
editing: true,
multiple: true
});
// Create a single-use workflow. If the workflow is closed,
// then detach it from the DOM and remove the reference.
this.workflow.on( 'close', function() {
this.workflow.detach();
delete this.workflow;
}, this );
// Update the `shortcode` and `attachments`.
this.workflow.on( 'update:gallery', function( selection ) {
var view = mceview.get('gallery');
this.options.shortcode = view.gallery.shortcode( selection );
this.update();
}, this );
}
}
});

View File

@ -119,8 +119,8 @@
update: function( event ) {
this.close();
this.trigger( 'update', this.selection );
this.trigger( 'update:' + event, this.selection );
this.trigger( 'update', this.selection, this );
this.trigger( 'update:' + event, this.selection, this );
this.selection.clear();
},
@ -217,18 +217,22 @@
attach: function() {
this.$el.appendTo( this.options.container );
this.controller.trigger( 'attach', this.controller );
},
detach: function() {
this.$el.detach();
this.controller.trigger( 'detach', this.controller );
},
open: function() {
this.$el.show();
this.controller.trigger( 'open', this.controller );
},
close: function() {
this.$el.hide();
this.controller.trigger( 'close', this.controller );
},
closeHandler: function( event ) {
@ -277,8 +281,8 @@
// Make sure to detach the elements we want to reuse.
// Otherwise, `jQuery.html()` will unbind their events.
$( _.pluck( this._views, 'el' ) ).detach();
this.$primary.html( _.pluck( views.primary, 'el' ) );
this.$secondary.html( _.pluck( views.secondary, 'el' ) );
this.$primary.html( _.pluck( views.primary || [], 'el' ) );
this.$secondary.html( _.pluck( views.secondary || [], 'el' ) );
return this;
},
@ -736,22 +740,12 @@
// 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: l10n.returnToLibrary,
priority: -40,
click: function() {
controller.render('library');
}
},
'insert-gallery-into-post': {
var controller = this.controller,
editing = controller.get('editing'),
items = {
'update-gallery': {
style: 'primary',
text: l10n.insertGalleryIntoPost,
text: editing ? l10n.updateGallery : l10n.insertGalleryIntoPost,
priority: 40,
click: _.bind( controller.update, controller, 'gallery' )
},
@ -760,7 +754,21 @@
text: l10n.addImagesFromLibrary,
priority: 30
}
}
};
if ( ! editing ) {
items['return-to-library'] = {
text: l10n.returnToLibrary,
priority: -40,
click: function() {
controller.render('library');
}
};
}
this.toolbarView = new media.view.Toolbar({
items: items
});
this.$el.addClass('with-toolbar');

View File

@ -330,6 +330,7 @@ function wp_default_scripts( &$scripts ) {
// Gallery
'returnToLibrary' => __( 'Return to media library' ),
'insertGalleryIntoPost' => __( 'Insert gallery into post' ),
'updateGallery' => __( 'Update gallery' ),
'addImagesFromLibrary' => __( 'Add images from media library' ),
) );
@ -337,6 +338,7 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
did_action( 'init' ) && $scripts->localize( 'mce-view', '_wpMceViewL10n', array(
'contentWidth' => isset( $GLOBALS['content_width'] ) ? $GLOBALS['content_width'] : 800,
'editGallery' => __( 'Edit Gallery' ),
) );
if ( is_admin() ) {