BuddyDev

Brajesh Singh in BuddyPress Tricks 51 Comments

How many of you use facebook for connecting with Friends and family, I believe almost all 🙂 Today, I am going to show how to make the BuddyPress Activity Stream activity commenting look/work like facebook activity commenting. I will be doing it by using bp-default theme as an example. you can easily modify it for other themes.

In addition to writing css/js, we will need one jquery plugin to autogrow the text area as a user types.

Github Repo: https://github.com/sbrajesh/fb-style-activity-commenting

Goals:-

• Make activity comment section look like facebook
• make activity posting like facebook

External script required:-

jQuery AutoGrow textArea:- We will use it for autogrowing comment text box. The script is a part of jQuery grab bag by Jason Frame

Lets get started. But before that, lets have a look at the final screenshot.

Step 1: No multilevel commenting

I know it is a bad decision, but this is what facebook does. I am just following the lead.

You can put the following code in functions.php to stop mulitlevel commenting

[sourcecode language="php"]
add_filter('bp_activity_can_comment_reply','__return_false');
[/sourcecode]

Since I don't want to temper with core files of bp-default(read it whatever theme you use), We will be including the code to load out comment.js and the autogrow textarea plugin. You should create comment.js in the_inc folder of your theme and also put the autogrow plugin there.

Here is the code you need to put in functions.php

[sourcecode language="php"]
//include the javascript, change it as you want
add_action("wp_print_scripts","bp_fbstyle_comment_js");
function bp_fbstyle_comment_js(){
if(!is_user_logged_in())
return ;//we do not want to include the js
wp_enqueue_script("bpfb-comment-js", get_stylesheet_directory_uri()."/_inc/comment.js",array('jquery','jquery-effects-core', 'dtheme-ajax-js'));
wp_enqueue_script("bpfb-comment-autogrow-js", get_stylesheet_directory_uri()."/_inc/jquery.autogrow-textarea.js",array('jquery'));
}

[/sourcecode]

I am including these from my child theme, you can change the above line to make sure you are loading it correctly from your theme.

That's all we need to do in php. Now, we will write some javascript and css to make it work like facebook activity commenting.

Step2:  The CSS

Let us make the activity comment form visible. Onething to note here, facebook puts a visible comment form only for those activities which already have atleast one comment. I am following the same. You can change that behaviour and make it visible for all activities(I will be mentioning how to do that)

I have adjusted the margin of the form appropriately for our page formatting.

[sourcecode language="css"]
li.has-comments div.activity-comments form.ac-form {
display:block;
margin:0 0 5px 0;
}
/*if you want to make it visible for all activity, change the above css selector from 'li.has-comments div.activity-comments form.ac-form' to 'div.activity-comments form.ac-form'. Note, we removed the li.has-comments from the selector*/
[/sourcecode]

Now, as the form is visible, we will need to hide the commenter avatar(the logged in user avatar and remove the unnecessary margin/padding)

[sourcecode language="css"]

.ac-form .ac-reply-avatar{
display:none;
}

div.activity-comments form div.ac-reply-content{
margin-left: 0;
padding-left: 0;
margin-bottom: 5px;
height:35px;/* you may need to adjust height according to the one you choose for your textarea*/
}

[/sourcecode]

That's nice. Now, we will need to fix the height of the textarea to fit one line of text and hide the submit button. After all, we assume pressing enter will post the comment.

[sourcecode language="css"]
div.activity-comments form textarea {
height: 13px;
}
div.activity-comments form input[type='submit']{
display:none;
}

[/sourcecode]

So, that's the basic css. It will make the comment form visible for the appropriate activity entries.

Now, When a particular text area gains focus, we will add class 'active' to its parent form. So, we will need to update our active form css when a comment textarea gains focus.
Here is the css for that

[sourcecode language="css"]
/*on active/focus*/
form.active .ac-reply-avatar{
float:left;
display: block;
}
form.active .ac-reply-avatar img.avatar {
float: left;
margin: 0 3px 0 0;
height: 25px;

width: 25px;
}
/*reset the height of comment box wrapper to make the comment box grow later*/
div.activity-comments form.active div.ac-reply-content{
height:auto;
}
form.active .ac-textarea{
margin-bottom: 10px;
padding: 0px 8px 8px 8px;
}
div.activity-comments form.active div.ac-reply-content{
margin-left: 30px;
padding-left: 2px;

}
[/sourcecode]

So, that is the complete css we will need.

Let us write some javascript code to emulate the fb effect. All these code goes to comment.js

Step 3: The javascript

So, as jQuery says, let us do everything when the dom is ready. All the code blow this section is wrapped inside this block

[sourcecode language="javascript"]
jQuery(document).ready(function(){

//the actual code

});
[/sourcecode]

Now, the initial setup. The BP default theme hides all the activity form using javascript. We will need to make them visible again.

[sourcecode language="javascript"]

var jq=jQuery;//we do no want to keep the value to mess our layout, and we do not want to do the complex calculations too
jq("form.ac-form textarea").val(");

jq(".has-comments form.ac-form").show();//make all the activity comment form visible whose parent have at least 1 previous comment.
//if you want to show the activity comment form for all the activities , irrespective of whether there are already comments or not, comment the above line and uncomment the below line
//jq("form.ac-form").show();
jq("form.ac-form").show();//make all the activity comment form visible
[/sourcecode]

Please note what I mentioned in the last 2 lines of above code. If you have made your css to show the comment form for all the activity entries, then comment and uncomment the above code as instructed.

Now, let us bind the auto grow plugin to all the activity comment text area

[sourcecode language="javascript"]

jq('.ac-textarea textarea').autogrow();

[/sourcecode]

Add class "active" to the parent of the text area which has gained focus and remove the class 'active from all other forms.

[sourcecode language="javascript"]
//on focus, add remove active class
jq('.ac-textarea textarea').live('focus', function(){
var ac_form=jq(this).parent().parent().parent();//parent form
ac_form.addClass('active');

jq('.ac-textarea').parents('form.ac-form').not(ac_form).removeClass('active');

});
[/sourcecode]

The above step could have been done in easier step by first removing the class from all forms and then adding it to current textarea's parent.I just wanted better usability by first activating this form.

Let us handle the Pressing of ESC button and the Enter. We are resetting the form on escape key pressing and posting the comment when the enter key is pressed.

[sourcecode language="javascript"]
/* Handle the ESC/ENTER key with more specific element and cancel even bubbling for these actions to void bp-default's way of handling this */
jq('.ac-textarea textarea').keydown( function(e) {
element = e.target;

//if meta keys, don't do anything
if( e.ctrlKey == true || e.altKey == true || e.metaKey == true )
return;

var keyCode = (e.keyCode) ? e.keyCode : e.which;

//if ESC key was pressed
if ( keyCode == 27 ) {
jq(element).animate({'height':'13px'});//reset back to its original height

return false;

}
else if(keyCode==13){//if enter pressed
//jq(element).parent().next().click();//since we have not removed the submit button
ac_post_comment(element);
return false;

}

});//end of ESC/enter handling code
[/sourcecode]

As you can see in the above code, I have mentioned that writing the ac_post_comment function could be avoided by uncommenting the previous line(submit button clicking). The problem is the javascript in bp-default hides the reply box below the posted comment but we don't want that. So, you can either uncomment a line in global.js or use the code below.

[sourcecode language="javascript"]

/**post activity comment*/
//just a copy of bp-default activity comment posting code with slight modification to avoid hiding the forms
function ac_post_comment(target){
target=jq(target);

/* Activity comment posting */
if ( target.hasClass('ac-input') ) {
var form = target.parent().parent().parent();
var form_parent = form.parent();
var form_id = form.attr('id').split('-');

if ( !form_parent.hasClass('activity-comments') ) {
var tmp_id = form_parent.attr('id').split('-');
var comment_id = tmp_id[1];
} else {
var comment_id = form_id[2];
}

/* Hide any error messages */
jq( 'form#' + form.attr('id') + ' div.error').hide();
target.next('.loader').addClass('loading').end().prop('disabled', true);

jq.post( ajaxurl, {
action: 'new_activity_comment',
'cookie': encodeURIComponent(document.cookie),
'_wpnonce_new_activity_comment': jq("input#_wpnonce_new_activity_comment").val(),
'comment_id': comment_id,
'form_id': form_id[2],
'content': jq('form#' + form.attr('id') + ' textarea').val()
},
function(response)
{
target.next('.loader').removeClass('loading');

/* Check for errors and append if found. */
if ( response[0] + response[1] == '-1' ) {
form.append( response.substr( 2, response.length ) ).hide().fadeIn( 200 );
} else {
form.fadeOut( 200,
function() {
if ( 0 == form.parent().children('ul').length ) {
if ( form.parent().hasClass('activity-comments') )
form.parent().prepend('<ul></ul>');
else
form.parent().append('<ul></ul>');
}

form.parent().children('ul').append(response).hide().fadeIn( 200 );
form.children('textarea').val(");
form.parent().parent().addClass('has-comments');
}
);//form hiding
jq( 'form#' + form.attr('id') + ' textarea').val(");
target.height(20);
// form.removeClass('active');
form.fadeIn(200);

/* Increase the "Reply (X)" button count */
jq('li#activity-' + form_id[2] + ' a.acomment-reply span').html( Number( jq('li#activity-' + form_id[2] + ' a.acomment-reply span').html() ) + 1 );
}

jq(target).prop("disabled", false);
});

return false;
}
}

[/sourcecode]

Now, we have done everything and the code will work. The last thing we need to fix is clicking on the comment(x) link below the activity entry. By default, bp-default theme show the comment form for that activity and hides all other comment form. we need to stop it hiding other comment form. You can uncomment a line in global.js or just use the code below.

[sourcecode language="javascript"]

/* You can avoid the code blow if you want to change a line in global.js, if you don't, then this code does it for you*/
//the code below is taken from bp-default activity comment link clicking code, I have attached the evnt to more specific element and also remoded the form hiding code
jq('div.activity .acomment-reply').click( function(event) {
var target = jq(event.target);

var id = target.attr('id');
ids = id.split('-');

var a_id = ids[2]
var c_id = target.attr('href').substr( 10, target.attr('href').length );
var form = jq( '#ac-form-' + a_id );

form.css( 'display', 'none' );
form.removeClass('root');
//jq('.ac-form').hide();//you can just comment out this line in the global.js of bp-default and avoid this whole block of code

/* Hide any error messages */
form.children('div').each( function() {
if ( jq(this).hasClass( 'error' ) )
jq(this).hide();
});

if ( ids[1] != 'comment' ) {
jq('div.activity-comments li#acomment-' + c_id).append( form );
} else {
jq('li#activity-' + a_id + ' div.activity-comments').append( form );
}

if ( form.parent().hasClass( 'activity-comments' ) )
form.addClass('root');

form.slideDown( 200 );
jq.scrollTo( form, 500, { offset:-100, easing:'easeOutQuad' } );
jq('#ac-form-' + ids[2] + ' textarea').focus();

return false;

});

[/sourcecode]

That's it. You are ready to see your supercool facebook like activity commenting.

I have put the above code as a child theme of bp-default on github. If you want to take a look and see it in action, download it from here and active.

Github Repo:https://github.com/sbrajesh/fb-style-activity-commenting

My tutorial uses the reference of bp-default theme for BuddyPress 1.5 but you can modify it for any of the existing theme with some minor css/js changes if any.

Hope it helps some of you. Looking forward to hear your thoughts and feedback 🙂