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

Tweak extended text textbox 

* Made it look better when empty
This commit is contained in:
MatthiasSaihttam 2021-09-11 21:03:48 -04:00
parent 65fc30a717
commit be2bcf2770
1 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
main/templates/whispermaphone/post.html
View File

@ -29,6 +29,27 @@
<script>
const textEl = document.getElementById("text");
const textExtEl = document.getElementById("extended_text");
function updateBoxHeight(box) {
const rows = box.rows;
box.rows = 1;
//style.height doesn't include padding, .scrollHeight does
box.style.height = "auto";
const height = box.scrollHeight;
if (rows > 1 && height < 36) {
//set the rows back to 2, set the height to the height, and set top margin
box.style.height = height + "px";
box.rows = rows;
box.style.marginTop = "15px";
}else {
box.style.height = height + "px";
box.rows = rows;
box.style.marginTop = "0";
}
}
textEl.addEventListener("input", evt => {
// If the length is more than 140
const value = textEl.value;
@ -65,15 +86,9 @@
const textboxes = document.getElementsByClassName("thought");
for (const box of textboxes) {
//style.height doesn't include padding, .scrollHeight does
//This is fine as long as we reset scrollHeight before changing it
//And we have to set it this first time
//This also effectively doubles the padding value we set in CSS
box.style.height = box.scrollHeight + "px";
box.addEventListener("input", evt => {
box.style.height = "auto";
box.style.height = box.scrollHeight + "px";
});
//Set the initial heights of the boxes
updateBoxHeight(box)
box.addEventListener("input", evt => updateBoxHeight(box));
//Allow pasting images into either text box
box.addEventListener("paste", evt => {