Media Uploader improvements from azaozz: Improves the insert external image dialog, redirects to the gallery tab after "Save all changes" is clicked, shows the "Order" fields on the closed tabs, where they are easier to use, and only in the Gallery. see #7274

git-svn-id: https://develop.svn.wordpress.org/trunk@8304 602fd350-edb4-49c9-b593-d223f7449a82

wp-admin/css/media.css

@@ -32,6 +32,7 @@ form {
 .media-upload-form label, .media-upload-form legend {
 	display:block;
 	font-weight: bold;
+	font-size: 13px;
 	margin-bottom: 0.5em;
 	margin: 0 0 0.5em 0;
 }
@@ -228,9 +229,11 @@ abbr.required {
 }
 
 .filename {
+	float: left;
 	line-height: 36px;
 	margin-left: 10px;
-	float: left;
+	overflow: hidden;
+	max-width: 430px;
 }
 #media-upload .describe {
 	border-top-width: 1px;
@@ -276,3 +279,37 @@ abbr.required {
 	display: none;
 	margin: 5px 0;
 }
+
+.menu_order {
+	float: right;
+	font-size: 11px;
+	margin: 10px 10px 0;
+}
+
+.menu_order_input {
+	border: 1px solid #DDDDDD;
+	font-size: 10px;
+	padding: 1px;
+	width: 23px;
+}
+
+.ui-sortable-helper {
+	background-color: #fff;
+	border: 1px solid #aaa;
+	opacity: 0.6;
+	filter: alpha(opacity=60);
+}
+
+#media-upload th.order-head {
+	 width: 25%;
+	 text-align: center;
+}
+
+#media-upload .widefat {
+	width: 626px;
+	border-style: solid solid none;
+}
+
+.sorthelper {
+	z-index: -1;
+}

wp-admin/gears-manifest.php

@@ -64,7 +64,7 @@ header( 'Content-Type: application/x-javascript; charset=UTF-8' );
 ?>
 {
 "betaManifestVersion" : 1,
-"version" : "<?php echo $man_version; ?>_20080704",
+"version" : "<?php echo $man_version; ?>_20080709",
 "entries" : [
 <?php echo $defaults; ?>
 
@@ -99,6 +99,9 @@ header( 'Content-Type: application/x-javascript; charset=UTF-8' );
 { "url" : "images/xit.gif" },
 { "url" : "images/loading-publish.gif" },
 { "url" : "images/loading.gif" },
+{ "url" : "images/required.gif" },
+{ "url" : "images/no.png" },
+{ "url" : "images/yes.png" },
 
 { "url" : "../wp-includes/images/crystal/archive.png" },
 { "url" : "../wp-includes/images/crystal/audio.png" },

wp-admin/includes/media.php

@@ -26,11 +26,14 @@ function update_gallery_tab($tabs) {
 add_filter('media_upload_tabs', 'update_gallery_tab');
 
 function the_media_upload_tabs() {
+	global $redir_tab;
 	$tabs = media_upload_tabs();
 
 	if ( !empty($tabs) ) {
 		echo "<ul id='sidemenu'>\n";
-		if ( isset($_GET['tab']) && array_key_exists($_GET['tab'], $tabs) )
+		if ( isset($redir_tab) && array_key_exists($redir_tab, $tabs) )
+			$current = $redir_tab;
+		elseif ( isset($_GET['tab']) && array_key_exists($_GET['tab'], $tabs) )
 			$current = $_GET['tab'];
 		else {
 			$keys = array_keys($tabs);
@@ -325,8 +328,10 @@ function media_upload_image() {
 			$errors = $return;
 	}
 
-	if ( isset($_POST['save']) )
+	if ( isset($_POST['save']) ) {
 		$errors['upload_notice'] = __('Saved.');
+		return media_upload_gallery();
+	}
 
 	return wp_iframe( 'media_upload_type_form', 'image', $errors, $id );
 }
@@ -385,8 +390,10 @@ function media_upload_audio() {
 			$errors = $return;
 	}
 
-	if ( isset($_POST['save']) )
+	if ( isset($_POST['save']) ) {
 		$errors['upload_notice'] = __('Saved.');
+		return media_upload_gallery();
+	}
 
 	return wp_iframe( 'media_upload_type_form', 'audio', $errors, $id );
 }
@@ -423,8 +430,10 @@ function media_upload_video() {
 			$errors = $return;
 	}
 
-	if ( isset($_POST['save']) )
+	if ( isset($_POST['save']) ) {
 		$errors['upload_notice'] = __('Saved.');
+		return media_upload_gallery();
+	}
 
 	return wp_iframe( 'media_upload_type_form', 'video', $errors, $id );
 }
@@ -461,8 +470,10 @@ function media_upload_file() {
 			$errors = $return;
 	}
 
-	if ( isset($_POST['save']) )
+	if ( isset($_POST['save']) ) {
 		$errors['upload_notice'] = __('Saved.');
+		return media_upload_gallery();
+	}
 
 	return wp_iframe( 'media_upload_type_form', 'file', $errors, $id );
 }
@@ -673,6 +684,8 @@ function get_media_items( $post_id, $errors ) {
 }
 
 function get_media_item( $attachment_id, $args = null ) {
+	global $redir_tab;
+
 	$default_args = array( 'errors' => null, 'send' => true, 'delete' => true, 'toggle' => true );
 	$args = wp_parse_args( $args, $default_args );
 	extract( $args, EXTR_SKIP );
@@ -720,11 +733,27 @@ function get_media_item( $attachment_id, $args = null ) {
 	}
 
 	$display_title = ( !empty( $title ) ) ? $title : $filename; // $title shouldn't ever be empty, but just in case
-	$display_title = wp_html_excerpt($display_title, 100);
+	$display_title = wp_html_excerpt($display_title, 60);
+
+	$gallery = ( (isset($_REQUEST['tab']) && 'gallery' == $_REQUEST['tab']) || (isset($redir_tab) && 'gallery' == $redir_tab) ) ? true : false;
+	$order = '';
+
+	foreach ( $form_fields as $key => $val ) {
+		if ( 'menu_order' == $key ) {
+			if ( $gallery )
+				$order = '<div class="menu_order"> <input class="menu_order_input" type="text" id="attachments['.$attachment_id.'][menu_order]" name="attachments['.$attachment_id.'][menu_order]" value="'.$val['value'].'" /></div>';
+			else
+				$order = '<input type="hidden" name="attachments['.$attachment_id.'][menu_order]" value="'.$val['value'].'" />';
+
+			unset($form_fields['menu_order']);
+			break;
+		}
+	}
 
 	$item = "
 	$type
 	$toggle_links
+	$order
 	<div class='filename new'>$display_title</div>
 	<table class='slidetoggle describe $class'>
 		<thead class='media-item-info'>
@@ -958,6 +987,79 @@ jQuery(function($){
 <h3><?php _e('From URL'); ?></h3>
 </div>
 
+<script type="text/javascript">
+//<![CDATA[
+var addExtImage = {
+
+	width : '',
+	height : '',
+	align : 'alignnone',
+
+	insert : function() {
+		var t = this, html, f = document.forms[0], cls, title = '', alt = '', caption = null;
+
+		if ( '' == f.src.value || '' == t.width ) return false;
+
+		if ( f.title.value ) {
+			title = f.title.value.replace(/['"<>]+/g, '');
+			title = ' title="'+title+'"';
+		}
+
+		if ( f.alt.value ) {
+			alt = f.alt.value.replace(/['"<>]+/g, '');
+			caption = f.alt.value.replace(/'/g, '&#39;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+		}
+
+		cls = caption ? '' : ' class="'+t.align+'"';
+
+		html = '<img alt="'+alt+'" src="'+f.src.value+'"'+title+cls+' width="'+t.width+'" height="'+t.height+'" />';
+
+		if ( f.url.value )
+			html = '<a href="'+f.url.value+'">'+html+'</a>';
+
+		if ( caption )
+			html = '[wp_caption id="" align="'+t.align+'" width="'+t.width+'" caption="'+caption+'"]'+html+'[/wp_caption]';
+
+		var win = window.dialogArguments || opener || parent || top;
+		win.send_to_editor(html);
+	},
+
+	resetImageData : function() {
+		var t = addExtImage;
+
+		t.width = t.height = '';
+		document.getElementById('go_button').style.color = '#bbb';
+		if ( ! document.forms[0].src.value )
+			document.getElementById('status_img').src = 'images/required.gif';
+		else document.getElementById('status_img').src = 'images/no.png';
+	},
+
+	updateImageData : function() {
+		var t = addExtImage;
+
+		t.width = t.preloadImg.width;
+		t.height = t.preloadImg.height;
+		document.getElementById('go_button').style.color = '#333';
+		document.getElementById('status_img').src = 'images/yes.png';
+	},
+
+	getImageData : function() {
+		var t = addExtImage, src = document.forms[0].src.value;
+
+		if ( ! src ) {
+			t.resetImageData();
+			return false;
+		}
+		document.getElementById('status_img').src = 'images/loading.gif';
+		t.preloadImg = new Image();
+		t.preloadImg.onload = t.updateImageData;
+		t.preloadImg.onerror = t.resetImageData;
+		t.preloadImg.src = src;
+	}
+}
+//]]>
+</script>
+
 <div id="media-items">
 <div class="media-item media-blank">
 <?php echo call_user_func($callback); ?>
@@ -969,12 +1071,13 @@ jQuery(function($){
 }
 
 function media_upload_gallery_form($errors) {
+	global $redir_tab;
+
+	$redir_tab = 'gallery';
 	media_upload_header();
 
 	$post_id = intval($_REQUEST['post_id']);
-
 	$form_action_url = admin_url("media-upload.php?type={$GLOBALS['type']}&tab=gallery&post_id=$post_id");
-
 ?>
 
 <script type="text/javascript">
@@ -992,15 +1095,22 @@ jQuery(function($){
 <form enctype="multipart/form-data" method="post" action="<?php echo attribute_escape($form_action_url); ?>" class="media-upload-form validate" id="gallery-form">
 <?php wp_nonce_field('media-form'); ?>
 <?php //media_upload_form( $errors ); ?>
-
+<table class="widefat">
+<thead><tr>
+<th><?php _e('Media'); ?></th>
+<th class="order-head"><?php _e('Order'); ?></th>
+</tr></thead>
+</table>
 <div id="media-items">
 <?php echo get_media_items($post_id, $errors); ?>
 </div>
+<p class="ml-submit">
 <input type="submit" class="button savebutton" name="save" value="<?php echo attribute_escape( __( 'Save all changes' ) ); ?>" />
 <input type="submit" class="button insert-gallery" name="insert-gallery" value="<?php echo attribute_escape( __( 'Insert gallery into post' ) ); ?>" />
 <input type="hidden" name="post_id" id="post_id" value="<?php echo (int) $post_id; ?>" />
 <input type="hidden" name="type" value="<?php echo attribute_escape( $GLOBALS['type'] ); ?>" />
 <input type="hidden" name="tab" value="<?php echo attribute_escape( $GLOBALS['tab'] ); ?>" />
+</p>
 </form>
 <?php
 }
@@ -1155,37 +1265,58 @@ function type_form_image() {
 	return '
 	<table class="describe"><tbody>
 		<tr>
-			<th valign="top" scope="row" class="label">
+			<th valign="top" scope="row" class="label" style="width:120px;">
-				<span class="alignleft"><label for="insertonly[src]">' . __('Image URL') . '</label></span>
+				<span class="alignleft"><label for="src">' . __('Source') . '</label></span>
-				<span class="alignright"><abbr title="required" class="required">*</abbr></span>
+				<span class="alignright"><img id="status_img" src="images/required.gif" title="required" alt="required" /></span>
 			</th>
-			<td class="field"><input id="insertonly[src]" name="insertonly[src]" value="" type="text" aria-required="true"></td>
+			<td class="field"><input id="src" name="src" value="" type="text" aria-required="true" onblur="addExtImage.getImageData()"></td>
 		</tr>
+
 		<tr>
 			<th valign="top" scope="row" class="label">
-				<span class="alignleft"><label for="insertonly[alt]">' . __('Description') . '</label></span>
+				<span class="alignleft"><label for="title">' . __('Image Title') . '</label></span>
 				<span class="alignright"><abbr title="required" class="required">*</abbr></span>
 			</th>
-			<td class="field"><input id="insertonly[alt]" name="insertonly[alt]" value="" type="text" aria-required="true"></td>
+			<td class="field"><p><input id="title" name="title" value="" type="text" aria-required="true" /></p></td>
 		</tr>
-		<tr><td></td><td class="help">' . __('Alternate text, e.g. "The Mona Lisa"') . '</td></tr>
+
+		<tr>
+			<th valign="top" scope="row" class="label">
+				<span class="alignleft"><label for="alt">' . __('Image Caption') . '</label></span>
+			</th>
+			<td class="field"><input id="alt" name="alt" value="" type="text" aria-required="true" />
+			<p class="help">' . __('Also used as alternate text for the image') . '</p></td>
+		</tr>
+
 		<tr class="align">
-			<th valign="top" scope="row" class="label"><label for="insertonly[align]">' . __('Alignment') . '</label></th>
+			<th valign="top" scope="row" class="label"><p><label for="align">' . __('Alignment') . '</label></p></th>
 			<td class="field">
-				<input name="insertonly[align]" id="image-align-none-0" value="none" type="radio" checked="checked" />
+				<input name="align" id="align-none" value="alignnone" onclick="addExtImage.align=this.value" type="radio" checked="checked" />
-				<label for="image-align-none-0" class="align image-align-none-label">' . __('None') . '</label>
+				<label for="align-none" class="align image-align-none-label">' . __('None') . '</label>
-				<input name="insertonly[align]" id="image-align-left-0" value="left" type="radio" />
+				<input name="align" id="align-left" value="alignleft" onclick="addExtImage.align=this.value" type="radio" />
-				<label for="image-align-left-0" class="align image-align-left-label">' . __('Left') . '</label>
+				<label for="align-left" class="align image-align-left-label">' . __('Left') . '</label>
-				<input name="insertonly[align]" id="image-align-center-0" value="center" type="radio" />
+				<input name="align" id="align-center" value="aligncenter" onclick="addExtImage.align=this.value" type="radio" />
-				<label for="image-align-center-0" class="align image-align-center-label">' . __('Center') . '</label>
+				<label for="align-center" class="align image-align-center-label">' . __('Center') . '</label>
-				<input name="insertonly[align]" id="image-align-right-0" value="right" type="radio" />
+				<input name="align" id="align-right" value="alignright" onclick="addExtImage.align=this.value" type="radio" />
-				<label for="image-align-right-0" class="align image-align-right-label">' . __('Right') . '</label>
+				<label for="align-right" class="align image-align-right-label">' . __('Right') . '</label>
 			</td>
 		</tr>
+
+		<tr>
+			<th valign="top" scope="row" class="label">
+				<span class="alignleft"><label for="url">' . __('Link URL') . '</label></span>
+			</th>
+			<td class="field"><input id="url" name="url" value="" type="text" /><br />
+
+			<button type="button" class="button" value="" onclick="document.forms[0].url.value=null">' . __('None') . '</button>
+			<button type="button" class="button" value="" onclick="document.forms[0].url.value=document.forms[0].src.value">' . __('Link to image') . '</button>
+			<p class="help">' . __('Enter a link URL or click above for presets.') . '</p></td>
+		</tr>
+
 		<tr>
 			<td></td>
 			<td>
-				<input type="submit" class="button" name="insertonlybutton" value="' . attribute_escape(__('Insert into Post')) . '" />
+				<input type="button" class="button" id="go_button" style="color:#bbb;" onclick="addExtImage.insert()" value="' . attribute_escape(__('Insert into Post')) . '" />
 			</td>
 		</tr>
 	</tbody></table>

wp-admin/js/gallery.js

@@ -4,6 +4,8 @@ jQuery(function($) {
 		gallerySortable = $('#media-items').sortable( {
 			items: '.media-item',
 			placeholder: 'sorthelper',
+			axis: 'y',
+			distance: 2,
 			update: galleryReorder
 		} );
 	}
@@ -11,10 +13,16 @@ jQuery(function($) {
 	// When an update has occurred, adjust the order for each item
 	var galleryReorder = function(e, sort) {
 		jQuery.each(sort['element'].sortable('toArray'), function(i, id) {
-			jQuery('#' + id + ' .menu_order input')[0].value = i;
+			jQuery('#' + id + ' .menu_order input')[0].value = (1+i);
 		});
 	}
 
 	// initialize sortable
 	gallerySortableInit();
 });
+
+jQuery(document).ready(function($){
+	$('.menu_order_input').each(function(){
+		if ( this.value == '0' ) this.value = '';
+	});
+});

wp-includes/script-loader.php

@@ -158,7 +158,7 @@ function wp_default_scripts( &$scripts ) {
 			'cancel' => __('Cancel'),
 			'edit' => __('Edit'),
 		) );
-		$scripts->add( 'admin-gallery', '/wp-admin/js/gallery.js', array( 'jquery-ui-sortable' ), '20080705' );
+		$scripts->add( 'admin-gallery', '/wp-admin/js/gallery.js', array( 'jquery-ui-sortable' ), '20080709' );
 		$scripts->add( 'media-upload', '/wp-admin/js/media-upload.js', array( 'thickbox' ), '20080702' );
 		$scripts->localize( 'upload', 'uploadL10n', array(
 			'browseTitle' => attribute_escape(__('Browse your files')),
@@ -224,7 +224,7 @@ function wp_default_styles( &$styles ) {
 	$styles->add_data( 'colors-fresh', 'rtl', true );
 
 	$styles->add( 'global', '/wp-admin/css/global.css' );
-	$styles->add( 'media', '/wp-admin/css/media.css', array(), '20080523' );
+	$styles->add( 'media', '/wp-admin/css/media.css', array(), '20080709' );
 	$styles->add( 'widgets', '/wp-admin/css/widgets.css' );
 	$styles->add( 'dashboard', '/wp-admin/css/dashboard.css' );
 	$styles->add( 'install', '/wp-admin/css/install.css', array(), '20080708' );