commit f773ab49f67838f0bea73a6852fed2c520836d56
parent 71aef40dc3e2681bd181e77f8397bed0251d2ae4
Author: Thomas Mathews <thomas.c.mathews@gmail.com>
Date: Tue, 15 Nov 2022 09:20:10 -0800
web: message textareas auto expand based on content
Diffstat:
3 files changed, 40 insertions(+), 17 deletions(-)
diff --git a/web/index.html b/web/index.html
@@ -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()">
diff --git a/web/js/damus.js b/web/js/damus.js
@@ -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)
diff --git a/web/js/ui/util.js b/web/js/ui/util.js
@@ -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);
+ }
+}
