Update comment shortcode.
This commit is contained in:
parent
30c3877a80
commit
45488a2c62
|
@ -43,47 +43,66 @@ function write_comments(root, data)
|
||||||
{
|
{
|
||||||
for (const status of data.descendants)
|
for (const status of data.descendants)
|
||||||
{
|
{
|
||||||
let content = status.content;
|
const content = add_emojis(status.content, status.emojis);
|
||||||
for (const emoji of status.emojis)
|
|
||||||
{
|
|
||||||
content = content.replace(
|
|
||||||
':' + emoji.shortcode + ':',
|
|
||||||
'<img style="height: 1em;" src="' + emoji.url + '">');
|
|
||||||
}
|
|
||||||
|
|
||||||
const p = document.createElement("p");
|
const div = document.createElement("div");
|
||||||
p.setAttribute("class", "mastodon-api-comment");
|
div.setAttribute("class", "mastodon-api-comment");
|
||||||
p.appendChild(author_html(status));
|
div.appendChild(author_html(status));
|
||||||
if (status.spoiler_text.length > 0)
|
if (status.spoiler_text.length > 0)
|
||||||
{
|
{
|
||||||
const subject_p = document.createElement("p");
|
div.appendChild(subject_html(status));
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
const content_p = document.createElement("p");
|
const content_p = document.createElement("p");
|
||||||
content_p.setAttribute("class", "mastodon-api-comment-content");
|
content_p.setAttribute("class", "mastodon-api-comment-content");
|
||||||
content_p.innerHTML = content;
|
content_p.innerHTML = content;
|
||||||
p.appendChild(content_p);
|
div.appendChild(content_p);
|
||||||
root.appendChild(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)
|
function author_html(status)
|
||||||
{
|
{
|
||||||
const p = document.createElement("p");
|
const p = document.createElement("p");
|
||||||
p.setAttribute("class", "mastodon-api-comment-author");
|
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");
|
const strong = document.createElement("strong");
|
||||||
strong.appendChild(document.createTextNode(status.account.display_name));
|
strong.appendChild(document.createTextNode(status.account.display_name));
|
||||||
p.appendChild(strong);
|
p.appendChild(strong);
|
||||||
|
|
||||||
p.appendChild(
|
p.appendChild(
|
||||||
document.createTextNode(" (" + status.account.acct + ") wrote on "
|
document.createTextNode(" (" + status.account.acct + ") wrote on "
|
||||||
+ get_status_time(status) + ":"));
|
+ get_status_time(status) + ":"));
|
||||||
return p;
|
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.
|
// Human readable time, YYYY-MM-DD HH:MM.
|
||||||
function get_status_time(status)
|
function get_status_time(status)
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
{{ $instance := .Get "instance" | default "false" }}
|
{{ $instance := .Get "instance" | default "" }}
|
||||||
{{ $status_id := .Get "status_id" | default "false" }}
|
{{ $status_id := .Get "status_id" | default "" }}
|
||||||
|
|
||||||
{{ partial "mastodon-api-comments-scripts.html" . }}
|
{{ 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>
|
<noscript><p>Comments only work with JavaScript enabled.</p></noscript>
|
||||||
<script type="application/javascript">
|
<script type="application/javascript">
|
||||||
fetch_mastodon_api_comments("{{ $instance }}", "{{ $status_id }}");
|
fetch_mastodon_api_comments("{{ $instance }}", "{{ $status_id }}");
|
||||||
|
|
|
@ -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/$/.right{float:right}/' tastytea/static/assets/${file}
|
||||||
sed -i 's/$/.left{float:left}/' 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(even){background-color:#0402}/' tastytea/static/assets/${file}
|
||||||
sed -i 's/$/.mastodon-api-comment:nth-child(odd){background-color:#2402}/' tastytea/static/assets/${file}
|
sed -i 's/$/.mastodon-api-comment:nth-child(odd){background-color:#2402}/' tastytea/static/assets/${file}
|
||||||
|
|
||||||
|
|
|
@ -301,6 +301,6 @@ div.tip td.icon {color:var(--blue)}
|
||||||
div.important td.icon {color:var(--yellow)}
|
div.important td.icon {color:var(--yellow)}
|
||||||
.right {float:right}
|
.right {float:right}
|
||||||
.left {float:left}
|
.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(even) {background-color:#0402}
|
||||||
.mastodon-api-comment:nth-child(odd) {background-color:#2402}
|
.mastodon-api-comment:nth-child(odd) {background-color:#2402}
|
||||||
|
|
|
@ -334,6 +334,6 @@ div.tip td.icon {color:var(--blue)}
|
||||||
div.important td.icon {color:var(--yellow)}
|
div.important td.icon {color:var(--yellow)}
|
||||||
.right {float:right}
|
.right {float:right}
|
||||||
.left {float:left}
|
.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(even) {background-color:#0402}
|
||||||
.mastodon-api-comment:nth-child(odd) {background-color:#2402}
|
.mastodon-api-comment:nth-child(odd) {background-color:#2402}
|
||||||
|
|
Loading…
Reference in New Issue