BuddyPress.org

This is in regards to the BUDDYPRESS TRUNK version!

Just like Twitter offers a 140 char limit with coutndown counter I wanted to implement this for bp status updates. I added the following code to the “status component”, the jquery can probably be optimized also it would be good to set a db CHAR LIMIT on the textarea as well imo.

This code HAS to reside inside the general.js file of the status component (plugins/buddypress/bp-status/js/general.js), because the form only gets loaded when called, so this code needs to be called at the same time. At the top of the general.js file right after the jQuery(document).ready… line:

function limitChars(textid, limit, infodiv) {

var text = jQuery('#'+textid).val();

var textlength = text.length;

if(textlength > limit) {

jQuery('#' + infodiv).html('<span>0</span>');

jQuery('#'+textid).val(text.substr(0,limit));

return false;

} else {

jQuery('#' + infodiv).html(limit - textlength);

return true;

}

}

This sets up the character count limit, info div and target input field.

Then currently on line 13 replace this line:

jQuery("#status-update-input").focus();

with:

jQuery("#status-update-input").focus().keyup(function() {

limitChars('status-update-input', 140, 'counter');

});

jQuery("#status-update-input").after("<div style='float: right;' class='char-count'>You have got <strong><span id='counter'>140</span></strong> characters left.</div>");

This code makes sure the counter only gets displayed together with the form, retains the focus and adds the keyup function. 140 is the character limit in this example. The last line adds the countdown div right under the textarea aligned to the right.

And that’s it! The first part does not need any configuration and the second part can be changed to your liking. What do you think? Can it be optimized? Is this an idea worthy of adding to the core component?