Profile Enhancements - Profile Commenting System

What does this hack do?

It gives you a commenting system on the users profile page similiar to the myspace system.

Allows smilies and bbcodes but not html.

Demo: http://www.extremewebtech.com/forums/members/tim.html


Whats coming in the next release?
Ajax and wysiwyg

This is the newest release with the updates form the thread. Next up AJAX!!!

[eXtremeTim]

good idea

[TheMilkCarton]

I've got the Standard editor implemented into this now. For some reason when you switch into WYSIWYG comments won't post, though. The standard editor is at least good enough for me. I've stripped it down and it's using it's own template so it takes up very little room.

Attachment 63728

It's at least easier than typing out all the BBcode by hand. You'll notice I got rid of the Font Size box and I'm not allowing images in comment posts. I'll allow images once I have a decent method of keeping all the images small enough to not stretch out the page.

If anyone at least wants to know how to get the standard editor implemented just reply to this and I'll type up the code. I don't really want to take the time to make this into a product because I have a lot of custom code in my templates I'd need to get rid of first. :down:

Also, if anyone wants to help figure out why WYSIWYG comments show up blank, then that'd be great, too.

[bazzup]

got this working nice little touch

where in the templates would i put it so it shows up like yours tim?? on the right hand side of profile

[eXtremeTim]

Originally Posted by TheMilkCarton

I've got the Standard editor implemented into this now. For some reason when you switch into WYSIWYG comments won't post, though. The standard editor is at least good enough for me. I've stripped it down and it's using it's own template so it takes up very little room.

Attachment 63728

It's at least easier than typing out all the BBcode by hand. You'll notice I got rid of the Font Size box and I'm not allowing images in comment posts. I'll allow images once I have a decent method of keeping all the images small enough to not stretch out the page.

If anyone at least wants to know how to get the standard editor implemented just reply to this and I'll type up the code. I don't really want to take the time to make this into a product because I have a lot of custom code in my templates I'd need to get rid of first. :down:

Also, if anyone wants to help figure out why WYSIWYG comments show up blank, then that'd be great, too.

Could you hook me up with the code to save me some time from having to make it myself for the ajax version of the hack?

[eXtremeTim]

Originally Posted by bazzup

got this working nice little touch

where in the templates would i put it so it shows up like yours tim?? on the right hand side of profile

My templates are custom made by me. So I doubt you have the same template that I do. You will just have to play around with your style till you get it where you want.

[TheMilkCarton]

Originally Posted by eXtremeTim

Could you hook me up with the code to save me some time from having to make it myself for the ajax version of the hack?

I got it all from this Article

-------------------
Adding Standard text editor to comments system

Manual method -- Skip below for an updated product

Add Plugin under your product: Comment Editor Toolbar @ editor_toolbar_start

PHP Code:

if (THIS_SCRIPT == 'member')
{
global $setting;
$setting['allow_bbcode'] = '1';
$show['img_bbcode'] = $setting['allow_imgcode'];
$toolbartype = $setting['allow_bbcode'] ? is_wysiwyg_compatible(1, $editor_type) : 0;
$show['wysiwyg_compatible'] = (is_wysiwyg_compatible(1, $editor_type) == 0);
$show['editor_toolbar'] = ($toolbartype > 0);
$editor_template_name = ($toolbartype ? 'comment_editor_toolbar_on' : 'editor_toolbar_off');
} 


Add to Member Commenting System plugin:

PHP Code:

require_once(DIR . '/includes/functions_editor.php');
$show['wysiwyg'] = ($setting['allow_bbcode'] ? is_wysiwyg_compatible() : 0);
$istyles_js = construct_editor_styles_js();
$show['qr_require_click'] = 0;
$editorid = construct_edit_toolbar('', 0, '', ($setting['allow_smilies'] ? 1 : 0), 1, false, 'fe');
$messagearea = "
<script type=\"text/javascript\">
<!--
    var require_click = false;
    var threaded_mode = 1;
    var is_last_page = false;
// -->
</script>
$messagearea
";
require_once('./includes/functions_wysiwyg.php');
$message= convert_wysiwyg_html_to_bbcode($vbulletin->GPC['message']);
$message = $vbulletin->db->escape_string($message); 


Create template: comment_editor_toolbar_on (if you want a different name you must change

$vBeditTemplate[clientscript]

<div id="$editorid" class="vBulletin_editor">

    <table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td id="{$editorid}_controls" class="controlbar" colspan="2">

            <table cellpadding="0" cellspacing="0" border="0">
            <tr>
            <if condition="$show['font_bbcode'] OR $show['size_bbcode']">
            </if>
            <if condition="$show['font_bbcode']">
                <td><div class="imagebutton" id="{$editorid}_popup_fontname" title="$vbphrase[fonts]">
                    <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td class="popup_feedback"><div id="{$editorid}_font_out" style="width:91px">&nbsp;</div></td>
                        <td class="popup_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
                    </tr>
                    </table>                
                </div></td>
            </if>
            <if condition="$show['color_bbcode']">
                <td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
                <td><div class="imagebutton" id="{$editorid}_popup_forecolor" title="$vbphrase[colors]">
                    <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td id="{$editorid}_color_out"><img src="$stylevar[imgdir_editor]/color.gif" width="21" height="16" alt="" /><br /><img src="$vboptions[cleargifurl]" id="{$editorid}_color_bar" alt="" style="background-color:black" width="21" height="4" /></td>
                        <td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
                    </tr>
                    </table>
                </div></td>
            </if>
            <if condition="$show['basic_bbcode']">
                <td><div class="imagebutton" id="{$editorid}_cmd_bold"><img src="$stylevar[imgdir_editor]/bold.gif" width="21" height="20" alt="$vbphrase[bold]" /></div></td>
                <td><div class="imagebutton" id="{$editorid}_cmd_italic"><img src="$stylevar[imgdir_editor]/italic.gif" width="21" height="20" alt="$vbphrase[italic]" /></div></td>
                <td><div class="imagebutton" id="{$editorid}_cmd_underline"><img src="$stylevar[imgdir_editor]/underline.gif" width="21" height="20" alt="$vbphrase[underline]" /></div></td></if>
<if condition="$show['align_bbcode']">
<if condition="$stylevar['textdirection'] == 'ltr'">
<td><div class="imagebutton" id="{$editorid}_cmd_justifyleft"><img src="$stylevar[imgdir_editor]/justifyleft.gif" width="21" height="20" alt="$vbphrase[align_left]" /></div></td>
                <td><div class="imagebutton" id="{$editorid}_cmd_justifycenter"><img src="$stylevar[imgdir_editor]/justifycenter.gif" width="21" height="20" alt="$vbphrase[align_center]" /></div></td>
                <td><div class="imagebutton" id="{$editorid}_cmd_justifyright"><img src="$stylevar[imgdir_editor]/justifyright.gif" width="21" height="20" alt="$vbphrase[align_right]" /></div></td>
                <else />
                <td><div class="imagebutton" id="{$editorid}_cmd_justifyright"><img src="$stylevar[imgdir_editor]/justifyright.gif" width="21" height="20" alt="$vbphrase[align_right]" /></div></td>
                <td><div class="imagebutton" id="{$editorid}_cmd_justifycenter"><img src="$stylevar[imgdir_editor]/justifycenter.gif" width="21" height="20" alt="$vbphrase[align_center]" /></div></td>
                <td><div class="imagebutton" id="{$editorid}_cmd_justifyleft"><img src="$stylevar[imgdir_editor]/justifyleft.gif" width="21" height="20" alt="$vbphrase[align_left]" /></div></td>
                </if>
                <td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
            </if>
        
            <if condition="$show['url_bbcode']">
                <td><div class="imagebutton" id="{$editorid}_cmd_createlink"><img src="$stylevar[imgdir_editor]/createlink.gif" width="21" height="20" alt="$vbphrase[insert_link]" /></div></td>
                <td><div class="imagebutton" id="{$editorid}_cmd_unlink"><img src="$stylevar[imgdir_editor]/unlink.gif" width="21" height="20" alt="$vbphrase[remove_link]" /></div></td>
            </if>
            <if condition="$show['img_bbcode']">
                <td><div class="imagebutton" id="{$editorid}_cmd_insertimage"><img src="$stylevar[imgdir_editor]/insertimage.gif" width="21" height="20" alt="$vbphrase[insert_image]" /></div></td>
            </if>
<td><div class="imagebutton">
<a href="#" onclick="vB_Editor['$editorid'].open_smilie_window(smiliewindow_x, smiliewindow_y); return false"><img src="./images/editor/smilie.gif"  alt="Smilies" border="0" target="_blank" ></a></div>
</td>
                <td align="right">
                    <div class="imagebutton" id="{$editorid}_cmd_resize_0_100"><img src="$stylevar[imgdir_editor]/resize_0.gif" width="21" height="9" alt="$vbphrase[decrease_size]" /></div>
                    <div class="imagebutton" id="{$editorid}_cmd_resize_1_100"><img src="$stylevar[imgdir_editor]/resize_1.gif" width="21" height="9" alt="$vbphrase[increase_size]" /></div>
                </td>
            <if condition="$show['wysiwyg_compatible']">
                <td><div class="imagebutton" id="{$editorid}_cmd_switchmode"><img src="$stylevar[imgdir_editor]/switchmode.gif" width="21" height="20" alt="$vbphrase[switch_editor_mode]" /></div></td>
            </if>
            </tr>
            </table>
            
        </td>
    </tr>
    <tr valign="top">
<td class="controlbar">

<textarea name="comment" id="{$editorid}_textarea" rows="10" cols="60" style="width:415px; height:{$editor_height}px;" tabindex="1">$newpost[message]</textarea></td>
    </tr>

    </tr>
    </table>

</div>

<input type="hidden" name="wysiwyg" id="{$editorid}_mode" value="$editortype" />

<script type="text/javascript">
<!--
vB_Editor['$editorid'] = new vB_Text_Editor('$editorid', $editortype, '$forumid', '$parsesmilie');
//-->
</script>

Some of the image sizes may be wrong, I had made bigger editor buttons and changed the sizes, so I'm not sure I changed all of them back for this code. Also, if the editor needs to be in a thinner column, "415px" will need to be changed, and the buttons will have to make another row.

Find:

<textarea class="bginput" name="comment" rows="4" cols="40" tabindex="1" /></textarea>

and
Replace with:

$messagearea

--------------------------
Updated product with all the above edits included (I can't guarantee this will work for everyone, but it installed fine on a clean install test board)
Attachment 63736
If anyone can get WYSIWYG WORKING, please do and SHARE.

The newest version of this product is changed from the one I'm using, so I'm not guaranteeing this will work 100%. Also, looking at the new XML file, I can see my "Viewing X of X Comments" did make it into the product, so can I be made a contributor or whatever it is called?

Edit: Note that this version doesn't have any IMG buttons, but that's because I'm using this in a column that's very thin so I'm not allowing images (IMG bbcode can technically still be typed out though). It shouldn't be that hard to add it back in, but good luck anyway.

[tamborinegal]

Originally Posted by ZomgStuff

Please make it so it PM's the user once they have been left a comment

Originally Posted by eXtremeTim

That feature can be added into the que of what needs done.

Great hack Tim. I love it! Thank you. Just wondering, did the PM on comment feature make it into the latest release?

Also can moderators delete comments or is it only the member and the admin that have permission to do that?

Cheers

Clancy

[Terminatoronly]

Is it done with Ajax?

[TheMilkCarton]

Can someone explain the interest in AJAX? MySpace doesn't use AJAX to post comments.. and I think Facebook just started using AJAX.

I don't think AJAX adds anything to this mod because it's quite easy to add a comment already. You click "Post Comment" and then it simply reloads the page. Wouldn't AJAX be more server intensive than this anyway? I always hear everyone hating on the Shoutbox, which would essentially be what this Profile Comment System is if it were to include AJAX.

[eXtremeTim]

I will have an ajax version out soon enough.