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

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');

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,17 +1451,99 @@
 
 
 	/**
-	 * 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: {},
+
+		initialize: function() {
+			var settings = this.settings;
+
+			this.model = this.model || new Backbone.Model();
+
+			_.each( settings, function( setting, key ) {
+				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 ) {
+				return _.any( attrs, function( value, key ) {
+					return ! settings[ key ] || ! _.contains( settings[ key ].accepts, value );
+				});
+			};
+
+			this.model.on( 'change', function( model, options ) {
+				if ( ! options.changes )
+					return;
+
+				_.each( _.keys( options.changes ), function( key ) {
+					if ( settings[ key ] && settings[ key ].name )
+						setUserSetting( settings[ key ].name, model.get( key ) );
+				});
+			}, this );
+
+			this.model.on( 'change', this.updateChanges, this );
+		},
+
+		render: function() {
+			this.$el.html( this.template( this.model.toJSON() ) );
+
+			// Select the correct values.
+			_( this.model.attributes ).chain().keys().each( this.update, this );
+			return this;
+		},
+
+		update: function( key ) {
+			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 $setting = $( event.target ).closest('[data-setting]');
+
+			event.preventDefault();
+
+			if ( $setting.length )
+				this.model.set( $setting.data('setting'), event.target.value );
+		},
+
+		updateChanges: function( model, options ) {
+			if ( options.changes )
+				_( options.changes ).chain().keys().each( this.update, this );
+		}
+	});
+
+	/**
+	 * 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'],
@@ -1472,64 +1561,38 @@
 				name:     'imgsize',
 				fallback: 'medium'
 			}
-		},
-
-		initialize: function() {
-			var settings = this.settings;
-
-			this.model = new Backbone.Model();
-
-			_.each( settings, function( setting, key ) {
-				this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
-			}, this );
-
-			this.model.validate = function( attrs ) {
-				return _.any( attrs, function( value, key ) {
-					return ! settings[ key ] || ! _.contains( settings[ key ].accepts, value );
-				});
-			};
-
-			this.model.on( 'change', function( model, options ) {
-				if ( ! options.changes )
-					return;
-
-				_.each( _.keys( options.changes ), function( key ) {
-					if ( settings[ key ] )
-						setUserSetting( settings[ key ].name, model.get( key ) );
-				});
-			}, this );
-
-			this.model.on( 'change', this.updateChanges, this );
-		},
-
-		render: function() {
-			this.$el.html( this.template( this.model.toJSON() ) );
-
-			// Select the correct values.
-			_( this.model.attributes ).chain().keys().each( this.update, this );
-			return this;
-		},
-
-		update: function( key ) {
-			var buttons = this.$('[data-setting="' + key + '"] button').removeClass('active');
-			buttons.filter( '[value="' + this.model.get( key ) + '"]' ).addClass('active');
-		},
-
-		updateHandler: function( event ) {
-			var group = $( event.target ).closest('.button-group');
-
-			event.preventDefault();
-
-			if ( group.length )
-				this.model.set( group.data('setting'), event.target.value );
-		},
-
-		updateChanges: function( model, options ) {
-			if ( options.changes )
-				_( options.changes ).chain().keys().each( this.update, this );
 		}
 	});
 
+	/**
+	 * 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
 	 */

wp-includes/media.php

@@ -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 ) { %>