Slideout Comments

slideout-comments.css

.comments-wrapper {
    position: fixed;
    bottom: 0px;
    right: -50%;
    width: 51%;
    background: #fff;
    padding: 10px;
    z-index: 10;
    border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: #e2e2e2;
    transition: right .3s ease-in-out;  
    height: 99%; 
    overflow: visible;
}

.open {
	right: 0px;   
}

.comments-scroll-area {
    position: relative;
 	overflow-y: scroll; 
    height: 100%;
    bottom: 0;
}

.comments-toggle,
.comments-toggle:visited {
    position: absolute;
    display: block;
    width: 32px;
    height: 32px;
    left: -32px;
    top: 20px;  
    background: url('comments-icon.png') #ffffff center no-repeat;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
  	border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: #e2e2e2;
    z-index: 10;
    line-height: 1.25em;
    text-decoration: none;
}

slideout-comments.js

//
//
// Slideout Comments - add the wrapper, add the comment control and add the click actions
// The sloc object is created by localize_script function 
//

jQuery(document).ready(function($) {

	/* only do something if comments are present and transition is supported */
	
	if ( $(sloc.comments).length > 0 && document.documentElement.style.transition !== undefined ) {

		/* add the 2 comment wrappers */
		$(sloc.comments).wrap('<div class="comments-wrapper"><div class="comments-scroll-area"></div></div>');
	
		var num_comments = $(sloc.comment).length;
	
		/* add the comment tab */    
		$('.comments-wrapper').prepend('<a class="comments-toggle" href="#comments">' + num_comments + '</a>');

		/* set up the click actions */
	
		/* standard WordPress comment link */
		$('.comments-link a').click(function(event) {			

			event.preventDefault();				
			$('.comments-wrapper').toggleClass('open');
	
		});

		/* comment tab link */
		$('.comments-toggle').click(function(event) {

			event.preventDefault();				
			$('.comments-wrapper').toggleClass('open');

		});
    
    }

});

slideout-comments.php

<?php
/*
Plugin Name: Slideout Comments
Plugin URI: http://premium.wpmudev.org/
Description: Display your WordPress comments in a New York Times style slideout sidebar
Author: Chris Knowles
Version: 1.0
Author URI: http://twitter.com/ChrisKnowles
*/

function sloc_enqueue_scripts() {

	/* only need to enqueue if a single page */
	if ( !is_admin() ) {

		// Register the script first.
		wp_register_script( 'sloc_script',  plugins_url('js/slideout-comments.js' , __FILE__) , array('jquery'), null, true );

		// Now we can localize the script with our data.
		$sloc_array = get_option( 'sloc_settings' , array('comments' => '#comments', 'comment' => '.comment'));
		wp_localize_script( 'sloc_script', 'sloc', $sloc_array );

		// The script can be enqueued now or later.
		wp_enqueue_script( 'sloc_script');
	
		// enqueue the basic styling
		wp_enqueue_style( 'sloc_style',  plugins_url('css/slideout-comments.css' , __FILE__ ) );
	}
	
}

add_action( 'wp_enqueue_scripts' , 'sloc_enqueue_scripts' );

/* options courtesy of WordPress Settings Generator (http://http://wpsettingsapi.jeroensormani.com/) */

add_action( 'admin_menu', 'sloc_add_admin_menu' );
add_action( 'admin_init', 'sloc_settings_init' );


function sloc_add_admin_menu(  ) { 

	add_options_page( 'Slideout Comments', 'Slideout Comments', 'manage_options', 'slideout_comments', 'slideout_comments_options_page' );

}


function sloc_settings_exist(  ) { 

	if( false == get_option( 'sloc_settings' ) ) { 

		add_option( 'sloc_settings' );

	}

}


function sloc_settings_init(  ) { 

	register_setting( 'sloc_settings', 'sloc_settings' );

	add_settings_section(
		'sloc_settings_section', 
		__( 'Bring a bit of the New York Times to your WordPress site with slideout comments', 'sloc' ), 
		'sloc_settings_section_callback', 
		'sloc_settings'
	);

	add_settings_field( 
		'comments', 
		__( 'Comments container identifier (eg #comments)', 'sloc' ), 
		'sloc_comments_render', 
		'sloc_settings', 
		'sloc_settings_section' 
	);

	add_settings_field( 
		'comment', 
		__( 'Individual comment identifier (eg .comment)', 'sloc' ), 
		'sloc_comment_render', 
		'sloc_settings', 
		'sloc_settings_section' 
	);


}


function sloc_comments_render(  ) { 

	$options = get_option( 'sloc_settings' , array('comments' => '#comments', 'comment' => '.comment'));
	?>
	<input type='text' name='sloc_settings[comments]' value='<?php echo $options['comments']; ?>'>
	<?php

}


function sloc_comment_render(  ) { 

	$options = get_option( 'sloc_settings' , array('comments' => '#comments', 'comment' => '.comment'));
	?>
	<input type='text' name='sloc_settings[comment]' value='<?php echo $options['comment']; ?>'>
	<?php

}


function sloc_settings_section_callback(  ) { 

	echo __( '<p>Enter the identifiers for the comments block and an individual comment.</p>In the WordPress default themes this is usually <strong>#comments</strong> for the block and <strong>.comment</strong> for individual comment. If these do not work then check your theme\'s Comment template (comments.php) or HTML.', 'sloc' );

}


function slideout_comments_options_page(  ) { 

	?>
	<form action='options.php' method='post'>
		
		<h2>Slideout Comments</h2>
		
		<?php
		settings_fields( 'sloc_settings' );
		do_settings_sections( 'sloc_settings' );
		submit_button();
		?>
		
	</form>
	<?php

}

?>