Media: Add custom URL as an option to attachment display properties. see #21390, #22206.

git-svn-id: http://core.svn.wordpress.org/trunk@22537 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/media-upload.js

@@ -123,10 +123,13 @@ var tb_position;
 					if ( detail )
 						detail = detail.toJSON();
 
+					// Reset the attachment details.
+					delete details[ attachment.cid ];
+
 					if ( 'image' === attachment.get('type') )
 						return wp.media.string.image( attachment, detail ) + ' ';
 					else
-						return wp.media.string.link( attachment ) + ' ';
+						return wp.media.string.link( attachment, detail ) + ' ';
 				}).join('') );
 			}, this );
 

wp-includes/css/media-views.css

@@ -203,7 +203,7 @@
 	float: left;
 	min-width: 30%;
 	min-height: 24px;
-	margin-right: 7px;
+	margin-right: 4%;
 	padding-top: 8px;
 	line-height: 16px;
 	text-align: right;

wp-includes/js/mce-view.js

@@ -420,11 +420,26 @@ window.wp = window.wp || {};
 // Default TinyMCE Views
 // ---------------------
 (function($){
-	var mceview = wp.mce.view;
+	var mceview = wp.mce.view,
+		linkToUrl;
+
+	linkToUrl = function( attachment, props ) {
+		var link = props.link,
+			url;
+
+		if ( 'file' === link )
+			url = attachment.get('url');
+		else if ( 'post' === link )
+			url = attachment.get('link');
+		else if ( 'custom' === link )
+			url = props.linkUrl;
+
+		return url || '';
+	};
 
 	wp.media.string = {};
 
-	wp.media.string.link = function( attachment ) {
+	wp.media.string.link = function( attachment, props ) {
 		var linkTo  = getUserSetting( 'urlbutton', 'post' ),
 			options = {
 				tag:     'a',
@@ -434,9 +449,7 @@ window.wp = window.wp || {};
 				}
 			};
 
-		// Attachments can be linked to attachment post pages or to the direct
-		// URL. `none` is not a valid option.
-		options.attrs.href = ( linkTo === 'file' ) ? attachment.get('url') : attachment.get('link');
+		options.attrs.href = linkToUrl( attachment, props );
 
 		return wp.html.string( options );
 	};
@@ -444,8 +457,6 @@ window.wp = window.wp || {};
 	wp.media.string.image = function( attachment, props ) {
 		var classes, img, options, size;
 
-		attachment = attachment.toJSON();
-
 		props = _.defaults( props || {}, {
 			img:   {},
 			align: getUserSetting( 'align', 'none' ),
@@ -453,6 +464,10 @@ window.wp = window.wp || {};
 			link:  getUserSetting( 'urlbutton', 'post' )
 		});
 
+		props.linkUrl = linkToUrl( attachment, props );
+
+		attachment = attachment.toJSON();
+
 		img     = _.clone( props.img );
 		classes = img['class'] ? img['class'].split(/\s+/) : [];
 		size    = attachment.sizes ? attachment.sizes[ props.size ] : {};
@@ -485,13 +500,9 @@ window.wp = window.wp || {};
 		};
 
 		// Generate the `href` based on the `link` property.
-		if ( props.link && 'none' !== props.link ) {
+		if ( props.linkUrl ) {
 			props.anchor = props.anchor || {};
-
-			if ( 'post' === props.link )
-				props.anchor.href = attachment.link;
-			else if ( 'file' === props.link )
-				props.anchor.href = attachment.url;
+			props.anchor.href = props.linkUrl;
 		}
 
 		// Generate the `a` element options, if they exist.

wp-includes/js/media-views.js

@@ -2513,6 +2513,10 @@
 			this.model.on( 'change', this.updateChanges, this );
 		},
 
+		destroy: function() {
+			this.model.off( null, null, this );
+		},
+
 		render: function() {
 			this.$el.html( this.template( _.defaults({
 				model: this.model.toJSON()
@@ -2582,6 +2586,31 @@
 				userSettings: false
 			});
 			media.view.Settings.prototype.initialize.apply( this, arguments );
+			this.model.on( 'change:link', this.updateCustomLink, this );
+		},
+
+		render: function() {
+			media.view.Settings.prototype.render.call( this );
+			this.updateCustomLink();
+			return this;
+		},
+
+		updateCustomLink: function() {
+			var isCustom = 'custom' === this.model.get('link'),
+				$input = this.$('.link-to-custom');
+
+			if ( ! isCustom ) {
+				$input.hide();
+				return;
+			}
+
+			$input.show();
+			if ( ! this.model.get('linkUrl') )
+				$input.val('http://');
+
+			// If the input is visible, focus and select its contents.
+			if ( $input.is(':visible') )
+				$input.focus()[0].select();
 		}
 	});
 

wp-includes/media.php

@@ -1536,7 +1536,8 @@ function wp_print_media_templates( $attachment ) {
 			</select>
 		</label>
 
-		<label class="setting">
+		<div class="setting">
+			<label>
 				<span><?php _e('Link To'); ?></span>
 				<select class="link-to"
 					data-setting="link"
@@ -1544,6 +1545,9 @@ function wp_print_media_templates( $attachment ) {
 						data-user-setting="urlbutton"
 					<# } #>>
 
+					<option value="custom">
+						<?php esc_attr_e('Custom URL'); ?>
+					</option>
 					<option value="post" selected>
 						<?php esc_attr_e('Attachment Page'); ?>
 					</option>
@@ -1555,6 +1559,8 @@ function wp_print_media_templates( $attachment ) {
 					</option>
 				</select>
 			</label>
+			<input type="text" class="link-to-custom" data-setting="linkUrl" />
+		</div>
 
 		<# if ( ! _.isUndefined( sizes ) ) { #>
 			<label class="setting">