108 lines
5.3 KiB
HTML
108 lines
5.3 KiB
HTML
{{define "thread"}}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>{{.Title}}</title>
|
|
<link rel="stylesheet" href="{{.StaticPath}}/style.css">
|
|
<script src="{{.StaticPath}}/likes.js" defer></script>
|
|
<script src="{{.StaticPath}}/app.js" defer></script>
|
|
</head>
|
|
<body>
|
|
{{template "navbar" .}}
|
|
<main>
|
|
<div class="breadcrumb">
|
|
<a href="{{.BasePath}}/">Home</a>
|
|
<span class="breadcrumb-separator">></span>
|
|
<a href="{{.BasePath}}/boards/">Boards</a>
|
|
<span class="breadcrumb-separator">></span>
|
|
<a href="{{.BasePath}}/board/?id={{.Board.ID}}">{{.Board.Name}}</a>
|
|
<span class="breadcrumb-separator">></span>
|
|
<span class="breadcrumb-current">{{.Thread.Title}}</span>
|
|
</div>
|
|
<a href="{{.BasePath}}/board/?id={{.Board.ID}}" class="back-button">Back to {{.Board.Name}}</a>
|
|
<header>
|
|
<h2>{{.Thread.Title}}</h2>
|
|
</header>
|
|
<div class="thread-posts">
|
|
{{range .Posts}}
|
|
<article id="post-{{.ID}}" class="post-item{{if gt .ReplyTo 0}} post-reply{{end}}">
|
|
<header>
|
|
<div class="post-header-top">
|
|
<h3>{{if .Title}}{{.Title}}{{else}}{{index $.Usernames .UserID}}{{end}}</h3>
|
|
<span class="post-id">#{{.ID}}</span>
|
|
</div>
|
|
<p data-timestamp="{{.PostTime.Format "2006-01-02T15:04:05Z07:00"}}">{{.PostTime.Format "02/01/2006 - 15:04"}}</p>
|
|
{{if gt .ReplyTo 0}}
|
|
<p class="post-reply-link">Replying to <a href="#post-{{.ReplyTo}}">#{{.ReplyTo}}</a></p>
|
|
{{end}}
|
|
</header>
|
|
<div class="post-content">{{.Content}}</div>
|
|
<div class="post-actions">
|
|
{{if $.LoggedIn}}
|
|
<button type="button" class="post-action-btn like-btn{{if eq (index $.UserLikes .ID) "like"}} active{{end}}" data-post-id="{{.ID}}" data-type="like" data-base-path="{{$.BasePath}}">
|
|
<span class="like-count">{{(index $.LikeCounts .ID).Likes}}</span> Like
|
|
</button>
|
|
<button type="button" class="post-action-btn dislike-btn{{if eq (index $.UserLikes .ID) "dislike"}} active{{end}}" data-post-id="{{.ID}}" data-type="dislike" data-base-path="{{$.BasePath}}">
|
|
<span class="dislike-count">{{(index $.LikeCounts .ID).Dislikes}}</span> Dislike
|
|
</button>
|
|
<button type="button" class="post-action-btn reply-btn" onclick="setReplyTo({{.ID}}, '{{index $.Usernames .UserID}}')">Reply</button>
|
|
{{else}}
|
|
<span class="like-count-display">{{(index $.LikeCounts .ID).Likes}} Likes</span>
|
|
<span class="dislike-count-display">{{(index $.LikeCounts .ID).Dislikes}} Dislikes</span>
|
|
{{end}}
|
|
</div>
|
|
</article>
|
|
{{end}}
|
|
</div>
|
|
{{if .LoggedIn}}
|
|
<section id="reply-section">
|
|
<h3 id="reply-heading">Post a Reply</h3>
|
|
<div id="reply-indicator" class="reply-indicator" style="display:none;">
|
|
<span id="reply-indicator-text">Replying to...</span>
|
|
<button type="button" onclick="clearReply()">x</button>
|
|
</div>
|
|
<form method="post" action="{{.BasePath}}/thread/?id={{.Thread.ID}}&action=submit" id="reply-form">
|
|
<input type="hidden" id="reply-to-input" name="reply_to" value="">
|
|
<label for="content">Content:</label>
|
|
<textarea id="content" name="content" required></textarea><br>
|
|
<input type="submit" value="Post">
|
|
</form>
|
|
</section>
|
|
{{end}}
|
|
</main>
|
|
{{template "cookie_banner" .}}
|
|
<script>
|
|
function setReplyTo(postId, username) {
|
|
document.getElementById('reply-to-input').value = postId;
|
|
var indicator = document.getElementById('reply-indicator');
|
|
indicator.style.display = 'flex';
|
|
document.getElementById('reply-indicator-text').textContent = 'Replying to ' + username + ' (post #' + postId + ')';
|
|
document.getElementById('reply-heading').textContent = 'Reply to ' + username;
|
|
var section = document.getElementById('reply-section');
|
|
section.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
document.getElementById('content').focus();
|
|
}
|
|
|
|
function clearReply() {
|
|
document.getElementById('reply-to-input').value = '';
|
|
document.getElementById('reply-indicator').style.display = 'none';
|
|
document.getElementById('reply-heading').textContent = 'Post a Reply';
|
|
}
|
|
|
|
// Smooth scroll to replied post when clicking reply links
|
|
document.querySelectorAll('.post-reply-link a').forEach(function(link) {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
var target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
target.classList.add('post-highlighted');
|
|
setTimeout(function() { target.classList.remove('post-highlighted'); }, 2000);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
{{end}}
|