1
0
Fork 0
mirror of https://github.com/sbrl/Pepperminty-Wiki.git synced 2024-11-22 04:23:01 +00:00

Fix the reply box

This commit is contained in:
Starbeamrainbowlabs 2017-05-13 16:37:06 +01:00
parent 549ce9fc35
commit 83ab6bf5b3
3 changed files with 72 additions and 37 deletions

View file

@ -1565,7 +1565,7 @@ class page_renderer
// Math rendering support // Math rendering support
if(!empty($settings->enable_math_rendering)) if(!empty($settings->enable_math_rendering))
{ {
page_renderer::AddJSLink("https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"); page_renderer::AddJSLink("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML");
} }
// alt+enter suport in the search box // alt+enter suport in the search box
page_renderer::AddJSSnippet('// Alt + Enter support in the top search box page_renderer::AddJSSnippet('// Alt + Enter support in the top search box
@ -2179,15 +2179,15 @@ register_module([
page_renderer::register_part_preprocessor(function(&$parts) { page_renderer::register_part_preprocessor(function(&$parts) {
global $env; global $env;
$comments_filename = get_comment_filename($env->page); $comments_filename = get_comment_filename($env->page);
$comments_data = file_exists($comments_filename) ? json_decode(file_get_contents($comment_filename)) : []; $comments_data = file_exists($comments_filename) ? json_decode(file_get_contents($comments_filename)) : [];
$comments_html = "<aside class='comments'>" . $comments_html = "<aside class='comments'>" .
"<h2>Comments</h2>\n" . "<h2>Comments</h2>\n";
"<h3>Post a Comment</h3>\n";
if($env->is_logged_in) { if($env->is_logged_in) {
$comments_html .= "<form class='comment-reply-form' method='post' action='?action=comment&page=" . rawurlencode($env->page) . "'>\n" . $comments_html .= "<form class='comment-reply-form' method='post' action='?action=comment&page=" . rawurlencode($env->page) . "'>\n" .
"<h3>Post a Comment</h3>\n" .
"\t<textarea name='message' placeholder='Type your comment here. You can use the same syntax you use when writing pages.'></textarea>\n" . "\t<textarea name='message' placeholder='Type your comment here. You can use the same syntax you use when writing pages.'></textarea>\n" .
"\t<input type='hidden' name='reply-to' />\n" . "\t<input type='hidden' name='reply-to' />\n" .
"\t<input type='submit' value='Post Comment' />\n" . "\t<input type='submit' value='Post Comment' />\n" .
@ -2197,15 +2197,44 @@ register_module([
$comments_html .= "<form class='comment-reply-form disabled no-login'>\n" . $comments_html .= "<form class='comment-reply-form disabled no-login'>\n" .
"\t<textarea disabled name='message' placeholder='Type your comment here. You can use the same syntax you use when writing pages.'></textarea>\n" . "\t<textarea disabled name='message' placeholder='Type your comment here. You can use the same syntax you use when writing pages.'></textarea>\n" .
"\t<p><a href='?action=login&returnto=" . rawurlencode("?action=view&page=" . rawurlencode($env->page)) . "'>Login</a> to post a comment.</p>\n" . "\t<p><a href='?action=login&returnto=" . rawurlencode("?action=view&page=" . rawurlencode($env->page)) . "'>Login</a> to post a comment.</p>\n" .
"\t<input type='hidden' name='reply-to' />\n" .
"\t<input disabled type='submit' value='Post Comment' />\n" . "\t<input disabled type='submit' value='Post Comment' />\n" .
"</form>\n"; "</form>\n";
} }
$comments_html .= render_comments($comments_data); $comments_html .= render_comments($comments_data);
$comments_html .= "</aside>\n"; $comments_html .= "</aside>\n";
$parts["{extra}"] = $comments_html . $parts["{extra}"]; $parts["{extra}"] = $comments_html . $parts["{extra}"];
}); });
$reply_js_snippet = <<<'REPLYJS'
///////////////////////////////////
///////// Commenting Form /////////
///////////////////////////////////
window.addEventListener("load", function(event) {
var replyButtons = document.querySelectorAll(".reply-button");
for(let i = 0; i < replyButtons.length; i++) {
replyButtons[i].addEventListener("click", display_reply_form);
replyButtons[i].addEventListener("touchend", display_reply_form);
}
});
function display_reply_form(event)
{
// Deep-clone the comment form
var replyForm = document.querySelector(".comment-reply-form").cloneNode(true);
replyForm.classList.add("nested");
// Set the comment we're replying to
replyForm.querySelector("[name=reply-to]").value = event.target.parentElement.parentElement.dataset.commentId;
// Display the newly-cloned commenting form
event.target.parentElement.parentElement.querySelector(".reply-box-container").appendChild(replyForm);
}
REPLYJS;
page_renderer::AddJSSnippet($reply_js_snippet);
} }
} }
]); ]);
@ -2230,7 +2259,7 @@ function get_comment_filename($pagename)
function generate_comment_id() function generate_comment_id()
{ {
$result = base64_encode(random_bytes(16)); $result = base64_encode(random_bytes(16));
$result = str_replace(["+", "/"], ["-", "_"], $result); $result = str_replace(["+", "/", "="], ["-", "_"], $result);
return $result; return $result;
} }
@ -2314,7 +2343,7 @@ function render_comments($comments_data, $depth = 0)
$result = "<div class='comments-list" . ($depth > 0 ? " nested" : "") . "' data-depth='$depth'>"; $result = "<div class='comments-list" . ($depth > 0 ? " nested" : "") . "' data-depth='$depth'>";
foreach($comments_data as $comment) { foreach($comments_data as $comment) {
$result .= "\t<div class='comment' id='comment-$comment->id'>\n"; $result .= "\t<div class='comment' id='comment-$comment->id' data-comment-id='$comment->id'>\n";
$result .= "\t<p class='comment-header'>$comment->username said:</p>"; $result .= "\t<p class='comment-header'>$comment->username said:</p>";
$result .= "\t<div class='comment-body'>\n"; $result .= "\t<div class='comment-body'>\n";
$result .= "\t\t" . parse_page_source($comment->message); $result .= "\t\t" . parse_page_source($comment->message);
@ -2322,11 +2351,11 @@ function render_comments($comments_data, $depth = 0)
$result .= "\t<div class='reply-box-container'></div>\n"; $result .= "\t<div class='reply-box-container'></div>\n";
$result .= "\t<p class='comment-footer'>"; $result .= "\t<p class='comment-footer'>";
$result .= "\t\t<button class='reply-button'>Reply</button>\n"; $result .= "\t\t<button class='reply-button'>Reply</button>\n";
$result .= "\t\t<a class='permalink-button' href='#comment-$comment->id'>&#x1f517;</a>\n"; $result .= "\t\t<a class='permalink-button' href='#comment-$comment->id' title='Permalink to this comment'>&#x1f517;</a>\n";
$result .= "\t\t&#x1f557; <time datetime='" . date("c", $comment->timestamp) . "'>" . date("l jS \of F Y \a\\t h:ia T", $comment->timestamp) . "</time>\n"; $result .= "\t\t<time datetime='" . date("c", strtotime($comment->timestamp)) . "' title='The time this comment was posted'>&#x1f557; " . date("l jS \of F Y \a\\t h:ia T", strtotime($comment->timestamp)) . "</time>\n";
$result .= "\t</p>\n"; $result .= "\t</p>\n";
$result .= "\t" . render_comments($comment->replies) . "\n"; $result .= "\t" . render_comments($comment->replies) . "\n";
$ersult .= "\t</div>"; $result .= "\t</div>";
} }
$result .= "</div>"; $result .= "</div>";

View file

@ -50,7 +50,7 @@
"author": "Starbeamrainbowlabs", "author": "Starbeamrainbowlabs",
"description": "Adds threaded comments to the bottom of every page.", "description": "Adds threaded comments to the bottom of every page.",
"id": "feature-comments", "id": "feature-comments",
"lastupdate": 1494686069, "lastupdate": 1494689720,
"optional": false "optional": false
}, },
{ {

View file

@ -124,11 +124,11 @@ register_module([
page_renderer::register_part_preprocessor(function(&$parts) { page_renderer::register_part_preprocessor(function(&$parts) {
global $env; global $env;
$comments_filename = get_comment_filename($env->page); $comments_filename = get_comment_filename($env->page);
$comments_data = file_exists($comments_filename) ? json_decode(file_get_contents($comment_filename)) : []; $comments_data = file_exists($comments_filename) ? json_decode(file_get_contents($comments_filename)) : [];
$comments_html = "<aside class='comments'>" . $comments_html = "<aside class='comments'>" .
"<h2>Comments</h2>\n" . "<h2>Comments</h2>\n";
if($env->is_logged_in) { if($env->is_logged_in) {
$comments_html .= "<form class='comment-reply-form' method='post' action='?action=comment&page=" . rawurlencode($env->page) . "'>\n" . $comments_html .= "<form class='comment-reply-form' method='post' action='?action=comment&page=" . rawurlencode($env->page) . "'>\n" .
@ -137,15 +137,32 @@ register_module([
"\t<input type='hidden' name='reply-to' />\n" . "\t<input type='hidden' name='reply-to' />\n" .
"\t<input type='submit' value='Post Comment' />\n" . "\t<input type='submit' value='Post Comment' />\n" .
"</form>\n"; "</form>\n";
}
else {
$comments_html .= "<form class='comment-reply-form disabled no-login'>\n" .
"\t<textarea disabled name='message' placeholder='Type your comment here. You can use the same syntax you use when writing pages.'></textarea>\n" .
"\t<p><a href='?action=login&returnto=" . rawurlencode("?action=view&page=" . rawurlencode($env->page)) . "'>Login</a> to post a comment.</p>\n" .
"\t<input type='hidden' name='reply-to' />\n" .
"\t<input disabled type='submit' value='Post Comment' />\n" .
"</form>\n";
}
page_renderer::AddJSSnippet(<<<'REPLYJS' $comments_html .= render_comments($comments_data);
$comments_html .= "</aside>\n";
$parts["{extra}"] = $comments_html . $parts["{extra}"];
});
$reply_js_snippet = <<<'REPLYJS'
/////////////////////////////////// ///////////////////////////////////
///////// Commenting Form ///////// ///////// Commenting Form /////////
/////////////////////////////////// ///////////////////////////////////
document.addEventListener("load", function(event) { window.addEventListener("load", function(event) {
var replyButtons = document.querySelectorAll(".reply-button"); var replyButtons = document.querySelectorAll(".reply-button");
for(let i = 0; i < replyButtons.length; i++) { for(let i = 0; i < replyButtons.length; i++) {
replyButtons replyButtons[i].addEventListener("click", display_reply_form);
replyButtons[i].addEventListener("touchend", display_reply_form);
} }
}); });
@ -153,27 +170,16 @@ function display_reply_form(event)
{ {
// Deep-clone the comment form // Deep-clone the comment form
var replyForm = document.querySelector(".comment-reply-form").cloneNode(true); var replyForm = document.querySelector(".comment-reply-form").cloneNode(true);
replyForm.classList.add("nested");
// Set the comment we're replying to // Set the comment we're replying to
replyForm.querySelector("[name=reply-to]").value = event.target.parentNode.dataset.commentId; replyForm.querySelector("[name=reply-to]").value = event.target.parentElement.parentElement.dataset.commentId;
// Display the newly-cloned commenting form // Display the newly-cloned commenting form
event.target.parentElement.querySelector(".reply-box-container").appendChild(replyForm); event.target.parentElement.parentElement.querySelector(".reply-box-container").appendChild(replyForm);
} }
REPLYJS; REPLYJS;
) page_renderer::AddJSSnippet($reply_js_snippet);
}
else {
$comments_html .= "<form class='comment-reply-form disabled no-login'>\n" .
"\t<textarea disabled name='message' placeholder='Type your comment here. You can use the same syntax you use when writing pages.'></textarea>\n" .
"\t<p><a href='?action=login&returnto=" . rawurlencode("?action=view&page=" . rawurlencode($env->page)) . "'>Login</a> to post a comment.</p>\n" .
"\t<input disabled type='submit' value='Post Comment' />\n" .
"</form>\n";
}
$comments_html .= render_comments($comments_data);
$comments_html .= "</aside>\n";
$parts["{extra}"] = $comments_html . $parts["{extra}"];
});
} }
} }
]); ]);
@ -198,7 +204,7 @@ function get_comment_filename($pagename)
function generate_comment_id() function generate_comment_id()
{ {
$result = base64_encode(random_bytes(16)); $result = base64_encode(random_bytes(16));
$result = str_replace(["+", "/"], ["-", "_"], $result); $result = str_replace(["+", "/", "="], ["-", "_"], $result);
return $result; return $result;
} }
@ -290,11 +296,11 @@ function render_comments($comments_data, $depth = 0)
$result .= "\t<div class='reply-box-container'></div>\n"; $result .= "\t<div class='reply-box-container'></div>\n";
$result .= "\t<p class='comment-footer'>"; $result .= "\t<p class='comment-footer'>";
$result .= "\t\t<button class='reply-button'>Reply</button>\n"; $result .= "\t\t<button class='reply-button'>Reply</button>\n";
$result .= "\t\t<a class='permalink-button' href='#comment-$comment->id'>&#x1f517;</a>\n"; $result .= "\t\t<a class='permalink-button' href='#comment-$comment->id' title='Permalink to this comment'>&#x1f517;</a>\n";
$result .= "\t\t&#x1f557; <time datetime='" . date("c", $comment->timestamp) . "'>" . date("l jS \of F Y \a\\t h:ia T", $comment->timestamp) . "</time>\n"; $result .= "\t\t<time datetime='" . date("c", strtotime($comment->timestamp)) . "' title='The time this comment was posted'>&#x1f557; " . date("l jS \of F Y \a\\t h:ia T", strtotime($comment->timestamp)) . "</time>\n";
$result .= "\t</p>\n"; $result .= "\t</p>\n";
$result .= "\t" . render_comments($comment->replies) . "\n"; $result .= "\t" . render_comments($comment->replies) . "\n";
$ersult .= "\t</div>"; $result .= "\t</div>";
} }
$result .= "</div>"; $result .= "</div>";