Inline uploader styling from mdawaffe. fixes #3212

git-svn-id: http://svn.automattic.com/wordpress/trunk@4355 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
ryan 2006-10-07 18:31:39 +00:00
parent 5168a867e4
commit 12c6583306
5 changed files with 105 additions and 67 deletions

View File

@ -1969,27 +1969,35 @@ function the_attachment_links($id = false) {
return false;
$icon = get_attachment_icon($post->ID);
$attachment_data = get_post_meta( $id, '_wp_attachment_metadata', true );
$thumb = isset($attachment_data['thumb']);
?>
<form id="the-attachment-links">
<table>
<col />
<col class="widefat" />
<tr>
<th scope="row"><?php _e('Text linked to file') ?></th>
<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo $post->guid ?>" class="attachmentlink"><?php echo basename($post->guid) ?></a></textarea></td>
</tr>
<tr>
<th scope="row"><?php _e('Text linked to subpost') ?></th>
<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo get_attachment_link($post->ID) ?>" rel="attachment" id="<?php echo $post->ID ?>"><?php echo $post->post_title ?></a></textarea></td>
<th scope="row"><?php _e('URL') ?></th>
<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><?php echo $post->guid ?></textarea></td>
</tr>
<?php if ( $icon ) : ?>
<tr>
<th scope="row"><?php _e('Thumbnail linked to file') ?></th>
<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo $post->guid ?>" class="attachmentlink"><?php echo $icon ?></a></textarea></td>
<th scope="row"><?php $thumb ? _e('Thumbnail linked to file') : _e('Image linked to file'); ?></th>
<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo $post->guid; ?>" id="<?php echo $post->ID ?>"><?php echo $icon ?></a></textarea></td>
</tr>
<tr>
<th scope="row"><?php _e('Thumbnail linked to subpost') ?></th>
<th scope="row"><?php $thumb ? _e('Thumbnail linked to page') : _e('Image linked to file'); ?></th>
<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo get_attachment_link($post->ID) ?>" rel="attachment" id="<?php echo $post->ID ?>"><?php echo $icon ?></a></textarea></td>
</tr>
<?php else : ?>
<tr>
<th scope="row"><?php _e('Link to file') ?></th>
<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo $post->guid ?>" class="attachmentlink"><?php echo basename($post->guid); ?></a></textarea></td>
</tr>
<tr>
<th scope="row"><?php _e('Link to page') ?></th>
<td><textarea rows="1" cols="40" type="text" class="attachmentlinks" readonly="readonly"><a href="<?php echo get_attachment_link($post->ID) ?>" rel="attachment" id="<?php echo $post->ID ?>"><?php the_title(); ?></a></textarea></td>
</tr>
<?php endif; ?>
</table>
</form>

View File

@ -16,12 +16,15 @@ function wp_upload_display( $dims = false, $href = '' ) {
if ( $image_src = strstr($innerHTML, 'src="') ) {
$image_src = explode('"', $image_src);
$image_src = $image_src[1];
$thumb_src = wp_make_link_relative($image_src);
$image_rel = wp_make_link_relative($image_src);
$class = 'image';
$innerHTML = '&nbsp;' . str_replace($image_src, $thumb_src, $innerHTML);
$innerHTML = '&nbsp;' . str_replace($image_src, $image_rel, $innerHTML);
$image_base = str_replace($image_rel, '', $image_src);
}
$src = wp_make_link_relative( get_the_guid() );
$src_base = get_the_guid();
$src = wp_make_link_relative( $src_base );
$src_base = str_replace($src, '', $src_base);
$r = '';
@ -33,9 +36,13 @@ function wp_upload_display( $dims = false, $href = '' ) {
$r .= "</a>\n";
$r .= "\n\t\t<div class='upload-file-data'>\n\t\t\t<p>\n";
$r .= "\t\t\t\t<input type='hidden' name='attachment-url-$id' id='attachment-url-$id' value='$src' />\n";
$r .= "\t\t\t\t<input type='hidden' name='attachment-url-base-$id' id='attachment-url-base-$id' value='$src_base' />\n";
if ( $image_src )
$r .= "\t\t\t\t<input type='hidden' name='attachment-thumb-url-$id' id='attachment-thumb-url-$id' value='$thumb_src' />\n";
if ( isset($attachment_data['thumb']) ) {
$r .= "\t\t\t\t<input type='hidden' name='attachment-thumb-url-$id' id='attachment-thumb-url-$id' value='$image_rel' />\n";
$r .= "\t\t\t\t<input type='hidden' name='attachment-thumb-url-base-$id' id='attachment-thumb-url-base-$id' value='$image_base' />\n";
} elseif ( $image_rel )
$r .= "\t\t\t\t<input type='hidden' name='attachment-is-image-$id' id='attachment-is-image-$id' value='1' />\n";
if ( isset($width) ) {
$r .= "\t\t\t\t<input type='hidden' name='attachment-width-$id' id='attachment-width-$id' value='$width' />\n";
$r .= "\t\t\t\t<input type='hidden' name='attachment-height-$id' id='attachment-height-$id' value='$height' />\n";
@ -48,16 +55,16 @@ function wp_upload_display( $dims = false, $href = '' ) {
}
function wp_upload_view() {
global $style, $post_id;
global $style, $post_id, $style;
$id = get_the_ID();
$attachment_data = get_post_meta( $id, '_wp_attachment_metadata', true );
?>
<div id="upload-file">
<div id="file-title">
<h2><?php if ( !isset($attachment_data['width']) )
<h2><?php if ( !isset($attachment_data['width']) && 'inline' != $style )
echo "<a href='" . get_the_guid() . "' title='" . __('Direct link to file') . "'>";
the_title();
if ( !isset($attachment_data['width']) )
if ( !isset($attachment_data['width']) && 'inline' != $style )
echo '</a>';
?></h2>
<span><?php
@ -71,15 +78,15 @@ function wp_upload_view() {
</div>
<div id="upload-file-view" class="alignleft">
<?php if ( isset($attachment_data['width']) )
<?php if ( isset($attachment_data['width']) && 'inline' != $style )
echo "<a href='" . get_the_guid() . "' title='" . __('Direct link to file') . "'>";
echo wp_upload_display( array(171, 128) );
if ( isset($attachment_data['width']) )
if ( isset($attachment_data['width']) && 'inline' != $style )
echo '</a>'; ?>
</div>
<?php the_attachment_links( $id ); ?>
</div>
<?php
<?php echo "<form action='' id='browse-form'><input type='hidden' id='nonce-value' value='" . wp_create_nonce( 'inlineuploading' ) . "' /></form>\n";
}
function wp_upload_form() {
@ -94,10 +101,10 @@ function wp_upload_form() {
$attachment_data = get_post_meta( $id, '_wp_attachment_metadata', true );
?>
<div id="file-title">
<h2><?php if ( !isset($attachment_data['width']) )
<h2><?php if ( !isset($attachment_data['width']) && 'inline' != $style )
echo "<a href='" . get_the_guid() . "' title='" . __('Direct link to file') . "'>";
the_title();
if ( !isset($attachment_data['width']) )
if ( !isset($attachment_data['width']) && 'inline' != $style )
echo '</a>';
?></h2>
<span><?php
@ -111,31 +118,38 @@ function wp_upload_form() {
</div>
<div id="upload-file-view" class="alignleft">
<?php if ( isset($attachment_data['width']) )
<?php if ( isset($attachment_data['width']) && 'inline' != $style )
echo "<a href='" . get_the_guid() . "' title='" . __('Direct link to file') . "'>";
echo wp_upload_display( array(171, 128) );
if ( isset($attachment_data['width']) )
if ( isset($attachment_data['width']) && 'inline' != $style )
echo '</a>'; ?>
</div>
<?php endif; ?>
<table>
<?php if ( !$id ): ?>
<table><col /><col class="widefat" />
<?php if ( $id ): ?>
<tr>
<th scope="row"><label for="upload"><?php _e('File:'); ?></label></th>
<th scope="row"><label for="url"><?php _e('URL'); ?></label></th>
<td><input type="text" id="url" class="readonly" value="<?php the_guid(); ?>" readonly="readonly" /></td>
</tr>
<?php else : ?>
<tr>
<th scope="row"><label for="upload"><?php _e('File'); ?></label></th>
<td><input type="file" id="upload" name="image" /></td>
</tr>
<?php endif; ?>
<tr>
<th scope="row"><label for="post_title"><?php _e('Title:'); ?></label></th>
<th scope="row"><label for="post_title"><?php _e('Title'); ?></label></th>
<td><input type="text" id="post_title" name="post_title" value="<?php echo $attachment->post_title; ?>" /></td>
</tr>
<tr>
<th scope="row"><label for="post_content"><?php _e('Description:'); ?></label></th>
<th scope="row"><label for="post_content"><?php _e('Description'); ?></label></th>
<td><textarea name="post_content" id="post_content"><?php echo $attachment->post_content; ?></textarea></td>
</tr>
<tr id="buttons">
<th></th>
<td>
<tr id="buttons" class="submit">
<td colspan='2'>
<?php if ( $id ) : ?>
<input type="submit" name="delete" id="delete" class="delete alignleft" value="<?php _e('Delete File'); ?>" />
<?php endif; ?>
<input type="hidden" name="from_tab" value="<?php echo $tab; ?>" />
<input type="hidden" name="action" value="<?php echo $id ? 'save' : 'upload'; ?>" />
<?php if ( $post_id ) : ?>
@ -146,9 +160,6 @@ function wp_upload_form() {
<?php wp_nonce_field( 'inlineuploading' ); ?>
<div class="submit">
<input type="submit" value="<?php $id ? _e('Save') : _e('Upload'); ?> &raquo;" />
<?php if ( $id ) : ?>
<input type="submit" name="delete" class="delete" value="<?php _e('Delete'); ?>" />
<?php endif; ?>
</div>
</td>
</tr>
@ -352,7 +363,7 @@ function wp_upload_admin_head() {
echo "<link rel='stylesheet' href='" . get_option('siteurl') . '/wp-admin/upload-rtl.css?version=' . get_bloginfo('version') . "' type='text/css' />\n";
if ( 'inline' == @$_GET['style'] ) {
echo "<style type='text/css'>\n";
echo "\tbody { height: 14em; overflow: hidden; }\n";
echo "\tbody { height: 15em; overflow: hidden; }\n";
echo "\t#upload-content { overflow-y: auto; }\n";
echo "\t#upload-file { position: absolute; }\n";
echo "</style>";

View File

@ -37,11 +37,18 @@ addLoadEvent( function() {
if ( id == this.currentImage.ID )
return;
var thumbEl = $('attachment-thumb-url-' + id);
if ( thumbEl )
this.currentImage.isImage = true;
if ( thumbEl ) {
this.currentImage.thumb = ( 0 == id ? '' : thumbEl.value );
else
this.currentImage.thumbBase = ( 0 == id ? '' : $('attachment-thumb-url-base-' + id).value );
} else {
this.currentImage.thumb = false;
var isImageEl = $('attachment-is-image-' + id);
if ( !isImageEl )
this.currentImage.isImage = false;
}
this.currentImage.src = ( 0 == id ? '' : $('attachment-url-' + id).value );
this.currentImage.srcBase = ( 0 == id ? '' : $('attachment-url-base-' + id).value );
this.currentImage.page = ( 0 == id ? '' : $('attachment-page-url-' + id).value );
this.currentImage.title = ( 0 == id ? '' : $('attachment-title-' + id).value );
this.currentImage.description = ( 0 == id ? '' : $('attachment-description-' + id).value );
@ -65,13 +72,13 @@ addLoadEvent( function() {
var params = $H(this.params);
params.ID = '';
params.action = '';
h += "<a href='" + this.urlData[0] + '?' + params.toQueryString() + "' title='Browse your files' class='back'>&laquo; Back</a>";
h += "<a href='" + this.urlData[0] + '?' + params.toQueryString() + "' title='Browse your files' class='back'>&laquo; Back</a>";
} else {
h += "<a href='#' onclick='theFileList.cancelView()' title='Browse your files' class='back'>&laquo; Back</a>";
}
h += "<div id='file-title'>"
if ( !this.currentImage.thumb )
h += "<h2><a href='" + this.currentImage.src + "' title='Direct link to file'>" + this.currentImage.title + "</a></h2>";
if ( !this.currentImage.isImage )
h += "<h2><a href='" + this.currentImage.src + "' onclick='return false;' title='Direct link to file'>" + this.currentImage.title + "</a></h2>";
else
h += "<h2>" + this.currentImage.title + "</h2>";
h += " &#8212; <span>";
@ -79,9 +86,11 @@ addLoadEvent( function() {
h += "</span>";
h += '</div>'
h += "<div id='upload-file-view' class='alignleft'>";
if ( this.currentImage.thumb )
h += "<a href='" + this.currentImage.src + "' title='Direct link to file'><img src='" + this.currentImage.thumb + "' alt='" + this.currentImage.title + "' width='" + this.currentImage.width + "' height='" + this.currentImage.height + "' /></a>";
else
if ( this.currentImage.isImage ) {
h += "<a href='" + this.currentImage.src + "' onclick='return false;' title='Direct link to file'>";
h += "<img src='" + ( this.currentImage.thumb ? this.currentImage.thumb : this.currentImage.src ) + "' alt='" + this.currentImage.title + "' width='" + this.currentImage.width + "' height='" + this.currentImage.height + "' />";
h += "</a>";
} else
h += '&nbsp;';
h += "</div>";
@ -119,6 +128,7 @@ addLoadEvent( function() {
var action = 'upload.php?style=' + this.style + '&amp;tab=upload';
if ( this.postID )
action += '&amp;post_id=' + this.postID;
h += "<form id='upload-file' method='post' action='" + action + "'>";
if ( this.ID ) {
var params = $H(this.params);
@ -129,8 +139,8 @@ addLoadEvent( function() {
h += "<a href='#' onclick='theFileList.cancelView()' title='Browse your files' class='back'>&laquo; Back</a>";
}
h += "<div id='file-title'>"
if ( !this.currentImage.thumb )
h += "<h2><a href='" + this.currentImage.src + "' title='Direct link to file'>" + this.currentImage.title + "</a></h2>";
if ( !this.currentImage.isImage )
h += "<h2><a href='" + this.currentImage.src + "' onclick='return false;' title='Direct link to file'>" + this.currentImage.title + "</a></h2>";
else
h += "<h2>" + this.currentImage.title + "</h2>";
h += " &#8212; <span>";
@ -138,26 +148,31 @@ addLoadEvent( function() {
h += "</span>";
h += '</div>'
h += "<div id='upload-file-view' class='alignleft'>";
if ( this.currentImage.thumb )
h += "<a href='" + this.currentImage.src + "' title='Direct link to file'><img src='" + this.currentImage.thumb + "' alt='" + this.currentImage.title + "' width='" + this.currentImage.width + "' height='" + this.currentImage.height + "' /></a>";
else
if ( this.currentImage.isImage ) {
h += "<a href='" + this.currentImage.src + "' onclick='return false;' title='Direct link to file'>";
h += "<img src='" + ( this.currentImage.thumb ? this.currentImage.thumb : this.currentImage.src ) + "' alt='" + this.currentImage.title + "' width='" + this.currentImage.width + "' height='" + this.currentImage.height + "' />";
h += "</a>";
} else
h += '&nbsp;';
h += "</div>";
h += "<table><tr>"
h += "<th scope='row'><label for='post_title'>Title:</label></th>";
h += "<table><col /><col class='widefat' /><tr>"
h += "<th scope='row'><label for='url'>URL</label></th>";
h += "<td><input type='text' id='url' class='readonly' value='" + this.currentImage.src + "' readonly='readonly' /></td>";
h += "</tr><tr>";
h += "<th scope='row'><label for='post_title'>Title</label></th>";
h += "<td><input type='text' id='post_title' name='post_title' value='" + this.currentImage.title + "' /></td>";
h += "</tr><tr>";
h += "<th scope='row'><label for='post_content'>Description:</label></th>";
h += "<th scope='row'><label for='post_content'>Description</label></th>";
h += "<td><textarea name='post_content' id='post_content'>" + this.currentImage.description + "</textarea></td>";
h += "</tr><tr id='buttons'><th><input type='button' name='delete' class='delete button' value='Delete' onclick='theFileList.deleteFile(" + id + ");' /></th><td>";
h += "</tr><tr id='buttons' class='submit'><td colspan='2'><input type='button' id='delete' name='delete' class='delete alignleft' value='Delete File' onclick='theFileList.deleteFile(" + id + ");' />";
h += "<input type='hidden' name='from_tab' value='" + this.tab + "' />";
h += "<input type='hidden' name='action' id='action-value' value='save' />";
h += "<input type='hidden' name='ID' value='" + id + "' />";
h += "<input type='hidden' name='_wpnonce' value='" + this.nonce + "' />";
h += "<div class='submit'><input type='submit' value='Save &raquo;' />";
h += "</div></td></tr></table></form>";
h += "<div class='submit'><input type='submit' value='Save &raquo;' /></div>";
h += "</td></tr></table></form>";
new Insertion.Top('upload-content', h);
if (e) Event.stop(e);
@ -202,11 +217,13 @@ addLoadEvent( function() {
displayEl = $A(document.forms.uploadoptions.elements.display).detect( function(i) { return i.checked; } )
if ( displayEl )
display = displayEl.value;
else if ( this.currentImage.isImage )
display = 'full';
if ( 'none' != link )
h += "<a href='" + ( 'file' == link ? this.currentImage.src : this.currentImage.page ) + "' title='" + this.currentImage.title + "'>";
h += "<a href='" + ( 'file' == link ? ( this.currentImage.srcBase + this.currentImage.src ) : ( this.currentImage.page + "' rel='attachment" ) ) + "' title='" + this.currentImage.title + "'>";
if ( display )
h += "<img src='" + ( 'thumb' == display ? this.currentImage.thumb : this.currentImage.src ) + "' alt='" + this.currentImage.title + "' />";
h += "<img src='" + ( 'thumb' == display ? ( this.currentImage.thumbBase + this.currentImage.thumb ) : ( this.currentImage.srcBase + this.currentImage.src ) ) + "' alt='" + this.currentImage.title + "' />";
else
h += this.currentImage.title;
if ( 'none' != link )
@ -220,7 +237,8 @@ addLoadEvent( function() {
win.tinyMCE.execCommand('mceInsertContent', false, h);
else
win.edInsertContent(win.edCanvas, h);
this.cancelView();
if ( !this.ID )
this.cancelView();
return false;
},

View File

@ -57,17 +57,18 @@ body { background: #f9fcfe; }
margin: 0 auto;
top: 0;
left: 0;
width: 45em;
width: 95%;
height: 100%;
background: #f9fcfe;
}
#upload-file th {
#uupload-file th {
width: 8em;
}
form#upload-file input, form#upload-file textarea, div#upload-content.upload table { width: 100%; }
form#upload-file div.submit input { width: auto; }
form#upload-file .submit input { width: auto; }
#upload-file-view { padding: 0 0 0 75px; }
@ -134,8 +135,6 @@ h2 {
#upload-files a.file-link img { vertical-align: middle; }
#the-attachment-links { float: right; }
#the-attachment-links textarea {
font-size: 10px;
overflow: hidden;
@ -172,4 +171,6 @@ tr, td, th {
#uploadoptions table {
width: 300px;
}
}
input.readonly { background-color: #ddd; }

View File

@ -206,7 +206,7 @@ textarea, input, select {
border-style: none;
padding: 0px;
margin-bottom: 16px;
height: 16em;
height: 17em;
width: 100%;
/* overflow-y: hidden;*/
}
@ -1318,4 +1318,4 @@ a.page-numbers:hover {
.page-numbers.current {
border: 1px solid #999;
font-weight: bold;
}
}