WordPress.org
Get WordPress

Make WordPress Core

Changeset 7932


Ignore:
Timestamp:
05/14/2008 08:01:09 PM (17 years ago)
Author:
ryan
Message:

Press This: AJAX load all tabs, add tag UI, make category list scrollable.

Location:
trunk/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/css/press-this.css

    r7931 r7932  
    335335}
    336336
     337#categories-all {
     338    overflow: auto;
     339    height: 30em;   
     340}
     341
    337342#categories ul {
    338343    list-style: none;
    … …  
    347352}
    348353
     354#tagsdiv #newtag {
     355    margin-right: 5px;
     356    width: 16em;
     357}
     358
     359#tagchecklist {
     360    margin-left: 10px;
     361
     362    font-size: 12px;
     363    overflow: auto;
     364}
     365
     366#tagchecklist strong {
     367    margin-left: -8px;
     368    position: absolute;
     369}
     370
     371#tagchecklist span {
     372    margin-right: 25px;
     373    display: block;
     374    float: left;
     375    font-size: 11px;
     376    line-height: 1.8em;
     377    white-space: nowrap;
     378    cursor: default;
     379}
     380
     381#tagchecklist span a {
     382    margin: 6px 0pt 0pt -9px;
     383    cursor: pointer;
     384    width: 10px;
     385    height: 10px;
     386    display: block;
     387    float: left;
     388    text-indent: -9999px;
     389    overflow: hidden;
     390    position: absolute;
     391}
     392
     393.howto {
     394    font-style: italic;
     395    display: block;
     396}
     397
    349398/* end quickpost css */

  • trunk/wp-admin/js/post.js

    r7777 r7932  
    1919
    2020function tag_update_quickclicks() {
     21    if ( jQuery( '#tags-input' ).length == 0 )
     22        return;
    2123    var current_tags = jQuery( '#tags-input' ).val().split(',');
    2224    jQuery( '#tagchecklist' ).empty();

  • trunk/wp-admin/press-this.php

    r7931 r7932  
    55    wp_die( __( 'Cheatin’ uh?' ));
    66
    7 function quick_post() {
     7function press_it() {
    88    $quick['post_status'] = 'publish';
    99    $quick['post_category'] = $_REQUEST['post_category'];
    … …  
    5858}
    5959
    60 function tag_input() {
    61     $s = '<div id="tagdiv">
    62         <h2>' . __('Tags') . '</h2>
    63         <input type="text" name="tags_input" class="text" id="tags-input" size="30" tabindex="3" value="" /><br/>' .
    64         __('Comma separated (e.g. Wordpress, Plugins)') .
    65         '</div>';
    66    
    67     return $s;
     60function tag_div() {
     61?>
     62    <h2><?php _e('Tags') ?></h2>
     63    <div id="tagsdiv">
     64        <div class="inside">
     65            <p id="jaxtag"><label class="hidden" for="newtag"><?php _e('Tags'); ?></label><input type="text" name="tags_input" class="tags-input" id="tags-input" size="40" tabindex="3" value="<?php echo get_tags_to_edit( $post->ID ); ?>" /></p>
     66<div id="tagchecklist"></div>
     67        </div>
     68    </div>
     69<?php
     70}
     71
     72function category_div() {
     73?>
     74                <div id="categories">
     75                    <h2><?php _e('Categories') ?></h2>
     76                    <div id="categories-all">
     77                        <ul id="categorychecklist" class="list:category categorychecklist form-no-clear">
     78                        <?php wp_category_checklist() ?>
     79                        </ul>
     80                    </div>
     81                </div>
     82<?php
    6883}
    6984
    … …  
    99114}
    100115
    101 // Clean up the data being passed in
    102 $title = stripslashes($_GET['t']);
    103 
    104 if ( !empty($_GET['load']) && 'photo' == $_GET['load'] ) {
    105 ?>
    106     <script type="text/javascript">
    107     <?php if ( user_can_richedit() ) {
     116function press_this_js_init() {
     117    if ( user_can_richedit() ) {
    108118        $language = ( '' == get_locale() ) ? 'en' : strtolower( substr(get_locale(), 0, 2) );
    109119    ?>
    110 
    111120            tinyMCE.init({
    112121                mode: "textareas",
    … …  
    135144            });
    136145    <?php } ?>
    137             var last = null;
    138             function pick(img) {
    139                 if (last) last.style.backgroundColor = '#f4f4f4';
    140                 if (img) {
    141                     document.getElementById('photo_src').value = img.src;
    142                     img.style.backgroundColor = '#44f';
    143                 }
    144                 last = img;
    145                 return false;
    146             }
    147 
    148             jQuery(document).ready(function() {
    149                 var img, img_tag, aspect, w, h, skip, i, strtoappend = "";
    150                 var my_src = [<?php echo get_images_from_uri(clean_url($_GET['u'])); ?>];
    151 
    152                 for (i = 0; i < my_src.length; i++) {
    153                     img = new Image();
    154                     img.src = my_src[i];
    155                     img_attr = 'id="img' + i + '" onclick="pick(this);"';
    156                     skip = false;
    157                     if (img.width && img.height) {
    158                         if (img.width * img.height < 2500) skip = true;
    159                         aspect = img.width / img.height;
    160                         if (aspect > 1) {
    161                             // Image is wide
    162                             scale = 75 / img.width;
    163                         } else {
    164                             // Image is tall or square
    165                             scale = 75 / img.height;
    166                         }
    167                         if (scale < 1) {
    168                             w = parseInt(img.width * scale);
    169                             h = parseInt(img.height * scale);
    170                         } else {
    171                             w = img.width;
    172                             h = img.height;
    173                         }
    174                         img_attr += ' style="width: ' + w + 'px; height: ' + h + 'px;"';
    175                     }
    176                     if (!skip) {
    177                         strtoappend += '<a href="' + img.src + '" title="" class="thickbox"><img src="' + img.src + '" ' + img_attr + '/></a>'
    178                     }
    179                 }
    180                 jQuery('#img_container').html(strtoappend);
    181 
    182                 tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
    183             });
    184     </script>
    185 
    186             <form action="press-this.php?action=post" method="post" id="photo_form">
    187                 <?php wp_nonce_field('press-this') ?>
    188                 <input type="hidden" name="source" value="bookmarklet"/>
    189                 <input type="hidden" name="post_type" value="photo"/>
    190                 <div id="posting">
    191                     <h2><?php _e('Post Title') ?></h2>
    192                     <input name="post_title" id="post_title" class="text" value="<?php echo attribute_escape($title);?>"/>
    193 
    194                     <h2><?php _e('Caption') ?></h2>
    195                     <div class="editor-container">
    196                         <textarea name="content" id="photo_post_two" style="height:130px;width:100%;" class="mceEditor"><?php echo stripslashes($_GET['s']);?>
    197                         <br>&lt;a href="<?php echo clean_url($_GET['u']);?>"&gt;<?php echo $title;?>&lt;/a&gt;</textarea>
    198                     </div>
    199 
    200                     <h2><?php _e('Photo URL') ?></h2>
    201                     <input name="photo_src" id="photo_src" class="text" onkeydown="pick(0);"/>
    202 
    203                     <style type="text/css">
    204                         #img_container img {
    205                             width:          75px;
    206                             height:         75px;
    207                             padding:        2px;
    208                             background-color: #f4f4f4;
    209                             margin-right:   7px;
    210                             margin-bottom:  7px;
    211                             cursor:         pointer;
    212                         }
    213                     </style>
    214                     <div id="img_container" style="border:solid 1px #ccc; background-color:#f4f4f4; padding:5px; width:370px; margin-top:10px; overflow:auto; height:100px;">
    215                     </div>
    216 
    217                     <h2><?php _e('Link Photo to following URL') ?></h2><?php _e('(leave blank to leave the photo unlinked)') ?>
    218                     <input name="photo_link" id="photo_link" class="text" value="<?php echo attribute_escape($_GET['u']);?>"/>
    219 
    220                     <?php tag_input(); ?>
    221      
    222                     <div>         
    223                         <input type="submit" value="<?php _e('Create Photo') ?>" style="margin-top:15px;"   onclick="document.getElementById('photo_saving').style.display = '';"/>&nbsp;&nbsp;
    224 
    225                         <a href="#" onclick="if (confirm('<?php _e('Are you sure?') ?>')) { self.close(); } else { return false; }" style="color:#007BFF;"><?php _e('Cancel') ?></a>&nbsp;&nbsp;
    226                         <img src="/images/bookmarklet_loader.gif" alt="" id="photo_saving" style="width:16px; height:16px; vertical-align:-4px; display:none;"/>
    227                     </div>
    228                 </div>
    229                 <div id="categories">
    230                     <h2><?php _e('Categories') ?></h2>
    231                     <ul id="categorychecklist" class="list:category categorychecklist form-no-clear">
    232                     <?php wp_category_checklist($post_ID) ?>
    233                     </ul>
    234                 </div>
    235             </form>
    236 <?php
    237 exit;
    238 }
     146        jQuery('#tags-input').hide();
     147        tag_update_quickclicks();
     148        // add the quickadd form
     149        jQuery('#jaxtag').prepend('<span id="ajaxtag"><input type="text" name="newtag" id="newtag" class="form-input-tip" size="16" autocomplete="off" value="'+postL10n.addTag+'" /><input type="button" class="button" id="tagadd" value="' + postL10n.add + '" tabindex="3" /><input type="hidden"/><input type="hidden"/><span class="howto">'+postL10n.separate+'</span></span>');
     150        jQuery('#tagadd').click( tag_flush_to_text );
     151        jQuery('#newtag').focus(function() {
     152            if ( this.value == postL10n.addTag )
     153                jQuery(this).val( '' ).removeClass( 'form-input-tip' );
     154        });
     155        jQuery('#newtag').blur(function() {
     156            if ( this.value == '' )
     157                jQuery(this).val( postL10n.addTag ).addClass( 'form-input-tip' );
     158        });
     159
     160        // auto-save tags on post save/publish
     161        jQuery('#publish').click( tag_save_on_publish );
     162        jQuery('#save-post').click( tag_save_on_publish );
     163<?php
     164}
     165
     166// Clean up the data being passed in
     167$title = stripslashes($_GET['t']);
     168
     169if ( empty($_GET['tab']) ) {
    239170?>
    240171<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    … …  
    246177    <script type="text/javascript" src="../wp-includes/js/tinymce/tiny_mce.js"></script>
    247178       
    248     <?php wp_enqueue_script('jquery-ui-tabs'); ?>
    249     <?php wp_enqueue_script('thickbox'); ?>
    250     <?php do_action('admin_print_scripts'); do_action('admin_head'); ?>
    251     <?php wp_admin_css('css/press-this'); ?>
    252     <?php wp_admin_css( 'css/colors' ); ?>
    253 
     179<?php
     180    wp_enqueue_script('jquery-ui-tabs');
     181    wp_enqueue_script('thickbox');
     182    wp_enqueue_script('post');
     183    do_action('admin_print_scripts'); do_action('admin_head');
     184    wp_admin_css('css/press-this');
     185    wp_admin_css( 'css/colors' );
     186?>
    254187    <script type="text/javascript">
    255188    <?php if ( user_can_richedit() ) {
    … …  
    310243
    311244<?php
    312 if ( 'post' == $_REQUEST['action'] ) {
    313     check_admin_referer('press-this');
    314     $post_ID = quick_post();
    315 ?>
    316     <script>if(confirm("<?php _e('Your post is saved. Do you want to view the post?') ?>")) {window.opener.location.replace("<?php echo get_permalink($post_ID);?>");}window.close();</script>
    317     </body></html>
    318 <?php
    319     die;
    320 }
    321 
     245    if ( 'post' == $_REQUEST['action'] ) {
     246        check_admin_referer('press-this');
     247        $post_ID = press_it();
     248?>
     249        <script>if(confirm("<?php _e('Your post is saved. Do you want to view the post?') ?>")) {window.opener.location.replace("<?php echo get_permalink($post_ID);?>");}window.close();</script>
     250        </body></html>
     251<?php
     252        die;
     253    }
    322254?>
    323255    <div id="container">
    324    
    325256        <ul>
    326             <li><a href="#section-1"><span><?php _e('Text/Link') ?></span></a></li>
    327             <li><a href="<?php echo add_query_arg('load', 'photo') ?>"><span><?php _e('Photo') ?></span></a></li>
    328             <li><a href="#section-3"><span><?php _e('Quote') ?></span></a></li>
    329             <li><a href="#section-4"><span><?php _e('Video') ?></span></a></li>
     257            <li><a href="<?php echo clean_url(add_query_arg('tab', 'text')) ?>"><span><?php _e('Text/Link') ?></span></a></li>
     258            <li><a href="<?php echo clean_url(add_query_arg('tab', 'photo')) ?>"><span><?php _e('Photo') ?></span></a></li>
     259            <li><a href="<?php echo clean_url(add_query_arg('tab', 'quote')) ?>"><span><?php _e('Quote') ?></span></a></li>
     260            <li><a href="<?php echo clean_url(add_query_arg('tab', 'video')) ?>"><span><?php _e('Video') ?></span></a></li>
    330261        </ul>
    331 
    332         <!-- Regular -->
    333         <div id="section-1">
     262    </div>
     263
     264</body>
     265</html>
     266<?php
     267exit;
     268} elseif ( 'photo' == $_GET['tab'] ) {
     269?>
     270    <script type="text/javascript">
     271        <?php press_this_js_init(); ?>
     272            var last = null;
     273            function pick(img) {
     274                if (last) last.style.backgroundColor = '#f4f4f4';
     275                if (img) {
     276                    document.getElementById('photo_src').value = img.src;
     277                    img.style.backgroundColor = '#44f';
     278                }
     279                last = img;
     280                return false;
     281            }
     282            jQuery(document).ready(function() {
     283                var img, img_tag, aspect, w, h, skip, i, strtoappend = "";
     284                var my_src = [<?php echo get_images_from_uri(clean_url($_GET['u'])); ?>];
     285
     286                for (i = 0; i < my_src.length; i++) {
     287                    img = new Image();
     288                    img.src = my_src[i];
     289                    img_attr = 'id="img' + i + '" onclick="pick(this);"';
     290                    skip = false;
     291                    if (img.width && img.height) {
     292                        if (img.width * img.height < 2500) skip = true;
     293                        aspect = img.width / img.height;
     294                        if (aspect > 1) {
     295                            // Image is wide
     296                            scale = 75 / img.width;
     297                        } else {
     298                            // Image is tall or square
     299                            scale = 75 / img.height;
     300                        }
     301                        if (scale < 1) {
     302                            w = parseInt(img.width * scale);
     303                            h = parseInt(img.height * scale);
     304                        } else {
     305                            w = img.width;
     306                            h = img.height;
     307                        }
     308                        img_attr += ' style="width: ' + w + 'px; height: ' + h + 'px;"';
     309                    }
     310                    if (!skip) {
     311                        strtoappend += '<a href="' + img.src + '" title="" class="thickbox"><img src="' + img.src + '" ' + img_attr + '/></a>'
     312                    }
     313                }
     314                jQuery('#img_container').html(strtoappend);
     315
     316                tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
     317            });
     318    </script>
     319
     320            <form action="press-this.php?action=post" method="post" id="photo_form">
     321                <?php wp_nonce_field('press-this') ?>
     322                <input type="hidden" name="source" value="bookmarklet"/>
     323                <input type="hidden" name="post_type" value="photo"/>
     324                <div id="posting">
     325                    <h2><?php _e('Post Title') ?></h2>
     326                    <input name="post_title" id="post_title" class="text" value="<?php echo attribute_escape($title);?>"/>
     327
     328                    <h2><?php _e('Caption') ?></h2>
     329                    <div class="editor-container">
     330                        <textarea name="content" id="photo_post_two" style="height:130px;width:100%;" class="mceEditor"><?php echo stripslashes($_GET['s']);?>
     331                        <br>&lt;a href="<?php echo clean_url($_GET['u']);?>"&gt;<?php echo $title;?>&lt;/a&gt;</textarea>
     332                    </div>
     333
     334                    <h2><?php _e('Photo URL') ?></h2>
     335                    <input name="photo_src" id="photo_src" class="text" onkeydown="pick(0);"/>
     336
     337                    <style type="text/css">
     338                        #img_container img {
     339                            width:          75px;
     340                            height:         75px;
     341                            padding:        2px;
     342                            background-color: #f4f4f4;
     343                            margin-right:   7px;
     344                            margin-bottom:  7px;
     345                            cursor:         pointer;
     346                        }
     347                    </style>
     348                    <div id="img_container" style="border:solid 1px #ccc; background-color:#f4f4f4; padding:5px; width:370px; margin-top:10px; overflow:auto; height:100px;">
     349                    </div>
     350
     351                    <h2><?php _e('Link Photo to following URL') ?></h2><?php _e('(leave blank to leave the photo unlinked)') ?>
     352                    <input name="photo_link" id="photo_link" class="text" value="<?php echo attribute_escape($_GET['u']);?>"/>
     353
     354                    <?php tag_div(); ?>
     355     
     356                    <div>         
     357                        <input type="submit" value="<?php _e('Create Photo') ?>" style="margin-top:15px;"   onclick="document.getElementById('photo_saving').style.display = '';"/>&nbsp;&nbsp;
     358
     359                        <a href="#" onclick="if (confirm('<?php _e('Are you sure?') ?>')) { self.close(); } else { return false; }" style="color:#007BFF;"><?php _e('Cancel') ?></a>&nbsp;&nbsp;
     360                        <img src="/images/bookmarklet_loader.gif" alt="" id="photo_saving" style="width:16px; height:16px; vertical-align:-4px; display:none;"/>
     361                    </div>
     362                </div>
     363                <?php category_div() ?>
     364            </form>
     365<?php
     366exit;
     367} elseif ( 'text' == $_GET['tab'] ) {
     368?>
     369        <script type="text/javascript">
     370        <?php press_this_js_init(); ?>
     371        </script>
     372
    334373          <form action="press-this.php?action=post" method="post" id="regular_form">
    335374                <?php wp_nonce_field('press-this') ?>
    … …  
    345384                    </div>       
    346385
    347                     <?php tag_input(); ?>
     386                    <?php tag_div(); ?>
    348387       
    349388                    <div>         
    … …  
    353392                    </div>
    354393                </div>
    355                 <div id="categories">
    356                     <h2><?php _e('Categories') ?></h2>
    357                     <ul id="categorychecklist" class="list:category categorychecklist form-no-clear">
    358                     <?php wp_category_checklist($post_ID) ?>
    359                     </ul>
    360                 </div>
     394                <?php category_div() ?>
    361395             </form>
    362         </div>
    363 
    364         <!-- Quote -->
    365         <div id="section-3">
     396<?php
     397exit;
     398} elseif ( 'quote' == $_GET['tab'] ) {
     399?>
     400        <script type="text/javascript">
     401        <?php press_this_js_init(); ?>
     402        </script>
     403
    366404            <form action="press-this.php?action=post" method="post" id="quote_form">
    367405                <?php wp_nonce_field('press-this') ?>
    … …  
    382420                    </div>
    383421
    384                     <?php tag_input(); ?>
     422                    <?php tag_div(); ?>
    385423
    386424                    <div>         
    … …  
    390428                    </div>
    391429                </div>
    392                 <div id="categories">
    393                     <h2><?php _e('Categories') ?></h2>
    394                     <ul id="categorychecklist" class="list:category categorychecklist form-no-clear">
    395                     <?php wp_category_checklist($post_ID) ?>
    396                     </ul>
    397                 </div>
     430                <?php category_div() ?>
    398431            </form>
    399         </div>
    400 
    401         <!-- Video -->
    402         <div id="section-4">
     432<?php
     433exit;
     434} elseif ( 'video' == $_GET['tab'] ) {
     435?>
     436        <script type="text/javascript">
     437        <?php press_this_js_init(); ?>
     438        </script>
     439
    403440            <form action="press-this.php?action=post" method="post" id="video_form">
    404441                <?php wp_nonce_field('press-this') ?>
    … …  
    426463                    </div>
    427464
    428                     <?php tag_input(); ?>
     465                    <?php tag_div(); ?>
    429466
    430467                    <div>               
    … …  
    434471                    </div>
    435472                </div>
    436                 <div id="categories">
    437                     <h2><?php _e('Categories') ?></h2>
    438                     <ul id="categorychecklist" class="list:category categorychecklist form-no-clear">
    439                     <?php wp_category_checklist($post_ID) ?>
    440                     </ul>
    441                 </div>
     473                <?php category_div() ?>
    442474            </form>
    443         </div>
    444 
    445     </div>
    446 
    447 </body>
    448 </html>
     475<?php
     476exit;
     477}
     478?>         
Note: See TracChangeset for help on using the changeset viewer.