Remove empty extended text on server-side

This commit is contained in:
MatthiasSaihttam 2021-09-01 00:31:33 -04:00
parent 70d1316103
commit 61c2e018d0
1 changed files with 17 additions and 23 deletions

View File

@ -22,19 +22,23 @@
<div class="main">
<span class="main-text text">{{thought.text}}</span>
</div>
<div class="extended">
<span class="extended-text text">{{thought.extended_text}}</span>
{% with file_type=thought.get_media_type %}
{% if file_type == "png" or file_type == "jpeg" %}
<img src="{{ thought.media.url }}" class="extended-media" alt="{{ thought.media_alt }}">
{% elif file_type == "m4a" or file_type == "mp3" or file_type == "aac" %}
<audio controls src="{{ thought.media.url }}" class="extended-media"></audio>
{% elif file_type == "mov" or file_type == "mp4" %}
<video src="{{ thought.media.url }}" class="extended-media"></video>
{% endif %}
{% endwith %}
</div>
{% with file_type=thought.get_media_type %}
{% if file_type or thought.extended_text.strip %}
<div class="extended">
{% if thought.extended_text.strip %}
<span class="extended-text text">{{thought.extended_text}}</span>
{% endif %}
{% if file_type == "png" or file_type == "jpeg" %}
<img src="{{ thought.media.url }}" class="extended-media" alt="{{ thought.media_alt }}">
{% elif file_type == "m4a" or file_type == "mp3" or file_type == "aac" %}
<audio controls src="{{ thought.media.url }}" class="extended-media"></audio>
{% elif file_type == "mov" or file_type == "mp4" %}
<video src="{{ thought.media.url }}" class="extended-media"></video>
{% endif %}
</div>
{% endif %}
{% endwith %}
<div class="thought-end">
<span class="timestamp">
{% timezone thought.timezone %}
@ -54,21 +58,11 @@
<script>
const els = document.querySelectorAll(".thought");
function isEmptyNode(node) {
//It's an empty node if it's a comment or text that's just whitespace
return node instanceof Comment ||
((node instanceof Text || node instanceof HTMLSpanElement) && !node.textContent.trim());
}
for (let el of els) {
const extended = el.querySelector(".extended");
//Hide extended text
extended.classList.add("hidden");
//Remove empty nodes from extended text
for (const node of Array.from(extended.childNodes).filter(isEmptyNode)) {
extended.removeChild(node);
}
//Add button to show extended text
if (extended.childNodes.length) {
const main = el.querySelector(".main");