Skip to content

Instantly share code, notes, and snippets.

@thefuxia
Created October 9, 2013 11:19
Show Gist options
  • Save thefuxia/6899684 to your computer and use it in GitHub Desktop.
Save thefuxia/6899684 to your computer and use it in GitHub Desktop.
T5 Post Preview Metabox See the post preview on the edit page
<?php
/**
* Plugin Name: T5 Post Preview Metabox
* Description: See the post preview on the edit page
* Plugin URI:
* Version: 2013.02.04
* Author: Thomas Scholz
* Author URI: http://toscho.de
* Licence: MIT
* License URI: http://opensource.org/licenses/MIT
*/
foreach ( get_post_types( array ( 'show_ui' => TRUE ) ) as $t5_pt )
add_action( "add_meta_boxes_$t5_pt", 't5_add_preview_metabox' );
unset( $t5_pt );
/**
* Register metabox and print script actions.
*
* @wp-hook add_meta_boxes
* @return void
*/
function t5_add_preview_metabox()
{
add_meta_box( 't5_preview_post', 'Preview', 't5_render_preview_metabox' );
add_action( 'admin_footer-post-new.php', 't5_print_preview_script' );
add_action( 'admin_footer-post.php', 't5_print_preview_script' );
}
/**
* Render the iframe.
*
* @param object $post
* @return void
*/
function t5_render_preview_metabox( $post )
{
if ( ! isset ( $post->ID ) )
return;
$link = set_url_scheme( get_permalink( $post->ID ) );
$link = add_query_arg( 'preview', 'true', $link );
$link = apply_filters( 'preview_post_link', $link );
$preview_link = esc_url( $link );
$initial = 'auto-draft' === $post->post_status ? 'about:blank' : $preview_link;
?>
<style scoped>
#t5_resizable {
height: 400px;
margin: -6px -12px -8px -10px;
}
#t5_preview_iframe {
width: 100%;
height: 100%;
}
</style>
<div id="t5_resizable" class="ui-widget-content">
<iframe data-permalink="<?php echo $preview_link; ?>" src="<?php echo $initial; ?>" id="t5_preview_iframe"></iframe>
</div>
<?php
}
/**
* Print JavaScript snippet.
*
* @wp-hook admin_footer-post-new.php
* @wp-hook admin_footer-post.php
* @return void
*/
function t5_print_preview_script()
{
# wp-includes/js/autosave.js
?>
<script>
/* reduce delay for development
autosaveL10n.autosaveInterval = 10; /**/
jQuery(function($) {
$('#t5_resizable').resizable({ helper: "ui-resizable-helper" });
});
var lastSaved = "";
jQuery(document).ajaxStop(function() {
if ( "" == autosaveLast || lastSaved == autosaveLast )
return;
var iframe = document.getElementById('t5_preview_iframe');
iframe.src = jQuery(iframe).data( "permalink" );
lastSaved = autosaveLast;
});
</script>
<?php
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment