Good 2-box editing & auto-height textboxes

main/static/main/main.css

@@ -188,14 +188,6 @@ a {
     color: var(--accent-color);
 }
 
-hr.thought-end {
-    margin: 0 30px;
-    border-color: var(--accent-color);
-
-    border-style: none;
-    border-bottom-style: inset;
-}
-
 header h1 {
     padding: 4% 30px 15px;
     font-size: 3em;

main/static/main/post.css

@@ -1,5 +1,5 @@
 textarea.thought {
-    padding: 5px;
+    padding: 1px 5px;
     outline: none;
     width: calc(100% - 60px);
     resize: none;
@@ -9,6 +9,7 @@ textarea.thought {
     font-size: inherit;
     color: inherit;
     font-family: inherit;
+    border-bottom: 1px solid var(--accent-color);
 }
 
 .thought#extended_text {

main/templates/whispermaphone/post.html

@@ -23,10 +23,8 @@
 <section class="main-wrap">
     <form action="{% url 'post'%}" method="post">
         {% csrf_token %}
-        <textarea name="text" id="text" class="thought" rows="3"></textarea>
-        <hr class="thought-end">
+        <textarea name="text" id="text" class="thought" rows="1" placeholder="What are you thinking?"></textarea>
         <textarea name="extended_text" id="extended_text" class="thought" rows="4"></textarea>
-        <hr class="thought-end">
         <input type="hidden" name="timezone_offset" id="timezone_offset">
 
         <input type="submit" id="post-button" value="Submit">
@@ -36,17 +34,52 @@
 <script>
     const textEl = document.getElementById("text");
     const textExtEl = document.getElementById("extended_text");
-    textEl.addEventListener("keydown", evt => {
+    textEl.addEventListener("input", evt => {
         // If the length is more than 120
         const value = textEl.value;
         if (value.length > 140) {
             const splitAt = value.lastIndexOf(" ", 140) + 1; // Plus 1 keeps the space in the original text instead of moving it
             const toMove = value.substring(splitAt);
-            textExtEl.value = toMove + textExtEl.value;
-            textEl.value = value.substring(0, splitAt);
+            const startPos = textEl.selectionStart;
+            const endPos = textEl.selectionEnd;
+            textEl.value = value.substring(0, splitAt - 1); //Remove word and space from original
+
+            // Only move down if we're at the end of the first box
+            console.log(startPos, endPos);
+            if (startPos === 141 && endPos === 141) {
+                textExtEl.value = toMove + textExtEl.value;
+
+                // Place the cursor at the end of what we just moved down
+                textExtEl.focus();
+                textExtEl.selectionStart = toMove.length;
+                textExtEl.selectionEnd = toMove.length;
+            }else {
+                // Move the last word down, adding a space
+                textExtEl.value = toMove + " " + textExtEl.value;
+
+                // Move cursor back to where it was
+                textEl.selectionStart = startPos;
+                textEl.selectionEnd = endPos;
+            }
         }
+
+        // TODO: Auto-set width of short text box
+
     });
 
+    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", e => {
+            box.style.height = "auto";
+            box.style.height = box.scrollHeight + "px";
+        });
+    }
+
     const timezoneOffsetEl = document.getElementById("timezone_offset");
     timezoneOffsetEl.value = (new Date()).getTimezoneOffset();
 </script>