From 5096f387d15113db3482908010f09e74b808c036 Mon Sep 17 00:00:00 2001
From: Daryl Koopersmith <koop@git.wordpress.org>
Date: Sat, 10 Nov 2012 20:36:46 +0000
Subject: [PATCH] Media: Add custom URL as an option to attachment display
 properties. see #21390, #22206.

git-svn-id: https://develop.svn.wordpress.org/trunk@22537 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-admin/js/media-upload.js     |  5 +++-
 wp-includes/css/media-views.css |  2 +-
 wp-includes/js/mce-view.js      | 37 +++++++++++++++++++----------
 wp-includes/js/media-views.js   | 29 +++++++++++++++++++++++
 wp-includes/media.php           | 42 +++++++++++++++++++--------------
 5 files changed, 82 insertions(+), 33 deletions(-)

diff --git a/wp-admin/js/media-upload.js b/wp-admin/js/media-upload.js
index 1c4b8b68cc..5cb080ad3f 100644
--- a/wp-admin/js/media-upload.js
+++ b/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 );
 
diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css
index d991eb5711..1a4bffeddf 100644
--- a/wp-includes/css/media-views.css
+++ b/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;
diff --git a/wp-includes/js/mce-view.js b/wp-includes/js/mce-view.js
index 5e838873ae..de23ebd878 100644
--- a/wp-includes/js/mce-view.js
+++ b/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.
diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js
index d1f2dd649a..79337720b5 100644
--- a/wp-includes/js/media-views.js
+++ b/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();
 		}
 	});
 
diff --git a/wp-includes/media.php b/wp-includes/media.php
index 956e2b1307..9b60296eb1 100644
--- a/wp-includes/media.php
+++ b/wp-includes/media.php
@@ -1536,25 +1536,31 @@ function wp_print_media_templates( $attachment ) {
 			</select>
 		</label>
 
-		<label class="setting">
-			<span><?php _e('Link To'); ?></span>
-			<select class="link-to"
-				data-setting="link"
-				<# if ( userSettings ) { #>
-					data-user-setting="urlbutton"
-				<# } #>>
+		<div class="setting">
+			<label>
+				<span><?php _e('Link To'); ?></span>
+				<select class="link-to"
+					data-setting="link"
+					<# if ( userSettings ) { #>
+						data-user-setting="urlbutton"
+					<# } #>>
 
-				<option value="post" selected>
-					<?php esc_attr_e('Attachment Page'); ?>
-				</option>
-				<option value="file">
-					<?php esc_attr_e('Media File'); ?>
-				</option>
-				<option value="none">
-					<?php esc_attr_e('None'); ?>
-				</option>
-			</select>
-		</label>
+					<option value="custom">
+						<?php esc_attr_e('Custom URL'); ?>
+					</option>
+					<option value="post" selected>
+						<?php esc_attr_e('Attachment Page'); ?>
+					</option>
+					<option value="file">
+						<?php esc_attr_e('Media File'); ?>
+					</option>
+					<option value="none">
+						<?php esc_attr_e('None'); ?>
+					</option>
+				</select>
+			</label>
+			<input type="text" class="link-to-custom" data-setting="linkUrl" />
+		</div>
 
 		<# if ( ! _.isUndefined( sizes ) ) { #>
 			<label class="setting">