50 lines
1.7 KiB
Plaintext
50 lines
1.7 KiB
Plaintext
<% if current_user %>
|
|
<div class="mt-8">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-bold text-slate-900">Discussion</h3>
|
|
<button data-action="click->comments#open" class="bg-indigo-600 text-white px-4 py-2 rounded-full shadow hover:bg-indigo-700 transition text-sm font-semibold">
|
|
Add Comment
|
|
</button>
|
|
</div>
|
|
|
|
<%= render "entries/comment_tabs", entry: entry %>
|
|
|
|
<div id="comment_form_modal" data-comments-target="modal" data-action="click->comments#close" class="hidden fixed inset-0 bg-slate-900 bg-opacity-50 z-40 flex items-center justify-center">
|
|
<%= render "entries/comment_modal_content", entry: entry %>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function activateCommentTab(targetLanguageCode) {
|
|
const commentGroups = document.querySelectorAll(".comment-group");
|
|
commentGroups.forEach((group) => {
|
|
const isTarget = group.id === `comments-${targetLanguageCode}`;
|
|
group.classList.toggle("hidden", !isTarget);
|
|
});
|
|
|
|
const tabs = document.querySelectorAll(".comment-tab");
|
|
tabs.forEach((tab) => {
|
|
const isActive = tab.dataset.lang === targetLanguageCode;
|
|
tab.classList.toggle("text-slate-900", isActive);
|
|
tab.classList.toggle("border-indigo-600", isActive);
|
|
tab.classList.toggle("text-slate-500", !isActive);
|
|
tab.classList.toggle("border-transparent", !isActive);
|
|
});
|
|
}
|
|
|
|
document.addEventListener("click", (event) => {
|
|
const tab = event.target.closest(".comment-tab");
|
|
if (!tab) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
activateCommentTab(tab.dataset.lang);
|
|
});
|
|
|
|
document.addEventListener("turbo:load", () => {
|
|
activateCommentTab("all");
|
|
});
|
|
</script>
|
|
<% end %>
|