diff --git a/wp-includes/js/mce-view.js b/wp-includes/js/mce-view.js index 6c6c5815df..afc66e5b61 100644 --- a/wp-includes/js/mce-view.js +++ b/wp-includes/js/mce-view.js @@ -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'); diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index 4150c17ef0..f6ae7f9de1 100644 --- a/wp-includes/js/media-views.js +++ b/wp-includes/js/media-views.js @@ -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 */ diff --git a/wp-includes/media.php b/wp-includes/media.php index 19ef68b52f..44e3db0892 100644 --- a/wp-includes/media.php +++ b/wp-includes/media.php @@ -1434,6 +1434,26 @@ function wp_print_media_templates( $attachment ) { + +