matthias
/
WhisperMaPhone
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add some JS for the main display

This commit is contained in:
Matthias 2020-09-06 12:00:44 -04:00
parent 1201803168
commit f36aeb4d51
1 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
main/templates/whispermaphone/index.html
View File

@ -3,14 +3,41 @@
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello, and welcome to the index.
<section class="main-wrap">
{% for thought in thoughts %}
<div>
{{thought.text}}
<div class="thought">
<div class="main-text">{{thought.text}}</div>
<div class="extended-text hidden">{{thought.extended_text}}</div>
</div>
{% endfor %}
</section>
<footer>Proudly developed with open source technologies.</footer>
<script>
const els = document.querySelectorAll(".thought");
for (let el of els) {
const extended = el.querySelector(".extended-text");
if (extended.textContent.length) {
const text = el.querySelector(".main-text");
const showMoreButton = document.createElement("button");
showMoreButton.appendChild(document.createTextNode("Show More"));
showMoreButton.addEventListener("click", evt => {
// Remove our-self
showMoreButton.parentNode.removeChild(showMoreButton);
// Show the extended text
extended.classList.remove("hidden");
})
text.appendChild(showMoreButton);
}
}
</script>
</body>
</html>