Changeset 8304

Timestamp:

07/10/08 03:49:52 (5 months ago)

Author:

ryan

Message:

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

Files:

• trunk/wp-admin/css/media.css (modified) (3 diffs)
• trunk/wp-admin/gears-manifest.php (modified) (2 diffs)
• trunk/wp-admin/images/no.png (added)
• trunk/wp-admin/images/required.gif (added)
• trunk/wp-admin/images/yes.png (added)
• trunk/wp-admin/includes/media.php (modified) (14 diffs)
• trunk/wp-admin/js/gallery.js (modified) (3 diffs)
• trunk/wp-includes/script-loader.php (modified) (2 diffs)

trunk/wp-admin/css/media.css

@@ -33 +33 @@
-    display:block;
-    font-weight: bold;
+    font-size: 13px;
-    margin-bottom: 0.5em;
-    margin: 0 0 0.5em 0;
@@ -229 +230 @@
-
-.filename {
+    float: left;
-    line-height: 36px;
-    margin-left: 10px;
-
+
+
-}
-#media-upload .describe {
@@ -277 +280 @@
-    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;
+}

trunk/wp-admin/gears-manifest.php

@@ -65 +65 @@
-{
-"betaManifestVersion" : 1,
-4
+9
-"entries" : [
-<?php echo $defaults; ?>
@@ -100 +100 @@
-{ "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" },

trunk/wp-admin/includes/media.php

@@ -27 +27 @@
-
-function the_media_upload_tabs() {
+    global $redir_tab;
-    $tabs = media_upload_tabs();
-
-    if ( !empty($tabs) ) {
-        echo "<ul id='sidemenu'>\n";
-
+
+
+
-            $current = $_GET['tab'];
-        else {
@@ -155 +158 @@
-            $content = $image_meta['caption'];
-    }
-
+
-    $title = @$desc;
-
@@ -326 +329 @@
-    }
-
-
+ {
-        $errors['upload_notice'] = __('Saved.');
+        return media_upload_gallery();
+    }
-
-    return wp_iframe( 'media_upload_type_form', 'image', $errors, $id );
@@ -337 +342 @@
-        $file_array['tmp_name'] = download_url($file);
-        $desc = @$desc;
-
+
-        $id = media_handle_sideload($file_array, $post_id, $desc);
-        $src = $id;
@@ -386 +391 @@
-    }
-
-
+ {
-        $errors['upload_notice'] = __('Saved.');
+        return media_upload_gallery();
+    }
-
-    return wp_iframe( 'media_upload_type_form', 'audio', $errors, $id );
@@ -424 +431 @@
-    }
-
-
+ {
-        $errors['upload_notice'] = __('Saved.');
+        return media_upload_gallery();
+    }
-
-    return wp_iframe( 'media_upload_type_form', 'video', $errors, $id );
@@ -462 +471 @@
-    }
-
-
+ {
-        $errors['upload_notice'] = __('Saved.');
+        return media_upload_gallery();
+    }
-
-    return wp_iframe( 'media_upload_type_form', 'file', $errors, $id );
@@ -674 +685 @@
-
-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 );
@@ -721 +734 @@
-
-    $display_title = ( !empty( $title ) ) ? $title : $filename; // $title shouldn't ever be empty, but just in case
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-    $item = "
-    $type
-    $toggle_links
+    $order
-    <div class='filename new'>$display_title</div>
-    <table class='slidetoggle describe $class'>
@@ -959 +988 @@
-</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">
@@ -970 +1072 @@
-
-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");
-
-?>
-
@@ -993 +1096 @@
-<?php wp_nonce_field('media-form'); ?>
-<?php //media_upload_form( $errors ); ?>
-
+
+
+
+
+
+
-<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' ) ); ?>" />
@@ -1002 +1111 @@
-<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
@@ -1156 +1266 @@
-    <table class="describe"><tbody>
-        <tr>
+            <th valign="top" scope="row" class="label" style="width:120px;">
+                <span class="alignleft"><label for="src">' . __('Source') . '</label></span>
+                <span class="alignright"><img id="status_img" src="images/required.gif" title="required" alt="required" /></span>
+            </th>
+            <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">
-insertonly[src]">' . __('Image URL
+title">' . __('Image Title
-                <span class="alignright"><abbr title="required" class="required">*</abbr></span>
-            </th>
-
-
+
+
+
-        <tr>
-            <th valign="top" scope="row" class="label">
-
-
+
-            </th>
-
-
-
+
+
+
+
-        <tr class="align">
-label for="insertonly[align]">' . __('Alignment') . '</label
+p><label for="align">' . __('Alignment') . '</label></p
-            <td class="field">
-insertonly[align]" id="image-align-none-0" value="non
-image-align-none-0
-insertonly[align]" id="image-align-left-0" value="left
-image-align-left-0
-insertonly[align]" id="image-align-center-0" value="center
-image-align-center-0
-insertonly[align]" id="image-align-right-0" value="right
-image-align-right-0
+align" id="align-none" value="alignnone" onclick="addExtImage.align=this.valu
+align-none
+align" id="align-left" value="alignleft" onclick="addExtImage.align=this.value
+align-left
+align" id="align-center" value="aligncenter" onclick="addExtImage.align=this.value
+align-center
+align" id="align-right" value="alignright" onclick="addExtImage.align=this.value
+align-right
-            </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>
-submit" class="button" name="insertonlybutton
+button" class="button" id="go_button" style="color:#bbb;" onclick="addExtImage.insert()
-            </td>
-        </tr>

trunk/wp-admin/js/gallery.js

@@ -5 +5 @@
-            items: '.media-item',
-            placeholder: 'sorthelper',
+            axis: 'y',
+            distance: 2,
-            update: galleryReorder
-        } );
@@ -12 +14 @@
-    var galleryReorder = function(e, sort) {
-        jQuery.each(sort['element'].sortable('toArray'), function(i, id) {
-i
+(1+i)
-        });
-    }
@@ -19 +21 @@
-    gallerySortableInit();
-});
+
+jQuery(document).ready(function($){
+    $('.menu_order_input').each(function(){
+        if ( this.value == '0' ) this.value = '';
+    });
+});

trunk/wp-includes/script-loader.php

@@ -159 +159 @@
-            'edit' => __('Edit'),
-        ) );
-5
+9
-        $scripts->add( 'media-upload', '/wp-admin/js/media-upload.js', array( 'thickbox' ), '20080702' );
-        $scripts->localize( 'upload', 'uploadL10n', array(
@@ -225 +225 @@
-
-    $styles->add( 'global', '/wp-admin/css/global.css' );
-523
+709
-    $styles->add( 'widgets', '/wp-admin/css/widgets.css' );
-    $styles->add( 'dashboard', '/wp-admin/css/dashboard.css' );