4images Modifications / Modifikationen > Mods & Plugins (Releases & Support)
[MOD] AJAX Comments / Comments Rating v1.0.4 (2009-12-21)
V@no:
----------------- [ Index ] -----------------
[*]Introduction
[*]Demo
[*]List of changed/new files
[*]Installation
[*]Tweaks
[*]Version history
[/list]
----------------- [ Introduction ] -----------------
This mod will allows post comments and/or rate comments without page refresh, just like on youtube.com
----------------- [ Demo ] -----------------
You can see how it works here. You can login using any username and password. Also the demo has settings on left side.
----------------- [ Changed files ] -----------------
details.php
templates/<your template>/comment_bit.html
templates/<your template>/comment_form.html
templates/<your template>/commentsperpage_dropdown_form.html
templates/<your template>/details.html
templates/<your template>/style.css
lang/<your language>/main.php
----------------- [ New files ] -----------------
install_ajaxcomments.php
ajaxcomments.php
js/ajax.js
js/ajaxcomments.js
templates/<your template>/images/good.png
templates/<your template>/images/good_off.png
templates/<your template>/images/bad.png
templates/<your template>/images/bad_off.png
templates/<your template>/images/minus.png
templates/<your template>/images/plus.png
----------------- [ Installation ] -----------------
Step 1
Download attached ajaxcomments.zip package (you must login to be able download it). Unpack it and upload to your 4images root directory, restoring the following directory tree:
install_ajaxcomments.php
ajaxcomments.php
js/ajax.js
js/ajaxcomments.js
templates/<your template>/images/good.png
templates/<your template>/images/good_off.png
templates/<your template>/images/bad.png
templates/<your template>/images/bad_off.png
templates/<your template>/images/minus.png
templates/<your template>/images/plus.png
Step 2
Start install_ajaxcomments.php by typing in your browser: http://your_site/4images/install_ajaxcomments.php
Install database.
Step 3
If you want show comments in pages, install [MOD] Paging for comments
If you don't want pages for comments, make sure you skip steps where says "(only if done Step 3)"
Also, if you skip this step, you'll need set COMMENTS_PAGES to 0 (refer Tweak 1 for more info)
Step 4
Open details.php
Find:
include(ROOT_PATH.'includes/page_header.php');
Insert below:
/*
MOD AJAX COMMENTS
BEGIN INSERT
*/
include(ROOT_PATH."ajaxcomments.php");
/*
MOD AJAX COMMENTS
END INSERT
*/
Step 4.1
Find: $sql = "SELECT c.comment_id, c.image_id, c.user_id, c.user_name AS comment_user_name, c.comment_headline, c.comment_text, c.comment_ip, c.comment_date".get_user_table_field(", u.", "user_level").get_user_table_field(", u.", "user_name").get_user_table_field(", u.", "user_email").get_user_table_field(", u.", "user_showemail").get_user_table_field(", u.", "user_invisible").get_user_table_field(", u.", "user_joindate").get_user_table_field(", u.", "user_lastaction").get_user_table_field(", u.", "user_comments").get_user_table_field(", u.", "user_homepage").get_user_table_field(", u.", "user_icq")."
(if you have hard time find this line, it's in "Show Comments" section)
Add at the end of the line:
--- Code: ---,c.comment_rating,c.comment_votes,c.comment_rating_users
--- End code ---
Step 4.2 (only if done Step 3)
Find:
$commentsperpage_dropdown = "\n<select name=\"commentsetperpage\" onchange=\"if (this.options[this.selectedIndex].value != 0){ forms['commentsperpage'].submit() }\" class=\"select\">\n";
Replace it with:
/*
MOD AJAX COMMENTS
REPLACE START
*/
$commentsperpage_dropdown = "\n<select name=\"commentsetperpage\" onchange=\"if (this.options[this.selectedIndex].value != 0){ return CommentsPerPage(this.form); }\" class=\"select\">\n";
/*
MOD AJAX COMMENTS
REPLACE END
*/
Step 4.3 (only if done Step 3)
Find:
if ($action == "postcomment") {
Replace it with:
/*
MOD AJAX COMMENTS
REPLACE START
*/
if (($action == "postcomment" || (!isset($HTTP_POST_VARS['page']) && !isset($HTTP_GET_VARS['page']))) && !COMMENTS_ORDER) {
/*
MOD AJAX COMMENTS
REPLACE END
*/
Step 4.4 (only if done Step 3)
Find:
--- Code: --- "paging" => $getpaging->get_paging(),
--- End code ---
Replace it with:
--- Code: ---/*
MOD AJAX COMMENTS
REPLACE START
*/
"paging" => str_replace(array("<a ", 'onSubmit="'), array('<a onclick="return CommentsPage(this);" ', 'onSubmit="return CommentsPerPage(this);'), $getpaging->get_paging()),
/*
MOD AJAX COMMENTS
REPLACE END
*/
--- End code ---
Step 4.5
A. (only if done Step 3)
Find:
--- Code: --- WHERE c.image_id = $image_id
ORDER BY c.comment_date ASC";
--- End code ---
Replace it with:
--- Code: --- WHERE c.image_id = $image_id
ORDER BY c.comment_date ".(COMMENTS_ORDER ? "DESC" : "ASC")."";
--- End code ---
B. (only if skipped Step 3)
Find:
--- Code: --- WHERE c.image_id = $image_id
ORDER BY c.comment_date ASC
--- End code ---
Replace it with:
--- Code: --- WHERE c.image_id = $image_id
ORDER BY c.comment_date ".(COMMENTS_ORDER ? "DESC" : "ASC")."
--- End code ---
Step 4.6
Find:
$comments .= $site_template->parse_template("comment_bit");
Insert above:
/*
MOD AJAX COMMENTS
BEGIN INSERT
*/
if (COMMENT_RATING_ENABLE)
{
$comment_row[$i]['cat_id'] = $cat_id;
$comment_row[$i]['image_allow_comments'] = $image_allow_comments;
comment_rating_template($comment_row[$i]);
}
/*
MOD AJAX COMMENTS
END INSERT
*/
Step 4.7
Find:
$site_template->register_vars("comments", $comments);
Replace it with:
/*
MOD AJAX COMMENTS
START REPLACE
*/
$site_template->register_vars(array(
"comments" => $comments,
"comments_num" => $num_comments,
"commentbg" => (isset($row_bg_number)) ? $row_bg_number : 0,
"page" => $page,
"perpage" => $commentperpage,
));
/*
MOD AJAX COMMENTS
END REPLACE
*/
Step 5
Open: lang/<your language>/main.php
At the end, above closing ?> insert:
$lang['comment_rating'] = "Vote for this comment";
$lang['comment_rating_good'] = "Good comment";
$lang['comment_rating_bad'] = "Bad comment";
$lang['comment_rating_success'] = "Thank you for rating this comment";
$lang['comment_rating_error'] = "Sorry, your vote was rejected:";
$lang['comment_rating_check'] = array(
0 => "Not rated yet",
1 => "Invalid comment id",
2 => "Guests are not allowed to vote",
3 => "Permission denied",
4 => "You can't vote on your own comments",
5 => "You've already voted for this comment",
6 => "Comment rating disabled",
);
Step 6
Open: templates/<your template/style.css
Add at the end:
--- Code: ---.comment_rating0 {
}
.comment_rating1 {
color: green;
}
.comment_rating2 {
color: red;
}
--- End code ---
[*] Step 7 - 10 are template related, if you are using default template, you can simply download attached ajaxcomments_default_template.zip package, unpack it and replace files in your template with files from the package.
[*] In some steps I will only give the code to add and might give brief explanation what it does, your task is to find the place where you want that code to be. This means, you need to know basic HTML.
[*] Examine the provided code, it might contain additional comments with additional information.
[*] If you read "an element will be used to display..." make sure such element doesn't have any children elements, unless stated otherwise.
(i.e. <div id="t"><span>blah</span></div> <div> is a parent element and <span> is it's child element)
[*] In my templates I used combination of DIV and SPAN, it's not required, you can replace them with other elements, as long as you restore the ID and as already been said elements don't have children elements.
[*] The search in a file starts from the position of the last search in the same file NOT from the top of the file. Knowing that, make sure you don't replace something in the new, already added code.
[*] If you found two or more instances of a string, you must work only on the first found instance, unless instructed otherwise.
P.S. if you don't understand my explanations, download attached ajaxcomments_template_default.zip package and look how its done there.
Step 7
Open: templates/<your template/details.html template
Insert below {header} or <body>:
--- Code: ---<!--mod ajax comments insert start-->
<script type="text/javascript">
var ajaxCommentBG = parseInt('{commentbg}');
var ajaxCommentRatingHide = parseInt('{commentratinghide}');
var ajaxCommentsUrl = '{ajaxcommentsurl}';
var URL_ID = '{url_id}';
var Page = parseInt('{page}');
var PerPage = parseInt('{perpage}');
</script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajaxcomments.js"></script>
<!-- uncomment and place this div where you want messages related to comment rating to be showed (additionally to tooltips), you can use this div to display floating messages -->
<!-- <div id="commentratingmsg"></div> -->
<!--mod ajax comments insert end-->
--- End code ---
an element with id="commentratingmsg" can be used to display messages after vote for a comment.
Step 7.1 (only if done Step 3)
Replace {paging_stats}
With:
--- Code: ---<!--mod ajax comments insert start-->
<span id="pagingstats">
<!--mod ajax comments insert end-->
{paging_stats}
<!--mod ajax comments insert start-->
</span>
<!--mod ajax comments insert end-->
--- End code ---
an element id="pagingstats" will be used to display paging information.
Step 7.2 (only if done Step 3)
Replace {if paging} with:
--- Code: ---<!--mod ajax comments insert start-->
<div id="pagingtable"{ifno paging} style="display:none;"{endifno paging}>
<!--mod ajax comments insert end-->
--- End code ---
If you have two {if paging}, replace second with:
--- Code: ---<!--mod ajax comments insert start-->
<div id="pagingtable2"{ifno paging} style="display:none;"{endifno paging}>
<!--mod ajax comments insert end-->
--- End code ---
an element id="pagingtable" and id="pagingtable2" will be used to show/hide paging table
Step 7.3 (only if done Step 3)
Replace {paging} with:
--- Code: ---<!--mod ajax comments insert start-->
<span id="paging">
<!--mod ajax comments insert end-->
{paging}
<!--mod ajax comments insert start-->
</span>
<!--mod ajax comments insert end-->
--- End code ---
If you have two {paging}, replace second with:
--- Code: ---<!--mod ajax comments insert start-->
<span id="paging2">
<!--mod ajax comments insert end-->
{paging}
<!--mod ajax comments insert start-->
</span>
<!--mod ajax comments insert end-->
--- End code ---
an element id="paging" and id="paging2" will be used to display paging links.
Step 7.4 (only if done Step 3)
Replace {endif paging} with:
--- Code: ---<!--mod ajax comments insert start-->
</div>
<!--mod ajax comments insert end-->
--- End code ---
If you have two {endif paging}, replace second with the same code.
Step 7.5
Replace {comments} with:
--- Code: ---<!--COMMENTSTART-->
{comments}
<!--COMMENTEND-->
--- End code ---
(these HTML comments are required, they are used as "markers" to detect where to insert new image comments)
Step 7.6
Insert the whole table where {comments} is between <span id="commentstable"> and </span>
Example:
--- Code: ---<table width="100%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td valign="top" class="head1">{lang_author}</td>
<td valign="top" class="head1">{lang_comment}</td>
</tr>
{comments}
</table>
--- End code ---
The result is:
--- Code: ---<span id="commentstable">
<table width="100%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td valign="top" class="head1">{lang_author}</td>
<td valign="top" class="head1">{lang_comment}</td>
</tr>
{comments}
</table>
</span>
--- End code ---
an element with id="commentstable" will be used to display comments. This element can contain children elements.
Step 7.7
Add:
--- Code: ---<!--mod ajax comments insert start in "commentformmsg" will be displayed any messages related to posting comments.
keep in mind a <br /> will be automatically appended to the front of the message-->
<b><div id="commentformmsg"></div></b>
<!--mod ajax comments insert end-->
--- End code ---
an element with id="commentformmsg" will be used to display messages related to comment posting.
Step 8
Open: templates/<your template/comment_bit.html template
Add:
--- Code: ---<!--mod ajax comments insert start -->
{if comment_rating_enable}<span id="cmsg{comment_id}" title="{comment_vote_tooltip}"><span id="cr{comment_id}" class="comment_rating{comment_class}">{comment_rating_str}</span> {comment_rating_link_good} {comment_rating_link_bad} <span id="crv{comment_id}">{comment_votes}</span> {lang_votes}</span>{endif comment_rating_enable}
<!--mod ajax comments insert end -->
--- End code ---
an element with id="cmsg{comment_id}" will be used to show tooltips after visitor voted on a comment.
an element with id="cr{comment_id}" will be used to display comment rating.
an element with id="crv{comment_id}" will be used to display number of comment votes.
Step 8.1
Replace {comment_text}
With:
--- Code: ---<!--mod ajax comments insert start -->
<a href="#" id="cilh{comment_id}" onClick="return aCTog({comment_id});" style="{if comment_hide}display:inline;{endif comment_hide}{ifno comment_hide}display:none;{endifno comment_hide}"><img id="cih{comment_id}" src="{template_image_url}/plus.png" border="0" /></a>
<div id="commentbox{comment_id}"{if comment_hide} style="display:none;"{endif comment_hide}>
<!--mod ajax comments insert end -->
{comment_text}
<!--mod ajax comments insert start -->
</div>
<!--mod ajax comments insert end -->
--- End code ---
an element with id="cilh{comment_id}" will be used if a comment rating reached "Hide comment if rating below"
en element with id="commentbox{comment_id}" will be used to display comments in.
Step 9
Open: templates/<your template/comment_form.html template
--- Code: ---<form name="commentform" action="{self}" method="post" onsubmit="postbutton.disabled=true;">
--- End code ---
Replace with:
--- Code: ---<form name="commentform" action="{self}" method="post" onsubmit="return ajaxCommentSubmit(this,'{self}');">
--- End code ---
This line is required for the javascript code, it will be used to detect where the
Step 10 (only if done Step 3)
Open: templates/<your template/commentspage_dropdown_form.html template
Find:
--- Code: ---<form method="post" action="{self}#comments" name="commentsperpage">
--- End code ---
Replace it with:
--- Code: ---<form method="post" action="{self}#comments" name="commentsperpage" onsubmit="return CommentPerPage(this);">
--- End code ---
This is it. I hope I didn't forget anything. (I did not check my installation instructions, ran out of steam for today) :roll: Done. Works fine on unmodified 4images v1.7.7
Tweaks and version history in the next reply.
V@no:
----------------- [ Tweaks ] -----------------
Tweak 1
On top of ajaxcomments.php you can find the following settings:
--- Code: ---define("COMMENT_RATING_ENABLE", true); //enable ratings for comments?
define("COMMENT_RATING_GUEST", false); //allow guests to vote?
define("COMMENT_RATING_OWN", false); //allow rate own comments?
define("COMMENT_RATING_HIDE", -3); //comment with rating below this number will be hidden by default (visitors still will be able read them by clicking at + icon)
define("COMMENTS_PAGES", true); //show pages for comments? must install http://www.4homepages.de/forum/index.php?topic=5830.0
define("COMMENTS_ORDER", 0); //sort comments 0 = ASC or 1 = DESC
--- End code ---
Tweak 2
If you did any modifications in details.php in comments related sections, you'll need do the same modifications in ajaxcomments.php
I did copy/paste such parts from details.php into ajaxcomments.php with as little additional modifications as possible.
Also, if something doesn't work right and you go express you rage here, make sure you test with default template first.
----------------- [ Version history ] -----------------
v1.0.4 (2009-12-21) (more info here) (to update - re-download the package and replace ajaxcomments.php)
- CHANGED: on servers with PHP v4.3.0 or newer with html_entity_decode enabled non-latin letters should be converted into proper charset.
v1.0.3 (2009-12-14) (more info here) (to update - re-download the package and replace ajaxcomments.php)
- FIXED: with some charsets javascript would display garbage when posting comments.
- FIXED: misspelled constant, which affected displaying comment ratings properly.
v1.0.2 (2009-08-21) (more info here thanks to bash-t) (to update - replace js/ajaxcomments.js)
- FIXED: when used reCAPTCHA image was not automatically refreshed
v1.0.1 (2009-01-21) (more info here)
- FIXED: issue with non-latin letters didn't display properly in the comments. (re-download the package and replace ajaxcomments.php)
- FIXED JavaScript error in InternetExplorer after submitting a comment. (re-do Step 7.6)
- CHANGED: anti-flood protection to 4images' default: 3 minutes between comments on the same image.
v1.0 (2009-01-15)
- first release
V@no:
Reserved
Sunny C.:
wow, very Nice!
KurtW:
top :wink:
Navigation
[0] Message Index
[#] Next page
Go to full version