skorotkiewicz/yosup
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: message textareas auto expand based on content

Browse source
This commit is contained in:
Thomas Mathews 2022-11-15 09:20:10 -08:00 • committed by William Casarin
parent 71aef40dc3
commit f773ab49f6
3 changed files with 40 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

39
web/js/ui/util.js
View file

@ -1,9 +1,11 @@
// This file contains utility functions related to UI manipulation. Some code
// may be specific to areas of the UI and others are more utility based. As
// this file grows specific UI area code should be migrated to its own file.
/* This file contains utility functions related to UI manipulation. Some code
* may be specific to areas of the UI and others are more utility based. As
* this file grows specific UI area code should be migrated to its own file.
*/
// toggle_cw changes the active stage of the Content Warning for a post. It is
// relative to the element that is pressed.
/* toggle_cw changes the active stage of the Content Warning for a post. It is
* relative to the element that is pressed.
*/
function toggle_cw(el) {
el.classList.toggle("active");
const isOn = el.classList.contains("active");
@ -11,8 +13,31 @@ function toggle_cw(el) {
input.classList.toggle("hide", !isOn);
}
// toggle_gnav hides or shows the global navigation's additional buttons based
// on its opened state.
/* toggle_gnav hides or shows the global navigation's additional buttons based
* on its opened state.
*/
function toggle_gnav(el) {
el.parentElement.classList.toggle("open");
}
/* post_input_changed checks the content of the textarea and updates the size
* of it's element. Additionally I will toggle the enabled state of the sending
* button.
*/
function post_input_changed(el) {
el.style.height = `0px`;
el.style.height = `${el.scrollHeight}px`;
let btn = el.parentElement.querySelector("button[role=send]");
if (btn) btn.disabled = el.value === "";
}
/* init_message_textareas finds all message textareas and updates their initial
* height based on their content (0). This is so there is no jaring affect when
* the page loads.
*/
function init_message_textareas() {
const els = document.querySelectorAll(".post-input");
for (const el of els) {
post_input_changed(el);
}
}