-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Split the comment template into a separate template
- Loading branch information
Showing
2 changed files
with
98 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| <div class="comments"> | ||
| <h3>Feedback</h3> | ||
| <p>You can reply to <a href="https://{{toot.domain}}/{{toot.username}}/{{toot.id}}">this post via Mastodon</a>: <button id="replyButton" href="https://{{ toot.domain }}/{{ toot.username }}/{{ toot.id }}">Reply</button></p> | ||
| <p id="mastodon-comments-list">Waiting to load comments</p> | ||
| <dialog id="toot-reply" class="mastodon" data-component="dialog"> | ||
| <h3>Reply to {{ toot.username }}'s post</h3> | ||
| <p> | ||
| With an account on the Fediverse or Mastodon, you | ||
| can respond to this post. Since Mastodon is | ||
| decentralized, you can use your existing account | ||
| hosted by another Mastodon server or compatible | ||
| platform if you don't have an account on this one. | ||
| </p> | ||
| <p>Copy and paste this URL into the search field of your favourite Fediverse app or the web interface of your Mastodon server.</p> | ||
| <div class="copypaste"> | ||
| <input type="text" readonly="" value="https://{{ toot.domain }}/{{ toot.username }}/{{ toot.id }}"> | ||
| <button class="button" id="copyButton">Copy</button> | ||
| <button class="button" id="cancelButton">Close</button> | ||
| </div> | ||
| </dialog> | ||
| <noscript><p>You need JavaScript to view the comments.</p></noscript> | ||
| <script type="text/javascript"> | ||
| const dialog = document.querySelector('dialog'); | ||
| document.getElementById('replyButton').addEventListener('click', () => { | ||
| dialog.showModal(); | ||
| }); | ||
| document.getElementById('copyButton').addEventListener('click', () => { | ||
| navigator.clipboard.writeText('https://{{ toot.domain }}/@{{ toot.username }}/{{ toot.id }}'); | ||
| }); | ||
| document.getElementById('cancelButton').addEventListener('click', () => { | ||
| dialog.close(); | ||
| }); | ||
| dialog.addEventListener('keydown', e => { | ||
| if (e.key === 'Escape') dialog.close(); | ||
| }); | ||
| function escapeHtml(unsafe) { | ||
| return unsafe | ||
| .replace(/&/g, "&") | ||
| .replace(/</g, "<") | ||
| .replace(/>/g, ">") | ||
| .replace(/"/g, """) | ||
| .replace(/'/g, "'"); | ||
| } | ||
| document.addEventListener("DOMContentLoaded", function() { | ||
| document.getElementById("mastodon-comments-list").innerHTML = "Loading comments..."; | ||
| fetch('https://{{ toot.domain }}/api/v1/statuses/{{ toot.id }}/context') | ||
| .then(function(response) { | ||
| return response.json(); | ||
| }) | ||
| .then(function(data) { | ||
| if(data && | ||
| data['descendants'] && | ||
| Array.isArray(data['descendants']) && | ||
| data['descendants'].length > 0) { | ||
| document.getElementById('mastodon-comments-list').innerHTML = ""; | ||
| data['descendants'].forEach(function(reply) { | ||
| reply.account.display_name = escapeHtml(reply.account.display_name); | ||
| reply.account.emojis.forEach(emoji => { | ||
| reply.account.display_name = reply.account.display_name.replace(`:${emoji.shortcode}:`, | ||
| `<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />`); | ||
| }); | ||
| mastodonComment = | ||
| `<div class="mastodon-comment post-comment"> | ||
| <div class="avatar"> | ||
| <img src="${escapeHtml(reply.account.avatar_static)}" height=60 width=60 alt=""> | ||
| </div> | ||
| <div class="content"> | ||
| <div class="author"> | ||
| <a href="${reply.account.url}" rel="nofollow"> | ||
| <span>${reply.account.display_name}</span> | ||
| <span class="disabled">${escapeHtml(reply.account.acct)}</span> | ||
| </a> | ||
| <a class="date" href="${reply.uri}" rel="nofollow"> | ||
| ${reply.created_at.substr(0, 10)} | ||
| </a> | ||
| </div> | ||
| <div class="mastodon-comment-content">${reply.content}</div> | ||
| </div> | ||
| </div>`; | ||
| document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true})); | ||
| }); | ||
| } else { | ||
| document.getElementById('mastodon-comments-list').innerHTML = "<p>No comments found. I'd love to hear from you!</p>"; | ||
| } | ||
| }); | ||
| }); | ||
| </script> | ||
| </div> |