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

13
web/index.html
View file

@ -7,12 +7,12 @@
<link rel="stylesheet" href="css/styles.css?v=120">
<link rel="stylesheet" href="css/responsive.css?v=10">
<link rel="stylesheet" href="css/fontawesome.css?v=2">
<script defer src="js/ui/util.js?v=5"></script>
<script defer src="js/ui/util.js?v=6"></script>
<script defer src="js/ui/render.js?v=11"></script>
<script defer src="js/noble-secp256k1.js?v=1"></script>
<script defer src="js/bech32.js?v=1"></script>
<script defer src="js/nostr.js?v=6"></script>
<script defer src="js/damus.js?v=84"></script>
<script defer src="js/damus.js?v=86"></script>
</head>
<body>
<script>
@ -22,6 +22,7 @@
addEventListener('DOMContentLoaded', (ev) => {
// TODO fix race condition where profile doesn't load fast enough.
damus_web_init();
init_message_textareas();
});
</script>
<nav id="gnav" class="">
@ -70,7 +71,9 @@
<label>Home</label>
</header>
<div id="newpost">
<div class="my-userpic vertical-hide"><!-- To be loaded. --></div>
<div class="my-userpic vertical-hide">
<!-- To be loaded dynamically. -->
</div>
<div>
<textarea placeholder="What's up?" oninput="post_input_changed(this)" class="post-input" id="post-input"></textarea>
<div class="post-tools">
@ -78,7 +81,7 @@
<button title="Mark this message as sensitive." onclick="toggle_cw(this)" class="cw icon">
<i class="fa-solid fa-triangle-exclamation"></i>
</button>
<button onclick="send_post(this)" class="action" id="post-button" disabled>Send</button>
<button onclick="send_post(this)" class="action" role="send" id="post-button" disabled>Send</button>
</div>
</div>
</div>
@ -109,7 +112,7 @@
</header>
<div id="replying-to"></div>
<div id="replybox">
<textarea id="reply-content" class="post-input"
<textarea id="reply-content" class="post-input" oninput="post_input_changed(this)"
placeholder="Write your reply here..."></textarea>
<div class="post-tools">
<button id="reply-button" class="action" onclick="do_send_reply()">

5
web/js/damus.js
View file

@ -908,11 +908,6 @@ async function sign_event(ev) {
return ev
}
function post_input_changed(el)
{
document.querySelector("#post-button").disabled = el.value === ""
}
function determine_event_refs_positionally(pubkeys, ids)
{
if (ids.length === 1)

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);
}
}