Update comment shortcode.

This commit is contained in:
tastytea 2019-11-02 08:08:21 +01:00
parent 30c3877a80
commit 45488a2c62
Signed by: tastytea
GPG Key ID: CFC39497F1B26E07
5 changed files with 44 additions and 24 deletions

View File

@ -43,47 +43,66 @@ function write_comments(root, data)
{
for (const status of data.descendants)
{
let content = status.content;
for (const emoji of status.emojis)
{
content = content.replace(
':' + emoji.shortcode + ':',
'<img style="height: 1em;" src="' + emoji.url + '">');
}
const content = add_emojis(status.content, status.emojis);
const p = document.createElement("p");
p.setAttribute("class", "mastodon-api-comment");
p.appendChild(author_html(status));
const div = document.createElement("div");
div.setAttribute("class", "mastodon-api-comment");
div.appendChild(author_html(status));
if (status.spoiler_text.length > 0)
{
const subject_p = document.createElement("p");
subject_p.setAttribute("class", "mastodon-api-comment-subject");
const subject = document.createElement("strong");
subject.appendChild(document.createTextNode(status.spoiler_text));
subject_p.appendChild(subject);
p.appendChild(subject_p);
div.appendChild(subject_html(status));
}
const content_p = document.createElement("p");
content_p.setAttribute("class", "mastodon-api-comment-content");
content_p.innerHTML = content;
p.appendChild(content_p);
root.appendChild(p);
div.appendChild(content_p);
root.appendChild(div);
}
}
function add_emojis(text, emojis)
{
for (const emoji of emojis)
{
text = text.replace(
':' + emoji.shortcode + ':',
'<img class="mastodon-api-comment-emoji" src="' + emoji.url + '">');
}
return text;
}
function author_html(status)
{
const p = document.createElement("p");
p.setAttribute("class", "mastodon-api-comment-author");
const img = document.createElement("img");
img.setAttribute("class", "mastodon-api-comment-avatar");
img.setAttribute("src", status.account.avatar);
p.appendChild(img);
p.innerHTML += " ";
const strong = document.createElement("strong");
strong.appendChild(document.createTextNode(status.account.display_name));
p.appendChild(strong);
p.appendChild(
document.createTextNode(" (" + status.account.acct + ") wrote on "
+ get_status_time(status) + ":"));
return p;
}
function subject_html(status)
{
const p = document.createElement("p");
p.setAttribute("class", "mastodon-api-comment-subject");
const subject = document.createElement("strong");
subject.innerHTML += add_emojis(status.spoiler_text, status.emojis);
p.appendChild(subject);
return p;
}
// Human readable time, YYYY-MM-DD HH:MM.
function get_status_time(status)
{

View File

@ -1,8 +1,9 @@
{{ $instance := .Get "instance" | default "false" }}
{{ $status_id := .Get "status_id" | default "false" }}
{{ $instance := .Get "instance" | default "" }}
{{ $status_id := .Get "status_id" | default "" }}
{{ partial "mastodon-api-comments-scripts.html" . }}
<p id="mastodon-api-comments_{{ $status_id }}" class="mastodon-api-comments"></p>
<style type="text/css">.mastodon-api-comment-avatar,.mastodon-api-comment-emoji{height:1em;}</style>
<div id="mastodon-api-comments_{{ $status_id }}" class="mastodon-api-comments"></div>
<noscript><p>Comments only work with JavaScript enabled.</p></noscript>
<script type="application/javascript">
fetch_mastodon_api_comments("{{ $instance }}", "{{ $status_id }}");

View File

@ -73,7 +73,7 @@ for file in style.css style-compat.css; do
sed -i 's/$/.right{float:right}/' tastytea/static/assets/${file}
sed -i 's/$/.left{float:left}/' tastytea/static/assets/${file}
sed -i 's/$/.mastodon-api-comment{margin-left: 1em;border:0.1em solid black;}/' tastytea/static/assets/${file}
sed -i 's/$/.mastodon-api-comment{margin-left:1em;margin-bottom:0.4em;padding:0 0.4em;border:0.1em solid black;}/' tastytea/static/assets/${file}
sed -i 's/$/.mastodon-api-comment:nth-child(even){background-color:#0402}/' tastytea/static/assets/${file}
sed -i 's/$/.mastodon-api-comment:nth-child(odd){background-color:#2402}/' tastytea/static/assets/${file}

View File

@ -301,6 +301,6 @@ div.tip td.icon {color:var(--blue)}
div.important td.icon {color:var(--yellow)}
.right {float:right}
.left {float:left}
.mastodon-api-comment {margin-left: 1em; border:0.1em solid black; }
.mastodon-api-comment {margin-left:1em; margin-bottom:0.4em; padding:0 0.4em; border:0.1em solid black; }
.mastodon-api-comment:nth-child(even) {background-color:#0402}
.mastodon-api-comment:nth-child(odd) {background-color:#2402}

View File

@ -334,6 +334,6 @@ div.tip td.icon {color:var(--blue)}
div.important td.icon {color:var(--yellow)}
.right {float:right}
.left {float:left}
.mastodon-api-comment {margin-left: 1em; border:0.1em solid black; }
.mastodon-api-comment {margin-left:1em; margin-bottom:0.4em; padding:0 0.4em; border:0.1em solid black; }
.mastodon-api-comment:nth-child(even) {background-color:#0402}
.mastodon-api-comment:nth-child(odd) {background-color:#2402}