88 lines
3.2 KiB
HTML
88 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Post</title>
|
|
|
|
{% load static %}
|
|
<link href="{% static 'main/main.css' %}" rel="stylesheet">
|
|
|
|
<link rel="icon" sizes="192x192" href="{% static 'images/favicon-192x192.png'%}">
|
|
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png'%}"/>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>
|
|
<a href="/" class="text" style="border: none">Thoughts</a>
|
|
<span class="text">Post</span>
|
|
</h1>
|
|
</header>
|
|
|
|
<section class="main-wrap">
|
|
<form action="{% url 'post'%}" method="post">
|
|
{% csrf_token %}
|
|
<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>
|
|
<input type="hidden" name="timezone_offset" id="timezone_offset">
|
|
|
|
<input type="submit" id="post-button" value="Submit">
|
|
</form>
|
|
</section>
|
|
|
|
<script>
|
|
const textEl = document.getElementById("text");
|
|
const textExtEl = document.getElementById("extended_text");
|
|
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);
|
|
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>
|
|
|
|
</body>
|
|
</html>
|