nonshy
/
website
1
0
Fork 1
Code Issues 20 Pull Requests Packages Projects Releases Wiki Activity

Add Quote & Reply buttons to photo comment pages

main
Noah Petherbridge 2024-04-27 19:17:33 -07:00
parent 2f352f8664
commit a00aec7488
3 changed files with 63 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/static/js/inline-replies.js Normal file
View File

@ -0,0 +1,42 @@
// nonshy inline "Quote" and "Reply" buttons that activate the comment field
// on the current page. Common logic between forum threads and photo comments.
document.addEventListener('DOMContentLoaded', function() {
const $message = document.querySelector("#message");
// Enhance the in-post Quote and Reply buttons to activate the reply field
// at the page header instead of going to the dedicated comment page.
(document.querySelectorAll(".nonshy-quote-button") || []).forEach(node => {
const message = node.dataset.quoteBody,
replyTo = node.dataset.replyTo;
node.addEventListener("click", (e) => {
e.preventDefault();
if (replyTo) {
$message.value += "@" + replyTo + "\n\n";
}
// Prepare the quoted message.
var lines = [];
for (let line of message.split("\n")) {
lines.push("> " + line);
}
$message.value += lines.join("\n") + "\n\n";
$message.scrollIntoView();
$message.focus();
});
});
(document.querySelectorAll(".nonshy-reply-button") || []).forEach(node => {
const replyTo = node.dataset.replyTo;
node.addEventListener("click", (e) => {
e.preventDefault();
$message.value += "@" + replyTo + "\n\n";
$message.scrollIntoView();
$message.focus();
});
});
});

40
web/templates/forum/thread.html
View File

@ -268,7 +268,7 @@
{{if not $Root.Thread.NoReply}}
<div class="column is-narrow">
<a href="/forum/post?to={{$Root.Forum.Fragment}}&thread={{$Root.Thread.ID}}&quote={{.ID}}"
class="has-text-dark nonshy-quote-button" data-quote-body="{{.Message}}">
class="has-text-dark nonshy-quote-button" data-quote-body="{{.Message}}" data-reply-to="{{.User.Username}}">
<span class="icon"><i class="fa fa-quote-right"></i></span>
<span>Quote</span>
</a>
@ -425,42 +425,8 @@
</div>
{{end}}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const $message = document.querySelector("#message");
// Enhance the in-post Quote and Reply buttons to activate the reply field
// at the page footer instead of going to the dedicated comment page.
(document.querySelectorAll(".nonshy-quote-button") || []).forEach(node => {
const message = node.dataset.quoteBody;
node.addEventListener("click", (e) => {
e.preventDefault();
// Prepare the quoted message.
var lines = [];
for (let line of message.split("\n")) {
lines.push("> " + line);
}
$message.value += lines.join("\n") + "\n\n";
$message.scrollIntoView();
$message.focus();
});
});
(document.querySelectorAll(".nonshy-reply-button") || []).forEach(node => {
const replyTo = node.dataset.replyTo;
node.addEventListener("click", (e) => {
e.preventDefault();
$message.value += "@" + replyTo + "\n\n";
$message.scrollIntoView();
$message.focus();
});
});
});
</script>
<!-- Enhance inline Quote and Reply buttons to activate the on-page comment textarea. -->
<script src="/static/js/inline-replies.js?build={{.BuildHash}}"></script>
<!-- Script for photo upload on photo boards -->
{{if .Forum.PermitPhotos}}

18
web/templates/photo/permalink.html
View File

@ -311,6 +311,21 @@
</a>
</div>
<div class="column is-narrow">
<a href="#"
class="has-text-dark nonshy-quote-button" data-quote-body="{{.Message}}" data-reply-to="{{.User.Username}}">
<span class="icon"><i class="fa fa-quote-right"></i></span>
<span>Quote</span>
</a>
</div>
<div class="column is-narrow">
<a href="#"
class="has-text-dark nonshy-reply-button" data-reply-to="{{.User.Username}}">
<span class="icon"><i class="fa fa-reply"></i></span>
<span>Reply</span>
</a>
</div>
{{if or $Root.CurrentUser.IsAdmin (eq $Root.CurrentUser.ID .User.ID)}}
<div class="column is-narrow">
<a href="/comments?table_name=photos&table_id={{$Root.Photo.ID}}&edit={{.ID}}&next={{UrlEncode $Root.Request.URL.Path "?id=" $Root.Photo.ID}}" class="has-text-dark">
@ -370,6 +385,9 @@
</div>
<!-- Enhance inline Quote and Reply buttons to activate the on-page comment textarea. -->
<script src="/static/js/inline-replies.js?build={{.BuildHash}}"></script>
<!-- Mark Explicit modal -->
{{template "mark-explicit-modal" .}}
{{end}}