Add gallery settings to the media modal.
* Abstracts `wp.media.view.AttachmentDisplaySettings` into `wp.media.view.Settings` for managing lists of settings with button groups and select boxes. Settings can optionally be tied to a user setting (i.e. using `getUserSetting`). * Adds `wp.media.view.Settings.AttachmentDisplay`. * Adds `wp.media.view.Settings.Gallery`. see #21390, #21815. git-svn-id: http://core.svn.wordpress.org/trunk@22340 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith
parent
f3c673558a
commit
632cc5ced6
|
|
@ -590,7 +590,7 @@ window.wp = window.wp || {};
|
|||
attachments: function( shortcode, parent ) {
|
||||
var shortcodeString = shortcode.string(),
|
||||
result = galleries[ shortcodeString ],
|
||||
attrs, args;
|
||||
attrs, args, query;
|
||||
|
||||
delete galleries[ shortcodeString ];
|
||||
|
||||
|
|
@ -617,12 +617,14 @@ window.wp = window.wp || {};
|
|||
if ( ! args.post__in )
|
||||
args.parent = attrs.id || parent;
|
||||
|
||||
return media.query( args );
|
||||
query = media.query( args );
|
||||
query.props.set( _.pick( attrs, 'columns', 'link' ) );
|
||||
return query;
|
||||
},
|
||||
|
||||
shortcode: function( attachments ) {
|
||||
var props = attachments.props.toJSON(),
|
||||
attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order' ),
|
||||
attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order', 'link', 'columns' ),
|
||||
shortcode;
|
||||
|
||||
attrs.ids = attachments.pluck('id');
|
||||
|
|
|
|||
|
|
@ -282,6 +282,13 @@
|
|||
}) );
|
||||
|
||||
this.details();
|
||||
frame.sidebar().add({
|
||||
settings: new media.view.Settings.Gallery({
|
||||
controller: frame,
|
||||
model: this.get('library').props,
|
||||
priority: 40
|
||||
}).render()
|
||||
});
|
||||
},
|
||||
|
||||
content: function() {
|
||||
|
|
@ -752,7 +759,7 @@
|
|||
},
|
||||
{
|
||||
classes: ['down-arrow'],
|
||||
dropdown: new media.view.AttachmentDisplaySettings().render().$el,
|
||||
dropdown: new media.view.Settings.AttachmentDisplay().render().$el,
|
||||
|
||||
click: function( event ) {
|
||||
var $el = this.$el;
|
||||
|
|
@ -1444,43 +1451,32 @@
|
|||
|
||||
|
||||
/**
|
||||
* wp.media.view.AttachmentDisplaySettings
|
||||
* wp.media.view.Settings
|
||||
*/
|
||||
media.view.AttachmentDisplaySettings = Backbone.View.extend({
|
||||
media.view.Settings = Backbone.View.extend({
|
||||
tagName: 'div',
|
||||
className: 'attachment-display-settings',
|
||||
template: media.template('attachment-display-settings'),
|
||||
|
||||
events: {
|
||||
'click button': 'updateHandler'
|
||||
'click button': 'updateHandler',
|
||||
'change input': 'updateHandler',
|
||||
'change select': 'updateHandler',
|
||||
'change textarea': 'updateHandler'
|
||||
},
|
||||
|
||||
settings: {
|
||||
align: {
|
||||
accepts: ['left','center','right','none'],
|
||||
name: 'align',
|
||||
fallback: 'none'
|
||||
},
|
||||
link: {
|
||||
accepts: ['post','file','none'],
|
||||
name: 'urlbutton',
|
||||
fallback: 'post'
|
||||
},
|
||||
size: {
|
||||
// @todo: Dynamically generate these.
|
||||
accepts: ['thumbnail','medium','large','full'],
|
||||
name: 'imgsize',
|
||||
fallback: 'medium'
|
||||
}
|
||||
},
|
||||
settings: {},
|
||||
|
||||
initialize: function() {
|
||||
var settings = this.settings;
|
||||
|
||||
this.model = new Backbone.Model();
|
||||
this.model = this.model || new Backbone.Model();
|
||||
|
||||
_.each( settings, function( setting, key ) {
|
||||
this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
|
||||
if ( setting.name )
|
||||
this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
|
||||
else
|
||||
this.model.set( key, this.model.get( key ) || setting.fallback );
|
||||
}, this );
|
||||
|
||||
this.model.validate = function( attrs ) {
|
||||
|
|
@ -1494,7 +1490,7 @@
|
|||
return;
|
||||
|
||||
_.each( _.keys( options.changes ), function( key ) {
|
||||
if ( settings[ key ] )
|
||||
if ( settings[ key ] && settings[ key ].name )
|
||||
setUserSetting( settings[ key ].name, model.get( key ) );
|
||||
});
|
||||
}, this );
|
||||
|
|
@ -1511,17 +1507,28 @@
|
|||
},
|
||||
|
||||
update: function( key ) {
|
||||
var buttons = this.$('[data-setting="' + key + '"] button').removeClass('active');
|
||||
buttons.filter( '[value="' + this.model.get( key ) + '"]' ).addClass('active');
|
||||
var setting = this.settings[ key ],
|
||||
$setting = this.$('[data-setting="' + key + '"]'),
|
||||
$buttons;
|
||||
|
||||
if ( ! setting )
|
||||
return;
|
||||
|
||||
if ( 'select' === setting.type ) {
|
||||
$setting.find('[value="' + this.model.get( key ) + '"]').attr( 'selected', true );
|
||||
} else {
|
||||
$buttons = $setting.find('button').removeClass('active');
|
||||
$buttons.filter( '[value="' + this.model.get( key ) + '"]' ).addClass('active');
|
||||
}
|
||||
},
|
||||
|
||||
updateHandler: function( event ) {
|
||||
var group = $( event.target ).closest('.button-group');
|
||||
var $setting = $( event.target ).closest('[data-setting]');
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if ( group.length )
|
||||
this.model.set( group.data('setting'), event.target.value );
|
||||
if ( $setting.length )
|
||||
this.model.set( $setting.data('setting'), event.target.value );
|
||||
},
|
||||
|
||||
updateChanges: function( model, options ) {
|
||||
|
|
@ -1530,6 +1537,62 @@
|
|||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* wp.media.view.Settings.AttachmentDisplay
|
||||
*/
|
||||
media.view.Settings.AttachmentDisplay = media.view.Settings.extend({
|
||||
className: 'attachment-display-settings',
|
||||
template: media.template('attachment-display-settings'),
|
||||
|
||||
settings: {
|
||||
align: {
|
||||
accepts: ['left','center','right','none'],
|
||||
name: 'align',
|
||||
fallback: 'none'
|
||||
},
|
||||
link: {
|
||||
accepts: ['post','file','none'],
|
||||
name: 'urlbutton',
|
||||
fallback: 'post'
|
||||
},
|
||||
size: {
|
||||
// @todo: Dynamically generate these.
|
||||
accepts: ['thumbnail','medium','large','full'],
|
||||
name: 'imgsize',
|
||||
fallback: 'medium'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* wp.media.view.Settings.Gallery
|
||||
*/
|
||||
media.view.Settings.Gallery = media.view.Settings.extend({
|
||||
className: 'gallery-settings',
|
||||
template: media.template('gallery-settings'),
|
||||
|
||||
settings: {
|
||||
columns: {
|
||||
accepts: _.invoke( _.range( 1, 10 ), 'toString' ),
|
||||
fallback: 3,
|
||||
type: 'select'
|
||||
},
|
||||
link: {
|
||||
accepts: ['post','file'],
|
||||
fallback: 'post'
|
||||
}
|
||||
}
|
||||
|
||||
// render: function() {
|
||||
// this.$el.html( this.template({
|
||||
// count: this.options.maxColumns
|
||||
// }) );
|
||||
|
||||
// this.$('option[value="' + this.options.columns + '"]').attr( 'selected', true );
|
||||
// this.$('option[value="' + this.options.linkTo + '"]').addClass('active');
|
||||
// }
|
||||
});
|
||||
|
||||
/**
|
||||
* wp.media.view.Attachment.Details
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1434,6 +1434,26 @@ function wp_print_media_templates( $attachment ) {
|
|||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl-gallery-settings">
|
||||
<h4><?php _e('Link To'); ?></h4>
|
||||
<div class="link-to button-group button-large" data-setting="link">
|
||||
<button class="button" value="post">
|
||||
<?php esc_attr_e('Attachment Page'); ?>
|
||||
</button>
|
||||
<button class="button" value="file">
|
||||
<?php esc_attr_e('Media File'); ?>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h4><?php _e('Gallery Columns'); ?></h4>
|
||||
|
||||
<select class="columns" name="columns" data-setting="columns">
|
||||
<% _.times( 9, function( i ) { %>
|
||||
<option value="<%- i %>"><%- i %></option>
|
||||
<% }); %>
|
||||
</select>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl-editor-attachment">
|
||||
<div class="editor-attachment-preview">
|
||||
<% if ( url ) { %>
|
||||
|
|
|
|||
Loading…
Reference in New Issue