Changeset 7932

Show
Ignore:
Timestamp:
05/14/08 20:01:09 (6 months ago)
Author:
ryan
Message:

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

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • 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?>